/* ============ NXGN CANVAS AI — design tokens ============ */ :root { --font: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif; --accent: #6C5CE7; --accent-2: #00CEC9; --grad: linear-gradient(135deg, #6C5CE7 0%, #8E7BFF 45%, #00CEC9 100%); --danger: #E74C3C; --radius: 14px; --shadow: 0 8px 30px rgba(10, 8, 40, .18); } :root[data-theme="dark"] { --bg: #0E0E1A; --bg-2: #14142400; --dots: #2B2B45; --panel: rgba(24, 24, 42, .86); --panel-solid: #181A2E; --border: rgba(255, 255, 255, .09); --text: #EDEDF7; --muted: #9C9CB8; --hover: rgba(255, 255, 255, .07); --canvas-bg: #101020; } :root[data-theme="light"] { --bg: #F4F5FB; --dots: #D4D7E6; --panel: rgba(255, 255, 255, .88); --panel-solid: #FFFFFF; --border: rgba(20, 20, 60, .10); --text: #1B1B2F; --muted: #6A6A85; --hover: rgba(20, 20, 60, .06); --canvas-bg: #F7F8FC; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); overflow: hidden; -webkit-font-smoothing: antialiased; } button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select { font-family: inherit; color: inherit; } .hidden { display: none !important; } .glass { background: var(--panel); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--border); box-shadow: var(--shadow); } .btn { padding: 9px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600; border: 1px solid var(--border); background: var(--hover); transition: .15s; } .btn:hover { filter: brightness(1.12); } .btn-accent { background: var(--grad); color: #fff; border: none; box-shadow: 0 4px 16px rgba(108, 92, 231, .4); } .btn-ghost { background: transparent; } .btn.icon { padding: 9px 11px; font-size: 15px; } .btn-danger { color: var(--danger); } /* a choice not yet earned — the delete that waits for the name to be typed */ .btn:disabled { opacity: .4; cursor: not-allowed; filter: none; } .modal input.txt.ask-typed { margin-bottom: 4px; font-family: inherit; } /* the tabs a group delete names — each one a chip, read before it goes */ .ask-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 10px; } .ask-tab { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--danger); color: var(--danger); background: rgba(255, 71, 87, .08); } .ask-tab i { font-style: normal; font-weight: 700; opacity: .6; margin-inline-start: 6px; } /* ============ auth ============ */ .auth-wrap { height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(60% 80% at 15% 10%, rgba(108, 92, 231, .28), transparent 60%), radial-gradient(50% 70% at 90% 85%, rgba(0, 206, 201, .22), transparent 60%), var(--bg); position: relative; overflow: hidden; } .auth-hero { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: .35; pointer-events: none; } .auth-card { position: relative; width: 400px; max-width: 92vw; padding: 38px 36px; border-radius: 22px; z-index: 2; } .auth-card .brand { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; text-decoration: none; color: var(--text); } .auth-card h1 { font-size: 21px; margin: 14px 0 4px; font-weight: 800; } .auth-card p.sub { color: var(--muted); font-size: 13.5px; margin-bottom: 22px; } .field { margin-bottom: 13px; } .field input { width: 100%; padding: 12px 14px; border-radius: 11px; font-size: 14px; background: var(--hover); border: 1px solid var(--border); outline: none; transition: .15s; } .field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108, 92, 231, .22); } .auth-card .btn-accent { width: 100%; padding: 12px; font-size: 14.5px; margin-top: 6px; } .auth-alt { text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); } .auth-alt a { color: var(--accent-2); cursor: pointer; text-decoration: none; font-weight: 600; } .auth-err { color: #FF7675; font-size: 12.5px; min-height: 17px; margin-top: 8px; } .brand img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; } .brand img.off { display: none; } .brand-word { font-size: 15px; font-weight: 500; letter-spacing: .4px; white-space: nowrap; } .brand-word b { font-weight: 800; } .brand-word i { font-style: normal; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============ dashboard v2 (sidebar + spaces) ============ */ .dash2 { display: flex; height: 100vh; } .dside { width: 240px; flex: none; border-inline-end: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; padding: 16px 12px; gap: 4px; overflow-y: auto; } .dside .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); padding: 4px 8px 16px; } .dnav { padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-align: start; display: flex; gap: 10px; align-items: center; width: 100%; } .dnav:hover { background: var(--hover); color: var(--text); } .dnav.on { background: rgba(108, 92, 231, .16); color: var(--text); } .dside-sec { display: flex; align-items: center; justify-content: space-between; padding: 18px 12px 6px; } .dside-sec span { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--muted); } .dside-sec button { color: var(--accent); font-size: 16px; padding: 0 4px; } .sp-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--muted); width: 100%; position: relative; } .sp-item:hover { background: var(--hover); color: var(--text); } .sp-item.on { background: rgba(108, 92, 231, .16); color: var(--text); } .sp-item .spdot { width: 10px; height: 10px; border-radius: 4px; flex: none; } .sp-item .spn { flex: 1; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-item .spc { font-size: 11px; opacity: .7; } .sp-item .spm { opacity: 0; font-size: 13px; padding: 0 3px; } .sp-item:hover .spm { opacity: .8; } .dmain { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .dtop { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 13px 26px; background: var(--panel); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); } .dtop .dq { flex: 0 1 420px; padding: 9px 14px; border-radius: 10px; background: var(--hover); border: 1px solid var(--border); font-size: 13px; outline: none; } .dtop .dq:focus { border-color: var(--accent); } .dtop .sp2 { flex: 1; } .tpl-strip { display: flex; gap: 12px; padding: 22px 26px 4px; overflow-x: auto; } .tpl-mini { flex: none; width: 168px; cursor: pointer; transition: .15s; } .tpl-mini:hover { transform: translateY(-3px); } .tpl-mini .prev { height: 96px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-solid); display: flex; align-items: center; justify-content: center; overflow: hidden; } .tpl-mini:hover .prev { border-color: var(--accent); box-shadow: 0 6px 18px rgba(108, 92, 231, .25); } .tpl-mini .nm { font-size: 12px; font-weight: 600; color: var(--muted); padding: 7px 2px; text-align: center; } .tpl-mini:hover .nm { color: var(--text); } .tpl-mini .plusbig { font-size: 30px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .dhead { display: flex; align-items: center; gap: 10px; padding: 24px 26px 6px; } .dhead h2 { font-size: 20px; font-weight: 800; flex: 1; } .dsel { padding: 8px 11px; border-radius: 9px; background: var(--hover); border: 1px solid var(--border); font-size: 12.5px; color: var(--text); outline: none; } :root[data-theme="dark"] .dsel option { background: #181A2E; } .img-src-legend { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 11.5px; color: var(--muted); line-height: 1.4; } .img-src-legend .img-bill { flex: 0 0 auto; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; font-size: 9px; padding: 3px 7px; border-radius: 6px; color: #fff; } .dlay { display: flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; } .dlay button { padding: 7px 11px; font-size: 13px; color: var(--muted); } .dlay button.on { background: var(--grad); color: #fff; } .boards-grid2 { padding: 14px 26px 60px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; } .bstar { position: absolute; top: 8px; inset-inline-start: 8px; width: 28px; height: 28px; border-radius: 8px; background: rgba(0,0,0,.45); color: #FDCB6E; opacity: 0; transition: .15s; font-size: 14px; z-index: 2; } .bcard:hover .bstar, .bstar.on { opacity: 1; } .bmenu { position: absolute; top: 8px; inset-inline-end: 8px; width: 28px; height: 28px; border-radius: 8px; background: rgba(0,0,0,.45); color: #fff; opacity: 0; transition: .15s; z-index: 2; } .bcard:hover .bmenu { opacity: 1; } .online-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #00B894; font-weight: 700; } .online-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #00B894; box-shadow: 0 0 6px #00B894; } .boards-list { padding: 10px 26px 60px; } .brow { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; } .brow:hover { background: var(--hover); border-color: var(--border); } .brow .bthumb { width: 64px; height: 40px; border-radius: 7px; background: var(--hover) center/cover; flex: none; } .brow .bt { flex: 1; min-width: 0; } .brow .bt .t { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brow .bt .s { color: var(--muted); font-size: 11.5px; margin-top: 2px; } .brow .meta2 { color: var(--muted); font-size: 12px; width: 110px; flex: none; } .brow .ic { color: var(--muted); font-size: 14px; padding: 5px 7px; border-radius: 7px; } .brow .ic:hover { background: var(--hover); color: var(--text); } .brow .ic.staron { color: #FDCB6E; } .dd-menu { position: fixed; z-index: 300; min-width: 190px; border-radius: 13px; padding: 6px; background: var(--panel-solid); border: 1px solid var(--border); box-shadow: var(--shadow); } .dd-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--text); text-align: start; } .dd-menu .dd-ic { display: inline-flex; color: var(--muted); flex: none; } .dd-menu button:hover .dd-ic { color: var(--accent); } /* a colour offered as itself: a disc where the icon would stand */ .dd-sw { display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset; } .ic-svg { vertical-align: -4px; } .dnav .ic-svg { color: inherit; } .dd-menu button:hover { background: var(--hover); } .dd-menu button.danger { color: var(--danger); } /* the row that is the case already (the card's current state) */ .dd-menu button.on { background: color-mix(in srgb, var(--accent) 14%, transparent); } .dd-menu button.on .dd-ic { color: var(--accent); } /* `.dd-menu button` is display:flex, which beats [hidden]'s display:none — so a filtered-out row would stay perfectly visible without this */ .dd-menu [hidden] { display: none !important; } /* the count, set out in a column down the right rather than jammed against names of every different length */ /* A ROOM'S STATE, SHOWN RATHER THAN SPELLED OUT. Dimming carries it without being read, so a list of thirty sorts itself before you start looking. Both stay comfortably legible — this is "put away", not "unavailable", and they are all still perfectly clickable. */ .dd-menu button.m-dim { opacity: .62; } .dd-menu button.m-off { opacity: .38; } .dd-menu button.m-dim:hover, .dd-menu button.m-off:hover { opacity: 1; } .dd-menu button.m-off .dd-ic { opacity: .6; } .dd-menu .dd-tail { margin-inline-start: auto; padding-inline-start: 16px; font-size: 11px; font-weight: 700; opacity: .5; white-space: nowrap; } .dd-menu button:hover .dd-tail { opacity: .75; } /* the switch at the far end of a row — the eye that says whether Main shows the room. Quiet while the room is seen (the default has nothing to say), lit when it is not, so the rows that were taken out can be found at a glance */ .dd-menu .dd-act { display: inline-flex; align-items: center; flex: none; margin-inline-start: 10px; padding: 3px; border-radius: 6px; color: var(--muted); opacity: .45; cursor: pointer; } .dd-menu .dd-head { display: flex; align-items: center; gap: 8px; } .dd-menu .dd-head .dd-act { margin-inline-start: auto; opacity: .6; } .dd-menu .dd-tail + .dd-act { margin-inline-start: 4px; } .dd-menu button:hover .dd-act { opacity: .8; } .dd-menu .dd-act:hover { background: var(--hover); color: var(--accent); opacity: 1; } .dd-menu .dd-act.on { color: var(--accent-2, var(--accent)); opacity: 1; } .dd-menu button.m-off .dd-act, .dd-menu button.m-dim .dd-act { opacity: 1; } .dd-q { display: block; width: 100%; margin: 2px 0 6px; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--hover); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); outline: none; } .dd-q:focus { border-color: var(--accent); } /* ── rows you can put in order, and add between ── a grip at the start of the row and the pencil / + at its end, all shown on hover only: the list reads as a list until the hand is on a row */ .dd-menu button.dd-ord { position: relative; cursor: grab; } .dd-menu .dd-grip { position: absolute; inset-inline-start: 1px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--muted); opacity: 0; transition: opacity .12s; } .dd-menu button.dd-ord:hover .dd-grip { opacity: .55; } .dd-menu .dd-tools { display: inline-flex; gap: 1px; flex: none; margin-inline-start: auto; opacity: 0; transition: opacity .12s; } .dd-menu .dd-tail + .dd-tools, .dd-menu .dd-act + .dd-tools { margin-inline-start: 6px; } .dd-menu button:hover .dd-tools { opacity: 1; } .dd-menu .dd-tool { display: inline-flex; align-items: center; padding: 3px; border-radius: 6px; color: var(--muted); cursor: pointer; } .dd-menu .dd-tool:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .dd-menu .dd-head .dd-tool { margin-inline-start: auto; opacity: .6; } .dd-menu .dd-head .dd-act + .dd-tool { margin-inline-start: 4px; } .dd-menu .dd-head:hover .dd-tool { opacity: 1; } /* the row being carried is the slot it will land in: dashed, faded, in place */ .dd-menu button.dd-lift { opacity: .3; background: transparent !important; outline: 1.5px dashed var(--accent); outline-offset: -2px; } .dd-menu.dd-ordering, .dd-menu.dd-ordering button { cursor: grabbing; } .dd-ghost { position: fixed; z-index: 400; pointer-events: none; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--text); text-align: start; background: var(--panel-solid); border: 1px solid var(--accent); box-shadow: 0 12px 28px -8px rgba(9, 11, 24, .6); transform: rotate(-1deg); opacity: .96; } .dd-ghost .dd-grip, .dd-ghost .dd-tools { display: none; } .dd-ghost .dd-ic { display: inline-flex; color: var(--accent); } .dd-ghost .dd-tail { margin-inline-start: auto; padding-inline-start: 16px; font-size: 11px; font-weight: 700; opacity: .5; } /* the name field, standing where the new row will stand — the prefix it is typed after shown, fixed, before the caret */ .dd-new { display: flex; align-items: center; margin: 2px 0; padding: 6px 8px 6px 12px; border-radius: 9px; background: var(--hover); border: 1px solid var(--accent); box-shadow: 0 0 0 3px rgba(108, 92, 231, .15); } .dd-new .dd-pre { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; } .dd-new input { flex: 1 1 60px; min-width: 40px; width: 100%; padding: 2px 0; border: 0; background: transparent; outline: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); } .dd-menu { max-height: min(70vh, 620px); overflow-y: auto; } .dd-menu .dd-sep { height: 1px; background: var(--border); margin: 5px 8px; } .dd-menu .dd-head { padding: 8px 12px 4px; font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .06em; } .dempty { padding: 70px 26px; text-align: center; color: var(--muted); font-size: 14px; } .dempty .big { font-size: 40px; margin-bottom: 12px; } /* ============ dashboard (legacy bits kept for board cards) ============ */ .dash { height: 100vh; overflow-y: auto; } .dash-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 14px 28px; border-bottom: 1px solid var(--border); background: var(--panel); backdrop-filter: blur(18px); } .dash-top .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .dash-top .spacer { flex: 1; } .userchip { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); } .avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex: none; } .dash-hero { padding: 40px 32px 10px; max-width: 1200px; margin: 0 auto; } .dash-hero h2 { font-size: 26px; font-weight: 800; } .dash-hero p { color: var(--muted); margin-top: 5px; font-size: 14px; } .boards-grid { max-width: 1200px; margin: 22px auto 60px; padding: 0 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .bcard { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--panel-solid); cursor: pointer; transition: .18s; position: relative; } .bcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(108, 92, 231, .5); } .bcard .thumb { height: 140px; background: var(--hover); display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; color: var(--muted); font-size: 30px; } .bcard .meta { padding: 12px 14px; } .bcard .meta .t { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bcard .meta .s { color: var(--muted); font-size: 11.5px; margin-top: 3px; } .bcard .del { position: absolute; top: 8px; inset-inline-end: 8px; width: 28px; height: 28px; border-radius: 8px; background: rgba(0, 0, 0, .45); color: #fff; opacity: 0; transition: .15s; font-size: 13px; } .bcard:hover .del { opacity: 1; } .bcard.new { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 196px; border: 1.6px dashed rgba(108, 92, 231, .55); background: transparent; color: var(--accent); font-weight: 700; font-size: 14px; gap: 8px; } .bcard.new .plus { font-size: 30px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============ board view ============ */ .board-root { position: fixed; inset: 0; } /* width/height 100% is REQUIRED: an absolutely-positioned replaced element (canvas) ignores inset-derived sizing and falls back to its intrinsic 300x150 — which froze the board at a tiny top-left band at 5% zoom. */ #cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--canvas-bg); touch-action: none; } /* Live HTML-widget layer: sits over the canvas, under pins/cursors/chrome. The LAYER is click-through; each iframe's pointer-events are managed per frame by syncWidgets: interactive by default, inert while its object is selected (so move/resize handles work) or a non-select tool is active. The painted 40px header stays canvas-owned — drag/select/dblclick there. */ /* `clip`, not `hidden`: an overflow:hidden box is still a SCROLL CONTAINER, and focusing a field on a card that hangs off the bottom of the screen scrolls it — the whole overlay slides up under the painted chrome, and every card's body sits a header's height above its title band until the next reload. A clip box cannot be scrolled by anything. */ /* `isolation` makes the layer its OWN stacking context, like #nodes: the per-frame z (syncWidgets — the object's z, the selection at 2e9) orders the widgets among THEMSELVES and can never climb over the cards or the chrome */ #widgets { position: absolute; inset: 0; pointer-events: none; overflow: clip; isolation: isolate; } #widgets .wlive { position: absolute; left: 0; top: 0; transform-origin: 0 0; } #widgets .wlive iframe { position: absolute; left: 0; border: 0; background: #fff; border-radius: 0 0 13px 13px; display: block; } /* widget content dot (top-right) — the widget's text as a prompt preview */ #widgets .wlive .wdot { position: absolute; top: 10px; right: 10px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 0 0 2px rgba(14,18,32,.3), 0 0 10px rgba(255,255,255,.75); cursor: pointer; pointer-events: auto; transform-origin: 100% 0; transition: .15s; z-index: 2; padding: 0; } #widgets .wlive .wdot:hover { background: #FDCB6E; } /* frameless-widget grip (top-left): the select/move handle when there is no card header */ #widgets .wlive .wgrip { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 7px; background: rgba(14,18,32,.55); color: #fff; font-size: 11px; line-height: 1; display: grid; place-items: center; cursor: grab; pointer-events: auto; transform-origin: 0 0; z-index: 2; border: 1px solid rgba(255,255,255,.35); padding: 0; opacity: .5; transition: .15s; } #widgets .wlive .wgrip:hover { opacity: 1; } /* ── Three.js world node layer ──────────────────────────────────────────── */ #three { position: absolute; inset: 0; pointer-events: none; overflow: clip; isolation: isolate; } #three .tlive { position: absolute; left: 0; top: 0; transform-origin: 0 0; } #three .tlive iframe { position: absolute; left: 0; border: 0; background: #0b1020; border-radius: 0 0 13px 13px; display: block; } #three .tlive .tfull { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 7px; background: rgba(14,18,32,.6); color: #fff; font-size: 14px; line-height: 1; display: grid; place-items: center; cursor: pointer; pointer-events: auto; transform-origin: 100% 0; z-index: 2; border: 1px solid rgba(120,150,220,.4); padding: 0; } #three .tlive .tfull:hover { background: linear-gradient(100deg,#0EA5E9,#7C5CFF); } #three .tlive .wgrip { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; border-radius: 7px; background: rgba(14,18,32,.6); color: #fff; font-size: 11px; line-height: 1; display: grid; place-items: center; cursor: grab; pointer-events: auto; transform-origin: 0 0; z-index: 2; border: 1px solid rgba(120,150,220,.4); padding: 0; opacity: .6; } #three .tlive .wgrip:hover { opacity: 1; } /* ── 3D OBJECT — a transparent world with one thing in it: no card, no head. The grip and the frame toggle show only while the pointer is over it. */ #three .olive iframe { background: transparent; border-radius: 0; } #three .olive .wgrip, #three .olive .ofrm { opacity: 0; transition: opacity .15s; } #three .olive:hover .wgrip, #three .olive:hover .ofrm { opacity: .92; } #three .olive .ofrm { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 7px; background: rgba(14,18,32,.6); color: #fff; display: grid; place-items: center; cursor: pointer; pointer-events: auto; transform-origin: 100% 0; z-index: 2; border: 1px solid rgba(120,150,220,.4); padding: 0; } #three .olive .ofrm:hover, #three .olive .ofrm.on { background: linear-gradient(100deg,#0EA5E9,#7C5CFF); } /* ── CNVA Flow: node-graph overlay ──────────────────────────────────────── Same substrate as the live-widget layer: one absolutely-positioned box per `node` object, laid out at WORLD size and moved/scaled with the camera. The engine paints the card, header and port dots underneath; this layer only owns the BODY (params / Run / output) and the transparent port hit targets. The body goes inert while the node is selected so the engine's move/resize handles win — the ports stay live so you can always re-wire. */ /* ── Arabic-quality bidi ────────────────────────────────────────────────── Every content surface renders by its OWN first strong character: an Arabic paragraph reads right-to-left with its punctuation on the correct side, an English one left-to-right — mixed documents line by line. Chrome (labels, buttons) follows the UI language; CONTENT follows itself. */ #nodes .nout, #nodes .nout p, #nodes .nout li, #nodes .nout h1, #nodes .nout h2, #nodes .nout h3, #nodes .nout h4, #nodes .nout blockquote, #nodes .nout td, #nodes .nout th, #nodes .nta, #nodes .nerr, #nodes .nin, #nodes .nbody p, #nodes .nbody li, #nodes .nbody blockquote, #nodes .nbody h1, #nodes .nbody h2, #nodes .nbody h3, #nodes .nbody h4, #nodes .nbody td, #nodes .nbody th, #nodes .nbody dt, #nodes .nbody dd { unicode-bidi: plaintext; text-align: start; } #btn-outlang { min-width: 44px; font-size: 11px; font-weight: 800; letter-spacing: .02em; } /* ── Gallery: the professional image wall ── */ #nodes .gal-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } #nodes .gal-bar b { font-size: 11px; color: var(--text); } #nodes .gal-szs { margin-inline-start: auto; display: flex; gap: 2px; } #nodes .gal-szs button { width: 24px; height: 22px; border: 1px solid var(--border); background: var(--hover); color: var(--muted, #64748b); border-radius: 6px; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; } #nodes .gal-szs button.on { color: var(--accent); border-color: var(--accent); } #nodes .gal-grid { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--gsz, 148px), 1fr)); grid-auto-rows: max-content; gap: 6px; align-content: start; align-items: start; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); padding: 6px; } #nodes .gal-th { position: relative; margin: 0; border-radius: 8px; overflow: hidden; background: var(--panel-solid, #fff); border: 1px solid var(--border); cursor: zoom-in; aspect-ratio: 4/3; } #nodes .gal-th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .18s; } #nodes .gal-th:hover img { transform: scale(1.045); } #nodes .gal-th figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 7px 4px; font-size: 9.5px; line-height: 1.25; color: #fff; background: linear-gradient(transparent, rgba(10,12,24,.78)); opacity: 0; transition: opacity .18s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .gal-th:hover figcaption { opacity: 1; } /* select a subset: ticked pictures alone ride the out dot */ #nodes .gal-tick { position: absolute; top: 5px; left: 5px; z-index: 2; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; background: rgba(10,12,24,.45); box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: pointer; opacity: 0; transition: opacity .15s; } #nodes .gal-th:hover .gal-tick { opacity: 1; } #nodes .gal-th.sel .gal-tick { opacity: 1; background: var(--accent); border-color: #fff; } #nodes .gal-th.sel .gal-tick::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); } #nodes .gal-th.sel { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); } #nodes .gal-bar .gal-selin { font-size: 10px; font-weight: 800; color: var(--accent); } #nodes .gal-bar .lnk2 { border: 0; background: none; color: var(--muted, #64748b); font: inherit; font-size: 10px; text-decoration: underline; cursor: pointer; } #nodes .gal-bar .lnk2 svg { vertical-align: -2px; } #nodes .gal-bar .lnk2:disabled { opacity: .5; cursor: progress; } /* an agent's gallery: the source chip, the danger button, the sync note */ #nodes .gal-bar .gal-agent.on { text-decoration: none; padding: 2px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-weight: 800; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .gal-bar .gal-del { text-decoration: none; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(220,38,38,.45); background: rgba(220,38,38,.09); color: #dc2626; font-weight: 800; } #nodes .gal-bar .gal-del:hover { background: rgba(220,38,38,.18); } #nodes .gal-note { flex: 0 0 auto; font-size: 10px; color: var(--muted, #64748b); padding: 0 2px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .gal-note.busy { color: var(--accent); } /* per-thumb locate: opens the Space explorer on this copy */ #nodes .gal-loc { position: absolute; top: 5px; right: 5px; z-index: 2; width: 20px; height: 20px; border-radius: 6px; background: rgba(10,12,24,.55); color: #fff; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; } #nodes .gal-th:hover .gal-loc { opacity: 1; } #nodes .gal-loc:hover { background: var(--accent); } /* ── MAESTRO: the operator's surveyed directions, gold above everything ── */ #nodes .mae-head { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 9px; border: 1px solid rgba(184,134,11,.5); background: linear-gradient(120deg, rgba(184,134,11,.16), rgba(245,195,66,.08)); color: #B8860B; font-size: 11px; } #nodes .mae-head b { font-size: 12px; letter-spacing: .12em; } #nodes .mae-head.dom { border-color: rgba(14,165,233,.5); background: linear-gradient(120deg, rgba(14,165,233,.14), rgba(79,216,232,.07)); color: #0EA5E9; } #nodes .mae-head span { flex: 1; min-width: 0; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the ledger sizes to its content (scrolling past 62%); the CHAT then takes every remaining pixel, so the input bar always sits at the card's bottom with no dead space under it */ #nodes .mae-dirs { flex: 0 1 auto; min-height: 70px; max-height: 62%; overflow: auto; display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); padding: 7px; } /* retired from AI: the veil over a node card's DOM body + the red dot */ /* THE CARD IS NOT SWITCHED OFF. It draws, and it feeds everything wired to it; the model simply does not read it. Greying it to two-thirds said the opposite. The dotted edge and the corner badge carry the state. */ #nodes .ai-off { outline: 2px dotted #E11D2A; outline-offset: 3px; border-radius: 10px; } #nodes .ai-off::after { content: ''; position: absolute; top: -7px; inset-inline-end: -7px; width: 13px; height: 13px; border-radius: 50%; background: #E11D2A; box-shadow: 0 0 8px rgba(225,29,42,.75); z-index: 6; pointer-events: none; } /* the SELECTION FILTER: right-side floating panel on multi-select */ /* THE SELECTION FILTER IS A SHEET FROM THE TOP EDGE. One row, centred: the count, the narrowing box, then the kinds as pills — it drops in over the top bar's middle while a selection is being refined and is gone the moment it is not. Wide screens keep it to one line; a long list of kinds wraps under. */ #selfilter { position: fixed; z-index: 46; top: 0; left: 50%; transform: translateX(-50%); max-width: min(94vw, 1100px); border-radius: 0 0 15px 15px; padding: 7px 12px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; box-shadow: 0 18px 46px rgba(0,0,0,.22); animation: sf-drop .24s cubic-bezier(.2,.8,.3,1); } @keyframes sf-drop { from { transform: translate(-50%, -100%); } to { transform: translate(-50%, 0); } } #selfilter .sf-head { display: contents; } #selfilter .sf-head b { font-size: 16px; color: var(--accent, #6C5CE7); } /* one size, typed: every selected card takes the number you give it */ .szpop { position: fixed; z-index: 240; width: 232px; padding: 10px 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 18px 46px rgba(0,0,0,.22); } .szpop .sz-h { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #64748b); margin-bottom: 4px; } .szpop label { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted, #64748b); margin-top: 6px; } .szpop label input[type="number"] { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; padding: 5px 8px; border-radius: 8px; background: var(--hover); border: 1px solid var(--border); color: var(--text); outline: none; } .szpop label input:focus { border-color: var(--accent, #6C5CE7); } .szpop .sz-q { display: flex; gap: 4px; margin-top: 5px; } .szpop .sz-q button { flex: 1; font: inherit; font-size: 9.5px; padding: 3px 4px; border-radius: 6px; cursor: pointer; background: var(--hover); border: 1px solid var(--border); color: var(--muted, #64748b); white-space: nowrap; } .szpop .sz-q button:hover { color: var(--accent, #6C5CE7); border-color: var(--accent, #6C5CE7); } .szpop .sz-r { display: flex; align-items: center; gap: 8px; margin-top: 11px; } .szpop .sz-k { flex: 1; margin: 0; font-size: 10.5px; gap: 5px; } .szpop .sz-k input { width: auto; flex: 0 0 auto; } .szpop .sz-go { font: inherit; font-size: 11.5px; font-weight: 600; padding: 6px 14px; border-radius: 8px; cursor: pointer; background: var(--accent, #6C5CE7); border: 0; color: #fff; } /* type to narrow the selection itself — clear it and the rest come back */ #selfilter .sf-q { width: 190px; box-sizing: border-box; margin: 0 4px 0 0; font: inherit; font-size: 11.5px; padding: 5px 9px; border-radius: 8px; background: var(--hover); border: 1px solid var(--border); color: var(--text); outline: none; } #selfilter .sf-q:focus { border-color: var(--accent, #6C5CE7); } #selfilter .sf-row.miss { opacity: .32; } #selfilter .sf-row.miss b { text-decoration: line-through; } #selfilter .sf-none { font-size: 10.5px; color: var(--muted, #64748b); padding: 2px 4px; } #selfilter .sf-head span { font-size: 10.5px; color: var(--muted, #64748b); padding-inline-end: 9px; margin-inline-end: 3px; border-inline-end: 1px solid var(--border); white-space: nowrap; } #selfilter .sf-reset { order: 8; margin-inline-start: 4px; border: 1px solid var(--border); background: var(--hover); color: var(--muted, #64748b); border-radius: 8px; font: inherit; font-size: 10px; padding: 3px 8px; cursor: pointer; } #selfilter .sf-x { order: 9; border: 0; background: none; color: var(--muted, #64748b); font-size: 12px; cursor: pointer; padding: 0 2px; } #selfilter .sf-row { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 9px; border: 1px solid var(--border); cursor: pointer; font-size: 11.5px; position: relative; white-space: nowrap; } #selfilter .sf-row:hover { background: var(--hover); border-color: var(--accent, #6C5CE7); } #selfilter .sf-row s { width: 16px; height: 16px; display: grid; place-items: center; border: 1.5px solid var(--accent, #6C5CE7); border-radius: 5px; color: var(--accent, #6C5CE7); font-size: 10px; text-decoration: none; flex: none; } #selfilter .sf-row.off s { border-color: var(--border); color: transparent; } #selfilter .sf-row b { font-weight: 600; color: var(--text); } #selfilter .sf-row.off b { color: var(--muted, #64748b); font-weight: 400; } #selfilter .sf-row em { font-style: normal; font-size: 10.5px; color: var(--muted, #64748b); } #selfilter .sf-only { opacity: .45; border: 1px solid var(--accent, #6C5CE7); background: none; color: var(--accent, #6C5CE7); border-radius: 7px; font: inherit; font-size: 9px; font-weight: 700; padding: 1px 6px; cursor: pointer; } #selfilter .sf-row:hover .sf-only { opacity: 1; } /* the Simulation ledger's report strip */ #nodes .simrep { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0 6px; } #nodes .simrep-b { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); color: var(--text); font: inherit; font-size: 10.5px; font-weight: 600; padding: 4px 9px; cursor: pointer; } #nodes .simrep-b:hover { border-color: var(--accent, #6C5CE7); color: var(--accent, #6C5CE7); } #nodes .simrep-b i { font-style: normal; font-size: 9px; color: var(--muted, #64748b); } /* the gallery selection bar: All / None / Invert */ #nodes .gal-selbar { display: inline-flex; align-items: center; gap: 2px; } #nodes .gal-selbar .lnk2 { padding: 1px 6px; border-radius: 6px; } #nodes .gal-selbar .lnk2:hover { background: var(--hover); } /* the relation matrix: 0 apart · 1 neutral · 2 synergy · 3 adjacent */ #nodes .rmx-wrap { flex: 1 1 0; overflow: auto; border: 1px solid var(--border); border-radius: 9px; background: var(--card, #fff); } #nodes table.rmx { border-collapse: collapse; font-size: 10.5px; } #nodes .rmx th, #nodes .rmx td { border: 1px solid var(--border); padding: 3px 5px; text-align: center; } #nodes .rmx thead th { position: sticky; top: 0; background: var(--hover); z-index: 1; font-size: 9.5px; color: var(--muted, #64748b); } #nodes .rmx tbody th { position: sticky; left: 0; background: var(--hover); text-align: start; font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } #nodes .rmx tbody th em { font-style: normal; color: var(--muted, #64748b); font-size: 9px; margin-inline-end: 3px; } #nodes .rmx td { cursor: pointer; min-width: 24px; font-weight: 800; } #nodes .rmx td.dg { color: var(--muted, #64748b); cursor: default; background: var(--hover); font-weight: 400; } #nodes .rmx td.v0, #nodes .rmx-leg .v0 { background: rgba(225,29,42,.14); color: #E11D2A; } #nodes .rmx td.v1, #nodes .rmx-leg .v1 { background: transparent; color: var(--muted, #64748b); font-weight: 400; } #nodes .rmx td.v2, #nodes .rmx-leg .v2 { background: rgba(22,163,74,.16); color: #16A34A; } #nodes .rmx td.v3, #nodes .rmx-leg .v3 { background: #16A34A; color: #fff; } #nodes .rmx-leg { flex: 0 0 auto; font-size: 10.5px; color: var(--muted, #64748b); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } #nodes .rmx-leg span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-weight: 800; } #nodes .rmx-leg s { text-decoration: none; color: #D97706; } /* the area tree map */ #nodes .am-wrap { flex: 1 1 0; position: relative; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); } #nodes .am-cell { position: absolute; overflow: hidden; padding: 5px 7px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); display: flex; flex-direction: column; justify-content: flex-start; } #nodes .am-cell b { color: #fff; font-size: 11px; line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,.35); overflow: hidden; } #nodes .am-cell i { color: rgba(255,255,255,.9); font-style: normal; font-size: 9.5px; text-shadow: 0 1px 2px rgba(0,0,0,.35); } /* the Identifiers index: every @name on the board, fly-to rows */ #nodes .rfx-list { flex: 1 1 0; overflow: auto; display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; } #nodes .rfx-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--hover); cursor: pointer; font-size: 11.5px; } #nodes .rfx-row:hover { border-color: #2E9E6B; box-shadow: 0 0 0 2px rgba(46,158,107,.14); } #nodes .rfx-name { font-weight: 700; font-family: ui-monospace, monospace; color: #2E9E6B; white-space: nowrap; } #nodes .rfx-row i { flex: 1; font-style: normal; font-size: 10.5px; color: var(--muted, #64748b); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .rfx-rms { display: flex; gap: 3px; flex-wrap: wrap; } #nodes .rfx-rms u { text-decoration: none; border: 1px solid var(--border); border-radius: 9px; font-size: 9px; padding: 1px 6px; color: var(--muted, #64748b); cursor: pointer; } #nodes .rfx-rms u:hover { border-color: #2E9E6B; color: #2E9E6B; } #nodes .rfx-x { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; border: 1px solid rgba(225,29,42,.35); color: #E11D2A; font-style: normal; text-decoration: none; font-size: 12px; line-height: 1; cursor: pointer; padding: 0 4px; } #nodes .rfx-x:hover { background: rgba(225,29,42,.1); } #nodes .rfx-x.arm { background: #E11D2A; color: #fff; border-color: #E11D2A; font-size: 9.5px; font-weight: 700; } /* the survey FOCUS: point the interviewer at one ground until cleared */ #nodes .mae-focus { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } #nodes .mae-focus b { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #64748b); margin-inline-end: 2px; } #nodes .mae-focus button { border: 1px solid var(--border); background: var(--hover); color: var(--muted, #64748b); border-radius: 12px; font: inherit; font-size: 10px; padding: 1px 9px; cursor: pointer; } #nodes .mae-focus button.on { border-color: #B8860B; color: #B8860B; background: rgba(184,134,11,.1); font-weight: 700; } #nodes .mae-acts .mae-end { border-color: rgba(225,29,42,.4); color: #E11D2A; } /* the Brief strip: documents in, digested whole */ #nodes .bx-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } #nodes .bx-ph { font-size: 10px; color: #D97706; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } #nodes .bx-ph.dim { color: var(--muted, #64748b); font-weight: 400; } #nodes .bx-pbar { display: block; height: 4px; margin-top: 3px; border-radius: 3px; background: var(--hover); border: 1px solid var(--border); overflow: hidden; } #nodes .bx-pbar i { display: block; height: 100%; background: linear-gradient(90deg, #F43F5E, #F59E0B); transition: width .5s; } /* BRIEFED SOURCES: every digested document; wired ones in full; click = filter */ #nodes .bx-briefs { flex: 0 1 auto; max-height: 32%; overflow: auto; display: flex; flex-direction: column; gap: 4px; border: 1px solid rgba(14,165,233,.35); border-radius: 9px; background: rgba(14,165,233,.05); padding: 6px 7px; } #nodes .bx-bt { display: flex; align-items: baseline; gap: 6px; font-size: 9px; letter-spacing: .1em; color: #0EA5E9; } #nodes .bx-bt i { font-style: normal; opacity: .7; } #nodes .bx-bt .lnk2 { margin-inline-start: auto; border: 0; background: none; color: #0EA5E9; font: inherit; font-size: 9.5px; letter-spacing: 0; cursor: pointer; text-decoration: underline; } #nodes .bx-brief { border: 1px solid var(--border); border-radius: 8px; background: var(--panel-solid, #fff); padding: 4px 8px; cursor: pointer; } #nodes .bx-brief:hover { border-color: #0EA5E9; } #nodes .bx-brief.mine { border-inline-start: 3px solid #0EA5E9; } #nodes .bx-brief.on { border-color: #0EA5E9; box-shadow: 0 0 0 1px #0EA5E933; background: rgba(14,165,233,.07); } #nodes .bx-brief > b { display: block; font-size: 11px; unicode-bidi: plaintext; } #nodes .bx-brief > i { display: block; font-style: normal; font-size: 9px; color: var(--muted, #64748b); } #nodes .bx-brief p { margin: 3px 0 0; font-size: 10.5px; line-height: 1.45; unicode-bidi: plaintext; text-align: start; } #nodes .bx-brief p.ar { opacity: .85; } #nodes .bx-fnote { font-size: 9.5px; font-weight: 700; color: #0EA5E9; } /* the ANALYSIS SURVEY: the simulations read as one reading — verdicts, tensions, the decisions the numbers force, what stays open */ #nodes .sr-notes { flex: 0 0 auto; } #nodes .sr-notes textarea { width: 100%; min-height: 26px; font-size: 10.5px; } #nodes .sr-read { flex: 0 1 auto; max-height: 58%; overflow: auto; display: flex; flex-direction: column; gap: 5px; border: 1px solid rgba(217,119,6,.4); border-radius: 9px; background: rgba(217,119,6,.05); padding: 6px 8px; } #nodes .sr-read.closed { flex: 0 0 auto; } #nodes .sr-read > .bx-bt { color: #D97706; } #nodes .sr-read > .bx-bt .lnk2 { color: #D97706; text-decoration: none; display: inline-flex; } #nodes .sr-read > p { margin: 0; font-size: 11px; line-height: 1.5; unicode-bidi: plaintext; text-align: start; } #nodes .sr-read > p.ar { opacity: .85; } #nodes .sr-sec { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; border-top: 1px dashed rgba(217,119,6,.35); } #nodes .sr-sec > b { font-size: 9px; letter-spacing: .1em; color: #D97706; } #nodes .sr-sec ul { margin: 0; padding-inline-start: 14px; font-size: 10.5px; line-height: 1.45; } #nodes .sr-sec li span { display: block; unicode-bidi: plaintext; text-align: start; } #nodes .sr-sec li span.ar { opacity: .8; } #nodes .sr-sim, #nodes .sr-dec { border: 1px solid var(--border); border-radius: 8px; background: var(--panel-solid, #fff); padding: 4px 8px; font-size: 10.5px; line-height: 1.45; } #nodes .sr-sim > b, #nodes .sr-dec > b { display: block; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #0EA5E9; } #nodes .sr-dec > b { color: #059669; } #nodes .sr-sim > span, #nodes .sr-dec > span { display: block; unicode-bidi: plaintext; text-align: start; } #nodes .sr-sim > span.ar, #nodes .sr-dec > span.ar { opacity: .8; } #nodes .sr-sim > em { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; font-style: normal; } #nodes .sr-chip { font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; padding: 0 5px; border-radius: 4px; background: var(--hover); border: 1px solid var(--border); } #nodes .sr-sim > u { display: block; margin-top: 2px; text-decoration: none; font-size: 10px; color: #D97706; unicode-bidi: plaintext; text-align: start; } #nodes .sr-dec > small { display: block; font-size: 9.5px; color: var(--muted, #64748b); margin-top: 1px; } #nodes .sr-dec > small > b { color: inherit; font-size: 8.5px; letter-spacing: .08em; } /* the survey sheet: options per decision, facts to acknowledge */ #nodes .sr-how { display: block; text-decoration: none; font-size: 9.5px; color: var(--muted, #64748b); unicode-bidi: plaintext; text-align: start; } #nodes .sr-dec.done, #nodes .sr-info.done { border-color: rgba(5,150,105,.55); background: rgba(5,150,105,.05); } #nodes .sr-tag { float: inline-end; display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 8.5px; letter-spacing: .04em; text-transform: none; color: #059669; } #nodes .sr-opts { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; } #nodes .sr-opt { display: flex; align-items: flex-start; gap: 6px; width: 100%; text-align: start; font: inherit; font-size: 10.5px; line-height: 1.4; padding: 4px 7px; border-radius: 7px; border: 1px solid var(--border); background: var(--hover); color: inherit; cursor: pointer; } #nodes .sr-opt > i { flex: 0 0 auto; display: inline-flex; margin-top: 2px; color: var(--muted, #64748b); } #nodes .sr-opt > span { flex: 1 1 auto; display: block; unicode-bidi: plaintext; } #nodes .sr-opt > span.ar { flex: 1 1 100%; opacity: .8; } #nodes .sr-opt > span > em { font-style: normal; font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: #D97706; margin-inline-start: 4px; } #nodes .sr-opt.rec { border-color: rgba(217,119,6,.45); } #nodes .sr-opt:hover:not(:disabled) { border-color: #059669; } #nodes .sr-opt.on { border-color: #059669; background: rgba(5,150,105,.12); } #nodes .sr-opt.on > i { color: #059669; } #nodes .sr-opt:disabled { cursor: default; opacity: .7; } #nodes .sr-opt.ack { width: auto; margin-top: 4px; padding: 3px 8px; font-size: 10px; } #nodes .sr-info { border: 1px solid var(--border); border-radius: 8px; background: var(--panel-solid, #fff); padding: 4px 8px; font-size: 10.5px; line-height: 1.45; border-inline-start: 3px solid #0EA5E9; } #nodes .sr-info > span { display: block; unicode-bidi: plaintext; text-align: start; } #nodes .sr-info > span.ar { opacity: .8; } #nodes .sr-info > small { display: block; font-size: 9.5px; color: var(--muted, #64748b); margin-top: 1px; } #nodes .sr-info > small > b { font-size: 8.5px; letter-spacing: .08em; } #nodes .sr-info > .sr-tag { float: none; margin-top: 3px; } #nodes .dlg-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; color: #0EA5E9; background: var(--hover); border-radius: 4px; padding: 0 5px; } /* a WIDE ledger flows into columns — up to four card walls, masonry style */ #nodes .mae-dirs.cols { display: block; columns: 4 300px; column-gap: 8px; } #nodes .mae-dirs.cols > * { margin-bottom: 7px; } #nodes .mae-dirs.cols .mae-dir { break-inside: avoid; } #nodes .mae-dirs.cols .mae-cat { display: inline-block; width: 100%; } #nodes .mae-dirs.cols .mae-cat > b { break-after: avoid; } #nodes .mae-dirs.cols .mae-bulk, #nodes .mae-dirs.cols .bx-fnote, #nodes .mae-dirs.cols .st-empty { column-span: all; } #nodes .mae-dir .ar { unicode-bidi: plaintext; opacity: .8; } /* the survey card's record line: counts only — the ledger card lists them */ #nodes .mae-stat { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 10px; color: var(--muted, #64748b); border: 1px solid var(--border); border-radius: 8px; background: var(--hover); } #nodes .mae-stat b { color: #059669; font-size: 11px; } #nodes .mae-stat u { text-decoration: none; color: #D97706; font-weight: 700; } #nodes .mae-stat span { margin-inline-start: auto; opacity: .8; } /* bulk: settle every pending item in the current view at once */ #nodes .mae-bulk { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px dashed rgba(217,119,6,.5); border-radius: 8px; background: rgba(217,119,6,.06); } #nodes .mae-bulk u { text-decoration: none; font-size: 9.5px; font-weight: 800; color: #D97706; margin-inline-end: auto; } #nodes .mae-bulk button { display: inline-flex; align-items: center; gap: 4px; border-radius: 7px; font: inherit; font-size: 10px; font-weight: 700; padding: 2px 9px; cursor: pointer; } #nodes .mae-bulk .okb { border: 1px solid rgba(5,150,105,.5); background: rgba(5,150,105,.12); color: #059669; } #nodes .mae-bulk .nob { border: 1px solid rgba(225,29,42,.45); background: rgba(225,29,42,.08); color: #E11D2A; } #nodes .mae-bulk .nob.arm { background: #E11D2A; color: #fff; } #nodes .mae-bulk button:hover { filter: brightness(1.12); } #nodes .bx-brief { position: relative; } #nodes .bx-brief .bx-del { position: absolute; top: 3px; inset-inline-end: 6px; text-decoration: none; font-size: 13px; line-height: 1; cursor: pointer; color: var(--muted, #64748b); } #nodes .bx-brief .bx-del:hover, #nodes .bx-brief .bx-del.arm { color: #E11D2A; } #nodes .bx-brief .bx-arm { display: block; text-decoration: none; font-size: 9px; font-weight: 700; color: #E11D2A; margin-top: 2px; } #nodes .bx-bt .lnk2.on { font-weight: 800; } /* pending items: extracted, awaiting the operator's confirmation */ #nodes .mae-dir.pend { border-color: rgba(217,119,6,.5); border-inline-start-color: #D97706; background: rgba(217,119,6,.06); } #nodes .mae-dir em.src { display: block; font-style: normal; font-size: 9.5px; color: var(--muted, #64748b); margin-top: 3px; unicode-bidi: plaintext; } /* simulation ledger rows: the measured evidence, the design decision it drives, and what it touches */ #nodes .mae-dir em.evd, #nodes .mae-dir em.eff, #nodes .mae-dir em.aff { display: block; font-style: normal; font-size: 9.5px; line-height: 1.4; margin-top: 3px; unicode-bidi: plaintext; text-align: start; } #nodes .mae-dir em.evd { color: #2563EB; } #nodes .mae-dir em.eff { color: #059669; font-weight: 600; } #nodes .mae-dir em.aff { color: var(--muted, #64748b); display: flex; flex-wrap: wrap; align-items: center; gap: 3px; } #nodes .mae-dir em.aff span { display: inline-block; font-size: 9px; font-weight: 700; padding: 0 6px; border-radius: 999px; border: 1px solid rgba(184,134,11,.4); background: rgba(184,134,11,.08); color: #B8860B; } #nodes .mae-ok { position: absolute; top: 3px; inset-inline-end: 22px; display: flex; align-items: center; gap: 3px; } #nodes .mae-ok u { text-decoration: none; font-size: 8px; font-weight: 800; letter-spacing: .08em; color: #D97706; margin-inline-end: 2px; } #nodes .mae-ok button { width: 20px; height: 18px; display: grid; place-items: center; border: 1px solid rgba(5,150,105,.5); background: rgba(5,150,105,.12); color: #059669; border-radius: 6px; cursor: pointer; padding: 0; } #nodes .mae-ok button.no { border-color: rgba(225,29,42,.5); background: rgba(225,29,42,.1); color: #E11D2A; } #nodes .mae-ok button:hover { filter: brightness(1.2); } #nodes .mae-cat > b { display: flex; align-items: baseline; gap: 6px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #B8860B; margin-bottom: 4px; } #nodes .mae-cat > b i { font-style: normal; opacity: .7; } #nodes .mae-dir { position: relative; border: 1px solid rgba(184,134,11,.35); border-inline-start: 3px solid #B8860B; border-radius: 8px; background: var(--panel-solid, #fff); padding: 5px 22px 5px 9px; margin-bottom: 4px; } #nodes .mae-dir p { margin: 0; font-size: 11.5px; line-height: 1.45; unicode-bidi: plaintext; text-align: start; } #nodes .mae-dir p.ar { opacity: .85; margin-top: 2px; } #nodes .mae-dir s { position: absolute; top: 3px; inset-inline-end: 5px; text-decoration: none; cursor: pointer; font-size: 13px; line-height: 1; color: var(--muted, #64748b); } #nodes .mae-dir s:hover { color: #E11D2A; } /* click a decision: the survey question it answered, and the withdraw acts */ #nodes .mae-dir[data-mae-open], #nodes .mae-dir[data-dlg-open] { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; } #nodes .mae-dir[data-mae-open]:hover, #nodes .mae-dir[data-dlg-open]:hover { border-color: #B8860B; box-shadow: 0 2px 10px rgba(184,134,11,.18), 0 0 0 1px #B8860B33; transform: translateY(-1px); } #nodes .mae-hint { position: absolute; bottom: 4px; inset-inline-end: 6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; color: #B8860B; background: rgba(184,134,11,.12); border: 1px solid rgba(184,134,11,.4); opacity: 0; transition: opacity .12s; pointer-events: none; } #nodes .mae-dir:hover .mae-hint { opacity: 1; } #nodes .mae-dir.open .mae-hint { opacity: 0; } #nodes .mae-dir.open { border-color: #B8860B; box-shadow: 0 0 0 1px #B8860B33; } #nodes .mae-dir.wd { opacity: .6; } #nodes .mae-dir.wd > p { text-decoration: line-through; } #nodes .mae-prov { margin-top: 6px; border-top: 1px dashed var(--border); padding-top: 6px; cursor: default; } /* the provenance POPOVER: floats over the clicked card, no reflow */ #nodes .mae-pop { position: absolute; z-index: 30; margin: 0; border: 1.5px solid #B8860B; border-radius: 10px; background: var(--panel-solid, #fff); box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 1px #B8860B33; padding: 8px 10px; border-top: 1.5px solid #B8860B; min-width: 220px; } #nodes .mae-prov b { display: block; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: #B8860B; margin: 4px 0 2px; } #nodes .mae-prov p { margin: 0; font-size: 10.5px; line-height: 1.5; unicode-bidi: plaintext; text-align: start; } #nodes .mae-prov p.ar { opacity: .85; } #nodes .mae-prov p.dim2 { color: var(--muted, #64748b); font-style: italic; } #nodes .mae-prov i { display: block; font-style: normal; font-size: 9px; color: var(--muted, #64748b); margin-top: 3px; } #nodes .mae-pacts { display: flex; gap: 6px; margin-top: 6px; } #nodes .mae-pacts button { border: 1px solid var(--border); background: var(--hover); color: var(--text); border-radius: 7px; font: inherit; font-size: 10px; font-weight: 700; padding: 2px 10px; cursor: pointer; } #nodes .mae-pacts .wdb { border-color: rgba(217,119,6,.5); color: #D97706; } #nodes .mae-pacts .delb { border-color: rgba(225,29,42,.4); color: #E11D2A; margin-inline-start: auto; } #nodes .mae-pacts button:hover { filter: brightness(1.15); } #nodes .mae-chh { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } #nodes .mae-chh .lnk2 { border: 0; background: none; color: #B8860B; font: inherit; font-size: 10px; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; } #nodes .mae-chh span { font-size: 9.5px; color: var(--muted, #64748b); } #nodes .mae-chat { flex: 1 1 0; min-height: 60px; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px; } #nodes .mae-m { max-width: 88%; align-self: flex-end; border: 1px solid var(--border); border-radius: 11px 11px 3px 11px; background: var(--hover); padding: 6px 10px; } #nodes .mae-m.bot { align-self: flex-start; border-radius: 11px 11px 11px 3px; border-color: rgba(184,134,11,.4); background: rgba(184,134,11,.07); } #nodes .mae-m p { margin: 0; font-size: 11.5px; line-height: 1.5; unicode-bidi: plaintext; text-align: start; } #nodes .mae-m p.ar { margin-top: 3px; opacity: .85; } #nodes .mae-m.busy p { opacity: .55; } #nodes .mae-bar { flex: 0 0 auto; display: flex; gap: 5px; align-items: flex-end; } #nodes .mae-bar textarea { flex: 1; min-width: 0; min-height: 46px; max-height: 150px; resize: none; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); color: var(--text); font: inherit; font-size: 12.5px; line-height: 1.45; padding: 8px 10px; outline: none; unicode-bidi: plaintext; } #nodes .mae-bar textarea:focus { border-color: #B8860B; } #nodes .mae-acts { display: flex; flex-direction: column; gap: 4px; } /* the question's clickable answers: pick one, combine several, comment, Send */ #nodes .mae-opts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } #nodes .mae-opts button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: start; border: 1px solid rgba(184,134,11,.45); background: var(--panel-solid, #fff); color: var(--text); border-radius: 9px; font: inherit; font-size: 11px; line-height: 1.35; padding: 5px 10px; cursor: pointer; max-width: 100%; } #nodes .mae-opts button i { font-style: normal; font-size: 10.5px; opacity: .75; unicode-bidi: plaintext; } #nodes .mae-opts button span { unicode-bidi: plaintext; } #nodes .mae-opts button:hover { border-color: #B8860B; } #nodes .mae-opts button.on { background: linear-gradient(120deg, rgba(184,134,11,.22), rgba(245,195,66,.12)); border-color: #B8860B; box-shadow: 0 0 0 1px #B8860B33; color: var(--text); font-weight: 700; } #nodes .mae-oh { flex-basis: 100%; font-size: 9.5px; color: var(--muted, #64748b); } /* the Requirements register: where its entries come FROM, and who outranks them */ #nodes .arch-prov { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10px; color: var(--muted, #64748b); padding: 3px 8px; border: 1px dashed var(--border); border-radius: 8px; } #nodes .arch-prov b { color: #0EA5E9; } #nodes .arch-prov u { text-decoration: none; color: #B8860B; font-weight: 700; } /* the Document card's TYPE badge: the file kind, in its brand colour */ #nodes .dv-type { flex: 0 0 auto; border: 1px solid; border-radius: 7px; padding: 1px 7px; font-size: 9px; font-weight: 800; letter-spacing: .08em; } /* the Document card's survey bubbles: what it has been extracted for */ #nodes .dv-badges { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } #nodes .dv-badges u { text-decoration: none; font-size: 8.5px; letter-spacing: .1em; font-weight: 800; color: var(--muted, #64748b); } #nodes .dvb { border: 1px solid; border-radius: 12px; padding: 1px 9px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; cursor: context-menu; } #nodes .dvb.plus { color: var(--muted, #64748b); border-color: var(--border); background: var(--hover); border-style: dashed; } #nodes .dvb:hover { filter: brightness(1.15); } /* the Document card's composition strip: what the pages are made of */ #nodes .dv-info { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 3px 8px; font-size: 10.5px; color: var(--muted, #64748b); border: 1px solid var(--border); border-radius: 8px; background: var(--hover); } #nodes .dv-info b { color: var(--text); } #nodes .dv-info .t { color: #0EA5E9; font-weight: 700; } #nodes .dv-info .m { color: #D97706; font-weight: 700; } #nodes .dv-info .i { color: #7C3AED; font-weight: 700; } #nodes .dv-info em { font-style: normal; color: #059669; font-weight: 700; } #nodes .dv-info button { border: 1px solid #7C3AED66; background: #7C3AED1a; color: #7C3AED; border-radius: 7px; font: inherit; font-weight: 700; padding: 1px 8px; cursor: pointer; } #nodes .dv-info button:hover { filter: brightness(1.15); } /* the grid composer's live cells */ #nodes .gm-cells { flex: 1; min-height: 0; display: grid; gap: 3px; border: 1px solid var(--border); border-radius: 8px; padding: 3px; background: var(--hover); overflow: hidden; } #nodes .gm-cell { position: relative; min-height: 40px; border-radius: 5px; overflow: hidden; display: grid; place-items: center; } #nodes .gm-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } #nodes .gm-cell.empty i { font-style: normal; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.4); } #btn-outlang.on { color: var(--accent); border-color: var(--accent); } /* z-index 20 makes #nodes its OWN stacking context: the per-card z boosts (selection rides at 2e9) order cards among THEMSELVES only, and can never climb above the toolbars (ctxbar z45, pins z42, cursors) */ #nodes { position: absolute; inset: 0; pointer-events: none; overflow: clip; z-index: 20; } /* The wires are NOT on this layer any more — they paint on the board itself, before any card, so a wire meets a card and goes behind it. What is left up here is only what must be seen whatever it crosses: the band you are dragging, and the two ends of a wire you have picked. No pointer: a wire is picked on the board beneath, as before. */ #wires { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 22; } #nodes .nd { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 13px; } /* the selected card's halo, in its own colour (--ndc, set by nodes.js) — on the element, so it floats over the neighbours' bodies; the element itself is transparent, so only the outside of the shadow shows */ #nodes .nd.sel { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ndc) 22%, transparent), 0 0 26px 6px color-mix(in srgb, var(--ndc) 48%, transparent); } /* the body clips too (not hidden): a toolbar at the top of a body must never scroll out of it because a field further down took focus */ #nodes .nbody { position: absolute; left: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; overflow: clip; } /* FROZEN: the body runs on behind glass. Nothing in it takes the pointer — the !important beats a child's own pointer-events:auto — so a press goes through to the board (the engine selects and drags the card) and the wheel zooms the board as if the card were not there. The sheen says why the button under the pointer is not answering. */ #nodes .nd.frozen .nbody, #nodes .nd.frozen .nbody *, #nodes .nd.inert .nbody, #nodes .nd.inert .nbody * { pointer-events: none !important; } #nodes .nd.frozen .nbody::after { content: ''; position: absolute; inset: 0; z-index: 9; border-radius: 9px; background: linear-gradient(135deg, color-mix(in srgb, var(--ndc, #7C5CFF) 14%, rgba(255,255,255,.10)) 0%, transparent 46%, color-mix(in srgb, var(--ndc, #7C5CFF) 10%, transparent) 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ndc, #7C5CFF) 35%, transparent); backdrop-filter: saturate(.7); } #nodes .nta { flex: 1; min-height: 40px; resize: none; width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 12px; line-height: 1.5; padding: 7px 9px; outline: none; } #nodes .nta:focus { border-color: var(--accent); } #nodes .nsel { width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 12px; padding: 6px 8px; outline: none; } #nodes .nlab { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; opacity: .55; color: var(--text); } #nodes .nrun { flex: 0 0 auto; border: 0; border-radius: 8px; padding: 7px 10px; font-family: var(--font); font-size: 12px; font-weight: 800; letter-spacing: .02em; cursor: pointer; color: #fff; background: linear-gradient(100deg, #7C5CFF, #22D3EE); } #nodes .nrun:hover { filter: brightness(1.1); } #nodes .nrun.busy { background: rgba(34,211,238,.2); color: #22D3EE; cursor: default; } #nodes .nerr { flex: 0 0 auto; font-size: 11px; line-height: 1.45; color: #ff8f80; background: rgba(255,90,70,.1); border: 1px solid rgba(255,90,70,.3); border-radius: 8px; padding: 5px 8px; } #nodes .nout { flex: 1; min-height: 0; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 11.5px; line-height: 1.55; color: var(--text); background: var(--hover); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; } #nodes .nout.big { font-size: 12px; } #nodes .nout i { opacity: .5; } /* pictures arriving on a wire (Output card): the image itself, not its name */ #nodes .nd-imgs { flex: 1.7 1 auto; min-height: 84px; display: grid; grid-template-columns: 1fr; gap: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); overflow: hidden; padding: 3px; } #nodes .nd-imgs.many { grid-template-columns: 1fr 1fr; } #nodes .nd-imgs img { width: 100%; height: 100%; min-height: 0; object-fit: contain; display: block; cursor: zoom-in; border-radius: 5px; } /* what the pictures are called — the name previews, the arrow opens the file */ #nodes .nd-lnks { flex: 0 0 auto; max-height: 108px; overflow: auto; display: flex; flex-direction: column; gap: 1px; margin-top: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); padding: 3px; } #nodes .nd-lnk { display: flex; align-items: center; gap: 5px; padding: 2px 4px; border-radius: 5px; font-size: 11px; } #nodes .nd-lnk:hover { background: var(--bg, #fff); } #nodes .nd-lnk .ic { display: grid; place-items: center; color: var(--muted, #64748b); flex: 0 0 auto; } #nodes .nd-lnk .nm { flex: 1; min-width: 0; color: var(--accent, #0EA5E9); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } #nodes .nd-lnk .nm:hover { text-decoration: underline; } #nodes .nd-lnk .go { flex: 0 0 auto; display: grid; place-items: center; color: var(--muted, #64748b); } #nodes .nd-lnk .go:hover { color: var(--accent, #0EA5E9); } #nodes .nfoot { flex: 0 0 auto; font-size: 9.5px; opacity: .5; color: var(--text); } /* the save mark on the title band: where this card's content was filed — green when the record matches, red + pulse when the content has drifted (click updates the record in place, never a second listing) */ #nodes .nsent { position: absolute; top: 6px; right: 30px; z-index: 4; pointer-events: auto; display: flex; align-items: center; gap: 4px; max-width: 46%; padding: 2px 7px; border-radius: 8px; border: 1px solid rgba(5,150,105,.45); background: rgba(5,150,105,.14); color: #059669; font-family: var(--font); font-size: 9px; font-weight: 800; letter-spacing: .03em; line-height: 1.3; cursor: pointer; } #nodes .nsent svg { flex: 0 0 auto; } #nodes .nsent span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #nodes .nsent i { font-style: normal; font-weight: 900; } #nodes .nsent:hover { filter: brightness(1.15); } #nodes .nsent.stale { border-color: rgba(225,29,42,.55); background: rgba(225,29,42,.14); color: #E11D2A; animation: nsent-beat 1.1s ease-in-out infinite; } #nodes .nsent.busy { opacity: .55; pointer-events: none; animation: none; } @keyframes nsent-beat { 0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,42,0); } 50% { box-shadow: 0 0 0 4px rgba(225,29,42,.22); } } /* the grab stack on a card's corner: a chip that unfolds upward into the layers — thumbnail, name (which IS the dot's name), eye, delete — sitting above whatever iframe the body holds */ #nodes .gs-panel { position: absolute; z-index: 5; pointer-events: auto; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 4px; max-width: 70%; font-family: var(--font); } #nodes .gs-chip { display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; border: 1px solid rgba(124,92,255,.5); background: rgba(13,17,32,.86); color: #c4b5fd; font-family: var(--font); font-size: 9px; font-weight: 800; letter-spacing: .05em; line-height: 1.3; cursor: pointer; backdrop-filter: blur(6px); } #nodes .gs-chip:hover, #nodes .gs-chip.on { background: rgba(124,92,255,.3); color: #fff; } #nodes .gs-list { width: 236px; max-height: 190px; overflow: auto; display: flex; flex-direction: column; gap: 3px; padding: 5px; border-radius: 10px; border: 1px solid rgba(124,92,255,.35); background: rgba(13,17,32,.92); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,.35); } #nodes .gs-row { display: flex; align-items: center; gap: 5px; padding: 2px 3px; border-radius: 7px; } #nodes .gs-row:hover { background: rgba(255,255,255,.06); } #nodes .gs-row.off { opacity: .45; } #nodes .gs-row img { width: 34px; height: 24px; object-fit: cover; border-radius: 4px; background: #000; cursor: zoom-in; flex: 0 0 auto; } #nodes .gs-row input { flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #e7ecf7; font-family: var(--font); font-size: 11px; font-weight: 600; padding: 2px 5px; outline: none; } #nodes .gs-row input:hover, #nodes .gs-row input:focus { border-color: rgba(124,92,255,.5); background: rgba(255,255,255,.05); } #nodes .gs-row button { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 5px; background: transparent; color: #9fb0d0; cursor: pointer; } #nodes .gs-row button:hover { background: rgba(255,255,255,.1); color: #fff; } #nodes .gs-row [data-gs-del]:hover { color: #F43F5E; } /* while Ctrl is held every widget surface is click-through: the canvas gets the press, and Ctrl+drag duplicates (or frees a frame) from anywhere on any card — single or multi selection, iframe or body alike */ body.ctrl-held #nodes .nbody, body.ctrl-held #nodes .nsent, body.ctrl-held #nodes .gs-panel, body.ctrl-held #nodes .nport, body.ctrl-held #widgets .wlive iframe, body.ctrl-held #three .tlive iframe { pointer-events: none !important; } /* FROZEN widget or world: the frame runs on behind glass (see #nodes .nd.frozen) */ #widgets .wlive.frozen iframe, #three .tlive.frozen iframe { pointer-events: none !important; } #widgets .wlive.frozen::after, #three .tlive.frozen::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 13px; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, transparent 46%, rgba(124,92,255,.10) 100%); box-shadow: inset 0 0 0 1px rgba(124,92,255,.35); } /* the gallery ticks stay live under a held modifier: Alt+tick = only this */ body.ctrl-held #nodes .gal-tick { pointer-events: auto !important; } /* a HELD space bar is the navigation key: every card, widget and world goes inert so the wheel zooms and a drag pans the board from wherever the pointer sits — iframe bodies included */ body.space-held #nodes, body.space-held #nodes *, body.space-held #widgets, body.space-held #widgets *, body.space-held #three, body.space-held #three * { pointer-events: none !important; } body.space-held #cv { cursor: grab !important; } /* port hit target — transparent over the engine-painted dot, always clickable */ #nodes .nport { position: absolute; width: 22px; height: 22px; margin: 0; border-radius: 50%; pointer-events: auto; cursor: crosshair; z-index: 3; transform-origin: 50% 50%; } #nodes .nport i { position: absolute; inset: 5px; border-radius: 50%; background: transparent; transition: .12s; } #nodes .nport:hover i { background: var(--pc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 28%, transparent); } #nodes .nport b { display: none; } /* the chip beside the dot is trimmed to the pitch; the whole name is one hover away, on every dot rather than only the packed ones */ #nodes .nport:hover b { display: block; position: absolute; top: 50%; transform: translateY(-50%); background: rgba(10,14,26,.94); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 7px; white-space: nowrap; z-index: 8; pointer-events: none; } #nodes .nport.in:hover b { inset-inline-end: 24px; } #nodes .nport.out:hover b { inset-inline-start: 24px; } /* packed dots (a many-ref CAD card): smaller target, name floats on hover */ #nodes .nport.tight { width: 16px; height: 16px; } /* ── CNVA Flow: the Space + Files nodes ─────────────────────────────────── The board's own folder, browsable on the canvas. Row anatomy follows the DMAG workspace explorer: kind icon (or thumbnail) · name · size, folders first, single click on a folder navigates, hover reveals delete. */ #nodes .sp-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; } #nodes .sp-path { flex: 1; min-width: 0; font-size: 11px; font-weight: 700; letter-spacing: .01em; color: var(--text); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .sp-ico { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--border); background: var(--hover); color: var(--text); cursor: pointer; padding: 0; } #nodes .sp-ico:hover { border-color: var(--accent); color: var(--accent); } #nodes .sp-ico[disabled] { opacity: .3; cursor: default; } #nodes .sp-ico.ok { color: #16a34a; border-color: rgba(22,163,74,.5); } #nodes .sp-new { flex: 1; min-width: 0; border-radius: 7px; border: 1px solid var(--accent); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 12px; padding: 5px 8px; outline: none; } #nodes .sp-list { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); padding: 3px; } #nodes .sp-row { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 7px; cursor: pointer; user-select: none; } #nodes .sp-row:hover { background: var(--panel, rgba(128,128,160,.12)); } #nodes .sp-row.picked { background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: inset 0 0 0 1px var(--accent); } #nodes .sp-ic { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; color: var(--accent); opacity: .85; } #nodes .sp-ic.th { border-radius: 5px; overflow: hidden; background: rgba(128,128,160,.16); } #nodes .sp-ic.th img { width: 22px; height: 22px; object-fit: cover; display: block; } #nodes .sp-nm { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .sp-row.dir .sp-nm { font-weight: 700; } #nodes .sp-sz { flex: 0 0 auto; font-size: 9.5px; opacity: .45; color: var(--text); font-variant-numeric: tabular-nums; } #nodes .sp-x { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text); opacity: 0; border-radius: 6px; cursor: pointer; padding: 0; } #nodes .sp-row:hover .sp-x { opacity: .5; } #nodes .sp-x:hover { opacity: 1 !important; color: #e0574a; background: rgba(224,87,74,.14); } #nodes .sp-x.arm { opacity: 1 !important; color: #fff; background: #e0574a; } #nodes .sp-msg { padding: 14px 10px; font-size: 11px; line-height: 1.55; opacity: .55; color: var(--text); text-align: center; } #nodes .sp-msg.err { color: #ff8f80; opacity: 1; } #nodes .sp-foot { flex: 0 0 auto; font-size: 9.5px; opacity: .5; color: var(--text); } /* ── Folder + Zip: the tree of references ── */ #nodes .fo-name { font-weight: 700; } #nodes .fo-tree { padding: 4px; } #nodes .fo-d > summary { list-style: none; } #nodes .fo-d > summary::-webkit-details-marker { display: none; } #nodes .fo-car { flex: 0 0 auto; width: 10px; font-style: normal; font-size: 10px; opacity: .55; color: var(--text); transition: transform .12s; } #nodes .fo-d[open] > summary .fo-car { transform: rotate(90deg); } #nodes .fo-kids { margin-inline-start: 13px; padding-inline-start: 4px; border-inline-start: 1px dashed var(--border); } #nodes .fo-f .sp-sz.v { color: #7C5CFF; opacity: .85; } #nodes .zp-btns { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; } #nodes .nbtn[disabled] { opacity: .45; cursor: default; filter: none; } .nd-light .nl-pre { margin: 0 auto; max-width: min(900px, 92vw); max-height: 82vh; overflow: auto; white-space: pre-wrap; word-break: break-word; background: #12122a; color: #EDEDF7; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 18px 22px; font: 12.5px/1.55 ui-monospace, Consolas, monospace; } #nodes .nbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 8px; padding: 6px 10px; font-family: var(--font); font-size: 11.5px; font-weight: 700; cursor: pointer; color: #fff; background: linear-gradient(100deg, #0EA5E9, #22D3EE); } #nodes .nbtn:hover { filter: brightness(1.1); } #nodes .nbtn.ghost { background: var(--hover); color: var(--text); border: 1px solid var(--border); } /* Files node — the ComfyUI-style loader preview */ #nodes .fl-grid { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-auto-rows: max-content; gap: 6px; align-content: start; } #nodes .fl-tile { position: relative; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--hover); cursor: pointer; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } #nodes .fl-tile:hover { border-color: var(--accent); } #nodes .fl-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #nodes .fl-ic { color: var(--accent); opacity: .8; } #nodes .fl-nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 5px; font-size: 8.5px; line-height: 1.3; color: #fff; background: linear-gradient(transparent, rgba(8,10,20,.82) 45%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .fl-tile .fl-x { position: absolute; top: 3px; right: 3px; width: 17px; height: 17px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(8,10,20,.6); color: #fff; cursor: pointer; opacity: 0; padding: 0; } #nodes .fl-tile:hover .fl-x { opacity: 1; } #nodes .fl-ok, #nodes .fl-err { position: absolute; top: 3px; left: 3px; font-style: normal; font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 5px; background: rgba(22,163,74,.9); color: #fff; } #nodes .fl-err { background: rgba(224,87,74,.95); } /* the space file picker (Files node → Add from space) */ .nd-fpick { position: fixed; inset: 0; z-index: 220; background: rgba(6,9,18,.55); } /* the picker is a window: placed and sized by the script (left/top/width/ height inline), dragged by its title and resized by its corner */ .nd-fpick .fp-card { position: absolute; display: flex; flex-direction: column; border-radius: 16px; padding: 14px; gap: 10px; box-sizing: border-box; } .nd-fpick .fp-head { cursor: move; user-select: none; } .nd-fpick .fp-grip { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; display: grid; place-items: center; color: var(--muted, #64748b); cursor: nwse-resize; opacity: .7; } .nd-fpick .fp-grip:hover { opacity: 1; color: var(--accent, #0EA5E9); } /* while the window moves, the live previews must not catch the pointer */ .nd-fpick.moving .fp-card { user-select: none; } .nd-fpick.moving .fp-list { pointer-events: none; } /* full screen: forty photographs of the same street need the whole window */ .nd-fpick .fp-card.full { left: 1vw; top: 2vh; width: 98vw; height: 96vh; } .nd-fpick .fp-card.full .fp-grip { display: none; } /* a document's tile: its first lines as a small page, the kind mark in the corner */ .nd-fpick .fp-doc { position: absolute; inset: 0; overflow: hidden; background: var(--bg, #fff); } .nd-fpick .fp-doc pre { margin: 0; padding: 9px 10px; font: 500 8.5px/1.45 var(--mono, ui-monospace, monospace); color: var(--text); opacity: .78; white-space: pre-wrap; word-break: break-word; overflow: hidden; height: 100%; box-sizing: border-box; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); } .nd-fpick .fp-doc i { position: absolute; inset-inline-start: 6px; bottom: 5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--hover); color: var(--muted, #64748b); } .nd-fpick .fp-doc:not(.has) pre { display: none; } .nd-fpick .fp-doc:not(.has) i { inset: auto; inset-inline-start: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; background: transparent; } .nd-fpick .fp-doc:not(.has) i svg { width: 26px; height: 26px; } .nd-fpick .fp-doc.web iframe { position: absolute; left: 0; top: 0; width: 400%; height: 400%; transform: scale(.25); transform-origin: 0 0; border: 0; pointer-events: none; background: #fff; } .nd-fpick .fp-size { width: 92px; accent-color: var(--accent, #0EA5E9); cursor: pointer; } /* the grid: one tile per file, sized by the slider */ .nd-fpick .fp-list.grid { display: grid; gap: 9px; padding: 9px; grid-template-columns: repeat(auto-fill, minmax(var(--fp-th, 132px), 1fr)); align-content: start; } .nd-fpick .fp-list.grid .sp-msg { grid-column: 1 / -1; } .nd-fpick .fp-tile { border: 1px solid var(--border); border-radius: 10px; background: var(--bg, #fff); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; } .nd-fpick .fp-tile:hover { border-color: var(--accent, #0EA5E9); } .nd-fpick .fp-tile.on { border-color: var(--accent, #0EA5E9); box-shadow: 0 0 0 2px rgba(14,165,233,.28); } .nd-fpick .fp-th { position: relative; height: var(--fp-th, 132px); display: grid; place-items: center; background: var(--hover); color: var(--muted, #64748b); } .nd-fpick .fp-th img { width: 100%; height: 100%; object-fit: cover; display: block; } .nd-fpick .fp-tick { position: absolute; inset-inline-end: 5px; top: 5px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px; background: var(--accent, #0EA5E9); color: #fff; } .nd-fpick .fp-cap { padding: 5px 7px; font-size: 11px; line-height: 1.3; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nd-fpick .fp-tile.dir .fp-th { height: calc(var(--fp-th, 132px) * .6); } .nd-fpick .fp-head { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); } .nd-fpick .fp-head b { flex: 1; } .nd-fpick .fp-bar { display: flex; align-items: center; gap: 5px; } /* barHTML() emits .sp-bar; its flex rule is scoped to #nodes, so the modal must re-declare it or the toolbar stacks vertically */ .nd-fpick .sp-bar { flex: 1; display: flex; align-items: center; gap: 6px; } .nd-fpick .fp-list { flex: 1; min-height: 160px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--hover); padding: 4px; } .nd-fpick .fp-foot { display: flex; align-items: center; gap: 10px; } .nd-fpick .fp-n { flex: 1; font-size: 11px; opacity: .55; color: var(--text); } .nd-fpick .sp-bar, .nd-fpick .sp-row, .nd-fpick .sp-ic, .nd-fpick .sp-nm, .nd-fpick .sp-sz, .nd-fpick .sp-msg, .nd-fpick .sp-path, .nd-fpick .sp-ico, .nd-fpick .nbtn { font-family: var(--font); } .nd-fpick .sp-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--text); } .nd-fpick .sp-row:hover { background: rgba(128,128,160,.14); } .nd-fpick .sp-row.picked { background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: inset 0 0 0 1px var(--accent); } .nd-fpick .sp-ic { width: 24px; height: 24px; display: grid; place-items: center; color: var(--accent); } .nd-fpick .sp-ic.th { border-radius: 6px; overflow: hidden; } .nd-fpick .sp-ic.th img { width: 24px; height: 24px; object-fit: cover; display: block; } .nd-fpick .sp-nm { flex: 1; min-width: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nd-fpick .sp-row.dir .sp-nm { font-weight: 700; } .nd-fpick .sp-sz { font-size: 10px; opacity: .45; } .nd-fpick .sp-ico { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--border); background: var(--hover); color: var(--text); cursor: pointer; padding: 0; } .nd-fpick .sp-path { flex: 1; font-size: 12px; font-weight: 700; opacity: .8; color: var(--text); } .nd-fpick .sp-msg { padding: 20px; text-align: center; font-size: 12px; opacity: .55; color: var(--text); } .nd-fpick .nbtn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: #fff; background: linear-gradient(100deg, #0EA5E9, #22D3EE); } .nd-fpick .nbtn.ghost { background: var(--hover); color: var(--text); border: 1px solid var(--border); } /* full-size preview for one file (image or PDF) */ .nd-light { position: fixed; inset: 0; z-index: 240; background: rgba(6,9,18,.9); display: flex; flex-direction: column; } .nd-light .nl-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #e8ecf6; font-size: 13px; } .nd-light .nl-bar span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nd-light .nl-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #e8ecf6; cursor: pointer; padding: 0; text-decoration: none; } .nd-light .nl-ico:hover { background: rgba(255,255,255,.18); } .nd-light .nl-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 16px 16px; } .nd-light .nl-body img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; } .nd-light .nl-body iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; background: #fff; } /* the pro image viewer: wheel zoom at the cursor, drag pan, fit / 1:1 */ .nd-light .nl-zoom { position: relative; width: 100%; height: 100%; overflow: hidden; cursor: grab; touch-action: none; user-select: none; border-radius: 8px; } .nd-light .nl-zoom:active { cursor: grabbing; } .nd-light .nl-zoom img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; object-fit: none; transform-origin: center center; will-change: transform; border-radius: 0; pointer-events: none; } .nd-light .nl-pct { min-width: 46px; text-align: center; font-size: 11.5px; font-style: normal; color: #cbd5e1; } .nd-light .nl-ico[data-z-1] { width: auto; padding: 0 8px; font-size: 11px; } /* walking a set: big side arrows + ← → keys */ .nd-light .nl-body { position: relative; } .nd-light .nl-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); background: rgba(10,14,28,.55); color: #fff; font-size: 30px; line-height: 1; border-radius: 12px; cursor: pointer; z-index: 3; padding: 0 0 6px; } .nd-light .nl-nav:hover { background: rgba(255,255,255,.22); } .nd-light .nl-nav.prev { left: 22px; } .nd-light .nl-nav.next { right: 22px; } .nd-light .nl-count { letter-spacing: .04em; } /* ── CNVA Flow: the render nodes (ComfyUI · Image AI · Image) ───────────── A prompt that has already been rendered on this board turns BLUE — pressing Render then returns the stored picture instantly instead of spending the GPU or the subscription again. The ↻ button renders anyway. */ #nodes .nta.prompt { flex: 0 0 auto; min-height: 54px; max-height: 90px; } #nodes .nta.prompt.cached { color: #3B9DFF; font-weight: 600; } #nodes .nta.prompt.cached::placeholder { color: #3B9DFF; opacity: .5; } #nodes .nta.neg { flex: 0 0 auto; min-height: 34px; max-height: 52px; font-size: 11px; opacity: .85; } #nodes .rn-row { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } #nodes .nbtn.run { flex: 1; justify-content: center; background: linear-gradient(100deg, #F43F5E, #FB923C); } #nodes .rn-grid { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } #nodes .rn-grid.two { grid-template-columns: 1fr 1fr; } #nodes .rn-num { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #nodes .rn-num span { font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; opacity: .5; color: var(--text); } #nodes .rn-num input { width: 100%; box-sizing: border-box; border-radius: 7px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 11px; padding: 4px 6px; outline: none; } #nodes .rn-num input:focus { border-color: var(--accent); } #nodes .rn-num .nsel { font-size: 11px; padding: 4px 6px; } #nodes .rn-out { flex: 1 1 auto; min-height: 120px; position: relative; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); overflow: hidden; } #nodes .rn-out img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; display: block; } #nodes .rn-out.empty { flex-direction: column; gap: 8px; font-size: 11px; opacity: .45; color: var(--text); text-align: center; padding: 10px; } #nodes .rn-out.empty.drop { border-style: dashed; display: flex; align-items: center; justify-content: center; } #nodes .rn-out.busy { gap: 8px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: var(--accent); } #nodes .rn-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); border-top-color: var(--accent); animation: rn-spin .8s linear infinite; } @keyframes rn-spin { to { transform: rotate(360deg); } } #nodes .rn-out .rn-cache { position: absolute; top: 5px; left: 5px; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: rgba(59,157,255,.92); color: #fff; } #nodes .rn-out .fl-x { position: absolute; top: 5px; right: 5px; width: 19px; height: 19px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(8,10,20,.6); color: #fff; cursor: pointer; opacity: 0; padding: 0; } #nodes .rn-out:hover .fl-x { opacity: 1; } /* Dock toggle — collapse a finished render node to just its picture. Sits bottom-right of the image, appears on hover (always visible while docked, so there is a way back). */ #nodes .rn-dock { position: absolute; bottom: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 7px; background: rgba(8,10,20,.62); backdrop-filter: blur(3px); color: #fff; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; z-index: 3; } #nodes .rn-out:hover .rn-dock { opacity: 1; } #nodes .rn-dock:hover { background: rgba(124,92,255,.85); } /* docked: the picture is the whole body, so let it fill the card */ #nodes .nbody.docked { padding: 0; gap: 0; } #nodes .nbody.docked .rn-out { border: 0; border-radius: 0 0 11px 11px; } #nodes .nbody.docked .rn-dock { opacity: .55; } #nodes .nbody.docked .nfoot { display: none; } /* one-click briefs on the Edit node */ #nodes .rn-row.wrap { display: flex; flex-wrap: wrap; gap: 4px; flex: 0 0 auto; } #nodes .nchip { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-size: 10.5px; font-weight: 700; cursor: pointer; } #nodes .nchip:hover { border-color: var(--accent); color: var(--accent); } #nodes .nchip.on { border-color: #D946EF; color: #D946EF; background: rgba(217,70,239,.12); } #nodes .nchip.ghost { padding: 3px 6px; opacity: .6; display: inline-flex; align-items: center; } /* ── Viz Maker: reference slots + the ref1/ref2 list of the Video card ── */ #nodes .rn-grid.three { grid-template-columns: 1fr 1fr 1fr; } #nodes .viz-refs { flex: 0 0 auto; display: grid; grid-template-columns: 1fr; gap: 5px; } #nodes .viz-refs.two { grid-template-columns: 1fr 1fr; } #nodes .viz-slot { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); overflow: hidden; } #nodes .viz-slot img { flex: 0 0 auto; width: 56px; height: 40px; object-fit: cover; border-radius: 5px; cursor: zoom-in; } #nodes .viz-slot b { flex: 0 0 auto; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #D946EF; } #nodes .viz-slot span { flex: 1 1 auto; min-width: 0; font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .viz-slot.empty { border-style: dashed; } #nodes .viz-slot.empty span { white-space: normal; line-height: 1.3; } #nodes .viz-reflist { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 5px; } #nodes .viz-ref { position: relative; width: 72px; height: 52px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--hover); } #nodes .viz-ref img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; } #nodes .viz-ref b { position: absolute; left: 3px; bottom: 3px; padding: 1px 5px; border-radius: 5px; background: rgba(217,70,239,.92); color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .03em; } #nodes .rn-out.clip { background: #000; } #nodes .rn-out.clip video { width: 100%; height: 100%; object-fit: contain; display: block; } #nodes .nfoot a { color: var(--accent); text-decoration: none; } #nodes .rn-note { flex: 0 0 auto; font-size: 9.5px; line-height: 1.4; } #nodes .rn-note.ok { opacity: .45; color: var(--text); } #nodes .rn-note.bad { color: #ffab52; } /* image-source line: which route + billing, always visible */ #nodes .rn-src { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 9.5px; color: var(--muted); line-height: 1.35; } #nodes .rn-src span { min-width: 0; } #nodes .rn-src em { font-style: normal; opacity: .6; } #nodes .rn-bill { flex: 0 0 auto; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; font-size: 8.5px; padding: 2px 6px; border-radius: 6px; color: #fff; } /* prompt driven by a wired input — read-only preview of what will be sent */ #nodes .nta.prompt.wired { flex: 0 0 auto; max-height: 132px; display: block; position: relative; overflow: auto; white-space: pre-wrap; word-break: break-word; color: var(--text); opacity: .92; border-style: dashed; border-color: var(--accent); padding-top: 20px; } #nodes .nta.prompt.wired .wired-tag { position: absolute; top: 3px; left: 7px; display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); } #nodes .nta.prompt.wired .wired-tag i { display: inline-flex; } /* copy button — top-right of any text-bearing area */ /* The prompt hugs its text (JS auto-grows the textarea up to a cap) so the RENDER gets every spare pixel — a one-line prompt must not reserve half the node and leave dead padding under the picture. */ #nodes .nta-wrap { position: relative; flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; } #nodes .nta-wrap > .nta.prompt { flex: 0 0 auto; min-height: 34px; max-height: 132px; overflow-y: auto; resize: none; } #nodes .nout, #nodes .nout.big { position: relative; } #nodes .nd-copy { position: absolute; top: 5px; right: 5px; z-index: 4; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb, var(--hover) 84%, transparent); backdrop-filter: blur(3px); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, border-color .12s; } #nodes .nta-wrap:hover .nd-copy, #nodes .nout:hover .nd-copy { opacity: 1; } #nodes .nd-copy:hover { color: var(--accent); border-color: var(--accent); } #nodes .nd-copy.done { color: #16a34a; border-color: rgba(22,163,74,.55); opacity: 1; } /* OS drag-and-drop target */ #nodes .nbody.drop-on { outline: 2px dashed var(--accent); outline-offset: -3px; border-radius: 9px; } /* ── CNVA Flow: the Skill stack ─────────────────────────────────────────── The DMAG Skill Hub on the canvas. The stack is ordered, because the agent is told to apply the skills in the order shown. */ #nodes .sk-stack { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; max-height: 120px; overflow: auto; } #nodes .sk-chip { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } #nodes .sk-chip b { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center; font-size: 9px; background: var(--accent); color: #fff; } #nodes .sk-chip span { flex: 1; min-width: 0; font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .sk-chip button { flex: 0 0 auto; width: 17px; height: 17px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text); opacity: .5; border-radius: 5px; cursor: pointer; padding: 0; } #nodes .sk-chip button:hover { opacity: 1; background: rgba(128,128,160,.22); } #nodes .sk-q { flex: 0 0 auto; width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 11.5px; padding: 6px 9px; outline: none; } #nodes .sk-q:focus { border-color: var(--accent); } #nodes .sk-list { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); padding: 3px; } #nodes .sk-row { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 7px; cursor: pointer; } #nodes .sk-row:hover { background: rgba(128,128,160,.14); } #nodes .sk-row.on { background: color-mix(in srgb, var(--accent) 18%, transparent); } #nodes .sk-tick { flex: 0 0 auto; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 5px; border: 1.4px solid var(--border); color: var(--accent); } #nodes .sk-row.on .sk-tick { border-color: var(--accent); } #nodes .sk-nm { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .sk-own { flex: 0 0 auto; font-style: normal; font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); opacity: .8; } /* node picker (toolbar / double-click on a flow board) */ .nd-picker { position: fixed; z-index: 210; width: 268px; max-height: 60vh; display: flex; flex-direction: column; border-radius: 14px; padding: 10px; } .nd-picker .ndp-q { width: 100%; box-sizing: border-box; border-radius: 9px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 12.5px; padding: 7px 10px; outline: none; margin-bottom: 8px; } .nd-picker .ndp-q:focus { border-color: var(--accent); } /* "used here" — shade what this space has already reached for */ /* the two view toggles sit on ONE row: the picker is a column, so a button dropped straight into it stretches the full width and reads as a menu item */ .nd-picker .ndp-bar { display: flex; align-items: center; gap: 6px; margin: -3px 0 7px; } .nd-picker .ndp-used { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 10.5px; padding: 4px 9px; border-radius: 999px; cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--muted, #64748b); } .nd-picker .ndp-used:hover { color: var(--accent); border-color: var(--accent); } .nd-picker .ndp-used.on { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--text); } /* the other way to reach the same cards — it sits beside the shading toggle because both are about how you LOOK at the list, not what is in it */ .nd-picker .ndp-mode { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto; font: inherit; font-size: 10.5px; padding: 4px 9px; border-radius: 999px; cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--muted, #64748b); } .nd-picker .ndp-mode:hover { color: var(--accent); border-color: var(--accent); } .nd-picker .ndp-cat.used, .nd-picker .ndp-item.used, .nd-picker-sub .ndp-item.used { background: color-mix(in srgb, var(--pc, #7C5CFF) 13%, transparent); box-shadow: inset 2px 0 0 var(--pc, #7C5CFF); } .nd-picker .ndp-cat.used:hover, .nd-picker .ndp-item.used:hover, .nd-picker-sub .ndp-item.used:hover { background: color-mix(in srgb, var(--pc, #7C5CFF) 22%, transparent); } .nd-picker .ndp-n, .nd-picker-sub .ndp-n { font-style: normal; font-size: 9.5px; font-weight: 700; min-width: 15px; text-align: center; padding: 1px 5px; border-radius: 999px; color: #fff; background: var(--pc, #7C5CFF); opacity: .9; } .nd-picker .ndp-list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 3px; } .nd-picker .ndp-list button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; border: 0; background: transparent; color: var(--text); font-family: var(--font); font-size: 12.5px; border-radius: 9px; padding: 7px 9px; cursor: pointer; } .nd-picker .ndp-list button:hover { background: var(--hover); } .nd-picker .ndp-list button i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; background: var(--pc); } .nd-picker .ndp-list button span { flex: 1; font-weight: 600; } .nd-picker .ndp-list button em { font-style: normal; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; opacity: .45; } /* ── categorized node picker (ComfyUI-style: category rows → right flyout) ── */ .nd-picker .ndp-cats, .nd-picker .ndp-results { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 3px; } .nd-picker .ndp-cat { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; border: 0; background: transparent; color: var(--text); font-family: var(--font); font-size: 12.5px; font-weight: 600; border-radius: 9px; padding: 8px 10px; cursor: pointer; } .nd-picker .ndp-cat:hover, .nd-picker .ndp-cat.active { background: var(--hover); } .nd-picker .ndp-cat .sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; } .nd-picker .ndp-cat i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; color: #fff; background: var(--pc); } .nd-picker .ndp-cat span { flex: 1; } .nd-picker .ndp-cat em { font-style: normal; font-size: 10px; opacity: .4; } .nd-picker .ndp-cat .arw { font-weight: 400; opacity: .4; margin-inline-start: 2px; } .nd-picker .ndp-starter { border-top: 1px solid var(--border); margin-top: 3px; padding-top: 9px; } .nd-picker .ndp-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; border: 0; background: transparent; color: var(--text); font-family: var(--font); font-size: 12.5px; border-radius: 9px; padding: 7px 9px; cursor: pointer; } .nd-picker .ndp-item:hover { background: var(--hover); } .nd-picker .ndp-item i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; background: var(--pc); } .nd-picker .ndp-item span { flex: 1; font-weight: 600; } .nd-picker .ndp-item em { font-style: normal; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; opacity: .45; } .nd-picker .ndp-empty { padding: 12px; opacity: .5; font-size: 12px; } /* the flyout submenu — a separate fixed element, never clipped */ .nd-picker-sub { position: fixed; z-index: 211; min-width: 210px; max-height: 74vh; overflow-y: auto; overflow-x: hidden; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 2px; } .nd-picker-sub .ndp-subhd { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px 4px; } .nd-picker-sub .ndp-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; border: 0; background: transparent; color: var(--text); font-family: var(--font); font-size: 12.5px; border-radius: 9px; padding: 7px 9px; cursor: pointer; } .nd-picker-sub .ndp-item:hover { background: var(--hover); } .nd-picker-sub .ndp-item i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; background: var(--pc); } .nd-picker-sub .ndp-item span { flex: 1; font-weight: 600; } /* widget text preview popover */ .wtext-pop { position: fixed; z-index: 200; width: 350px; max-height: 440px; display: flex; flex-direction: column; border-radius: 14px; padding: 12px 14px; } .wtext-pop pre { flex: 1; min-height: 120px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 11.5px; line-height: 1.55; background: var(--hover); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-family: var(--font); color: var(--text); } .wtext-pop .mrow { display: flex; gap: 6px; justify-content: flex-end; } /* image polygon cutout editor */ .cutout-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; z-index: 55; cursor: crosshair; } .cutout-layer svg { display: block; width: 100%; height: 100%; overflow: visible; } .cut-bar { z-index: 56; } #cursors { position: absolute; inset: 0; pointer-events: none; overflow: clip; z-index: 30; } .rcursor { position: absolute; z-index: 60; transition: transform .07s linear; will-change: transform; } .rcursor svg { display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); } .rcursor .tag { margin: 2px 0 0 12px; padding: 3px 8px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; width: max-content; } .rcursor.ai-cursor .tag { display: inline-flex; align-items: center; gap: 5px; } .rcursor.ai-cursor .tag img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; } @media (prefers-reduced-motion: reduce) { .rcursor.ai-cursor { transition: none !important; animation: none !important; } } .board-top { position: absolute; top: var(--topy); inset-inline-start: var(--topy); inset-inline-end: var(--topy); z-index: 40; height: var(--toph); display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 13px; } .board-top .btn { padding: 7px 12px; font-size: 13px; } .board-top .btn.icon { padding: 7px 9px; font-size: 14px; } /* A PICTURE WITH NO SIZE DRAWS NOTHING USABLE. Most of this row gets its glyph from I(), which writes width and height onto the tag; one or two are written into the HTML by hand with only a viewBox. This sizes those. */ .board-top .btn.icon svg { width: 17px; height: 17px; display: block; } /* a title-bar switch that is on: the selection bar */ .board-top .btn.on { color: var(--accent); border-color: var(--accent); background: var(--hover); } body.ctx-off #ctxbar { display: none !important; } .board-top .brand img { width: 26px; height: 26px; } .board-top .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); flex: none; } .board-title { background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 6px 9px; font-size: 14px; font-weight: 700; color: var(--text); width: 210px; outline: none; transition: .15s; } .board-title:hover { border-color: var(--border); } .board-title:focus { border-color: var(--accent); background: var(--hover); } /* FIND A WIDGET — type a name, the board goes to it */ .board-find { position: relative; display: flex; align-items: center; gap: 6px; flex: 0 1 260px; min-width: 120px; } .board-find > svg { position: absolute; inset-inline-start: 10px; width: 14px; height: 14px; color: var(--muted, #64748b); pointer-events: none; } .board-find > kbd { position: absolute; inset-inline-end: 9px; font: inherit; font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 5px; background: var(--hover); border: 1px solid var(--border); color: var(--muted, #64748b); pointer-events: none; } .board-find > input { width: 100%; box-sizing: border-box; padding: 6px 30px 6px 30px; background: transparent; border: 1px solid transparent; border-radius: 9px; font-size: 12.5px; color: var(--text); outline: none; transition: .15s; } .board-find > input::placeholder { color: var(--muted, #64748b); } .board-find > input:hover { border-color: var(--border); } .board-find > input:focus { border-color: var(--accent); background: var(--hover); } .board-find > input:focus ~ kbd { opacity: 0; } /* FIND A TAB — the same field, one step to the right, for rooms and groups */ .board-find-tab { flex: 0 1 190px; } .board-find-tab > input { padding-inline-end: 10px; } .find-hits .fh .fh-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--accent)); align-self: center; } .find-hits { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; width: min(380px, 78vw); max-height: 52vh; overflow: auto; z-index: 200; padding: 5px; background: var(--panel-solid, #fff); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 48px rgba(0,0,0,.2); } .find-hits.hidden { display: none; } .find-hits .fh { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: start; font: inherit; font-size: 12px; padding: 6px 9px; border-radius: 8px; cursor: pointer; background: transparent; border: 0; color: var(--text); } .find-hits .fh:hover, .find-hits .fh.on { background: var(--hover); } .find-hits .fh.on { box-shadow: inset 2px 0 0 var(--accent); } .find-hits .fh b { font-weight: 600; white-space: nowrap; } .find-hits .fh span { flex: 1; min-width: 0; font-size: 11px; color: var(--muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .find-hits .fh-foot, .find-hits .fh-none { padding: 6px 9px; font-size: 10.5px; color: var(--muted, #64748b); } .top-right { margin-inline-start: auto; display: flex; align-items: center; gap: 9px; } .presence { display: flex; align-items: center; } .presence .avatar { width: 32px; height: 32px; border: 2.5px solid var(--panel-solid); margin-inline-start: -9px; } .presence .avatar:first-child { margin-inline-start: 0; } /* THE CHROME IS NOT TEXT. Everything that floats over the canvas — the top bar, the chips, the tool palette, the zoom pills, menus and pickers, the ports and labels on the cards — is a control, not a paragraph. Left as text, a selection that started on the empty ground and swept across it painted all of it blue, and Ctrl+A did the same in one go. Fields keep their own selection; they are the only place a caret means something. */ .board-top, .taskbar, .tabbar, .tabmain, .tabtray, .toolbar, .zoombar, .scrim, .dd-menu, .nd-picker, .nd-picker-sub, .nd-picker-shelf, .opt-panel, #nodes .nport, #nodes .nlab, #nodes .nchip, #nodes .nrun, #nodes .nbtn, #nodes .nfoot { user-select: none; -webkit-user-select: none; } input, textarea, [contenteditable="true"] { user-select: text; -webkit-user-select: text; } /* ══ TABS — rooms of one board ══════════════════════════════════════════ The bar itself is transparent: chips float as their own glass pills, so a board with no tabs pays nothing for the feature but a row of empty air. Each chip carries its tab's colour in --tc, the same colour the outline is drawn in out on the canvas, so the chip and the box are recognisably the same thing. */ .taskbar { /* THE BOTTOM EDGE IS A TASKBAR. Main and the board's switches at the left, where the zoom pills used to sit; the tabs kept out of Main — the tools, the working sheets — gather at the right, the way a tray does; the shelf of tabs not yet placed sits between. One row, three zones, each wrapping on its own so a long left never pushes the right off the screen. The row is air: only the chips take the pointer. */ position: absolute; bottom: 0; inset-inline-start: 0; inset-inline-end: 0; padding: 0 8px 4px; z-index: 39; display: flex; align-items: flex-end; gap: 14px; pointer-events: none; } /* the tray and the shelf sit in the middle: Main's zone and an empty one at the right share the rest, so the middle stays centred and the drawer on the right edge can reach all the way down */ .taskbar::after { content: ''; flex: 1 1 0; } .tabmain { flex: 1 1 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; pointer-events: none; } .tabmain > * { pointer-events: auto; } .tabbar { /* THE DRAWER, ON THE RIGHT EDGE — the rooms of the board stand one under another in a panel that slides in from the edge when you reach for its grip and away when you leave it, or stays, pinned. A column, not a row: a board of forty rooms in three levels was a wall of chips wrapping down over the picture; standing, it is an outline you read top to bottom, and it scrolls before it ever covers the work. */ position: absolute; inset-inline-end: 0; top: calc(var(--topy) + var(--toph) + 8px); bottom: 0; z-index: 40; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: var(--tabw, 340px); box-sizing: border-box; padding: 8px 12px 12px 14px; overflow: auto; overscroll-behavior: contain; background: var(--panel, rgba(255,255,255,.8)); backdrop-filter: blur(16px); border: 1px solid var(--border); border-inline-end: 0; border-bottom: 0; border-radius: 14px 0 0 0; box-shadow: -14px 0 40px -22px rgba(0, 0, 0, .5); transform: translateX(calc(100% + 6px)); transition: transform .22s ease; } [dir="rtl"] .tabbar { transform: translateX(calc(-100% - 6px)); } .tabbar.open, .tabbar.pinned, .tabbar.field { transform: none; } .tabbar.sizing { transition: none; } .tabbar:empty { display: none; } /* its edge is a handle: drag it and the drawer is as wide as you want. A sibling, not a child — the drawer scrolls, and a handle inside it would scroll away with the rooms */ .tbar-rs { position: absolute; inset-inline-end: var(--tabw, 340px); top: calc(var(--topy) + var(--toph) + 8px); bottom: 0; width: 9px; margin-inline-end: -4px; z-index: 40; cursor: ew-resize; display: none; } .tbar-rs::after { content: ''; position: absolute; inset-inline-start: 3px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--accent); opacity: 0; transition: opacity .15s; } .tbar-rs:hover::after, .tabbar.sizing ~ .tbar-rs::after { opacity: .8; } .tabbar.open ~ .tbar-rs, .tabbar.pinned ~ .tbar-rs, .tabbar.field ~ .tbar-rs { display: block; } .tabbar:empty ~ .tbar-rs { display: none; } /* the head: how many, and the pin */ .tbar-head { align-self: stretch; display: flex; align-items: center; gap: 8px; margin-bottom: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .tbar-head b { display: inline-flex; align-items: center; gap: 5px; flex: 1; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .tbar-head b svg { width: 13px; height: 13px; } .tbar-head b i { font-style: normal; opacity: .6; letter-spacing: 0; } .tpin { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; transition: .14s; } .tpin svg, .tslim svg { width: 13px; height: 13px; } .tpin:hover, .tslim:hover { color: var(--text); background: var(--hover); } .tpin.on, .tslim.on { color: var(--accent); border-color: var(--accent); } /* ── SLIM: THE DRAWER AS AN INDEX OF GROUPS ── Only the group chips stand in the drawer, as narrow as their names; reach for one and its rooms come out beside it, to the left, as a line of columns — one per sub-group, its rooms under its name — the fan's spread laid flat. The full outline is one click of the head. */ /* SLIM CHANGES WHAT IS IN THE DRAWER, NOT HOW WIDE IT IS. It sized itself to its contents, so putting the searches in stretched it to whatever the widest field wanted — nearly half the screen. It takes the width you set, the same one the normal view uses, and the edge you drag sets it. */ .tabbar.slim { width: var(--tabw, 340px); max-width: 70vw; } .tabbar.slim .tsubs { display: none; } /* the edge is draggable here too: a fixed-width panel you cannot resize is the one thing worse than one that sizes itself wrongly */ .tabbar.slim.open ~ .tbar-rs, .tabbar.slim.pinned ~ .tbar-rs, .tabbar.slim.field ~ .tbar-rs { display: block; } .tabbar.slim.open ~ .tabgrip, .tabbar.slim.pinned ~ .tabgrip, .tabbar.slim.field ~ .tabgrip { inset-inline-end: var(--tabw, 340px); } .tfly { position: fixed; z-index: 44; padding: 8px 10px; border-radius: 12px; max-width: min(72vw, 980px); box-shadow: 0 16px 40px rgba(0, 0, 0, .2); animation: tfly-in .16s cubic-bezier(.2, .8, .3, 1); } .tfly.still { animation: none; } /* back out after a rebuild: no second entrance */ @keyframes tfly-in { from { opacity: 0; transform: translateX(10px); } } [dir="rtl"] .tfly { animation-name: tfly-in-rtl; } @keyframes tfly-in-rtl { from { opacity: 0; transform: translateX(-10px); } } .tfly .tsubs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; padding: 0; width: auto; } .tfly .trow { display: flex; flex-direction: column; align-items: stretch; gap: 3px; } .tfly .tkin { display: flex; flex-direction: column; align-items: stretch; gap: 3px; } .tfly .tsub { text-align: start; } /* THE GRIP: the drawer's toggle, standing on the edge — on the screen's edge while the drawer is away, on the drawer's edge while it is out, riding with it. A chevron that points the way it will go, the count, and the room you are standing in written down its length in the room's own colour — so where you are is never lost with the drawer. Click opens and keeps, or closes; hover only looks. */ .tabgrip { position: absolute; inset-inline-end: 0; top: calc(var(--topy) + var(--toph) + 8px); z-index: 41; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 30px; max-height: min(46vh, 380px); padding: 9px 0 11px; box-sizing: border-box; border: 1px solid var(--border); border-inline-end: 0; border-radius: 12px 0 0 12px; background: var(--panel, rgba(255,255,255,.8)); backdrop-filter: blur(10px); color: var(--muted); cursor: pointer; transition: inset-inline-end .22s ease, color .16s, border-color .16s; font-family: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: -10px 0 26px -16px rgba(0, 0, 0, .45); } .tabgrip .chev { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 6px; background: var(--hover); transition: transform .22s; } .tabgrip .chev svg { width: 13px; height: 13px; transform: rotate(180deg); } .tabgrip span, .tabgrip u { writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; } .tabgrip u { text-decoration: none; text-transform: none; letter-spacing: .02em; font-weight: 700; color: var(--tc, var(--accent)); padding-top: 8px; border-top: 1px solid var(--border); min-height: 0; overflow: hidden; text-overflow: ellipsis; } .tabgrip:hover, .tabgrip.on { color: var(--text); border-color: var(--accent); } .tabgrip.on .chev { background: var(--accent); color: #fff; } /* out: the grip rides on the drawer's outer edge, its chevron turned to close */ .tabbar.open ~ .tabgrip, .tabbar.pinned ~ .tabgrip, .tabbar.field ~ .tabgrip { inset-inline-end: var(--tabw, 340px); } .tabbar.open ~ .tabgrip .chev svg, .tabbar.pinned ~ .tabgrip .chev svg, .tabbar.field ~ .tabgrip .chev svg { transform: none; } .tabbar.sizing ~ .tabgrip { transition: none; } .tabtray { flex: 0 1 auto; display: flex; align-items: flex-end; justify-content: center; gap: 7px; flex-wrap: wrap; pointer-events: none; } .tabtray > * { pointer-events: auto; } .tabtray:empty { display: none; } .tabtray .ttray-lb { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-inline-end: 2px; pointer-events: none; } .tabtray .ttray-lb svg { width: 13px; height: 13px; } /* the tray holds the TOOLS — a chip is here because its category is marked as one, not because of its state, so it wears shown / disabled / hidden exactly as it would in the row above */ .tchip, .tadd, .tput, .tall, .tgone { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600; letter-spacing: .1px; color: var(--muted); background: var(--panel, rgba(255,255,255,.72)); border: 1px solid var(--border); backdrop-filter: blur(10px); transition: .14s; white-space: nowrap; } .tadd { padding: 0 9px; } /* the board's switches beside Main — show, disable, hide, hide completely, every tab at once — and the + for a new tab. One pill of icons; the state the whole board already answers to is lit */ .tctl { display: inline-flex; align-items: center; gap: 1px; height: 30px; padding: 0 3px; border-radius: 999px; background: var(--panel, rgba(255,255,255,.72)); border: 1px solid var(--border); backdrop-filter: blur(10px); } .tctl button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; border: 0; border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; transition: .14s; } .tctl button svg { width: 15px; height: 15px; opacity: .8; } .tctl button:hover { color: var(--text); background: var(--hover); border-color: transparent; } .tctl button.on { color: var(--accent); } .tctl button.on svg { opacity: 1; } .tctl .tadd { border-radius: 999px 0 0 999px; width: 29px; } .tctl .tst + .tadd { margin-inline-start: 3px; border-inline-start: 1px solid var(--border); border-radius: 0; width: 29px; } /* the cube beside the plus: a new tab that is a world, not a page */ .tctl .tadd3 { border-inline-start: 1px solid var(--border); border-radius: 0 999px 999px 0; width: 29px; } /* a chip whose room is a world says so before its name */ .tchip .t3d, .tsub .t3d { display: inline-flex; margin-inline-end: -3px; opacity: .9; } .tchip .t3d svg { width: 12px; height: 12px; } .tsub .t3d { margin-inline-end: 1px; vertical-align: -1px; } .tsub .t3d svg { width: 9px; height: 9px; } .tchip svg, .tadd svg, .tput svg, .tall svg, .tgone svg { width: 15px; height: 15px; opacity: .8; } .tchip:hover, .tadd:hover, .tput:hover, .tall:hover { color: var(--text); border-color: var(--accent); } .tchip s { /* the tab's own colour, and its switch */ width: 9px; height: 9px; border-radius: 50%; background: var(--tc, #7C5CFF); text-decoration: none; flex: none; cursor: pointer; transition: .13s; box-shadow: 0 0 0 0 var(--tc); } .tchip s:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 28%, transparent); } /* OFF IN THE ALL VIEW — not deleted, and it must not read as deleted. The dot goes hollow, the chip goes quiet, and the name stays perfectly legible so you can find it and switch it back on. */ /* a wing: one chip standing for several rooms */ .tchip .tcar { width: 13px; height: 13px; opacity: .5; margin-inline-start: -2px; } .tabbar .tchip.t-wing { max-width: 100%; box-sizing: border-box; } .tabbar.slim .tchip.t-wing { max-width: 250px; } /* WHERE YOU STAND: its own pill under the group's chip, a little in from it, in the group's colour. It was a second line inside the chip, and one frame round both read as one long button; two things you can press are drawn as two. It wraps as it must; the column grows down, never out. */ .tchip.t-here { height: auto; min-height: 24px; padding: 3px 10px 3px 8px; margin-inline-start: 14px; max-width: calc(100% - 14px); box-sizing: border-box; gap: 6px; font-size: 11px; font-weight: 700; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; text-align: start; color: var(--tc); border-color: color-mix(in srgb, var(--tc) 55%, transparent); } .tchip.t-here::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--tc); flex: none; } .tchip.t-here:hover { color: var(--text); border-color: var(--tc); } .tabbar.slim .tchip.t-here { max-width: 236px; } /* some of the wing off, but not all — the dot says half */ .tchip.half s { background: linear-gradient(90deg, var(--tc) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--tc); } /* ── THE STRUCTURE UNDER THE CHIP ── A wing chip's rooms hang from its bottom edge as one row of small tabs in tiny type, stuck to the chip like the tabs of a folder: a group among them marked ›, the room you are in lit in the wing's colour, an off one struck. In the tray, where the chips stand on the bottom edge, they stand up from the top edge instead. */ /* ── THE STRUCTURE UNDER THE CHIP, AS AN OUTLINE ── One row per sub-group, a little in from the chip: its name at the left and its rooms beside it, four to a line, wrapping under themselves when there are more. The names stand in one column and the rooms in another — subgrid — so the rows of a wing line up, and a wing three levels deep reads top to bottom like an index. A room straight under the wing is a row of one. */ .tabbar .twg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; align-self: stretch; } .twg { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; } .tsubs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 7px; align-items: start; padding-inline-start: 14px; width: 100%; box-sizing: border-box; } .trow { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; } .trow > .tsub { grid-column: 1; } /* rooms straight under a wing: one flat row, wrapping — KANBAN · NOTES side by side, not stacked */ .trow.tflat { display: flex; flex-wrap: wrap; gap: 2px 3px; grid-column: 1 / -1; } .trow.tflat > .tsub { grid-column: auto; } .tsub { height: 17px; padding: 0 7px; /* the whole name: a cut one ("ACCESS & …") is a name you cannot read */ border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; line-height: 15px; color: var(--muted); background: var(--panel, rgba(255,255,255,.72)); backdrop-filter: blur(8px); cursor: pointer; white-space: nowrap; transition: .12s; } .bg-title .bg-th { font-style: normal; font-weight: 500; opacity: .6; margin-inline-start: 6px; } .tsub:hover { color: var(--text); border-color: var(--tc); } /* ── WHERE YOU ARE, SAID WITHOUT MOVING ANYTHING ──────────────────── The outline holds its order now, so being in a room has to be visible from where the room already stands: its own colour, filled, and a touch larger. Scaled from the element rather than by changing its size, so the row it is in does not reflow and its neighbours do not shuffle to make space — the whole point was that nothing moves. */ .tsub.on { color: #fff; background: var(--tc); border-color: var(--tc); box-shadow: 0 0 0 1px var(--tc) inset, 0 2px 10px -2px var(--tc); font-weight: 700; /* NOT scaled. The fill already says which one you are in, and growing it made the row it sits in taller than its neighbours for no extra meaning. */ position: relative; z-index: 2; } .tsub.dim { opacity: .6; } .tsub.off { opacity: .45; text-decoration: line-through; } .tsub-g::after { content: '\203A'; margin-inline-start: 2px; opacity: .6; } /* the head of each column wears the group's colour, filled, white on it — so the level reads at a glance: the names above, the rooms below */ /* A SUB-HOLDER IS A FOLDER TOO. It was a solid coloured chip, which made the second thing in the list that contains nothing the second loudest. */ .tsub-g { background: transparent; border-color: var(--border); color: var(--muted); } .tsub-g:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, transparent); } .tsub-g.on { color: var(--text); font-weight: 700; border-color: color-mix(in srgb, var(--text) 32%, transparent); box-shadow: none; } .tsub-g::after { opacity: .8; } /* in the tray the chip stands on the bottom edge, so its rows stand up from it */ /* ONE ROW. The tools' rooms stood in a column above the TOOLS chip - the drawer's outline turned on its end - which on a taskbar read as a tower. Beside the chip, on the one line the taskbar is. */ .tabtray .twg { flex-direction: row; align-items: center; gap: 6px; } .tabtray .twg .tsubs { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 3px; padding-inline-start: 0; width: auto; } /* `flex-direction` has to be said here: a later rule turns a flat row into a column for the drawer, which is a column — the tray is a line. */ .tabtray .twg .trow, .tabtray .twg .trow.tflat { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 3px; } .tabtray .twg .tkin { flex-direction: row; flex-wrap: nowrap; align-items: center; } .tshelf button.drop { outline: 2px solid var(--accent); outline-offset: 1px; } /* THE ROOMS OF A SUB-GROUP: beside its name, four to a line. Smaller and rounder than the name — a pill within the row — so the two levels do not read as one. A cluster lights with the name it belongs to, which is how three clusters that all begin at 01 stay tellable apart. */ .tkin { display: flex; flex-wrap: wrap; gap: 2px 3px; grid-column: 2; min-width: 0; } .tsub.tleaf { height: 16px; padding: 0 6px; border-radius: 5px; font-size: 9px; line-height: 14px; letter-spacing: .03em; } .tkin.hot .tleaf { border-color: var(--tc); color: var(--text); } /* a small tab carried on the middle button */ .tsub.tsub-d { position: fixed; z-index: 400; pointer-events: none; opacity: .95; transform: translate(-50%, -50%) scale(1.3) rotate(-2deg); border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .55); } .tsub.lift { opacity: .3; } /* along its own row the lifted small tab is the slot: where it will stand */ .tsubs.reord .tsub.lift, .tkin.reord .tsub.lift { opacity: .7; color: transparent; border-style: dashed; border-color: var(--tc); background: transparent; } .tsubs.reord .tsub.lift::after, .tkin.reord .tsub.lift::after { color: transparent; } /* DISABLED — still on the board, plainly set aside. It must not look like HIDDEN, or the two states are one control with an unpredictable result. */ .tchip.dim { opacity: .78; } .tchip.dim s { background: linear-gradient(180deg, var(--tc) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--tc); } /* LOOKING IN — visible, but on a temporary pass rather than because you set it that way. The dashed ring says "this is not your saved state". */ .tchip.peek { opacity: 1; border-style: dashed; border-color: var(--tc); } .tchip.peek s { background: var(--tc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 25%, transparent); } .tchip.off { opacity: .5; } .tchip.off s { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tc); } .tchip.off i { text-decoration: line-through; } .tchip i { font-style: normal; font-size: 11px; opacity: .55; font-weight: 700; } /* NOTHING IN IT YET — grey and quiet, its own colour the moment a card lands. The one you are standing in stays legible: you are about to fill it. */ .tchip.empty { opacity: .5; } .tchip.empty.on { opacity: 1; color: var(--muted); } .tchip.empty s { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tc); } .twg.empty { --tc: #6b6f7b; } .tsub.empty { --tc: #6b6f7b; opacity: .45; } .tsub.empty.on { opacity: .9; } .tchip.on { color: var(--text); border-color: var(--tc, var(--accent)); box-shadow: 0 0 0 1px var(--tc, var(--accent)) inset, 0 4px 18px -6px var(--tc, var(--accent)); } .tchip.on i { opacity: .8; } /* the same emphasis one level up: a main chip you are standing in is lit and a touch larger, scaled from the element so the row does not reflow */ /* A ROOM YOU ARE STANDING IN fills with its own colour. A HOLDER does not: it holds no cards, it has no colour of its own to speak with, and painting it solid made the two things that contain nothing the loudest in the list. */ .tchip.on[data-tab]:not([data-tab=""]):not(.t-wing):not(.t-opt) { background: var(--tc, var(--accent)); color: #fff; font-weight: 700; transform: scale(1.08); transform-origin: center; position: relative; z-index: 2; } /* being IN a folder is said quietly: the name in full ink and a line on the edge, which is enough when nothing else in the list is shouting */ .tchip.t-wing.on, .tchip.t-opt.on { color: var(--text); font-weight: 700; border-color: color-mix(in srgb, var(--text) 32%, transparent); box-shadow: none; } /* FIT: an icon, not a word — it stands beside Main in a row where every other control is already as short as it can be */ /* it wears the chip's look without being one */ .tfit { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 9px; border-radius: 9px; cursor: pointer; font: inherit; color: var(--muted); background: var(--panel); border: 1px solid var(--border); } .tfit:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); } .tfit:disabled { opacity: .35; cursor: default; } /* the two arrows sit tight together — they are one control with two ends */ .tvh { padding: 0 6px; } .tvh + .tvh { margin-inline-start: -5px; } /* ── LIT: you touched this room's name out on the board ── Finding which of thirty chips an outline belongs to is otherwise a matter of reading the bar left to right. The dot pulses and the name glows in the room's own colour, so the answer arrives without being read. It is a pointer, not a state — the next press anywhere puts it out. */ @keyframes tlit { 0%,100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 55%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--tc) 8%, transparent); } } .tchip.lit { opacity: 1; border-color: var(--tc); box-shadow: 0 0 0 1px var(--tc) inset, 0 0 18px -4px var(--tc); } .tchip.lit s { animation: tlit 1.15s ease-in-out infinite; background: var(--tc); } .tchip.lit, .tchip.lit i { color: var(--tc); text-shadow: 0 0 12px var(--tc); } /* the way back out of a room */ .tback { color: var(--text); border-color: var(--accent); font-weight: 700; } .tloose { font-size: 11.5px; line-height: 30px; color: var(--muted); opacity: .7; padding: 0 2px; } /* the way back for cards that are gone from the board: dashed, like the outline they no longer have — and in the brand colour, because a muted number in a row of chips was read as nothing at all */ .tgone { color: var(--accent); border-color: var(--accent); border-style: dashed; gap: 5px; } .tgone svg { opacity: 1; } .tgone:hover { color: #fff; background: var(--accent); border-style: solid; } .tput { color: var(--text); border-color: var(--accent); } .tnew { height: 30px; width: 190px; border-radius: 999px; padding: 0 13px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--panel, rgba(255,255,255,.8)); border: 1px solid var(--accent); outline: none; backdrop-filter: blur(10px); } .tnew.hidden { display: none; } /* ── the fan: the tabs as a ring around a right-click ──────────────────── */ .fan { position: fixed; inset: 0; z-index: 180; } /* the shade the fan stands on: a faint dark disc, even across the circles, fading out over the last 70px, in with the same spring as the pills — a whisper of a dimming, the pills carry their own shadow */ .fan-bg { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); background: radial-gradient(circle closest-side, rgba(9, 11, 24, .22) 0, rgba(9, 11, 24, .22) calc(100% - 70px), rgba(9, 11, 24, 0) 100%); animation: fan-bg .3s cubic-bezier(.2, .8, .3, 1) backwards; transition: width .22s, height .22s; } /* in the dark the board is already night-blue, and a blue shade on it read as grey: there the shade is black, and deep enough to put the board away */ :root[data-theme="dark"] .fan-bg { background: radial-gradient(circle closest-side, rgba(0, 0, 0, .66) 0, rgba(0, 0, 0, .66) calc(100% - 70px), rgba(0, 0, 0, 0) 100%); } @keyframes fan-bg { from { opacity: 0; transform: translate(-50%, -50%) scale(.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .fan-sp { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* spokes and circles in white: they lie on the shade, not on the board */ .fan-l { stroke: var(--text); stroke-opacity: .22; stroke-width: 1; transition: stroke-opacity .15s; } .fan-l.lit { stroke: var(--accent); stroke-opacity: .85; stroke-width: 1.2; } .fan-l.dim { stroke-opacity: .04; } .fan-o { position: absolute; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--accent); transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(108, 92, 231, .5); } .fan-b { position: absolute; height: 27px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--text); background: var(--panel); border: 1px solid var(--border); box-shadow: 0 6px 18px -4px rgba(9, 11, 24, .5), 0 2px 5px rgba(9, 11, 24, .3); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); transform: translate(-50%, -50%); /* backwards, not both: a held end-frame would out-rank .dim's opacity */ animation: fan-in .16s cubic-bezier(.2, .8, .3, 1.2) backwards; transition: opacity .15s, filter .15s, border-color .12s, box-shadow .12s; } @keyframes fan-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.55); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* A PILL IS A LABEL, NOT A SENTENCE. Widget names run to "Material moodboard · flat-lay", and a ring of those needs a radius wider than the screen — so every pill on it ends up clamped to the edge in a pile. Capped here, with the whole name still on the pill's tooltip and in its own card once placed. */ /* the field at the origin: small, out of the way of the ring, and clearly a place to type rather than another pill */ .fan-q { position: absolute; z-index: 3; width: 168px; transform: translate(-50%, 0); padding: 6px 11px; border-radius: 999px; text-align: center; font: inherit; font-size: 12px; color: var(--text); background: var(--panel-solid, var(--panel)); border: 1px solid var(--accent); box-shadow: 0 0 0 3px rgba(108, 92, 231, .16), 0 8px 24px -8px rgba(9, 11, 24, .6); outline: none; } .fan-q::placeholder { color: var(--muted); opacity: .8; } /* A PILL'S WIDTH IS THE FAN'S RADIUS. The circle is the sum of its pills over two pi, so one long name pushes every other pill further from the pointer — "12 PROMPT LIBRARY" with its count is 170px of circumference for a name you recognise from its first eight characters. Generous enough to read, tight enough to matter. */ /* the container is `.fan`, not `#fan` — the first version of this rule matched nothing at all, which is the quiet way a CSS fix reports success */ .fan .fan-b { max-width: 158px; } /* the label is the ; the number and the icon are fixed-width and keep their room, so only the NAME gives way */ .fan .fan-b > i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .fan-q.none { border-color: #E11D2A; box-shadow: 0 0 0 3px rgba(225, 29, 42, .16); } /* what the filter leaves out stays WHERE IT IS and stops answering — moving it would throw away the one thing the fan has over a list */ .fan-b.miss { opacity: .08; filter: grayscale(1); pointer-events: none; } .fan.sifting .fan-l { stroke-opacity: .05; } .fan-b i { font-style: normal; max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fan-b b { font-weight: 500; font-size: 10.5px; color: var(--muted); } /* its place in the ring: the bar's order, ringed in the tab's colour, ahead of the disc — a circle has no left-to-right of its own */ .fan-b em { width: 16px; height: 16px; border-radius: 50%; flex: none; margin-inline-start: -5px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 9.5px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tc, var(--accent)); box-shadow: inset 0 0 0 1.5px var(--tc, var(--accent)); } .fan-b em + s { margin-inline-start: 0; } .fan-b.hid em { opacity: .5; } /* the circle the pills stand on */ .fan-r { fill: none; stroke: var(--text); stroke-opacity: .12; stroke-width: 1; transition: stroke-opacity .15s; } .fan-r.dim { stroke-opacity: .035; } /* THE DISC: the tab's own colour behind its icon, wearing the marks its chip's dot wears — filled shown, faded disabled, hollow hidden, hollow and faint gone, ringed and half-lit for a category that is partly off */ .fan-b s { width: 17px; height: 17px; border-radius: 50%; flex: none; margin-inline-start: -4px; display: inline-flex; align-items: center; justify-content: center; background: var(--tc, var(--accent)); text-decoration: none; transition: .13s; } .fan-b s svg { width: 10px; height: 10px; color: #fff; } .fan-b s.dim { background: color-mix(in srgb, var(--tc) 40%, transparent); } .fan-b s.half { background: color-mix(in srgb, var(--tc) 40%, transparent); box-shadow: inset 0 0 0 1.5px var(--tc); } .fan-b s.off, .fan-b s.gone { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tc); } .fan-b s.gone { opacity: .5; } .fan-b s.off svg, .fan-b s.gone svg { color: var(--tc); } .fan-b:hover { border-color: var(--accent); } .fan-b.cur { color: var(--accent); border-color: var(--accent); } /* filing: what is in hand, at the origin; the rooms it is in now, dashed */ .fan-f { position: absolute; z-index: 2; width: 86px; padding: 4px 6px; border-radius: 10px; transform: translate(-50%, -50%); text-align: center; pointer-events: none; font-size: 10px; line-height: 1.25; color: var(--accent); background: var(--panel); border: 1px solid var(--accent); box-shadow: 0 0 0 3px rgba(108, 92, 231, .15), 0 6px 18px -4px rgba(9, 11, 24, .5); animation: fan-in .16s cubic-bezier(.2, .8, .3, 1.2) backwards; } .fan-f b { display: block; font-weight: 700; font-size: 11px; } .fan.filing .fan-o { display: none; } .fan-b.from { border-style: dashed; border-color: var(--muted); } .fan.filing .fan-b:not(.wing):hover { color: var(--accent); border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108, 92, 231, .2), 0 6px 18px -4px rgba(9, 11, 24, .5); } .fan-b.hid i { opacity: .55; text-decoration: line-through; text-decoration-color: var(--muted); } /* the button whose branches are out: the anchor, lit */ .fan-b.open { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108, 92, 231, .2), 0 0 18px rgba(108, 92, 231, .4), 0 6px 18px -4px rgba(9, 11, 24, .5); } /* ── LEVELS YOU CAN TELL APART AT A GLANCE ────────────────────────── A ring where everything looks alike gives you no way to know, mid-reach, whether the thing under your hand OPENS something or IS the thing. So the ones that open — a category of tabs, a shelf of widgets — are solid in their own colour with white on top, and the leaves stay pale with the colour carried by the disc. Colour means "go in"; pale means "this is it". THE DISC STILL HAS TO SPEAK. On a tab the disc is not decoration: filled is shown, faded is disabled, hollow is hidden, hollow and faint is gone, ringed and half-lit is a category partly off. A coloured disc on a same-coloured pill would be invisible, so on a filled pill the same five marks are made in white instead — the grammar is unchanged, only the ink is. */ .fan-b.wing { background: var(--tc, var(--accent)); border-color: transparent; color: #fff; } .fan-b.wing s { background: rgba(255, 255, 255, .26); } .fan-b.wing s svg { color: #fff; } .fan-b.wing s.dim { background: rgba(255, 255, 255, .13); } .fan-b.wing s.half { background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1.5px #fff; } .fan-b.wing s.off, .fan-b.wing s.gone { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; } .fan-b.wing s.off svg, .fan-b.wing s.gone svg { color: #fff; } .fan-b.wing b { color: rgba(255, 255, 255, .82); } .fan-b.wing em { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); } .fan-b.wing.hid i { text-decoration-color: rgba(255, 255, 255, .8); } .fan-b.wing:hover, .fan-b.wing.open { border-color: #fff; filter: brightness(1.12); } .fan-b.wing.open { color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 0 18px var(--tc), 0 6px 18px -4px rgba(9, 11, 24, .5); } /* a wave behind the one being looked at: whited out, so that only the group in hand reads — the category that opened it and its arc */ .fan-b.dim { opacity: .16; filter: grayscale(1); } .fan-b.dim:hover { opacity: .8; filter: none; } /* a pill carried on the middle button: the ghost under the cursor, the pill it lifted from left faint, the level it is over ringed */ .fan.carrying, .fan.carrying .fan-b { cursor: grabbing; } .fan-b.fan-d { pointer-events: none; z-index: 2; opacity: .95; animation: none; transform: translate(-50%, -50%) scale(1.06) rotate(-1.2deg); border-color: var(--accent); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .6); } .fan-b.lift { opacity: .3; } .fan-b.drop { opacity: 1; filter: none; color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108, 92, 231, .35), 0 0 22px rgba(108, 92, 231, .5), 0 6px 18px -4px rgba(9, 11, 24, .5); } /* the switches under the pill the pointer is on: its chip's four states and the + — the taskbar's row, brought to the hand */ .fan-c { position: absolute; display: inline-flex; align-items: center; gap: 1px; height: 26px; padding: 0 3px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 6px 18px -4px rgba(9, 11, 24, .5), 0 2px 5px rgba(9, 11, 24, .3); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); transform: translate(-50%, 0); animation: fan-in-c .14s cubic-bezier(.2, .8, .3, 1.2) backwards; } @keyframes fan-in-c { from { opacity: 0; transform: translate(-50%, -4px) scale(.7); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } } .fan-c button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; padding: 0; border: 0; border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; transition: .12s; } .fan-c button svg { width: 13px; height: 13px; opacity: .85; } .fan-c button:hover { color: var(--text); background: var(--hover); } .fan-c button.on { color: var(--accent); } .fan-c button.on svg { opacity: 1; } .fan-c .new { margin-inline-start: 3px; border-inline-start: 1px solid var(--border); border-radius: 0 999px 999px 0; width: 27px; } .tabtray .tadd { width: 30px; padding: 0; justify-content: center; } /* ── MIDDLE-DRAG TO REORDER ── The chip is lifted out of the bar and carried under the cursor; the dotted slot is where it will land. Sliding the real chip along the row was legible but never showed a SLOT — the bar just rearranged itself and you inferred the result from what moved. */ .tchip.carried, .twg.carried { position: fixed; z-index: 400; pointer-events: none; cursor: grabbing; opacity: .95; transform: scale(1.04) rotate(-1.2deg); box-shadow: 0 14px 34px -10px rgba(0,0,0,.6); border-color: var(--accent); } .tdrop { flex: none; border-radius: 999px; border: 1.5px dashed var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); animation: tdropin .18s ease-out; } @keyframes tdropin { from { transform: scaleX(.4); opacity: 0; } to { transform: none; opacity: 1; } } .tabbar.reordering .tchip { transition: none; } .tabbar.reordering { cursor: grabbing; } /* over the middle of a group chip the drop goes INTO the group: the chip is ringed and the slot beside it fades */ .tchip.tinto { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108, 92, 231, .3), 0 0 14px rgba(108, 92, 231, .4); } .tabbar.into .tdrop { opacity: .25; } /* The palette's width in ONE place, so everything that has to stand clear of it follows automatically. Two hand-tuned offsets would disagree the first time either was touched, and the way you find out is a control hidden underneath another one. */ /* The frame around the board, in one place. The bar's height and the gap it leaves are read by the tab bar below it and by the fit maths, so trimming here moves everything that has to stand clear of it — there is no second number to remember. */ :root { --tbw: 34px; --tbx: 0px; --topy: 8px; --toph: 44px; --tbh: 32px; } /* THE TOOLS STAND IN A SLIM COLUMN on the left edge, flush with it and centred on its height: one strip of small buttons, its own edge square against the screen's, so it takes as little of the picture as a palette can. The pops (shapes, session widgets) open beside their own button. */ /* THE TOOLS RUN ACROSS THE TOP. Standing on the left edge the palette grew with every tool added until the newest ones were below the fold — a button you cannot see is a button that does not exist, which is exactly what happened to the tab explorer. A row under the nav has the whole width to grow into, and scrolls sideways rather than off the screen. */ .toolbar { position: absolute; top: calc(var(--topy) + var(--toph) + 6px); inset-inline-start: 0; inset-inline-end: calc(var(--rpane, 0px) + 8px); width: fit-content; margin-inline: auto; z-index: 40; display: flex; flex-direction: row; align-items: center; gap: 1px; padding: 2px 5px; border-radius: 12px; height: var(--tbh); box-sizing: border-box; max-width: min(1180px, calc(100% - 24px)); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } /* the band centres itself in both directions; the old mirror-transform was only needed because the bar was pinned by one edge */ .toolbar::-webkit-scrollbar { display: none; } .tool { width: 26px; height: 26px; flex: none; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: .13s; position: relative; } .tool svg { width: 15px; height: 15px; fill: currentColor; } .tool:hover { background: var(--hover); color: var(--text); } .tool.active { background: var(--grad); color: #fff; box-shadow: 0 4px 14px rgba(108, 92, 231, .45); } .tb-sep { width: 1px; height: 16px; flex: none; background: var(--border); margin: 0 4px; } .ai-tool { color: var(--accent-2); } .ai-tool.active, .ai-tool:hover { color: #fff; background: var(--grad); } .shape-pop { /* ON THE PAGE, NOT IN THE ROW. The tool palette is a horizontal strip that scrolls sideways, and a box that scrolls clips whatever is positioned inside it — which is why the shape picker came out as a 32px sliver with its buttons cut in half. app.js measures the button and places this from the page's own corner instead. */ position: fixed; left: 0; top: 0; z-index: 60; display: flex; gap: 4px; padding: 7px; border-radius: 13px; } /* it lives on the page now, so it is not hidden by the palette going away */ body.showing .shape-pop { display: none !important; } .shape-pop button { width: 34px; height: 34px; border-radius: 9px; color: var(--muted); display: flex; align-items: center; justify-content: center; } .shape-pop button:hover { background: var(--hover); color: var(--text); } .shape-pop svg { width: 20px; height: 20px; fill: currentColor; } /* the selection tools' switch, off the top-right corner of the selection — the same state as the title-bar button, lit while the tools are out */ .ctxtog { position: absolute; z-index: 45; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); cursor: pointer; transform: translate(0, -50%); transition: color .12s, border-color .12s; } .ctxtog svg { width: 13px; height: 13px; } .ctxtog:hover { color: var(--text); border-color: var(--accent); } .ctxtog.on { color: var(--accent); border-color: var(--accent); } /* under the switch: move the selection to a tab, through the fan */ .ctxfile:hover { color: var(--accent); } .ctxbar { position: absolute; z-index: 45; display: flex; align-items: center; gap: 5px; padding: 7px 9px; border-radius: 13px; transform: translate(-50%, -100%); flex-wrap: wrap; max-width: min(94vw, 840px); justify-content: center; } /* the font size is typed, not only nudged */ .ctxbar .cfs { width: 46px; text-align: center; font: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 2px; border-radius: 7px; color: var(--text); background: var(--hover); border: 1px solid var(--border); outline: none; -moz-appearance: textfield; } .ctxbar .cfs::-webkit-outer-spin-button, .ctxbar .cfs::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ctxbar .cfs:focus { border-color: var(--accent); } /* a palette packs into a tight two-row block, so the bar stays ONE strip */ .ctxbar .swgrid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 20px); gap: 3px; align-items: center; justify-items: center; } .ctxbar .swgrid .sw { width: 18px; height: 18px; border-radius: 6px; } .ctxbar .swgrid .swc { width: 19px; height: 19px; border-radius: 6px; } /* the custom colour-well: a wheel-looking button, native picker on click */ .ctxbar .swc { width: 24px; height: 24px; padding: 0; border: 2px solid rgba(0,0,0,.12); border-radius: 8px; cursor: pointer; flex: none; background: conic-gradient(#D63031, #F59E0B, #84CC16, #14B8A6, #0EA5E9, #6C5CE7, #EC4899, #D63031); transition: .12s; } .ctxbar .swc:hover { transform: scale(1.15); } /* what one card costs, read on the bar beside the Freeze it suggests */ /* THE VIEW'S POPOVER — what this screen shows of the board: by kind of card, and by weight. It stands above the view pill on the taskbar, placed by the script from the pill's button. */ .wt-pop { position: fixed; width: 276px; max-height: min(72vh, 600px); overflow: auto; z-index: 210; padding: 11px 12px; border-radius: 12px; background: var(--panel-solid, #fff); border: 1px solid var(--border); box-shadow: 0 20px 48px rgba(0,0,0,.2); } .wt-pop.hidden { display: none; } .wt-pop .vp-sec { display: flex; align-items: center; gap: 6px; margin: 10px 0 5px; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #64748b); } .wt-pop .vp-sec svg { width: 13px; height: 13px; flex: none; } .wt-pop .vp-sec em { margin-inline-start: auto; font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; } .wt-pop .vp-sec button { margin-inline-start: auto; font: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 2px 8px; border-radius: 999px; cursor: pointer; background: var(--hover); border: 1px solid var(--border); color: var(--text); } .wt-pop .vp-kinds { display: flex; flex-direction: column; gap: 1px; max-height: 250px; overflow: auto; margin: 0 -4px; } .wt-pop .vp-k { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 8px; cursor: pointer; font-size: 11.5px; } .wt-pop .vp-k:hover { background: var(--hover); } .wt-pop .vp-k s { width: 15px; height: 15px; flex: none; border-radius: 4px; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--accent, #6C5CE7); } .wt-pop .vp-k s svg { width: 11px; height: 11px; } .wt-pop .vp-k b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wt-pop .vp-k em { font-style: normal; font-size: 10px; color: var(--muted, #64748b); } .wt-pop .vp-k.off { opacity: .5; } .wt-pop .vp-k.off b { text-decoration: line-through; } .wt-pop .vp-k button { font: inherit; font-size: 9px; font-weight: 800; letter-spacing: .06em; padding: 1px 6px; border-radius: 999px; cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--muted, #64748b); opacity: 0; transition: .12s; } .wt-pop .vp-k:hover button { opacity: 1; } .wt-pop .vp-k button:hover { color: var(--accent, #6C5CE7); border-color: var(--accent, #6C5CE7); } .wt-pop .vp-none { font-size: 10.5px; color: var(--muted, #64748b); padding: 4px 6px; } /* the view pill beside Main: the filter wears a count when kinds are out */ .tctl.tview .tst.tflt { width: auto; min-width: 26px; padding: 0 6px; gap: 3px; } .tctl.tview .tst.tflt i { font-style: normal; font-size: 9.5px; font-weight: 800; line-height: 1; } /* a group's chip is a heading: its menu is on the right button, a click goes nowhere */ .tchip.t-wing, .tsub.tsub-g { cursor: context-menu; } .wt-pop .wt-h { display: flex; align-items: baseline; gap: 7px; margin-bottom: 8px; } .wt-pop .wt-h b { font-size: 11px; letter-spacing: .05em; } .wt-pop .wt-h u { text-decoration: none; font-size: 17px; font-weight: 800; color: var(--accent, #6C5CE7); } .wt-pop .wt-h span { flex: 1; text-align: end; font-size: 10px; color: var(--muted, #64748b); } .wt-pop .wt-sw { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted, #64748b); margin-bottom: 9px; cursor: pointer; } .wt-pop .wt-bars { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-bottom: 8px; } .wt-pop .wt-bars i { flex: 1; border-radius: 3px 3px 0 0; background: #16A34A; } .wt-pop .wt-bars i.a { background: #F59E0B; } .wt-pop .wt-bars i.r { background: #E11D2A; } .wt-pop .wt-bars i.off { opacity: .22; } .wt-pop .wt-mode { display: flex; align-items: center; gap: 5px; } .wt-pop .wt-mode button { font: inherit; font-size: 10px; padding: 3px 7px; border-radius: 999px; cursor: pointer; background: var(--hover); border: 1px solid var(--border); color: var(--muted, #64748b); } .wt-pop .wt-mode button.on { background: var(--accent, #6C5CE7); border-color: transparent; color: #fff; } .wt-pop .wt-mode input { flex: 1; min-width: 0; } .wt-pop .wt-mode b { font-size: 10.5px; min-width: 34px; text-align: end; } .wt-pop .wt-f { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 10px; color: var(--muted, #64748b); } .wt-pop .wt-f button { margin-inline-start: auto; font: inherit; font-size: 10px; padding: 3px 8px; border-radius: 999px; cursor: pointer; background: var(--hover); border: 1px solid var(--border); color: var(--text); } .ctxbar .cwt { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; color: #fff; background: var(--wc, #16A34A); white-space: nowrap; cursor: help; } /* the alpha beside a custom colour: slide it to nothing and the colour goes */ .ctxbar .swa { width: 54px; height: 18px; margin-inline-start: 4px; flex: none; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; } .ctxbar .swa::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, transparent, currentColor), repeating-conic-gradient(#c9cede 0 25%, #fff 0 50%) 0 0 / 8px 8px; } .ctxbar .swa::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, transparent, currentColor), repeating-conic-gradient(#c9cede 0 25%, #fff 0 50%) 0 0 / 8px 8px; } .ctxbar .swa::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -2.5px; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent, #6C5CE7); box-shadow: 0 1px 3px rgba(0,0,0,.3); } .ctxbar .swa::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent, #6C5CE7); } .ctxbar .swc::-webkit-color-swatch-wrapper { padding: 0; } .ctxbar .swc::-webkit-color-swatch { border: none; opacity: 0; } /* border-width buttons show the width itself */ .ctxbar .lwb { display: inline-flex; align-items: center; justify-content: center; padding: 5px 6px; } .ctxbar .lwb span { display: block; background: currentColor; border-radius: 2px; } .ctxbar .sw { width: 22px; height: 22px; border-radius: 7px; border: 2px solid rgba(0,0,0,.12); flex: none; transition: .12s; } .ctxbar .sw:hover { transform: scale(1.15); } .ctxbar .cbtn { padding: 5px 8px; font-size: 12px; border-radius: 8px; color: var(--muted); font-weight: 600; white-space: nowrap; } .ctxbar .cbtn:hover { background: var(--hover); color: var(--text); } .ctxbar .cbtn.con { background: var(--grad); color: #fff; } .ctxbar .csep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; } /* the zoom cluster lives in the top bar now — a flat group among the other controls, not a second pill of glass inside the first */ .zoombar { display: flex; align-items: center; gap: 1px; flex: none; padding: 2px 3px; border-radius: 10px; font-size: 12px; background: var(--hover); border: 1px solid var(--border); } .zoombar button { display: inline-flex; align-items: center; justify-content: center; padding: 4px 7px; border-radius: 7px; color: var(--muted); font-size: 14px; line-height: 1; } .zoombar button svg { width: 15px; height: 15px; } .zoombar button:hover { background: var(--panel-solid, #fff); color: var(--text); } #z-val { min-width: 40px; text-align: center; color: var(--muted); font-weight: 600; font-size: 11.5px; } /* board background picker — drops from the palette button in the top bar */ .bg-pop { position: absolute; top: calc(var(--topy) + var(--toph) + 8px); inset-inline-start: 16px; z-index: 130; padding: 12px 14px; border-radius: 14px; } .bg-pop .bg-title { font-size: 11px; font-weight: 700; margin-bottom: 8px; color: var(--muted); } .bg-row { display: flex; gap: 8px; } .bg-sw { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--border); cursor: pointer; transition: .15s; } .bg-sw:hover { transform: scale(1.12); border-color: var(--accent); } /* text edit overlay */ .edit-ta { position: absolute; z-index: 50; resize: none; outline: none; overflow: hidden; /* solid panel bg — a transparent editor over the still-painted canvas text doubled every word and made long docs unreadable/uneditable */ background: var(--panel, #fff); border: 1.6px dashed var(--accent); border-radius: 6px; line-height: 1.32; padding: 8px; box-shadow: 0 8px 28px rgba(10, 12, 24, .25); } /* ============ AI panel ============ */ .ai-panel { position: absolute; top: 78px; bottom: 16px; inset-inline-end: 14px; width: 340px; z-index: 44; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; } .ai-head { padding: 16px 18px 0; } .ai-head h3 { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; } .ai-head h3 .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px var(--accent); } .ai-tabs { display: flex; gap: 4px; padding: 12px 14px 10px; border-bottom: 1px solid var(--border); } .ai-tabs button { flex: 1; padding: 8px 4px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .ai-tabs button.on { background: var(--grad); color: #fff; } .ai-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .ai-body label { font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .ai-body textarea { width: 100%; min-height: 84px; padding: 11px 12px; border-radius: 11px; font-size: 13.5px; background: var(--hover); border: 1px solid var(--border); outline: none; resize: vertical; } .ai-body textarea:focus { border-color: var(--accent); } .chiprow { display: flex; flex-wrap: wrap; gap: 6px; } .chip { padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); color: var(--muted); transition: .13s; } .chip:hover { color: var(--text); border-color: var(--accent); } .chip.on { background: var(--grad); color: #fff; border-color: transparent; } .ai-run { margin: 4px 16px 16px; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 700; } .ai-note { font-size: 12px; color: var(--muted); line-height: 1.5; } .ai-busy { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); padding: 6px 2px; } .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; } @keyframes spin { to { transform: rotate(360deg); } } /* ============ stickers & emoji panel ============ */ .fun-panel { position: absolute; inset-inline-start: 74px; top: 50%; transform: translateY(-50%); width: 300px; max-height: 480px; z-index: 44; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; } .fun-head { padding: 13px 16px 8px; font-size: 13.5px; } .fun-tabs { display: flex; gap: 2px; padding: 0 10px 8px; border-bottom: 1px solid var(--border); } .fun-tabs button { flex: 1; padding: 7px 2px; border-radius: 8px; font-size: 16px; } .fun-tabs button.on { background: var(--grad); } .fun-body { flex: 1; overflow-y: auto; padding: 10px 12px; } .emo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; } .emo-grid button { font-size: 22px; padding: 6px 0; border-radius: 8px; transition: .1s; } .emo-grid button:hover { background: var(--hover); transform: scale(1.2); } /* ============ flows ============ */ .flow-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 11px 13px; border: 1.4px solid var(--border); border-radius: 13px; transition: .14s; text-align: start; } .flow-card:hover { border-color: var(--accent); background: rgba(108, 92, 231, .1); } .flow-card .fico { font-size: 18px; } .flow-card .fname { font-size: 13.5px; font-weight: 700; } .flow-card .fsteps { font-size: 11px; color: var(--muted); line-height: 1.45; } .flow-log { display: flex; flex-direction: column; gap: 5px; } .flow-step { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; } .flow-step .fdot { color: var(--accent); font-size: 13px; } .flow-step.running { color: var(--text); font-weight: 600; } .flow-step.done { color: #00B894; } /* ============ agents panel ============ */ .agents-panel { display: flex; flex-direction: column; } .ag-row { display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid var(--border); } .ag-chip { flex: none; } .ag-em { width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 19px; border: 1.6px solid var(--border); transition: .13s; background: var(--hover); overflow: hidden; } .ag-em img { width: 100%; height: 100%; object-fit: cover; display: block; } .ag-chip:hover .ag-em { transform: translateY(-2px); } .ag-chip.on .ag-em { box-shadow: 0 4px 14px rgba(108, 92, 231, .4); border-color: var(--accent) !important; } .ag-name { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 4px; font-size: 13.5px; } .ag-msgs { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; } .ag-m { max-width: 88%; padding: 9px 12px; border-radius: 13px; font-size: 12.8px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .ag-m.user { align-self: flex-end; background: var(--grad); color: #fff; border-end-end-radius: 4px; } .ag-m.agent { align-self: flex-start; background: var(--hover); border: 1px solid var(--border); border-end-start-radius: 4px; } /* ============ sidekick tasks (starters / description / knowledge files) ============ */ .ag-desc { padding: 0 16px 4px; font-size: 11.8px; color: var(--muted); line-height: 1.45; } .ag-intro { padding: 14px 6px; display: flex; flex-direction: column; gap: 8px; } .ag-hi { font-size: 16px; font-weight: 800; letter-spacing: -.02em; } .ag-intro-d { font-size: 12.5px; color: var(--muted); line-height: 1.5; } .ag-canhelp { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; } .ag-starters { display: flex; flex-wrap: wrap; gap: 7px; } .st-chip { padding: 7px 12px; border-radius: 999px; font-size: 12.3px; font-weight: 600; border: 1px solid var(--border); background: var(--hover); color: var(--text); transition: .13s; text-align: start; } .st-chip:hover { border-color: var(--accent); background: rgba(108, 92, 231, .12); transform: translateY(-1px); } .st-chip.ro { cursor: default; } .st-chip.ro:hover { border-color: var(--border); background: var(--hover); transform: none; } .modal .cbtn { padding: 5px 10px; font-size: 12px; border-radius: 8px; font-weight: 600; background: var(--hover); border: 1px solid var(--border); color: var(--text); } .modal .cbtn:hover { border-color: var(--accent); color: var(--accent); } .sec-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sec-row .cbtn { padding: 3px 9px; font-size: 11.5px; border-radius: 8px; background: rgba(108, 92, 231, .12); border: none; color: var(--accent); font-weight: 700; } .sec-row .cbtn:hover { background: rgba(108, 92, 231, .22); } .st-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .st-row .txt { flex: 1; margin: 0; } .kn-file { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 10px; border: 1px solid var(--border); background: var(--hover); font-size: 12.3px; margin-bottom: 6px; } .kn-file span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kn-file small { color: var(--muted); } .kf-x { color: var(--muted); font-size: 12px; padding: 2px 6px; border-radius: 6px; flex: none; } .kf-x:hover { color: var(--danger); background: var(--hover); } /* ============ focus mode (smart components) ============ */ .focus-root { position: fixed; inset: 0; z-index: 120; background: var(--bg); display: flex; flex-direction: column; } /* ── 3D TABS ── the room is a world. It takes the whole picture, over the cards and under the bars — the chips still say where you are and take you back — and the chrome that acts on cards steps aside. */ .space3d { position: absolute; inset: 0; z-index: 30; background: #0b1020; } .space3d iframe { display: block; width: 100%; height: 100%; border: 0; background: #0b1020; } body.in3d .toolbar, body.in3d .ctxbar, body.in3d #pins, body.in3d #cursors { display: none; } .focus-head { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--border); background: var(--panel); } .ft-title { font-size: 17px; font-weight: 800; background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 8px 10px; color: var(--text); outline: none; width: 320px; } .ft-title:focus { border-color: var(--accent); background: var(--hover); } .ft-ai { width: 340px; padding: 10px 14px; border-radius: 999px; font-size: 12.5px; background: var(--hover); border: 1px solid var(--border); color: var(--text); outline: none; } .ft-ai:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(0,206,201,.18); } .focus-body { flex: 1; overflow: auto; padding: 26px 30px; } table.ft { border-collapse: collapse; min-width: 640px; } .ft th, .ft td { border: 1px solid var(--border); padding: 0; } .ft th { background: rgba(108, 92, 231, .14); } .ft input { border: none; background: transparent; color: var(--text); padding: 10px 13px; font-size: 13px; width: 200px; outline: none; font-family: var(--font); } .ft th input { font-weight: 800; } .ft td:focus-within, .ft th:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; } .ft .ft-x { border: none; background: none; padding: 0 6px; } .ft .ft-x button { color: var(--muted); font-size: 13px; padding: 4px 7px; border-radius: 7px; } .ft .ft-x button:hover { color: var(--danger); background: var(--hover); } /* ============ NEVO ============ */ .nevo-btn { display: flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: 999px; background: linear-gradient(135deg, #062A2E, #0B3B3F 55%, #14424A); border: 1.4px solid rgba(0, 206, 201, .55); color: #7DF3EC; font-weight: 800; font-size: 12.5px; letter-spacing: .06em; box-shadow: 0 0 14px rgba(0, 206, 201, .25); transition: .15s; } :root[data-theme="light"] .nevo-btn { background: linear-gradient(135deg, #DFFBF9, #C1F3EF); color: #067E77; } .nevo-btn:hover { box-shadow: 0 0 22px rgba(0, 206, 201, .5); transform: translateY(-1px); } .nevo-btn img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } /* NEVO is the BACKGROUND board brain — it docks CENTER-BOTTOM instead of the right rail every other AI panel uses, so it reads as a different kind of thing: ambient board intelligence, not another side tool. */ .nevo-panel { border: 1.4px solid rgba(0, 206, 201, .4); box-shadow: 0 8px 40px rgba(0, 206, 201, .18); top: auto; bottom: 14px; inset-inline-end: auto; left: 50%; transform: translateX(-50%); width: min(620px, calc(100vw - 32px)); height: min(56vh, 520px); } /* the ((•)) pulse glyph — NEVO's own mark, distinct from the ✨ AI tools */ .nevo-btn svg { width: 20px; height: 20px; } .nevo-head .nevo-glyph { width: 42px; height: 42px; flex: none; padding: 8px; border-radius: 14px; color: #00CEC9; background: rgba(0, 206, 201, .12); box-shadow: 0 0 12px rgba(0, 206, 201, .4); } .nevo-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: linear-gradient(135deg, rgba(0, 206, 201, .16), rgba(253, 203, 110, .10)); border-bottom: 1px solid rgba(0, 206, 201, .3); } .nevo-head img { width: 42px; height: 42px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 12px rgba(0,206,201,.4); } .nevo-head b { display: block; font-size: 15px; letter-spacing: .08em; } .nevo-head span { font-size: 11px; color: var(--muted); } .nevo-head div { flex: 1; } .nevo-auto { display: flex; align-items: center; cursor: pointer; } .nevo-auto input { display: none; } .nevo-auto span { font-size: 17px; opacity: .35; transition: .15s; filter: grayscale(1); } .nevo-auto input:checked + span { opacity: 1; filter: none; text-shadow: 0 0 10px rgba(253, 203, 110, .8); } .ag-m.nevo { border-color: rgba(0, 206, 201, .4); background: rgba(0, 206, 201, .07); } .nevo-send { background: linear-gradient(135deg, #00CEC9, #FDCB6E); color: #06302E; font-weight: 800; padding: 8px 13px; } .plan-card { border: 1.4px dashed rgba(253, 203, 110, .6); border-radius: 13px; padding: 12px 14px; font-size: 12.5px; background: rgba(253, 203, 110, .06); } .plan-card ul { margin: 8px 0 10px 18px; display: flex; flex-direction: column; gap: 4px; } /* member avatar stacks */ .bcard .thumb { position: relative; } .bmembers { position: absolute; bottom: 7px; inset-inline-end: 7px; display: flex; } .bmembers .avatar { border: 2px solid var(--panel-solid); margin-inline-start: -7px; font-size: 9px; } .bmembers-row { display: flex; } .bmembers-row .avatar { border: 2px solid var(--panel-solid); margin-inline-start: -8px; font-size: 9.5px; } /* ============ share popover ============ */ .share-pop { position: absolute; top: 76px; inset-inline-end: 14px; z-index: 46; width: 320px; border-radius: 16px; padding: 18px; } .share-pop h4 { font-size: 14px; font-weight: 800; margin-bottom: 12px; } .share-row { display: flex; gap: 7px; margin-bottom: 9px; } .share-row input { flex: 1; padding: 9px 11px; border-radius: 9px; background: var(--hover); border: 1px solid var(--border); font-size: 12px; outline: none; } .share-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; } /* ============ comments ============ */ #pins { position: absolute; inset: 0; pointer-events: none; overflow: clip; z-index: 42; } .pin { position: absolute; pointer-events: auto; cursor: pointer; width: 34px; height: 34px; border-radius: 50% 50% 50% 4px; background: var(--panel-solid); border: 2.5px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; box-shadow: var(--shadow); transform: translate(-4px, -30px); transition: transform .12s; } .pin:hover { transform: translate(-4px, -34px) scale(1.08); } .thread-pop { position: absolute; z-index: 48; width: 300px; max-height: 420px; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; } .thread-pop .th-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); } .thread-pop .th-head .sp { flex: 1; } .thread-pop .th-head button { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 5px 9px; border-radius: 8px; } .thread-pop .th-head button:hover { background: var(--hover); color: var(--text); } .th-msgs { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; } .th-msg { font-size: 12.8px; line-height: 1.45; } .th-msg .who { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); font-weight: 700; margin-bottom: 3px; } .th-msg .who .dot2 { width: 9px; height: 9px; border-radius: 50%; } .th-input { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); } .th-input input { flex: 1; padding: 9px 11px; border-radius: 9px; background: var(--hover); border: 1px solid var(--border); font-size: 12.5px; outline: none; } .th-input input:focus { border-color: var(--accent); } /* comment composer */ .cmp { position: absolute; z-index: 49; display: flex; gap: 6px; padding: 9px; border-radius: 13px; width: 280px; } .cmp input { flex: 1; padding: 9px 11px; border-radius: 9px; background: var(--hover); border: 1px solid var(--border); font-size: 12.5px; outline: none; } /* ============ template gallery ============ */ .tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; } .tpl-card { border: 1.4px solid var(--border); border-radius: 14px; padding: 16px 10px 12px; text-align: center; cursor: pointer; transition: .14s; font-size: 12px; font-weight: 700; } .tpl-card:hover { border-color: var(--accent); background: rgba(108, 92, 231, .1); transform: translateY(-2px); } .tpl-card .ico { font-size: 26px; display: block; margin-bottom: 8px; } /* ============ catch-up ============ */ .catchup-btn { position: absolute; top: 78px; left: 50%; transform: translateX(-50%); z-index: 44; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--grad); color: #fff; box-shadow: 0 6px 20px rgba(108, 92, 231, .5); animation: pop .25s ease; } .catchup-body { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; max-height: 50vh; overflow-y: auto; } /* ============ admin modal ============ */ .modal-back { position: fixed; inset: 0; z-index: 150; background: rgba(8, 8, 20, .55); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .modal { width: 420px; max-width: 92vw; border-radius: 20px; padding: 26px 26px 22px; } .modal h3 { font-size: 16px; font-weight: 800; margin-bottom: 18px; } .modal label.sec { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 7px; } .radio-card { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px; border: 1.4px solid var(--border); cursor: pointer; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; transition: .13s; } .radio-card.on { border-color: var(--accent); background: rgba(108, 92, 231, .12); } .radio-card .rdot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--muted); flex: none; } .radio-card.on .rdot { border-color: var(--accent); background: var(--grad); } .radio-card .rsub { display: block; font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 2px; } .modal input.txt { width: 100%; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; background: var(--hover); border: 1px solid var(--border); outline: none; font-family: ui-monospace, monospace; } .modal .mrow { display: flex; gap: 9px; justify-content: flex-end; margin-top: 20px; } /* AI-at-work gradient glow (panels breathe while thinking) */ @keyframes aiGlow { 0%, 100% { box-shadow: 0 0 22px rgba(108, 92, 231, .45), var(--shadow); } 50% { box-shadow: 0 0 34px rgba(0, 206, 201, .55), var(--shadow); } } .ai-panel:has(.ai-busy:not(.hidden)), .nevo-panel:has(.ai-busy:not(.hidden)), .fun-panel:has(.ai-busy:not(.hidden)) { animation: aiGlow 2.2s ease-in-out infinite; } /* Present mode — frame walker */ .present-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 210; display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 14px; } .present-bar button { min-width: 34px; height: 32px; border-radius: 9px; font-size: 17px; color: var(--text); font-weight: 800; } .present-bar button:hover { background: var(--hover); } .present-bar .pv-n { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 8px; } /* ── SAVED VIEWS: the bar under the title ── Places on the board, as chips, in the order you set. The green frame on the canvas is the exact edge of what a view keeps; Show hides every other bar and walks the chips one at a time. */ .viewbar { /* CENTRED IN WHAT IS LEFT, NOT IN THE WINDOW. The tab drawer sits over the board's right edge, and a bar centred on the window ran underneath it — the last chips and the Show button disappeared behind the tab list. --rpane is what the drawer is holding, set by app.js whenever it changes. CENTRED BY A BAND, NOT BY left+translate. An absolutely positioned box with only a start edge can never be wider than the room between that edge and the far side — so half the window was unreachable and the chips were squeezed into a third of the bar however much space there was. Pinning BOTH edges makes a band, and `width: fit-content` with auto margins centres the bar inside it and lets it use the whole of it. */ position: absolute; top: calc(var(--topy) + var(--toph) + var(--tbh) + 14px); inset-inline-start: 0; inset-inline-end: calc(var(--rpane, 0px) + 8px); width: fit-content; margin-inline: auto; z-index: 41; display: flex; align-items: center; gap: 3px; padding: 2px 5px; border-radius: 999px; box-sizing: border-box; max-width: min(78vw, calc(100% - 24px)); } /* nothing else is on the screen in the show: the band is the whole window */ body.showing .viewbar { top: 10px; inset-inline-end: 0; max-width: calc(100% - 40px); } .viewbar .vb-btn { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 700; cursor: pointer; transition: .14s; white-space: nowrap; flex: none; } .viewbar .vb-btn svg { width: 14px; height: 14px; } .viewbar .vb-btn:hover { color: var(--text); background: var(--hover); } .viewbar .vb-btn:disabled { opacity: .35; cursor: default; background: transparent; color: var(--muted); } .viewbar .vb-btn.icon { padding: 0 7px; } .viewbar .vb-btn.on { color: #22c55e; } .viewbar .vb-btn.show { color: var(--accent); } body.showing .viewbar .vb-btn.show { color: #f43f5e; } .viewbar .vb-sep { width: 1px; height: 14px; background: var(--border); flex: none; margin: 0 2px; } /* TWO ROWS, THEN A PAGE. A sideways-scrolling row hides most of a long list behind a gesture nobody knows is there. These wrap, the box is two rows tall, and what does not fit is on the next page. */ .viewbar .vb-chips { /* it takes the room the bar has left, rather than being squeezed to its smallest: the whole point is to get as many chips into the two rows as the width honestly allows */ flex: 1 1 auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; min-width: 0; overflow: hidden; max-height: 24px; /* ONE row of chips */ } .viewbar .vpgp, .viewbar .vpgn { flex: none; padding: 0 5px; } .viewbar .vpgp:disabled, .viewbar .vpgn:disabled { opacity: .25; } .viewbar .vb-pg { flex: none; font-size: 10px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; padding: 0 2px; white-space: nowrap; } .vchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel, rgba(255,255,255,.72)); color: var(--muted); font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; flex: none; transition: .14s; user-select: none; } [dir="rtl"] .vchip { padding: 0 7px 0 11px; } .vchip i { font-style: normal; width: 17px; height: 17px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; background: var(--hover); color: var(--muted); } .vchip:hover { color: var(--text); border-color: var(--accent); } .vchip.on { color: #fff; background: var(--grad); border-color: transparent; } .vchip.on i { background: rgba(255,255,255,.22); color: #fff; } .vchip.lift { opacity: .35; } .vchip input { border: 0; background: transparent; color: inherit; font: inherit; width: 120px; outline: none; } .vchip-ghost { position: fixed; z-index: 400; pointer-events: none; opacity: .92; transform: rotate(-2deg); } /* the show: nothing on the screen but the board and the bar */ body.showing .board-top, body.showing .toolbar, body.showing .taskbar, body.showing .tabbar, body.showing .tabgrip, body.showing .tbar-rs, body.showing .optrail, body.showing .scrim, body.showing #ctxbar, body.showing .ai-panel, body.showing .fun-panel, body.showing .share-pop, body.showing .agdock { display: none !important; } /* Template picker v2 — category tabs + AI-fill topic + preview cards */ .tpl-modal { width: min(900px, 94vw); max-height: 86vh; overflow-y: auto; } .tpl-topic { width: 100%; margin: 10px 0 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-size: 13px; outline: none; font-family: var(--font); } .tpl-topic:focus { border-color: var(--accent); } .tpl-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } /* Tab Builder, from the explorer */ .tb-modal { width: min(640px, 94vw); } .tb-modal h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .tb-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; line-height: 1.45; } .tb-modal textarea.tpl-topic { resize: vertical; min-height: 96px; line-height: 1.45; } .tb-modal .tb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tb-modal .tb-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); font-weight: 700; } .tb-modal .nerr { margin-top: 10px; font-size: 12px; color: #E11D2A; } /* ── THE TAB BUILDER INSIDE THE FILE ── The same sheet, with a name, the 2D/3D choice, the pictures pasted in, and the build streaming under the brief. Once it runs the scrim goes and the sheet steps to the bottom corner, out of the board's way, so the tab can be watched filling behind it. */ .tba-modal { width: min(700px, 94vw); max-height: 92vh; display: flex; flex-direction: column; } .tba-modal h3 { position: relative; } .tba-modal .tba-where { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-inline-start: 2px; } .tba-modal .tba-x { position: absolute; inset-inline-end: -6px; top: -4px; } .tba-top { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .tba-modal input.txt.tba-name { flex: 1; font-family: var(--font); font-weight: 700; } .tba-modal input.txt.tba-name[readonly] { opacity: .75; } .tba-kind { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex: none; } .tba-kind button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--hover); border: 0; cursor: pointer; } .tba-kind button + button { border-inline-start: 1px solid var(--border); } .tba-kind button.on { background: var(--grad); color: #fff; } .tba-kind button svg { width: 13px; height: 13px; fill: currentColor; } .tba-modal textarea.tpl-topic { margin: 10px 0 8px; } .tba-imgs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; } .tba-pic { position: relative; width: 64px; height: 64px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); background: var(--hover); flex: none; } .tba-pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .tba-pic button { position: absolute; top: 2px; inset-inline-end: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(8,8,20,.7); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .tba-pic button svg { width: 10px; height: 10px; fill: currentColor; } .tba-add { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 9px; border: 1px dashed var(--border); background: none; color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; } .tba-add:hover { border-color: var(--accent); color: var(--accent); } .tba-add svg { width: 13px; height: 13px; fill: currentColor; } .tba-hint { font-size: 11px; color: var(--muted); } .tba-modal.drop { outline: 2px dashed var(--accent); outline-offset: -8px; } .tba-sel { display: inline-flex; align-items: center; gap: 5px; } .tba-run { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; min-height: 0; } .tba-run .tba-tools { max-height: 96px; overflow: auto; } .tba-run .tba-body { font-size: 12.5px; line-height: 1.5; max-height: 34vh; overflow: auto; } .tba-foot { display: flex; align-items: center; gap: 8px; } .tba-foot .bc-meta { font-size: 11px; color: var(--muted); } .tba-foot .btn svg { width: 13px; height: 13px; fill: currentColor; } .tba-back.live { background: none; backdrop-filter: none; pointer-events: none; align-items: flex-end; justify-content: flex-end; padding: 0 60px 64px 0; } .tba-back.live .tba-modal { pointer-events: auto; width: min(460px, 94vw); max-height: 60vh; box-shadow: 0 18px 48px rgba(0,0,0,.28); } .tba-back.live .tb-sub, .tba-back.live .tba-top, .tba-back.live .tba-brief, .tba-back.live .tba-imgs, .tba-back.live .tb-row { display: none; } .tba-back.live .tba-run { margin-top: 0; padding-top: 0; border-top: 0; } [dir="rtl"] .tba-back.live { padding: 0 0 64px 60px; } /* the purse of a build, and the row that comes back when it stopped at it */ .tba-lim { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 2px; font-size: 11.5px; color: var(--muted); } .tba-lim > b { font-weight: 800; } .tba-lim > svg { width: 13px; height: 13px; color: #F59E0B; flex: none; } .tba-lim label { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; } .tba-lim input[type="number"] { width: 52px; height: 26px; padding: 0 6px; border-radius: 7px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font: 700 12px var(--font); } .tba-lim .tba-hint { flex-basis: 100%; } .tba-more, .bc-allow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(245, 158, 11, .55); background: rgba(245, 158, 11, .1); font-size: 12px; color: var(--text); } .tba-more span, .bc-allow span { flex: 1 1 160px; line-height: 1.4; } .bc-allow > svg { width: 13px; height: 13px; color: #F59E0B; flex: none; } .tba-more .btn svg, .bc-allow .btn svg { width: 13px; height: 13px; } .tba-back.live .tba-lim { display: none; } .tba-back.live .tba-modal.stopped .tba-lim { display: flex; } /* the purse of a tab or widget agent, in the coins popover of the panel */ .bc-lim { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 4px 6px 6px; } .bc-lim label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); } .bc-lim input[type="number"] { width: 56px; height: 28px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font: 700 12px var(--font); } /* ── THE AGENTS DOCK ── Three orbs at the right edge (app.js dockMake): the Tab Builder, the agent of the tab, the agent of the selected widget. Dim = nothing to work on; lit = its panel is open; a spinning ring and a breathing glow while it works. The same orb is the avatar in the panel's head. */ .agdock { /* the LEFT edge, under the tool palette - app.js measures the toolbar and sets `top`, so the two never overlap however tall the palette grows */ position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); z-index: 41; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 40px; padding: 7px 0; box-sizing: border-box; border: 1px solid var(--border); border-inline-start: 0; border-radius: 0 14px 14px 0; background: var(--panel, rgba(255,255,255,.8)); backdrop-filter: blur(10px); box-shadow: 10px 0 26px -16px rgba(0, 0, 0, .45); transition: top .2s ease; } [dir="rtl"] .agdock { border-radius: 14px 0 0 14px; box-shadow: -10px 0 26px -16px rgba(0, 0, 0, .45); } .agorb { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; } .agorb, .orbav { --oc: #6C5CE7; --oc2: #A78BFA; --og: rgba(108, 92, 231, .55); --bc: #6C5CE7; } .agorb.tab, .orbav.tab { --oc: #00CEC9; --oc2: #22D3EE; --og: rgba(0, 206, 201, .55); --bc: #00CEC9; } .agorb.wid, .orbav.widget { --oc: #F59E0B; --oc2: #FB923C; --og: rgba(245, 158, 11, .55); --bc: #F59E0B; } .agorb .orb, .orbav { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.6), rgba(255,255,255,0) 44%), linear-gradient(145deg, var(--oc2), var(--oc)); box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 -3px 6px rgba(0,0,0,.18); transition: transform .18s, box-shadow .18s, filter .18s, opacity .18s; } .agorb .orb svg, .orbav > span svg { width: 14px; height: 14px; display: block; } .pf-av.sm.orbav, .orbav:not(.agorb .orb) { } .orbav > span { display: grid; place-items: center; width: 100%; height: 100%; } .pf-av.sm.orbav { width: 40px; height: 40px; overflow: visible; } .orbav.xs { display: inline-grid; width: 22px; height: 22px; vertical-align: -6px; margin-inline-end: 2px; } .orbav.xs > span svg { width: 12px; height: 12px; } .agorb .ring, .orbav .ring { position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; opacity: 0; background: conic-gradient(from 0deg, transparent 0 38%, var(--oc2) 58%, #fff 74%, transparent 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); transition: opacity .2s; } .orbav.xs .ring { inset: -3px; } .agorb:hover .orb { transform: scale(1.08); } .agorb.off .orb { filter: grayscale(.85); opacity: .4; } .agorb.off:hover .orb { opacity: .6; } .agorb.on .orb { box-shadow: 0 0 0 2px var(--panel-solid, #fff), 0 0 0 4px var(--oc), 0 2px 12px var(--og); } .agorb.working .ring, .brain-panel.busy .orbav .ring, .tba-modal.busy .orbav .ring { opacity: 1; animation: agspin 1.4s linear infinite; } .agorb.working .orb, .brain-panel.busy .orbav, .tba-modal.busy .orbav { animation: agbreath 1.6s ease-in-out infinite; } @keyframes agspin { to { transform: rotate(360deg); } } @keyframes agbreath { 0%, 100% { box-shadow: 0 0 0 0 var(--og), 0 2px 8px rgba(0,0,0,.25); } 50% { box-shadow: 0 0 0 9px rgba(0,0,0,0), 0 0 26px 5px var(--og); } } .agorb.wst, .orbav.wst { --oc: #D946EF; --oc2: #F0ABFC; --og: rgba(217, 70, 239, .55); --bc: #D946EF; } /* ── THE WIDGET STUDIO ── The draft at its true size, scaled to the pane: what you see is what the board will hold. The chequerboard shows a frameless widget's transparency. */ .wst-modal { width: min(580px, 96vw); } .wst-prev { position: relative; overflow: hidden; margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; } .wst-prev iframe { display: block; border: 0; transform-origin: top left; } .wst-prev.fl { background: conic-gradient(from 90deg at 50% 50%, #e9edf5 25%, #f8fafd 0 50%, #e9edf5 0 75%, #f8fafd 0) 0 0 / 18px 18px; } .wst-size { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: 11.5px; color: var(--muted); } .wst-size > svg { width: 12px; height: 12px; } .wst-size label { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; } .wst-size input[type="number"] { width: 64px; height: 26px; padding: 0 6px; border-radius: 7px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font: 700 12px var(--font); } .wst-body { max-height: 24vh; overflow: auto; } .wst-sel { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); font-weight: 700; } /* ── THE CUSTOM WIDGET LIBRARY ── Shelves down the side (the person's own words), the widgets on them, each running. A click puts one on this board; they are the same in every file. */ .wlib-modal { width: min(1060px, 96vw); max-height: 88vh; display: flex; flex-direction: column; } .wlib-top { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; } .wlib-find { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); color: var(--muted); } .wlib-find svg { width: 13px; height: 13px; } .wlib-find input { width: 210px; border: 0; outline: none; background: none; color: var(--text); font: 600 12.5px var(--font); } .wlib-body { flex: 1; min-height: 0; display: flex; gap: 14px; overflow: hidden; } .wlib-cats { width: 178px; flex: none; overflow: auto; display: flex; flex-direction: column; gap: 3px; } .wlib-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--muted); font: 700 12px var(--font); text-align: start; cursor: pointer; } .wlib-cat b { font-size: 10.5px; opacity: .65; } .wlib-cat:hover { background: var(--hover); color: var(--text); } .wlib-cat.on { background: var(--hover); color: var(--text); border-color: var(--accent); } .wlib-grid { flex: 1; min-width: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 12px; align-content: start; padding-inline-end: 4px; } .wlib-card { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-solid, #fff); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } .wlib-card:hover { border-color: var(--accent); box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .55); transform: translateY(-1px); } .wlib-prev { position: relative; max-height: 190px; overflow: hidden; background: #fff; } .wlib-prev iframe { display: block; border: 0; transform-origin: top left; pointer-events: none; } .wlib-prev.nohtml { display: grid; place-items: center; height: 120px; color: var(--muted); background: var(--hover); } .wlib-card figcaption { padding: 8px 10px 10px; border-top: 1px solid var(--border); } .wlib-card figcaption b { display: block; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wlib-card figcaption span { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wlib-chip { position: absolute; top: 8px; inset-inline-start: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(18, 20, 38, .72); backdrop-filter: blur(3px); color: #fff; font-size: 10px; font-weight: 800; } .wlib-acts { position: absolute; top: 6px; inset-inline-end: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; } .wlib-card:hover .wlib-acts { opacity: 1; } .wlib-acts .sp-ico { border: 1px solid var(--border); background: var(--panel-solid, #fff); } .wlib-acts .wlib-del.arm { color: #fff; background: #EF4444; border-color: #EF4444; } .wlib-none { grid-column: 1 / -1; padding: 34px 18px; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.65; } /* ── VISUAL AUDITOR · QC GATES ── The KPI matrix is the card's own table: rows are the KPIs with their weight, columns the pictures with their weighted total, and every cell is a score coloured by how good it is - the reason and the fix on the cell, in full under Pictures. The gates read as a checklist: severity, verdict, the evidence that was seen, and what would close it. */ #nodes .au-kpis { flex: 0 0 auto; max-height: 168px; overflow: auto; display: flex; flex-direction: column; gap: 4px; padding: 2px 0; } #nodes .au-kpi { display: flex; align-items: center; gap: 5px; } #nodes .au-kpi .k-n { flex: 0 0 34%; } #nodes .au-kpi .k-w { flex: 0 0 52px; text-align: center; } #nodes .au-kpi .k-l { flex: 1; min-width: 0; } #nodes .au-row { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } #nodes .au-row .nfoot { margin: 0; } #nodes .au-strip { flex: 0 0 auto; display: flex; gap: 6px; overflow-x: auto; padding: 2px 0; } #nodes .au-strip .sx-tile { flex: 0 0 auto; width: 78px; height: 58px; } #nodes .au-strip .sx-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } #nodes .au-work { display: flex; align-items: center; gap: 5px; } #nodes .au-head { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--hover); } #nodes .au-head u { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; text-decoration: none; font-size: 15px; font-weight: 800; color: #fff; background: var(--c, #64748B); } #nodes .au-head b { display: block; font-size: 12.5px; } #nodes .au-head span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.5; color: var(--muted); } #nodes .au-tabs { flex: 0 0 auto; } #nodes .au-scroll { flex: 1; min-height: 0; overflow: auto; } #nodes .au-tbl { border-collapse: separate; border-spacing: 3px; font-size: 11px; width: 100%; } #nodes .au-tbl th.k { text-align: start; font-weight: 700; color: var(--text); background: var(--hover); border-radius: 7px; padding: 5px 7px; min-width: 130px; max-width: 220px; } #nodes .au-tbl th.k i { float: inline-end; font-style: normal; font-weight: 800; font-size: 9.5px; color: var(--muted); } #nodes .au-tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--panel-solid, #fff); } #nodes .au-th { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 74px; } #nodes .au-th img { width: 68px; height: 42px; object-fit: cover; border-radius: 6px; display: block; } #nodes .au-th b { font-size: 9.5px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 72px; } #nodes .au-th u { text-decoration: none; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; color: #fff; background: var(--c, #64748B); } #nodes .au-c { text-align: center; border-radius: 7px; padding: 6px 4px; color: #fff; background: var(--c, #64748B); cursor: help; } #nodes .au-c b { font-size: 12px; font-weight: 800; } #nodes .au-c.empty { color: var(--muted); background: var(--hover); } #nodes .au-imgs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; } #nodes .au-im { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; } #nodes .au-im-h { display: flex; align-items: center; gap: 9px; } #nodes .au-im-h img { width: 76px; height: 48px; object-fit: cover; border-radius: 7px; display: block; } #nodes .au-im-h > div { flex: 1; min-width: 0; } #nodes .au-im-h b { display: block; font-size: 12px; } #nodes .au-im-h span { display: block; font-size: 11px; color: var(--muted); line-height: 1.45; } #nodes .au-im-h u { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; text-decoration: none; font-size: 13px; font-weight: 800; color: #fff; background: var(--c, #64748B); } #nodes .au-good, #nodes .au-risk { margin: 6px 0 0; font-size: 10.5px; line-height: 1.5; } #nodes .au-good { color: #059669; } #nodes .au-risk { color: #DC2626; } #nodes .au-ks { margin-top: 7px; display: flex; flex-direction: column; gap: 5px; } #nodes .au-k { display: flex; gap: 7px; } #nodes .au-k > i { flex: none; display: grid; place-items: center; width: 28px; height: 22px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: var(--c, #64748B); } #nodes .au-k b { font-size: 11px; } #nodes .au-k span { display: block; font-size: 10.5px; line-height: 1.5; color: var(--muted); } #nodes .au-fix { color: var(--accent); } #nodes .au-report { flex: 1; min-height: 0; white-space: normal; } #nodes .au-gh { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 9px; background: var(--hover); margin-bottom: 7px; } #nodes .au-gh b { font-size: 12px; font-weight: 800; color: var(--c, #10B981); letter-spacing: .04em; } #nodes .au-gh span { font-size: 10.5px; color: var(--muted); line-height: 1.5; } #nodes .au-gates { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; } #nodes .au-g { border: 1px solid var(--border); border-inline-start: 3px solid #10B981; border-radius: 9px; padding: 7px 9px; } #nodes .au-g.warn { border-inline-start-color: #F59E0B; } #nodes .au-g.bad { border-inline-start-color: #EF4444; } #nodes .au-g-h { display: flex; align-items: center; gap: 7px; } #nodes .au-g-h b { font-size: 11px; font-weight: 800; color: var(--muted); } #nodes .au-g-h span { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 700; } #nodes .au-g p { margin: 5px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--muted); } #nodes .au-g p.au-ev { color: var(--text); opacity: .8; } #nodes .au-g p.au-fix { color: var(--accent); } #nodes .au-v { flex: none; padding: 2px 7px; border-radius: 999px; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: #fff; background: var(--c, #94A3B8); } #nodes .au-sev { flex: none; padding: 1px 6px; border-radius: 5px; font-style: normal; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--border); color: var(--muted); } #nodes .au-sev.blocker { color: #DC2626; border-color: rgba(220, 38, 38, .5); } #nodes .au-sev.major { color: #D97706; border-color: rgba(217, 119, 6, .5); } #nodes .qg-list { max-height: 230px; } #nodes .qg-row { border: 1px solid var(--border); border-radius: 9px; padding: 6px 7px; display: flex; flex-direction: column; gap: 4px; } #nodes .qg-top { display: flex; align-items: center; gap: 5px; } #nodes .qg-top .g-id { flex: 0 0 46px; text-align: center; font-weight: 800; } #nodes .qg-top .g-n { flex: 1; min-width: 0; } #nodes .qg-top .g-s { flex: 0 0 92px; } #nodes .qg-top .g-s.sev-blocker { color: #DC2626; } #nodes .qg-top .g-s.sev-minor { color: var(--muted); } /* the wand at the end of the drawer's head, beside the plus and the cube */ .tctl .tadd3:not(:last-child) { border-radius: 0; } /* the card's list of what it made: a row per tab, its colour, its name, its title */ #nodes .tb-made { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; max-height: 220px; overflow: auto; } #nodes .tb-row { display: flex; align-items: center; gap: 7px; width: 100%; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-size: 11.5px; cursor: pointer; text-align: start; } #nodes .tb-row:hover { border-color: var(--accent); } #nodes .tb-row s { flex: none; width: 9px; height: 9px; border-radius: 50%; text-decoration: none; } #nodes .tb-row b { flex: none; font-weight: 700; } #nodes .tb-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); } #nodes .tb-row i { flex: none; font-style: normal; color: var(--muted); font-size: 10.5px; } .tpl-grid.big { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; } .tpl-grid.big .tpl-card { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; } .tpl-grid.big .tpl-card .prev { background: var(--hover); border-radius: 10px; display: grid; place-items: center; padding: 4px; min-height: 92px; } .tpl-grid.big .tpl-card .nm { font-size: 12px; font-weight: 600; } .tpl-grid.big .tpl-card .nm .ic-svg { vertical-align: -3px; } /* branded svg icons sit on text baselines in labels/chips */ .tpl-mini .nm .ic-svg, .tpl-card .ico .ic-svg { vertical-align: -3px; } .dempty .big .ic-svg { opacity: .55; } .ag-name b .ic-svg, .cbtn .ic-svg { vertical-align: -2.5px; } /* user templates in the strip */ .tpl-mini .prev { position: relative; } .ut-del { position: absolute; top: 5px; inset-inline-end: 5px; width: 22px; height: 22px; border-radius: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; opacity: 0; transition: .15s; } .tpl-mini:hover .ut-del { opacity: 1; } /* invited teammate button */ .cbtn.inv.on { background: var(--grad); color: #fff; } /* 🌐 web-research composer toggle */ .th-input .cbtn.web { align-self: stretch; padding: 0 10px; font-size: 14px; } .th-input .cbtn.web.on { border-color: #00CEC9; color: #00CEC9; box-shadow: 0 0 9px rgba(0,206,201,.4); background: rgba(0,206,201,.1); } /* ask-ai selection popover */ .askai { position: fixed; z-index: 160; width: 400px; border-radius: 16px; padding: 12px 16px 14px; } /* drag grip — the whole header row moves the card; the spot persists */ .askai-grip { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; font-size: 12.5px; color: var(--accent-2); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; } .askai-grip:active { cursor: grabbing; } .askai-grip .agdots { margin-inline-start: auto; color: var(--muted); font-size: 15px; letter-spacing: 2px; } .askai .chip .ic-svg { vertical-align: -2px; } .askai textarea { width: 100%; min-height: 62px; padding: 10px 12px; border-radius: 11px; font-size: 13px; background: var(--hover); border: 1px solid var(--border); outline: none; resize: vertical; color: var(--text); font-family: var(--font); } .askai textarea:focus { border-color: var(--accent); } /* the AI WORKS panel: one row per AI task, model + effort */ .aiworks { position: fixed; z-index: 90; width: min(560px, 94vw); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .aiworks .aiw-head { display: flex; align-items: center; gap: 8px; } .aiworks .aiw-head b { font-size: 12px; letter-spacing: .12em; } .aiworks .aiw-head span { flex: 1; font-size: 11px; color: var(--muted, #64748b); } .aiworks .aiw-def { font-size: 11px; color: var(--muted, #64748b); background: var(--hover); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; } .aiworks .aiw-def b { color: var(--accent, #6C5CE7); } .aiworks .aiw-rows { display: flex; flex-direction: column; gap: 5px; max-height: min(56vh, 480px); overflow: auto; } .aiworks .aiw-row { display: grid; grid-template-columns: 1fr 132px 118px; gap: 6px; align-items: center; } .aiworks .aiw-row b { font-size: 11.5px; font-weight: 600; color: var(--text); } .aiworks .aiw-row select { border: 1px solid var(--border); border-radius: 7px; background: var(--hover); color: var(--text); font: inherit; font-size: 11px; padding: 4px 6px; outline: none; } .aiworks .aiw-foot { display: flex; align-items: center; gap: 8px; } .aiworks .aiw-foot span { flex: 1; font-size: 10.5px; color: var(--muted, #64748b); } .askai .askai-sel { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); color: var(--text); font: inherit; font-size: 12px; padding: 6px 8px; outline: none; } .askai .askai-sel:focus { border-color: var(--accent); } /* AI version bar */ .ver-bar { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; padding: 8px 12px; border: 1.3px dashed var(--border); border-radius: 11px; font-size: 12px; } .ver-bar span { font-weight: 800; color: var(--accent-2); } .ver-bar button { font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 8px; border-radius: 7px; } .ver-bar button:hover { background: var(--hover); color: var(--text); } /* toast */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; background: var(--panel-solid); border: 1px solid var(--border); color: var(--text); padding: 11px 20px; border-radius: 12px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow); animation: pop .2s ease; display: flex; align-items: center; gap: 14px; white-space: nowrap; } .toast-act { height: 26px; padding: 0 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; color: #fff; background: var(--accent); border: 1px solid var(--accent); transition: .14s; } .toast-act:hover { filter: brightness(1.12); } @keyframes pop { from { opacity: 0; transform: translate(-50%, 8px); } } /* ── the CAD draftsman: what model, how hard it thinks, and whether it checks its own work ── */ .cad-ai-cfg { display: flex; gap: 5px; padding: 0 0 7px; } .cad-ai-cfg select { flex: 1 1 0; min-width: 0; border: 1px solid rgba(120,150,220,.25); background: rgba(20,26,46,.6); color: #dfe6f6; font-family: var(--font); font-size: 10.5px; font-weight: 700; border-radius: 7px; padding: 4px 5px; cursor: pointer; } .cad-ai-agent { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: #9fb0d8; cursor: pointer; white-space: nowrap; } .cad-ai-row { display: flex; gap: 6px; } .cad-ai-row .cad-btn { flex: 1; justify-content: center; } .cad-ai-log .cmd { color: #5ad17f; } .cad-ai-log .cmd b { color: #5ad17f; } .cad-ai-log b { font-size: 8.5px; letter-spacing: .1em; opacity: .55; margin-inline-end: 5px; } #nodes .dt-note { margin: 0 7px 6px; font-size: 9.5px; line-height: 1.5; color: var(--muted, #64748b); opacity: .8; } #nodes .dt-found { flex: 0 0 auto; max-height: 56px; overflow: auto; } #nodes .dt-pickbar, #nodes .dt-warn, #nodes .dt-note, #nodes .dt-foot { flex: 0 0 auto; } #nodes .dt-out { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: flex-start; justify-content: center; } #nodes .dt-out img { max-height: 100%; width: auto; max-width: 100%; } #nodes .dt-texts { flex: 0 1 auto; } /* the primary action, in the bar */ #nodes .dt-bar button.go { background: linear-gradient(100deg, #F59E0B, #EC4899); color: #fff; border-color: transparent; } #nodes .dt-bar button.go[disabled] { opacity: .6; cursor: default; } #nodes .dt-bar button.go { position: relative; overflow: hidden; } #nodes .dt-bar button.go .pg { position: absolute; inset: auto 0 0 0; height: 2.5px; background: rgba(255,255,255,.85); transition: width .3s ease; } /* ── a real browser, driven from here ── */ #nodes .br-bar { display: flex; align-items: center; gap: 4px; padding: 6px 7px; flex: 0 0 auto; } #nodes .br-bar .nin { flex: 1 1 0; width: auto; min-width: 0; font-size: 11px; } #nodes .br-bar button { flex: 0 0 auto; display: inline-flex; align-items: center; border: 1px solid var(--border); background: var(--hover); color: var(--muted, #64748b); border-radius: 7px; padding: 4px 7px; cursor: pointer; } #nodes .br-bar button:hover { color: var(--text); } #nodes .br-bar button.on { color: #fff; background: linear-gradient(100deg, #0EA5E9, #7C5CFF); border-color: transparent; } #nodes .br-stage { flex: 1 1 auto; min-height: 0; margin: 0 7px; border-radius: 9px; overflow: hidden; background: #0b1020; position: relative; outline: none; display: flex; align-items: center; justify-content: center; } #nodes .br-stage:focus-within { box-shadow: inset 0 0 0 2px #0EA5E9; } #nodes .br-stage canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; cursor: default; } #nodes .br-wait { position: absolute; color: #7f93bb; font-size: 11px; } #nodes .br-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 4px 9px 0; font-size: 9.5px; color: var(--muted, #64748b); } #nodes .br-foot span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .br-foot em { font-style: normal; font-variant-numeric: tabular-nums; } #nodes .br-foot em.warn { color: #B45309; font-weight: 700; } #nodes .br-tabs { flex: 0 0 auto; max-height: 30%; overflow: auto; margin: 0 7px 5px; display: flex; flex-direction: column; gap: 3px; } #nodes .br-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 1px solid var(--border); background: var(--hover); border-radius: 8px; padding: 5px 8px; cursor: pointer; font-family: var(--font); text-align: start; } #nodes .br-tabs button.on { border-color: #0EA5E9; } #nodes .br-tabs button b { font-size: 10.5px; color: var(--text); } #nodes .br-tabs button span { font-size: 9px; color: var(--muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } #nodes .br-tabs button.new { flex-direction: row; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--muted, #64748b); } #nodes .br-ask { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin: 4px 7px 0; padding: 5px 9px; border-radius: 8px; font-size: 10px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.34); color: #B45309; } #nodes .br-ask.on { background: rgba(14,165,233,.09); border-color: rgba(14,165,233,.34); color: #0369A1; } #nodes .br-ask b { flex: 0 0 auto; font-weight: 800; } #nodes .br-ask span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .br-ask button { flex: 0 0 auto; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 6px; padding: 2px 8px; cursor: pointer; font-family: var(--font); font-size: 9.5px; font-weight: 800; } #nodes .br-ask button.no { opacity: .7; } #nodes .br-off { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px 24px; color: var(--muted, #64748b); } #nodes .br-off b { font-size: 13px; color: var(--text); font-weight: 800; } #nodes .br-off span { font-size: 11px; line-height: 1.6; max-width: 48ch; } #nodes .br-off span.bad { color: #E11D2A; } #nodes .br-off code { font-size: 10.5px; font-family: var(--mono, ui-monospace, monospace); background: var(--hover); border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; color: var(--text); } /* ── massing → real ── */ #nodes .ms-bar { display: flex; align-items: center; gap: 5px; padding: 0 7px; flex: 0 0 auto; } #nodes .ms-bar .ms-sp { flex: 1; } #nodes .ms-bar button { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: var(--hover); color: var(--muted, #64748b); border-radius: 7px; padding: 4px 8px; cursor: pointer; font-family: var(--font); font-size: 10px; font-weight: 700; } #nodes .ms-bar button:hover { color: var(--text); } #nodes .ms-bar button.on { color: var(--text); border-color: #0EA5E9; } #nodes .ms-bar button[disabled] { opacity: .5; cursor: default; } #nodes .ms-note, #nodes .ms-hint { padding: 0 8px; font-size: 9.5px; line-height: 1.6; color: var(--muted, #64748b); flex: 0 0 auto; } #nodes .ms-hint { padding: 3px 0 0; opacity: .8; } #nodes .ms-study { flex: 0 1 auto; min-height: 0; overflow: auto; margin: 4px 7px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); display: flex; flex-direction: column; gap: 4px; } #nodes .ms-k { font-size: 10px; line-height: 1.55; color: var(--text); } #nodes .ms-k b { display: inline-block; min-width: 74px; color: var(--muted, #64748b); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; } #nodes .ms-keep { margin-top: 3px; display: flex; flex-direction: column; gap: 3px; } #nodes .ms-keep > b { color: var(--muted, #64748b); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; } #nodes .ms-keep textarea { resize: vertical; font-size: 10px; line-height: 1.5; } #nodes .ms-opts { display: flex; gap: 5px; padding: 3px 7px 0; flex: 0 0 auto; } #nodes .ms-opts label { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--muted, #64748b); } #nodes .ms-opts .nin { flex: 0 0 auto; width: 100%; font-size: 10px; padding: 4px 5px; } #nodes .ms-prompt { flex: 1 1 auto; min-height: 90px; display: flex; flex-direction: column; gap: 3px; margin: 4px 7px; } #nodes .ms-prompt > b { color: var(--muted, #64748b); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; } #nodes .ms-prompt textarea { flex: 1 1 auto; min-height: 0; resize: none; font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; line-height: 1.55; } /* .nbtn.run is flex:1 by design — in a card whose body is full of content it simply fills the last row. In THIS card, before a study exists, there is no other content, so "fills the remaining space" meant "is the entire card". */ #nodes .ms-bar ~ .nbtn.run { flex: 0 0 auto; margin: 6px 7px 0; } #nodes .ms-spacer { flex: 1 1 auto; min-height: 0; } #nodes .ms-h { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; } #nodes .ms-h span { flex: 1 1 0; min-width: 0; font-size: 9.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .ms-h .nin { flex: 0 0 42px; width: 42px; font-size: 10px; padding: 3px 4px; text-align: center; } #nodes .ms-h em { flex: 0 0 auto; font-style: normal; font-size: 8.5px; color: var(--muted, #64748b); } #nodes .ms-warn { flex: 0 0 auto; margin: 4px 7px; padding: 6px 9px; border-radius: 8px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.34); color: #B45309; font-size: 10px; line-height: 1.55; display: flex; align-items: flex-start; gap: 5px; } /* ── choosing what goes ── */ #nodes .dt-ov { position: absolute; inset: 0; pointer-events: none; } #nodes .dt-boxes { position: absolute; inset: 0; width: 100%; height: 100%; } #nodes .dt-boxes polygon { pointer-events: auto; cursor: pointer; stroke-width: 2.5; transition: fill .1s; } #nodes .dt-boxes polygon.on { fill: rgba(225,29,42,.22); stroke: #E11D2A; } #nodes .dt-boxes polygon.off { fill: rgba(120,140,180,.06); stroke: rgba(140,160,200,.55); stroke-dasharray: 5 4; } #nodes .dt-boxes polygon:hover { fill: rgba(14,165,233,.3); } #nodes .dt-pickbar { display: flex; align-items: center; gap: 6px; padding: 0 7px 5px; font-size: 10px; color: var(--muted, #64748b); } #nodes .dt-pickbar b { font-variant-numeric: tabular-nums; color: var(--text); } #nodes .dt-pickbar span { flex: 1; opacity: .7; } #nodes .dt-pickbar button { border: 1px solid var(--border); background: var(--hover); color: inherit; border-radius: 6px; padding: 2px 7px; cursor: pointer; font-family: var(--font); font-size: 9.5px; font-weight: 700; } #nodes .dt-found span { cursor: pointer; } #nodes .dt-found span.on { border-color: #E11D2A; color: var(--text); } /* ── the extracted text layer ── */ #nodes .dt-out { position: relative; margin: 7px; border-radius: 9px; overflow: hidden; background: var(--hover); } #nodes .dt-out img { display: block; width: 100%; height: auto; } #nodes .dt-text { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } #nodes .dt-text text { pointer-events: auto; cursor: pointer; } #nodes .dt-text text.on { paint-order: stroke; stroke: rgba(14,165,233,.9); stroke-width: 3px; } #nodes .dt-foot { display: flex; align-items: center; gap: 6px; padding: 0 7px 6px; font-size: 10px; color: var(--muted, #64748b); } #nodes .dt-foot b { font-weight: 800; } #nodes .dt-foot i { font-style: normal; opacity: .6; } #nodes .dt-foot button { border: 1px solid var(--border); background: var(--hover); color: inherit; border-radius: 7px; padding: 3px 7px; cursor: pointer; font-family: var(--font); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } #nodes .dt-foot button.on { background: linear-gradient(100deg, #0EA5E9, #7C5CFF); color: #fff; border-color: transparent; } #nodes .dt-texts { max-height: 190px; overflow: auto; padding: 0 7px 7px; } #nodes .dt-t { display: flex; align-items: center; gap: 5px; padding: 2px 0; } #nodes .dt-t.off { opacity: .4; } #nodes .dt-t.on { background: rgba(14,165,233,.1); border-radius: 7px; } #nodes .dt-t .sw { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 4px; border: 1px solid var(--border); background: var(--mc); cursor: pointer; padding: 0; } #nodes .dt-t input { flex: 1 1 0; min-width: 0; border: 1px solid transparent; background: transparent; color: var(--text); font-family: var(--font); font-size: 11.5px; border-radius: 5px; padding: 2px 5px; outline: none; } #nodes .dt-t input:focus { border-color: var(--accent); background: var(--hover); } #nodes .dt-t input.sz { flex: 0 0 auto; width: 38px; text-align: end; font-variant-numeric: tabular-nums; } #nodes .dt-t input.col { flex: 0 0 auto; width: 22px; height: 18px; padding: 0; border: 1px solid var(--border); } #nodes .dt-t button:last-child { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted, #64748b); cursor: pointer; opacity: 0; display: inline-flex; } #nodes .dt-t:hover button:last-child { opacity: 1; } /* ── remove text ── */ #nodes .dt-bar { display: flex; align-items: center; gap: 5px; padding: 5px 7px; flex-wrap: wrap; border-bottom: 1px solid var(--border); color: var(--muted, #64748b); } #nodes .dt-bar button { border: 1px solid var(--border); background: var(--hover); color: inherit; border-radius: 7px; padding: 4px 8px; cursor: pointer; font-family: var(--font); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } #nodes .dt-bar button.on { background: linear-gradient(100deg, #0EA5E9, #7C5CFF); color: #fff; border-color: transparent; } #nodes .dt-bar .nsel { flex: 0 0 auto; font-size: 10px; padding: 3px 5px; } #nodes .dt-n { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; } #nodes .dt-n input { width: 74px; } /* what is available, said before the button is pressed */ #nodes .dt-warn { display: flex; gap: 6px; align-items: flex-start; margin: 6px 7px 0; padding: 6px 8px; border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.08); border-radius: 9px; font-size: 10px; line-height: 1.5; color: var(--muted, #64748b); } #nodes .dt-warn code { font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; background: var(--hover); padding: 1px 4px; border-radius: 4px; display: inline-block; margin-top: 2px; } /* .nbody is a flex column with overflow:hidden, so anything that grows without a limit pushes what is under it out of the card entirely. The bar and the results are fixed; the picture is the part that gives. */ #nodes .nbody:has(.dt-host) { gap: 0; } #nodes .dt-bar { flex: 0 0 auto; } #nodes .dt-host { flex: 1 1 auto; min-height: 80px; margin: 7px; overflow: auto; display: flex; align-items: flex-start; justify-content: center; } #nodes .dt-host.small { flex: 0 1 auto; max-height: 34%; } /* min-width on a flex item defaults to AUTO, which means its own content size — so max-width:100% never bound and the picture kept its natural width, overflowing a centred host on BOTH sides where no scrollbar can reach the left of it. One property. */ #nodes .dt-stage { position: relative; display: inline-block; min-width: 0; max-width: 100%; max-height: 100%; border-radius: 9px; overflow: hidden; background: var(--hover); } #nodes .dt-stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; } #nodes .dt-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; } #nodes .dt-found { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 7px 6px; } #nodes .dt-found span { border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-size: 9.5px; color: var(--muted, #64748b); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .dt-found em { font-size: 9.5px; opacity: .5; font-style: normal; } /* ── the bill of quantities ── */ #nodes .bq-bar { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--muted, #64748b); } #nodes .bq-bar b { font-size: 11.5px; color: var(--text); } #nodes .bq-cur { width: 46px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 11px; font-weight: 700; border-radius: 6px; padding: 3px 5px; text-align: center; } #nodes .bq-note { font-size: 10px; opacity: .7; } #nodes .bq-bar button { margin-inline-start: auto; border: 1px solid var(--border); background: var(--hover); color: inherit; border-radius: 7px; padding: 4px 7px; cursor: pointer; display: inline-flex; } #nodes .bq-wrap { overflow: auto; height: calc(100% - 36px); } #nodes table.bq { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; } #nodes table.bq th { position: sticky; top: 0; z-index: 1; background: var(--hover); text-align: start; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #64748b); padding: 5px 8px; border-bottom: 1px solid var(--border); } #nodes table.bq td { padding: 3px 8px; border-bottom: 1px solid var(--border); } #nodes table.bq td.n, #nodes table.bq th.n { text-align: end; } #nodes table.bq td.g { font-size: 9.5px; opacity: .55; white-space: nowrap; } #nodes table.bq td.u { opacity: .6; font-size: 10.5px; } #nodes table.bq td.a { font-weight: 700; } #nodes table.bq td i { opacity: .35; font-style: normal; font-size: 10px; } #nodes table.bq td.r input { width: 78px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 11px; border-radius: 6px; padding: 2px 6px; text-align: end; outline: none; } #nodes table.bq td.r input:focus { border-color: var(--accent); } #nodes table.bq tfoot td { position: sticky; bottom: 0; background: var(--panel-solid); border-top: 2px solid var(--border); font-weight: 800; padding: 7px 8px; } /* ── the time plan ── */ #nodes .pn-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--muted, #64748b); font-size: 10.5px; } #nodes .pn-bar b { font-size: 11.5px; color: var(--text); } #nodes .pn-bar label { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; } #nodes .pn-bar input[type=date] { border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 10.5px; border-radius: 6px; padding: 3px 5px; } #nodes .pn-note { opacity: .7; } #nodes .pn-bar button { border: 1px solid var(--border); background: var(--hover); color: inherit; border-radius: 7px; padding: 4px 8px; cursor: pointer; font-family: var(--font); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } #nodes .pn-bar button:last-of-type { margin-inline-start: auto; } #nodes .pn-wrap { overflow: auto; height: calc(100% - 36px); } #nodes table.pn { width: 100%; border-collapse: collapse; font-size: 11px; } #nodes table.pn th { position: sticky; top: 0; z-index: 2; background: var(--hover); text-align: start; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #64748b); padding: 4px 7px; border-bottom: 1px solid var(--border); } #nodes table.pn td { padding: 2px 7px; border-bottom: 1px solid var(--border); vertical-align: middle; } #nodes table.pn tr.on td { background: rgba(14,165,233,.07); } #nodes table.pn input { width: 100%; border: 1px solid transparent; background: transparent; color: var(--text); font-family: var(--font); font-size: 11px; border-radius: 5px; padding: 2px 4px; outline: none; } #nodes table.pn input:focus { border-color: var(--accent); background: var(--hover); } #nodes table.pn input.w2 { width: 42px; text-align: end; } #nodes table.pn input.w3 { width: 84px; } #nodes table.pn td.d { font-variant-numeric: tabular-nums; opacity: .65; white-space: nowrap; } #nodes table.pn td.bars, #nodes table.pn th.bars { width: 55%; } #nodes .pn-scale { position: relative; height: 12px; } #nodes .pn-scale i { position: absolute; top: 0; font-style: normal; font-size: 8.5px; opacity: .5; transform: translateX(-50%); white-space: nowrap; } #nodes .pn-track { position: relative; height: 16px; background: var(--hover); border-radius: 4px; } #nodes .pn-track > span { position: absolute; top: 2px; height: 12px; border-radius: 4px; background: linear-gradient(100deg, #0EA5E9, #7C5CFF); display: block; overflow: hidden; } #nodes .pn-track > span.crit { background: linear-gradient(100deg, #E11D2A, #FB923C); } #nodes .pn-track > span i { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.45); } #nodes .pn-track > span b { position: absolute; inset-inline-start: 4px; top: -1px; font-size: 8.5px; color: #fff; font-weight: 800; opacity: .85; } /* today, as a line you cannot miss */ #nodes .pn-track u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #10B981; } #nodes table.pn td.x button { border: 0; background: transparent; color: var(--muted, #64748b); cursor: pointer; opacity: 0; display: inline-flex; } #nodes table.pn tr:hover td.x button { opacity: 1; } /* ── markup ── */ #nodes .mk-bar { display: flex; align-items: center; gap: 4px; padding: 5px 7px; flex-wrap: wrap; border-bottom: 1px solid var(--border); color: var(--muted, #64748b); } #nodes .mk-bar > button { border: 1px solid var(--border); background: var(--hover); color: inherit; border-radius: 7px; padding: 4px 8px; cursor: pointer; font-family: var(--font); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } #nodes .mk-bar > button.on { background: linear-gradient(100deg, #0EA5E9, #7C5CFF); color: #fff; border-color: transparent; } #nodes .mk-bar > button.go { background: linear-gradient(100deg, #F59E0B, #EC4899); color: #fff; border-color: transparent; } #nodes .mk-bar b { font-size: 10.5px; color: var(--text); } #nodes .mk-cols { display: inline-flex; gap: 3px; margin-inline-start: 6px; } #nodes .mk-cols button { width: 16px; height: 16px; border-radius: 5px; border: 2px solid transparent; background: var(--mc); cursor: pointer; padding: 0; } #nodes .mk-cols button.on { border-color: var(--text); } /* The picture is letterboxed in the stage, and the marks live in a box that is exactly the picture — so a resize scales both by the same amount and the marks stay on what they were drawn over. Same pattern as the region card. */ #nodes .mk-stage[data-mk-stage] { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: var(--hover); touch-action: none; cursor: crosshair; } #nodes .mk-stage .mk-fit { position: relative; display: inline-block; line-height: 0; max-width: 100%; max-height: 100%; } #nodes .mk-stage[data-mk-stage] img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; } #nodes .mk-svg { position: absolute; inset: 0; width: 100%; height: 100%; } #nodes .mk-svg [data-mk-id] { cursor: pointer; } #nodes .mk-svg .mk-pin { opacity: .92; } #nodes .mk-svg .mk-pin:hover { opacity: 1; } #nodes .mk-list { position: relative; flex: none; max-height: 44%; overflow: auto; background: var(--panel-solid); border-top: 1px solid var(--border); padding: 5px; } #nodes .mk-row { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 7px; } #nodes .mk-row.on { background: rgba(14,165,233,.14); box-shadow: inset 2px 0 0 #0EA5E9; } #nodes .mk-row u { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--mc); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; text-decoration: none; } #nodes .mk-row input { flex: 1 1 0; min-width: 0; border: 1px solid transparent; background: transparent; color: var(--text); font-family: var(--font); font-size: 11.5px; border-radius: 5px; padding: 3px 5px; outline: none; } #nodes .mk-row input:focus { border-color: var(--accent); background: var(--hover); } #nodes .mk-row button { flex: 0 0 auto; border: 1px solid var(--border); background: transparent; color: var(--muted, #64748b); border-radius: 6px; padding: 2px 5px; cursor: pointer; display: inline-flex; } #nodes .mk-row button.on { background: #10B981; border-color: transparent; color: #fff; } /* ── the spreadsheet ── */ #nodes .cx-bar { display: flex; align-items: center; gap: 5px; padding: 5px 6px; border-bottom: 1px solid var(--border); } #nodes .cx-ref { flex: 0 0 auto; min-width: 34px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 800; color: var(--accent); } #nodes .cx-fx { flex: 1 1 0; min-width: 0; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; border-radius: 7px; padding: 4px 7px; outline: none; } #nodes .cx-fx:focus { border-color: var(--accent); } #nodes .cx-bar button { flex: 0 0 auto; border: 1px solid var(--border); background: var(--hover); color: var(--muted, #64748b); font-family: var(--font); font-size: 10px; font-weight: 700; border-radius: 7px; padding: 4px 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; } #nodes .cx-bar button:hover { color: var(--text); } #nodes .cx-wrap { overflow: auto; height: calc(100% - 34px); } #nodes table.cx { border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; } #nodes table.cx th { position: sticky; top: 0; z-index: 1; background: var(--hover); color: var(--muted, #64748b); font-size: 9.5px; font-weight: 800; border: 1px solid var(--border); padding: 2px 5px; min-width: 26px; } #nodes table.cx tbody th { position: sticky; left: 0; top: auto; z-index: 0; } #nodes table.cx td { border: 1px solid var(--border); padding: 2px 6px; min-width: 74px; max-width: 220px; height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: cell; } #nodes table.cx td.n { text-align: end; } #nodes table.cx td.on { outline: 2px solid var(--accent); outline-offset: -2px; } #nodes table.cx td.bad { color: #E11D2A; } /* ── the Space card's view controls ────────────────────────────────────── Two rows, because they answer different questions: how to LOOK at the folder, and what to look AT. Both are quiet until used — a browser whose chrome shouts louder than its contents is not a browser. */ #nodes .sp-tools { display: flex; align-items: center; gap: 6px; padding: 5px 7px 0; } #nodes .sp-views { display: flex; gap: 2px; background: var(--hover); border-radius: 8px; padding: 2px; flex: 0 0 auto; } #nodes .sp-views button { border: 0; background: transparent; color: var(--muted, #64748b); border-radius: 6px; padding: 4px 6px; cursor: pointer; display: inline-flex; } #nodes .sp-views button:hover { color: var(--text); } #nodes .sp-views button.on { background: var(--panel-solid); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.18); } #nodes .sp-find { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 5px; background: var(--hover); border: 1px solid transparent; border-radius: 8px; padding: 0 7px; color: var(--muted, #64748b); } #nodes .sp-find:focus-within { border-color: var(--accent); color: var(--text); } #nodes .sp-find input { flex: 1 1 0; min-width: 0; width: auto; border: 0; background: transparent; color: var(--text); font-family: var(--font); font-size: 11.5px; font-weight: 600; padding: 5px 0; outline: none; } #nodes .sp-find button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; display: inline-flex; } /* ── the YouTube and web-page cards: an address, then the page ── */ #nodes .tb-bar { display: flex; align-items: center; gap: 6px; padding: 6px 7px; border-bottom: 1px solid var(--border); color: var(--muted, #64748b); } #nodes .tb-bar .nin { flex: 1 1 0; width: auto; min-width: 0; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; } #nodes .tb-bar button, #nodes .tb-bar .tb-out { flex: 0 0 auto; display: inline-flex; align-items: center; border: 1px solid var(--border); background: var(--hover); color: var(--muted, #64748b); border-radius: 7px; padding: 4px 6px; cursor: pointer; } #nodes .tb-bar button:hover, #nodes .tb-bar .tb-out:hover { color: var(--text); } #nodes .tb-frame { position: relative; flex: 1 1 auto; min-height: 0; } #nodes .tb-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; } /* under the frame, so a site that declines to be embedded leaves an explanation showing through rather than a white rectangle */ #nodes .tb-note { position: absolute; inset: auto 0 0 0; z-index: -1; padding: 14px; text-align: center; font-size: 11px; line-height: 1.5; color: var(--muted, #64748b); } #nodes .nd-body:has(.tb-frame) { display: flex; flex-direction: column; } /* the Link card's second line: the host, and the page's own title after it */ #nodes .lk-host { padding: 5px 10px 6px; font-size: 11px; color: var(--muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .lk-host b { color: var(--text); font-weight: 700; } /* a site that declines to be framed says so, in its own words */ #nodes .tb-block { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 22px 26px; color: var(--muted, #64748b); } #nodes .tb-block b { font-size: 14px; color: var(--text); font-weight: 800; } #nodes .tb-block code { font-size: 11px; font-family: var(--mono, ui-monospace, monospace); background: var(--hover); border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; color: var(--text); } #nodes .tb-block span { font-size: 11.5px; line-height: 1.6; max-width: 46ch; } #nodes .tb-acts { display: flex; gap: 8px; margin-top: 4px; } #nodes .tb-acts .nbtn { width: auto; padding: 7px 13px; text-decoration: none; } #nodes .tb-note.live { position: static; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; background: var(--card); } #nodes .tb-note.bad { color: #E11D2A; } #nodes .tb-bar button.on { color: var(--text); background: var(--hover); border-radius: 6px; } /* where the code runs, said on the card rather than in a doc nobody opens */ #nodes .cw-where { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 10px; font-weight: 600; line-height: 1.35; color: var(--muted, #64748b); background: var(--hover); border-bottom: 1px solid var(--border); } #nodes .cw-where svg { flex: 0 0 auto; opacity: .7; } #nodes .cw-where button { margin-inline-start: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: var(--panel-solid); color: #E11D2A; font-family: var(--font); font-size: 10px; font-weight: 800; border-radius: 7px; padding: 3px 8px; cursor: pointer; } #nodes .cw-where button:hover { background: #E11D2A; border-color: #E11D2A; color: #fff; } #nodes .sp-sort { flex: 0 0 auto; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 4px 5px; cursor: pointer; } #nodes .sp-dir { flex: 0 0 auto; border: 1px solid var(--border); background: var(--hover); color: var(--muted, #64748b); border-radius: 8px; padding: 4px 5px; cursor: pointer; display: inline-flex; } #nodes .sp-dir.on { color: #fff; background: linear-gradient(100deg, #0EA5E9, #7C5CFF); border-color: transparent; } #nodes .sp-dir.on svg { transform: rotate(180deg); } #nodes .sp-cats { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 6px 7px 2px; } #nodes .sp-cats button { border: 1px solid var(--border); background: transparent; color: var(--muted, #64748b); border-radius: 999px; padding: 3px 9px; font-family: var(--font); font-size: 10.5px; font-weight: 700; cursor: pointer; } #nodes .sp-cats button:hover { color: var(--text); } #nodes .sp-cats button.on { background: linear-gradient(100deg, #0EA5E9, #7C5CFF); border-color: transparent; color: #fff; } #nodes .sp-cats .sp-count { margin-inline-start: auto; font-size: 10px; font-weight: 700; opacity: .5; } /* ── the tile views ── */ #nodes .sp-grid { display: grid; gap: 7px; padding: 7px; } #nodes .sp-grid.sm { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); } #nodes .sp-grid.md { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } #nodes .sp-grid.lg { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); } #nodes .sp-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 5px 6px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; overflow: hidden; } #nodes .sp-tile:hover { background: var(--hover); border-color: var(--border); } #nodes .sp-tile.picked { background: rgba(14,165,233,.12); border-color: var(--accent); } #nodes .sp-tile .sp-tth { display: grid; place-items: center; width: 100%; border-radius: 7px; background: var(--hover); color: var(--muted, #64748b); overflow: hidden; } #nodes .sp-grid.sm .sp-tth { height: 46px; } #nodes .sp-grid.md .sp-tth { height: 76px; } #nodes .sp-grid.lg .sp-tth { height: 118px; } #nodes .sp-tile .sp-tth img { width: 100%; height: 100%; object-fit: cover; display: block; } #nodes .sp-tile b { font-size: 10.5px; font-weight: 600; line-height: 1.25; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #nodes .sp-grid.sm .sp-tile b { -webkit-line-clamp: 1; font-size: 9.5px; } #nodes .sp-tile u { font-size: 8.5px; font-weight: 800; letter-spacing: .06em; opacity: .45; text-decoration: none; } #nodes .sp-grid.sm .sp-tile u { display: none; } #nodes .sp-tile .sp-x { position: absolute; top: 4px; inset-inline-end: 4px; opacity: 0; } #nodes .sp-tile:hover .sp-x { opacity: 1; } #nodes .sp-tile.dir .sp-tth { background: rgba(124,92,255,.12); color: #7C5CFF; } /* ── the file you just dropped, while it is landing ────────────────────── Anchored at the cursor, not in a corner: on a board the size of a room a corner is somewhere else entirely, and a bar you have to go looking for is not feedback. The percentage is real — counted off the upload itself — and the phases after it (parsing a drawing, laying out a document) have no percentage to report, so the bar shuttles rather than inventing one. */ .drop-prog { position: fixed; z-index: 210; min-width: 210px; max-width: 300px; background: var(--panel-solid); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 9px 12px 10px; box-shadow: var(--shadow); animation: dp-in .16s ease; pointer-events: none; } .drop-prog b { display: block; font-size: 12px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drop-prog i { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; opacity: .6; margin: 2px 0 6px; min-height: 13px; } .drop-prog .dp-bar { height: 4px; border-radius: 3px; background: var(--hover); overflow: hidden; } .drop-prog .dp-bar span { display: block; height: 100%; width: 0; background: linear-gradient(100deg, #0EA5E9, #7C5CFF); transition: width .18s ease; } /* no number to show — so it paces, and never pretends to know how far along it is */ .drop-prog.wait .dp-bar span { width: 100% !important; background: linear-gradient(100deg, transparent, #7C5CFF, transparent); background-size: 220% 100%; animation: dp-run 1.1s linear infinite; } .drop-prog.ok .dp-bar span { background: linear-gradient(100deg, #10B981, #34D399); } .drop-prog.ok i { opacity: .85; color: #10B981; } .drop-prog.bad .dp-bar span { width: 100% !important; background: #E11D2A; animation: none; } .drop-prog.bad i { opacity: 1; color: #E11D2A; white-space: normal; } .drop-prog.out { opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; } @keyframes dp-in { from { opacity: 0; transform: translateY(6px); } } @keyframes dp-run { from { background-position: 120% 0; } to { background-position: -120% 0; } } /* RTL tweaks */ [dir="rtl"] .rcursor .tag { margin: 2px 12px 0 0; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; } ::selection { background: rgba(108, 92, 231, .4); } /* Read-out node: a small "reading N sources" line above the text pane. */ .nd-ro-head{font:600 10.5px/1.5 var(--font);letter-spacing:.02em;text-transform:uppercase; opacity:.62;padding:0 2px 5px} /* ═══ SPAiCE Space Explorer — the board's drive, full screen ═══════════════ Mounted into #focus-root, so it inherits the app's overlay and head band. Tree on the left (the DMAG workspace idiom), thumbnails on the right. */ .sx-head { gap: 10px; flex-wrap: wrap; } .sx-brand { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 14px; } .sx-crumbs { display: flex; align-items: center; gap: 2px; overflow: auto; max-width: 34vw; } .sx-crumbs::-webkit-scrollbar { height: 0; } .sx-crumb { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; padding: 4px 7px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; white-space: nowrap; } .sx-crumb:hover { background: var(--hover); color: var(--text); } .sx-crumbs i { color: var(--muted); opacity: .45; font-style: normal; } .sx-find { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); color: var(--muted); } .sx-find input { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; outline: none; width: 140px; } .sx-sort { border: 1px solid var(--border); border-radius: 9px; background: var(--hover); color: var(--text); font: inherit; font-size: 12.5px; padding: 6px 8px; outline: none; } .sx-ico { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); color: var(--text); cursor: pointer; padding: 0; } .sx-close { border-color: rgba(225,29,42,.45); color: #E11D2A; } .sx-close:hover { background: rgba(225,29,42,.12); } .sx-ico:hover { border-color: var(--accent); color: var(--accent); } .sx-body { flex: 1; display: flex; min-height: 0; } .sx-tree { width: 232px; flex: 0 0 auto; border-inline-end: 1px solid var(--border); overflow: auto; padding: 10px 6px; background: var(--panel); } .sx-tnode { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; cursor: pointer; font-size: 12.5px; color: var(--text); } .sx-tnode:hover { background: var(--hover); } .sx-tnode.on { background: color-mix(in srgb, var(--accent) 22%, transparent); font-weight: 700; } .sx-tnode.drop-on, .sx-tile.drop-on, .sx-row.drop-on { outline: 2px dashed var(--accent); outline-offset: -2px; } .sx-twist { width: 15px; height: 15px; flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; display: grid; place-items: center; transition: transform .14s; } .sx-twist svg { width: 11px; height: 11px; } .sx-twist.open { transform: rotate(90deg); } .sx-tico { display: flex; color: var(--accent); } .sx-tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sx-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .sx-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--border); font-size: 12.5px; min-height: 48px; flex-wrap: wrap; } .sx-bar b { font-size: 12px; color: var(--muted); font-weight: 700; } .sx-hint { color: var(--muted); font-size: 12px; } .sx-act { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; padding: 5px 10px; cursor: pointer; text-decoration: none; } .sx-act:hover { border-color: var(--accent); color: var(--accent); } .sx-act.danger:hover { border-color: var(--danger); color: var(--danger); } .sx-act.arm { background: var(--danger); border-color: var(--danger); color: #fff; } .sx-pane { flex: 1; overflow: auto; padding: 14px 16px; position: relative; } /* rows size by their CONTENT, never by the pane's height: the tiles have overflow:hidden, so on auto rows a big folder shared the pane's height across 30 rows and every thumbnail collapsed to a strip instead of scrolling */ .sx-pane.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); grid-auto-rows: max-content; gap: 12px; align-content: start; } .sx-tile { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; cursor: pointer; user-select: none; transition: border-color .12s, transform .12s; } .sx-tile:hover { border-color: var(--accent); transform: translateY(-1px); } .sx-tile.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); } .sx-thumb { position: relative; height: 104px; display: grid; place-items: center; background: var(--hover); overflow: hidden; } .sx-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .sx-ph { display: grid; place-items: center; color: var(--muted); opacity: .7; } .sx-tile.dir .sx-ph { color: var(--accent); opacity: 1; } .sx-cap { padding: 7px 9px; display: flex; flex-direction: column; gap: 2px; } .sx-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sx-cap i { font-size: 10px; color: var(--muted); font-style: normal; } .sx-ren { width: 100%; box-sizing: border-box; border: 1px solid var(--accent); border-radius: 6px; background: var(--panel-solid); color: var(--text); font: inherit; font-size: 12px; padding: 2px 5px; outline: none; } .sx-head-row, .sx-row { display: grid; grid-template-columns: 22px 26px 1fr 70px 80px 110px; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; } .sx-head-row { color: var(--muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); border-radius: 0; padding-bottom: 8px; margin-bottom: 4px; } .sx-head-row i, .sx-row i { font-style: normal; color: var(--muted); font-size: 11px; } .sx-row { cursor: pointer; user-select: none; } .sx-row:hover { background: var(--hover); } .sx-row.on { background: color-mix(in srgb, var(--accent) 20%, transparent); } .sx-rico { display: flex; align-items: center; justify-content: center; color: var(--muted); } .sx-rico img { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; } .sx-empty { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 60px 20px; color: var(--muted); font-size: 12.5px; } .sx-empty.bad { color: var(--danger); } .sx-status { flex: 0 0 auto; padding: 7px 16px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); } /* preview */ .sx-light { position: fixed; inset: 0; z-index: 200; background: rgba(6, 6, 16, .92); display: flex; flex-direction: column; } .sx-lbar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: #EDEDF7; font-size: 12.5px; font-weight: 700; } .sx-lbar i { font-style: normal; font-weight: 400; opacity: .6; font-size: 11px; } .sx-lbar button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; padding: 0; } .sx-lbar button:hover { background: rgba(255, 255, 255, .18); } .sx-lbar button[data-nav="-1"] svg { transform: rotate(-90deg); } .sx-lbar button[data-nav="1"] svg { transform: rotate(90deg); } .sx-lbody { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 20px 20px; } .sx-lbody img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; } .sx-lbody iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; background: #fff; } .sx-noprev { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #9C9CB8; font-size: 13px; } /* the explorer's right-click menu — the same actions, at the pointer */ .sx-menu { position: fixed; z-index: 210; min-width: 196px; padding: 5px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel-solid); box-shadow: var(--shadow); display: flex; flex-direction: column; } .sx-menu button { display: flex; align-items: center; gap: 9px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; padding: 7px 9px; cursor: pointer; text-align: start; } .sx-menu button:hover { background: var(--hover); } .sx-menu button.danger { color: var(--danger); } .sx-src { max-width: 190px; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 8px; outline: none; } .sx-crumb span { margin-inline-start: 5px; } /* ── explorer v2: select boxes, clipboard, details, zoom, dialogs ── */ .sx-act.accent { border-color: var(--accent); color: var(--accent); } .sx-ico.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .sx-chk { position: absolute; top: 6px; left: 6px; z-index: 2; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .6); border-radius: 6px; background: rgba(10, 10, 20, .55); color: #fff; cursor: pointer; padding: 0; opacity: 0; transition: opacity .12s; } .sx-chk svg { width: 12px; height: 12px; opacity: 0; } .sx-tile:hover .sx-chk, .sx-row:hover .sx-chk, .sx-tile.on .sx-chk, .sx-row.on .sx-chk { opacity: 1; } .sx-tile.on .sx-chk, .sx-row.on .sx-chk { background: var(--accent); border-color: var(--accent); } .sx-tile.on .sx-chk svg, .sx-row.on .sx-chk svg { opacity: 1; } .sx-row .sx-chk { position: static; background: transparent; border-color: var(--border); color: #fff; width: 18px; height: 18px; } .sx-row.on .sx-chk { background: var(--accent); border-color: var(--accent); } [dir="rtl"] .sx-chk { left: auto; right: 6px; } .sx-badge { position: absolute; bottom: 6px; right: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; font-style: normal; color: var(--muted); background: var(--panel-solid); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; } .sx-badge.big { position: static; font-size: 11px; margin-top: 6px; } .sx-tile.cut, .sx-row.cut { opacity: .5; } .sx-tile.cut .sx-thumb { outline: 1px dashed var(--muted); outline-offset: -1px; } .sx-thumb img.vec { object-fit: contain; padding: 8px; box-sizing: border-box; background: #fff; } .sx-marq { position: absolute; z-index: 5; border: 1px solid var(--accent); border-radius: 3px; background: color-mix(in srgb, var(--accent) 16%, transparent); pointer-events: none; } /* the details panel */ .sx-info { width: 292px; flex: 0 0 auto; border-inline-start: 1px solid var(--border); overflow: auto; padding: 14px; background: var(--panel); font-size: 12px; } .sx-ihero { position: relative; height: 168px; margin-bottom: 12px; border-radius: 12px; background: var(--hover); display: grid; place-items: center; overflow: hidden; color: var(--muted); } .sx-ihero.pic { cursor: zoom-in; } .sx-ihero[data-preview]:not(.pic) { cursor: pointer; } .sx-ihero img { width: 100%; height: 100%; object-fit: contain; display: block; } .sx-ihero img.vec { background: #fff; padding: 10px; box-sizing: border-box; } .sx-iname { font-size: 13.5px; font-weight: 800; overflow-wrap: anywhere; } .sx-ikind { color: var(--muted); font-size: 11px; margin: 2px 0 10px; } .sx-ikind i { font-style: normal; opacity: .7; } .sx-ifacts { display: grid; grid-template-columns: 82px 1fr; gap: 5px 10px; margin: 0; } .sx-ifacts dt { color: var(--muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding-top: 1px; } .sx-ifacts dd { margin: 0; overflow-wrap: anywhere; } .sx-ipath { display: flex; align-items: flex-start; gap: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; } .sx-ipath span { flex: 1; } .sx-icopy { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 5px; background: var(--hover); color: var(--muted); cursor: pointer; padding: 0; } .sx-icopy:hover { color: var(--accent); border-color: var(--accent); } .sx-irender { margin-top: 14px; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--accent) 8%, transparent); } .sx-irender > b { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 8px; } .sx-iprompt { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11.5px; line-height: 1.45; } .sx-iprompt span { flex: 1; max-height: 160px; overflow: auto; white-space: pre-wrap; } .sx-inote { margin-top: 12px; color: var(--muted); font-size: 11px; } .sx-iacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; } /* the preview: zoom + pan, pages, text, media, caption */ .sx-lbar .sx-lname { max-width: 36vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sx-lzoom { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 8px; padding-inline-end: 10px; border-inline-end: 1px solid rgba(255, 255, 255, .18); } .sx-lzoom b { min-width: 44px; text-align: center; font-size: 11px; font-weight: 700; opacity: .8; } .sx-lbar button.txt { width: auto; padding: 0 8px; font: inherit; font-size: 11px; font-weight: 800; } .sx-zoom { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; cursor: grab; touch-action: none; user-select: none; } .sx-zoom:active { cursor: grabbing; } .sx-zoom img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; transform-origin: center center; will-change: transform; border-radius: 0; pointer-events: none; } .sx-lbody iframe.sx-page { background: #fff; } .sx-lbody video { max-width: 100%; max-height: 100%; border-radius: 10px; background: #000; } .sx-noprev audio { width: min(520px, 80vw); } .sx-noprev i { font-style: normal; opacity: .6; font-size: 12px; } .sx-code { width: 100%; height: 100%; margin: 0; overflow: auto; box-sizing: border-box; padding: 16px 20px; border-radius: 10px; background: #0E0E1A; color: #D9D9EA; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; text-align: start; } /* text reads like a document: paper in light mode, dark pane in dark */ :root[data-theme="light"] .sx-code { background: #FDFDFB; color: #22283E; box-shadow: 0 8px 30px rgba(10,20,50,.35); } :root[data-theme="light"] .sx-light { background: rgba(226, 231, 243, .94); } :root[data-theme="light"] .sx-lbar { color: #1C2237; } :root[data-theme="light"] .sx-lbar button { border-color: rgba(25,35,70,.25); background: rgba(25,35,70,.07); color: #1C2237; } :root[data-theme="light"] .sx-lbar button:hover { background: rgba(25,35,70,.16); } :root[data-theme="light"] .sx-noprev { color: #4A5470; } :root[data-theme="light"] .sx-lcap, :root[data-theme="light"] .sx-lfacts { color: #3D4560; } /* the file-type chips beside the explorer search */ .sx-types { display: inline-flex; gap: 3px; flex-wrap: wrap; } .sx-types .sx-type { border: 1px solid var(--border); border-radius: 999px; background: var(--hover); color: var(--text); font: 700 10px var(--font); padding: 3px 10px; cursor: pointer; } .sx-types .sx-type.on { border-color: #0D9488; color: #0D9488; background: rgba(13,148,136,.1); } .sx-lcap { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; padding: 6px 20px 14px; color: #C9C9DE; font-size: 11.5px; min-height: 20px; } .sx-lfacts { opacity: .75; } .sx-lrender { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-weight: 700; } .sx-lprompt { opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* the menu: separators and shortcut hints */ .sx-menu { min-width: 230px; } .sx-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 6px; } .sx-menu button kbd { margin-inline-start: auto; padding-inline-start: 14px; font: inherit; font-size: 10.5px; color: var(--muted); } /* dialogs: delete confirmation, folder picker */ .sx-dlgback { position: fixed; inset: 0; z-index: 220; background: rgba(6, 6, 16, .55); backdrop-filter: blur(4px); display: grid; place-items: center; } .sx-dlg { width: min(460px, 92vw); max-height: 86vh; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 16px; background: var(--panel-solid); box-shadow: var(--shadow); color: var(--text); } .sx-dhead { display: flex; align-items: center; gap: 9px; font-size: 15px; } .sx-dhead svg { color: var(--danger); } .sx-dlg.pick .sx-dhead svg { color: var(--accent); } .sx-dlg .sx-find { width: 100%; box-sizing: border-box; } .sx-dlg .sx-find input { width: 100%; } .sx-flist { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--hover); } .sx-flist.tall { max-height: 46vh; min-height: 180px; } .sx-frow { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; text-align: start; } .sx-frow svg { flex: 0 0 auto; color: var(--muted); } .sx-frow span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sx-frow i { font-style: normal; font-size: 10.5px; color: var(--muted); } .sx-frow.more { color: var(--muted); justify-content: center; } .sx-frow.pick { cursor: pointer; } .sx-frow.pick:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .sx-frow.pick.on { background: color-mix(in srgb, var(--accent) 24%, transparent); font-weight: 700; } .sx-frow.pick.on svg { color: var(--accent); } .sx-frow.pick.off { opacity: .4; pointer-events: none; } .sx-dnote { font-size: 12px; color: var(--muted); line-height: 1.5; } .sx-dsum { color: var(--text); font-weight: 700; } .sx-dbtns { display: flex; justify-content: flex-end; gap: 8px; } .sx-dangerbtn { display: inline-flex; align-items: center; gap: 6px; background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; } /* the Map node's card IS its iframe */ #nodes .mp-frame { flex: 1; width: 100%; min-height: 0; border: 0; border-radius: 9px; background: #0b1020; display: block; } /* a Space card pointed at another board's space */ #nodes .sp-src { flex: 1; min-width: 0; font-size: 11px; padding: 4px 6px; } #nodes .sp-tag { flex: 0 0 auto; font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 6px; border-radius: 6px; background: rgba(245,158,11,.18); color: #F59E0B; } /* ══ SPAiCE CAD — ported from VECTORA, same dark drafting chrome ══ */ .cad-root { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: #0b0e14; color: #dfe7ff; font-family: 'Inter', system-ui, sans-serif; } /* the bubble-board selection panel lives INSIDE the world iframes; its CSS ships with each world so it is not needed here — the outer host only frames. */ /* the world-card full-screen button */ #nodes .dv-host { position: relative; } #nodes .dv-host .dv-fs { position: absolute; top: 8px; right: 8px; z-index: 5; width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: rgba(14,18,32,.7); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; opacity: .55; transition: opacity .12s; } #nodes .dv-host:hover .dv-fs { opacity: 1; } #nodes .dv-host:fullscreen .dv-fs { top: 14px; right: 14px; } /* the CAD command intellisense */ .cad-cmd { position: relative; } #cad-sugg { position: absolute; left: 10px; bottom: 100%; margin-bottom: 6px; z-index: 30; min-width: 420px; max-width: 560px; background: #12172a; border: 1px solid rgba(120,150,220,.35); border-radius: 11px; padding: 5px; box-shadow: 0 -8px 30px rgba(0,0,0,.5); } #cad-sugg.hidden { display: none; } #cad-sugg .cs-row { display: flex; align-items: baseline; gap: 9px; padding: 5px 9px; border-radius: 7px; cursor: pointer; font-size: 12px; color: #dfe7ff; } #cad-sugg .cs-row:hover { background: rgba(255,255,255,.08); } #cad-sugg .cs-row.on { background: rgba(80,110,220,.3); } #cad-sugg .cs-row b { font-family: ui-monospace, monospace; color: #8be9fd; min-width: 54px; } #cad-sugg .cs-verb { color: #f4f6ff; font-weight: 700; min-width: 64px; } #cad-sugg .cs-hint { flex: 1; color: #93a0c2; font-size: 11px; } #cad-sugg .cs-als { color: #5d6a8c; font-size: 10px; font-family: ui-monospace, monospace; } #cad-sugg .cs-foot { padding: 4px 9px 2px; font-size: 9.5px; color: #5d6a8c; border-top: 1px solid rgba(255,255,255,.08); margin-top: 3px; } /* the SITE KIT bar: model the context — masses, roads, trees, sun, wind */ .cad-site { display: flex; align-items: center; gap: 4px; padding: 5px 10px; background: #10141f; border-bottom: 1px solid rgba(255,255,255,.08); overflow-x: auto; flex: 0 0 auto; } .cad-site > b { font-size: 9px; letter-spacing: .14em; color: #8fa0c0; margin-inline-end: 4px; } .cad-site button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: rgba(255,255,255,.05); color: #dfe7ff; font: inherit; font-size: 11px; font-weight: 600; padding: 4px 9px; cursor: pointer; white-space: nowrap; } .cad-site button:hover { background: rgba(255,255,255,.13); } .cad-site button.on { background: linear-gradient(100deg, #0EA5E9, #7C5CFF); border-color: transparent; color: #fff; } .cad-site button i { width: 9px; height: 9px; border-radius: 3px; flex: none; } .cad-site .cad-site-sep { width: 1px; height: 18px; background: rgba(255,255,255,.14); margin: 0 5px; flex: none; } /* the SKETCH bar: tracing paper over the plan — pen, weight, colour, veil */ .cad-sketchbar { background: #141a26; border-bottom-color: rgba(255,255,255,.12); } .cad-sketchbar select { background: #0b0e14; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; color: #dfe7ff; font: inherit; font-size: 11px; padding: 3px 6px; outline: none; max-width: 150px; } .cad-sketchbar input[type=range] { width: 76px; accent-color: #0EA5E9; } .cad-sketchbar input[type=color] { width: 24px; height: 20px; border: none; background: none; padding: 0; cursor: pointer; } .cad-sketchbar .cad-sk-val { font-size: 10px; color: #8fa0c0; min-width: 26px; font-variant-numeric: tabular-nums; } .cad-sketchbar [data-sk-tool] { padding: 4px 6px; } .cad-sketchbar [data-sk-tool] svg { width: 16px; height: 16px; } .cad-sk-swatches { display: inline-flex; gap: 4px; margin: 0 4px; } .cad-sk-swatches i { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); cursor: pointer; flex: none; } .cad-sk-swatches i.on { outline: 2px solid #0EA5E9; outline-offset: 1px; } .cad-stage canvas.sk { cursor: crosshair; } /* the sheets in the side panel */ .cad-sk .cad-sk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cad-sk .cad-sk-out { font-style: normal; font-size: .66rem; color: #8be9fd; background: rgba(139,233,253,.1); border-radius: 5px; padding: 1px 5px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; } .cad-sk.off { opacity: .5; } .cad-sk .cad-eye { color: #8fa0c0; padding: 2px; display: inline-flex; } .cad-sk .cad-eye:hover { color: #00E5FF; } .cad-sk-empty { font-size: .7rem; color: #5d6a8c; line-height: 1.4; } .cad-eye svg { width: 14px; height: 14px; } .cad-ptitle button svg { width: 14px; height: 14px; vertical-align: middle; } .cad-top { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #10141d; border-bottom: 1px solid #232c42; } .cad-brand { font-weight: 800; color: #00B8D9; letter-spacing: .04em; } .cad-name { font-size: .92rem; } .cad-save { color: #8b96b3; font-size: .76rem; } .cad-btn { border: 1px solid #232c42; background: #161c2b; color: #dfe7ff; border-radius: 8px; padding: 6px 12px; font: inherit; font-weight: 600; font-size: .8rem; cursor: pointer; } .cad-btn:hover { border-color: #00B8D9; } .cad-btn.on { background: #00B8D9; color: #04121a; border-color: #00B8D9; } .cad-btn.accent { background: linear-gradient(135deg, #00B8D9, #6C5CE7); border: none; color: #fff; } .cad-body { flex: 1; display: flex; min-height: 0; } .cad-tools { width: 46px; background: #10141d; border-inline-end: 1px solid #232c42; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 8px; overflow-y: auto; scrollbar-width: none; } .cad-prop-row { display: flex; align-items: center; gap: 7px; font-size: .74rem; color: #8b96b3; margin: 5px 0; } .cad-prop-row span { width: 52px; } .cad-prop-row input[type=color] { width: 26px; height: 20px; border: none; background: none; padding: 0; cursor: pointer; } .cad-prop-row select { flex: 1; background: #0b0e14; border: 1px solid #232c42; border-radius: 7px; color: #dfe7ff; padding: 3px 6px; font: .74rem Inter, sans-serif; outline: none; } .cad-chk { display: flex; align-items: center; gap: 4px; cursor: pointer; } .cad-tools button { width: 36px; height: 36px; border: none; background: none; color: #dfe7ff; border-radius: 8px; cursor: pointer; font-size: .95rem; } .cad-tools button:hover { background: #1c2436; color: #00E5FF; } .cad-stage { flex: 1; position: relative; min-width: 0; } .cad-stage canvas { display: block; cursor: none; } /* the CAD card's INPUTS explorer — @name places one in the drawing */ .cad-inputs { position: absolute; top: 10px; inset-inline-start: 10px; width: 300px; max-height: calc(100% - 20px); display: flex; flex-direction: column; z-index: 6; background: rgba(12,16,26,.95); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.45); overflow: hidden; color: #dfe7ff; } .cad-inputs.hidden { display: none; } .cad-inputs .in-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.1); } .cad-inputs .in-head b { font-size: 11px; letter-spacing: .08em; } .cad-inputs .in-head span { flex: 1; font-size: 10px; opacity: .6; } .cad-inputs .in-head button { background: none; border: 0; color: #9fb0d0; cursor: pointer; display: inline-flex; padding: 2px; } .cad-inputs .in-list { overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 3px; } .cad-inputs .in-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; background: rgba(255,255,255,.03); border: 1px solid transparent; border-radius: 8px; padding: 5px 7px; cursor: pointer; } .cad-inputs .in-row:hover { background: rgba(0,229,255,.08); border-color: rgba(0,229,255,.35); } .cad-inputs .in-row img { width: 40px; height: 30px; object-fit: cover; border-radius: 5px; } .cad-inputs .in-row i { display: inline-flex; opacity: .6; } .cad-inputs .in-row b { font-size: 10.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cad-inputs .in-row label { font-size: 10px; opacity: .8; display: inline-flex; align-items: center; gap: 1px; } .cad-inputs .in-row { grid-template-columns: 40px 1fr auto auto; } .cad-inputs .in-row.kept { background: rgba(0,229,255,.07); box-shadow: inset 2px 0 0 #00E5FF; } .cad-inputs .in-row b u { text-decoration: none; display: block; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: #00E5FF; opacity: .85; } /* how many of this item stand on the drawing */ .cad-inputs .in-row b u.n { display: inline-block; color: #7cc4a0; letter-spacing: 0; background: rgba(124,196,160,.14); border-radius: 3px; padding: 0 4px; margin-top: 2px; } .cad-inputs .in-row > button { background: none; border: 0; color: #8b96b3; cursor: pointer; display: inline-flex; padding: 2px; } .cad-inputs .in-row > button:hover { color: #00E5FF; } .cad-inputs .in-row input { width: 84px; font: inherit; font-size: 10px; padding: 3px 5px; border-radius: 6px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: inherit; } .cad-inputs .in-foot { padding: 8px 10px; font-size: 9.5px; line-height: 1.5; opacity: .62; border-top: 1px solid rgba(255,255,255,.08); } .cad-imgbar em { font-style: normal; font-size: 10px; opacity: .55; margin-inline-start: 6px; } /* SWOT — four quadrants, every item on its evidence */ .sw-top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } /* THE SAME TRAP AS .rf-row, AND IT ATE THE RUN BUTTON. `#nodes .nin` (one id, one class) outranks `.sw-top .nin` (two classes), so the focus field kept width:100% AND flex:0 0 auto — it took the whole row and refused to shrink. `#nodes .nbtn.run` sets flex:1, i.e. basis 0 and free to shrink, so the only thing left to give was the button: it collapsed to nothing and was clipped by the body's overflow. The card looked like it had no way to run at all. Both rules therefore have to out-specify the ones they are correcting. */ #nodes .sw-top .nin { flex: 1 1 0; width: auto; min-width: 0; } #nodes .sw-top .nbtn.run { flex: 0 0 auto; } .sw-read { border: 1px solid rgba(0,229,255,.3); background: rgba(0,229,255,.05); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; } .sw-read > b { font-size: 9.5px; letter-spacing: .09em; opacity: .7; } .sw-read p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.55; unicode-bidi: plaintext; text-align: start; } .sw-read p.ar { opacity: .8; } .sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sw-q { border: 1px solid var(--border); border-top: 2px solid var(--qc); border-radius: 10px; padding: 7px 8px; background: var(--hover); } .sw-q h5 { margin: 0 0 6px; font-size: 10px; letter-spacing: .08em; color: var(--qc); display: flex; align-items: baseline; gap: 6px; } .sw-q h5 em { flex: 1; font-style: normal; font-size: 8.5px; letter-spacing: 0; opacity: .55; color: var(--muted, #64748b); } .sw-q h5 u { text-decoration: none; font-size: 11px; opacity: .8; } .sw-it { border-top: 1px solid rgba(255,255,255,.06); padding: 6px 0 7px; position: relative; } .sw-it:first-of-type { border-top: 0; } .sw-it.done { opacity: .6; } .sw-it > b { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.45; unicode-bidi: plaintext; text-align: start; } .sw-it .ar { display: block; font-size: 10.5px; opacity: .72; line-height: 1.5; unicode-bidi: plaintext; text-align: start; } .sw-it .ev { display: flex; gap: 4px; align-items: flex-start; font-size: 9.5px; opacity: .68; margin-top: 3px; line-height: 1.4; } .sw-it .src { display: block; font-size: 9px; opacity: .45; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; } .sw-it .sw-w { font-style: normal; font-size: 6px; letter-spacing: 1px; color: var(--qc); display: block; } .sw-adopt { margin-top: 5px; font: inherit; font-size: 9.5px; padding: 3px 8px; border-radius: 999px; cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--muted, #64748b); display: inline-flex; align-items: center; gap: 4px; } .sw-adopt:hover:not(:disabled) { border-color: var(--qc); color: var(--qc); } .sw-adopt:disabled { cursor: default; opacity: .8; } .sw-none { font-size: 10px; opacity: .5; padding: 4px 0; } .sw-moves { margin-top: 9px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; } .sw-moves > b { font-size: 9.5px; letter-spacing: .09em; opacity: .7; } .sw-mv { border-top: 1px solid rgba(255,255,255,.06); padding: 6px 0; } .sw-mv:first-of-type { border-top: 0; } .sw-mv > b { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.45; unicode-bidi: plaintext; text-align: start; } .sw-mv .ar { display: block; font-size: 10.5px; opacity: .72; unicode-bidi: plaintext; text-align: start; } .sw-mv em { font-style: normal; font-size: 9.5px; opacity: .6; } .sw-mv .src { display: block; font-size: 9px; opacity: .45; margin-top: 2px; } /* the sticker sheet's prompt, folded away until you want to read it */ #nodes .st-more { margin-top: 7px; } #nodes .st-more summary { font-size: 9.5px; color: var(--muted, #64748b); cursor: pointer; list-style: none; } #nodes .st-more summary::-webkit-details-marker { display: none; } #nodes .st-more summary::before { content: '▸ '; } #nodes .st-more[open] summary::before { content: '▾ '; } #nodes .st-more .nfoot { margin-top: 4px; line-height: 1.5; } /* IMAGE → CAD — the trace card */ .ic-src { display: flex; align-items: center; gap: 7px; font-size: 11px; padding: 4px 0; } .ic-src b { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ic-src img { width: 46px; height: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); } .ic-opts { display: flex; gap: 8px; margin: 5px 0; } .ic-opts label { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 9.5px; opacity: .7; } .ic-opts input { font: inherit; font-size: 11px; padding: 4px 6px; border-radius: 7px; background: var(--hover); border: 1px solid var(--border); color: inherit; } .ic-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 7px 0 4px; font-size: 9.5px; opacity: .75; } .ic-stats span { display: flex; flex-direction: column; line-height: 1.2; } .ic-stats b { font-size: 13px; font-weight: 700; opacity: 1; } .ic-prev { margin: 6px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #0b0e14; } .ic-prev svg { display: block; width: 100%; height: auto; } .ic-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .ic-row .nlink { font-size: 10.5px; display: inline-flex; align-items: center; gap: 4px; } /* LEVELS — the drawing as a stack */ .cad-lvlmode { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px 6px 2px; } .cad-lvlmode button { font: inherit; font-size: 9.5px; padding: 3px 7px; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid transparent; color: #9fb0d0; display: inline-flex; align-items: center; gap: 3px; } .cad-lvlmode button:hover { color: #00E5FF; border-color: rgba(0,229,255,.4); } .cad-lvlmode button.on { background: rgba(0,229,255,.14); border-color: #00E5FF; color: #dff8ff; } .cad-layer.cad-lvl { display: grid; grid-template-columns: auto 1fr auto auto auto auto; align-items: center; gap: 5px; } .cad-layer.cad-lvl.off { opacity: .5; } .cad-lvl .lv-name { cursor: text; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cad-lvl .lv-n { font-style: normal; font-size: 9.5px; opacity: .55; min-width: 14px; text-align: end; } .cad-lvl .lv-num { display: inline-flex; align-items: center; gap: 2px; font-size: 9px; opacity: .8; } .cad-lvl .lv-num input { width: 42px; font: inherit; font-size: 10px; padding: 2px 3px; border-radius: 5px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: inherit; } .lv-restack { display: block; width: calc(100% - 12px); margin: 5px 6px 6px; padding: 5px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #9fb0d0; } .lv-restack:hover { color: #00E5FF; border-color: rgba(0,229,255,.4); } .cad-sk-lvl { font-style: normal; font-size: 9px; opacity: .6; cursor: pointer; padding: 1px 4px; border-radius: 4px; background: rgba(255,255,255,.06); } .cad-sk-lvl:hover { color: #00E5FF; } /* QUANTITIES — the estimate measured off the drawing */ #cad-qty { padding: 4px 6px 8px; font-size: 10.5px; } .qt-empty { padding: 8px 4px; font-size: 10px; line-height: 1.5; opacity: .65; } .qt-kv { display: flex; align-items: baseline; gap: 6px; padding: 3px 2px; border-bottom: 1px solid rgba(255,255,255,.05); } .qt-kv span { flex: 1; opacity: .68; } .qt-kv b { font-weight: 700; } .qt-kv i { font-style: normal; font-size: 9px; opacity: .5; } .qt-t { width: 100%; border-collapse: collapse; margin-top: 7px; font-size: 10px; } .qt-t th { text-align: start; font-weight: 600; opacity: .5; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 3px; } .qt-t td { padding: 2px 3px; border-top: 1px solid rgba(255,255,255,.05); } .qt-t .n, .qt-t th.n { text-align: end; font-variant-numeric: tabular-nums; } .qt-t tr.on td { background: rgba(0,229,255,.08); } .qt-t tr.short td:last-child { color: #f0b429; } .qt-t tr.over td:last-child { color: #ff7a7a; } .qt-t tr.okq td:last-child { color: #41d97e; } .qt-t u { text-decoration: none; font-size: 8.5px; opacity: .55; } /* the PROGRAMME inventory: the confirmed brief as blocks you place */ .cad-prog { position: absolute; top: 10px; inset-inline-end: 10px; width: 320px; max-height: calc(100% - 20px); display: flex; flex-direction: column; z-index: 6; background: rgba(12,16,26,.95); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.45); overflow: hidden; color: #dfe7ff; } .cad-prog.hidden { display: none; } .cad-prog .pg-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.1); } .cad-prog .pg-head b { font-size: 11px; letter-spacing: .08em; } .cad-prog .pg-head span { flex: 1; font-size: 10px; opacity: .62; } .cad-prog .pg-head button { background: none; border: 0; color: #9fb0d0; cursor: pointer; display: inline-flex; padding: 2px; } .cad-prog .pg-head button:hover { color: #00E5FF; } .cad-prog .pg-list { overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 3px; } .cad-prog .pg-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 7px; background: rgba(255,255,255,.03); border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; text-align: start; color: inherit; font: inherit; cursor: pointer; } .cad-prog .pg-row:hover { background: rgba(0,229,255,.08); border-color: rgba(0,229,255,.35); } .cad-prog .pg-row.on { border-color: #00E5FF; background: rgba(0,229,255,.12); } .cad-prog .pg-row.done { opacity: .55; } .cad-prog .pg-row i { width: 10px; height: 10px; border-radius: 3px; } .cad-prog .pg-row b { font-size: 11.5px; font-weight: 600; line-height: 1.3; } .cad-prog .pg-row u { grid-column: 2; text-decoration: none; font-size: 9.5px; opacity: .55; text-transform: uppercase; letter-spacing: .05em; } .cad-prog .pg-row span { grid-row: 1 / span 2; font-size: 10.5px; opacity: .8; white-space: nowrap; text-align: end; } .cad-prog .pg-row span em { display: block; font-style: normal; font-size: 9px; opacity: .75; color: #f0b429; } .cad-prog .pg-row.done span em { color: #41d97e; } .cad-prog .pg-empty { padding: 14px; font-size: 11px; line-height: 1.5; opacity: .7; } /* ƒx parametric canvas (Grasshopper-style) */ .vxp-panel { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; min-height: 220px; display: flex; flex-direction: column; background: #0d1017f2; border-top: 1px solid #2c3a58; box-shadow: 0 -8px 24px rgba(0, 0, 0, .45); z-index: 5; } .vxp-panel.hidden { display: none; } .vxp-head { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: #10141d; border-bottom: 1px solid #232c42; font-size: .74rem; color: #9db2d8; } .vxp-head b { color: #ff9f43; letter-spacing: .04em; } .vxp-head select, .vxp-head button { background: #151b29; border: 1px solid #2c3a58; border-radius: 7px; color: #dfe7ff; font-size: .72rem; padding: 3px 8px; cursor: pointer; } .vxp-head button:hover { border-color: #00B8D9; } .vxp-head .vxp-bake { color: #ffd75e; } .vxp-live { display: flex; align-items: center; gap: 4px; cursor: pointer; } .vxp-msg { font-family: ui-monospace, monospace; font-size: .7rem; } .vxp-hint { font-size: .66rem; color: #5a6d95; } .vxp-canvas { flex: 1; display: block; cursor: default; outline: none; width: 100%; } .vxp-edit { position: absolute; width: 130px; z-index: 6; background: #0b0e14; border: 1px solid #00B8D9; border-radius: 6px; color: #ffd75e; font: 12px ui-monospace, monospace; padding: 4px 7px; outline: none; } .cad-side { width: 250px; background: #10141d; border-inline-start: 1px solid #232c42; display: flex; flex-direction: column; overflow-y: auto; } .cad-panel { padding: 10px 12px; border-bottom: 1px solid #232c42; } .cad-ptitle { font-size: .68rem; font-weight: 800; letter-spacing: .1em; color: #8b96b3; display: flex; align-items: center; gap: 6px; margin-bottom: 7px; cursor: pointer; user-select: none; } .cad-ptitle > span { flex: 1; } .cad-ptitle em { color: #00E5FF; font-style: normal; } .cad-ptitle:hover { color: #c6d0ea; } .cad-ptitle button { border: none; background: none; color: #00B8D9; cursor: pointer; font-size: .85rem; } .cad-pchev { display: inline-flex; color: #5d6a8a; } .cad-pchev svg { width: 12px; height: 12px; transition: transform .12s; } /* a folded panel keeps its title line only — the property panel floats, so the rail no longer pushes anything below the fold */ .cad-panel.closed > :not(.cad-ptitle) { display: none !important; } .cad-panel.closed .cad-pchev svg { transform: rotate(-90deg); } .cad-panel.closed .cad-ptitle { margin-bottom: 0; } .cad-panel.closed { flex: 0 0 auto; min-height: 0; } /* the floating property panel: opens on the first click, drags by its head, resizes by its corner, remembers where it was left */ .cad-fprops { position: absolute; top: 12px; right: 12px; width: 272px; min-width: 220px; min-height: 120px; max-height: calc(100% - 24px); z-index: 8; display: flex; flex-direction: column; background: rgba(16, 20, 29, .96); border: 1px solid #2c3a58; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .55); resize: both; overflow: hidden; } .cad-fprops.hidden { display: none; } .cad-fp-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid #232c42; cursor: grab; font-size: .68rem; font-weight: 800; letter-spacing: .1em; color: #8b96b3; user-select: none; } .cad-fp-head:active { cursor: grabbing; } .cad-fp-head b { flex: 1; color: #e8ecf7; font-weight: 800; } .cad-fp-head i { display: inline-flex; color: #5d6a8a; } .cad-fp-head i svg { width: 14px; height: 14px; } .cad-fp-head button { border: none; background: none; color: #8b96b3; cursor: pointer; display: inline-flex; padding: 2px; } .cad-fp-head button svg { width: 14px; height: 14px; } .cad-fp-head button:hover { color: #fff; } .cad-fp-body { overflow: auto; padding: 8px 10px 10px; } .cad-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; } .cad-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #2c3a58; background: #141a26; color: #dfe7ff; border-radius: 999px; padding: 2px 8px; font-size: .7rem; cursor: pointer; line-height: 1.4; } .cad-chip:hover { border-color: #00B8D9; } .cad-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .cad-chip b { color: #00E5FF; } .cad-layer { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; font-size: .8rem; cursor: pointer; } .cad-layer:hover { background: #1c2436; } .cad-layer.cur { background: #1c2436; outline: 1px solid #00B8D9; } .cad-layer input[type=color] { width: 22px; height: 18px; border: none; background: none; padding: 0; cursor: pointer; } .cad-eye { border: none; background: none; cursor: pointer; font-size: .75rem; } .cad-ai { flex: 1; display: flex; flex-direction: column; min-height: 200px; } .cad-ai-log { flex: 1; overflow-y: auto; font-size: .76rem; line-height: 1.45; margin-bottom: 8px; } .cad-ai-log div { margin-bottom: 7px; } .cad-ai-log .me b { color: #00E5FF; } .cad-ai textarea { background: #0b0e14; border: 1px solid #232c42; border-radius: 8px; color: #dfe7ff; padding: 8px; font: inherit; font-size: .78rem; resize: none; outline: none; } .cad-ai textarea:focus { border-color: #00B8D9; } .cad-ai .cad-btn { margin-top: 7px; } .cad-status { display: flex; align-items: center; gap: 6px; padding: 4px 12px; background: #10141d; border-top: 1px solid #232c42; } .cad-status button { border: 1px solid #232c42; background: none; color: #8b96b3; border-radius: 6px; padding: 2px 9px; font: inherit; font-size: .66rem; font-weight: 700; cursor: pointer; letter-spacing: .05em; } .cad-status button.on { color: #00E5FF; border-color: #00B8D9; } .cad-coords { margin-inline-start: auto; font-size: .74rem; color: #8b96b3; font-variant-numeric: tabular-nums; } .cad-cmd { background: #0d1119; border-top: 1px solid #232c42; padding: 4px 12px 8px; } .cad-cmd-hist { max-height: 54px; overflow-y: auto; display: flex; flex-direction: column-reverse; font-size: .72rem; color: #8b96b3; font-family: ui-monospace, Consolas, monospace; } .cad-cmd-row { display: flex; align-items: center; gap: 9px; margin-top: 3px; } .cad-cmd-row span { color: #00E5FF; font-size: .78rem; font-weight: 600; white-space: nowrap; } .cad-cmd-row input { flex: 1; background: #0b0e14; border: 1px solid #232c42; border-radius: 7px; color: #dfe7ff; padding: 6px 10px; outline: none; font: .82rem ui-monospace, Consolas, monospace; } .cad-cmd-row input:focus { border-color: #00B8D9; } /* the CAD node: the editor fills the card, and full screen re-parents it */ #nodes .cadx-host { flex: 1; width: 100%; min-height: 0; position: relative; border-radius: 9px; overflow: hidden; background: #0b0e14; } #nodes .cadx-host .cad-root { position: absolute; inset: 0; } .focus-root.cadx-full { padding: 0; } .focus-root.cadx-full .cad-root { position: absolute; inset: 0; height: 100%; } /* CAD's own one-field ask — never a native prompt */ .cadx-dlg { position: fixed; inset: 0; z-index: 240; display: flex; align-items: center; justify-content: center; background: rgba(4,7,16,.6); } .cadx-dlg .box { width: min(400px, 90vw); background: #141a2e; border: 1px solid rgba(120,150,220,.25); border-radius: 15px; padding: 17px; color: #e7ecf7; font-family: var(--font); } .cadx-dlg h4 { margin: 0 0 11px; font-size: 14px; font-weight: 700; } .cadx-pick .pick { max-height: min(52vh, 380px); overflow: auto; display: flex; flex-direction: column; gap: 3px; margin-bottom: 11px; } .cadx-pick .pick button { text-align: start; font: inherit; font-size: 12px; padding: 7px 9px; border-radius: 8px; cursor: pointer; background: rgba(255,255,255,.04); border: 1px solid transparent; color: inherit; } .cadx-pick .pick button:hover { background: rgba(0,229,255,.1); border-color: rgba(0,229,255,.4); } .cadx-pick .pick button.on { border-color: #00E5FF; background: rgba(0,229,255,.14); } .cadx-dlg input { width: 100%; box-sizing: border-box; background: #0e1428; border: 1px solid rgba(120,150,220,.3); border-radius: 9px; color: #e7ecf7; font: inherit; font-size: 13px; padding: 8px 10px; outline: none; } .cadx-dlg input:focus { border-color: #0EA5E9; } /* place search: the matches, with what tells them apart */ .cadx-geo .box { width: min(520px, 94vw); } .cadx-geo .geo-list { margin-top: 9px; max-height: 44vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; } .cadx-geo .geo-msg { padding: 10px 2px; font-size: 12.5px; color: #8a97b4; } .cadx-geo .geo-hit { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; width: 100%; text-align: left; background: #0e1428; border: 1px solid rgba(120,150,220,.18); border-radius: 9px; padding: 8px 11px; color: #e7ecf7; font: inherit; cursor: pointer; } .cadx-geo .geo-hit:hover { border-color: #0EA5E9; background: #131c36; } .cadx-geo .geo-hit b { font-size: 13px; font-weight: 650; } .cadx-geo .geo-hit span { grid-column: 1; font-size: 11.5px; color: #8a97b4; } .cadx-geo .geo-hit i { grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: #6f7f9f; } /* multi-field form (Edit item) — stacked label + input rows */ .cadx-form .box { width: min(460px, 92vw); } .cadx-form .cad-pf { margin: 0 0 8px; flex-direction: column; align-items: stretch; gap: 3px; font-size: .76rem; } .cadx-form .cad-pf > span { flex: none; } /* SELECTION panel: the selected item's attributes, live */ .cad-pf { display: flex; align-items: center; gap: 7px; margin: 4px 0; font-size: .72rem; color: #8b96b3; } .cad-pf > span, .cad-pf-ro > span { flex: 0 0 62px; } .cad-pf input, .cad-pf select { flex: 1; min-width: 0; box-sizing: border-box; background: #0b0e14; border: 1px solid #232c42; border-radius: 7px; color: #dfe7ff; padding: 4px 7px; font: .74rem Inter, sans-serif; outline: none; } .cad-pf input:focus, .cad-pf select:focus { border-color: #00B8D9; } .cad-pf input::placeholder { color: #4f5a75; } .cad-pf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 2px 0 6px; } .cad-pf-head b { font-size: .72rem; letter-spacing: .06em; color: #00E5FF; } .cad-pf-head i { font-style: normal; font-size: .66rem; color: #6f7f9f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cad-pf-ro { display: flex; align-items: center; gap: 7px; margin: 4px 0; font-size: .72rem; color: #8b96b3; flex-wrap: wrap; } /* every edge of a polygon, named where you can tab down them */ .cad-pf-sec { display: flex; align-items: baseline; gap: 7px; margin: 9px 0 3px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.1); font-size: .62rem; letter-spacing: .1em; color: #8b96b3; } .cad-pf-sec b { color: #dfe7ff; letter-spacing: 0; font-size: .68rem; } .cad-pf-edge { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 6px; margin: 3px 0; } .cad-pf-edge u { text-decoration: none; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: rgba(255,209,102,.18); color: #ffd166; font-size: .62rem; font-weight: 800; } .cad-pf-edge input { width: 100%; box-sizing: border-box; font: inherit; font-size: .72rem; padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #dfe7ff; outline: none; } .cad-pf-edge input:focus { border-color: #00E5FF; } .cad-pf-edge i { font-style: normal; font-size: .6rem; color: #8b96b3; white-space: nowrap; } .cad-pf-edge.own u { background: rgba(0,229,255,.18); color: #00E5FF; } .cad-pf-edge.own i { color: #00E5FF; } .cad-pf-sec button { margin-inline-start: auto; font: inherit; font-size: .6rem; padding: 2px 7px; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #9fb0d0; } .cad-pf-sec button:hover { color: #00E5FF; border-color: #00E5FF; } .cad-pf-ro b { color: #ffd166; font-size: .76rem; } .cad-pf-ro i { font-style: normal; font-size: .66rem; color: #6f7f9f; } .cad-pf-ro button { border: 1px solid #232c42; background: #161c2b; color: #dfe7ff; border-radius: 7px; padding: 3px 8px; font: inherit; font-size: .68rem; font-weight: 600; cursor: pointer; } .cad-pf-ro button:hover { border-color: #00B8D9; } .cad-pf-ro input[type=number] { flex: 1; min-width: 0; background: #0b0e14; border: 1px solid #232c42; border-radius: 7px; color: #dfe7ff; padding: 4px 7px; font: .74rem Inter, sans-serif; outline: none; } .cad-pf-ro input[type=color] { width: 26px; height: 20px; border: none; background: none; padding: 0; cursor: pointer; } #cad-selcount { color: #00E5FF; } .cadx-dlg .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; } .cadx-dlg button { border: 0; border-radius: 9px; padding: 8px 15px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .cadx-dlg .go { background: linear-gradient(100deg, #0EA5E9, #7C5CFF); color: #fff; } .cadx-dlg .gh { background: rgba(120,150,230,.16); color: #dfe6f6; } /* the trace-image picker */ .cadx-pick { position: fixed; inset: 0; z-index: 240; display: flex; align-items: center; justify-content: center; background: rgba(4,7,16,.55); } .cadx-pick .box { width: min(720px, 92vw); max-height: 78vh; display: flex; flex-direction: column; border-radius: 16px; padding: 14px; } .cadx-pick .hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; } .cadx-pick .pw { flex: 1; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cadx-pick .gr { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-auto-rows: max-content; gap: 9px; align-content: start; } .cadx-pick .gr i { grid-column: 1/-1; color: var(--muted); font-size: 12px; padding: 20px; text-align: center; } .cadx-pick .gr button { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 10.5px; padding: 7px; cursor: pointer; overflow: hidden; } .cadx-pick .gr button:hover { border-color: var(--accent); } .cadx-pick .gr button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cadx-pick .gr .im img { width: 100%; height: 74px; object-fit: cover; border-radius: 6px; } .cadx-pick .gr .dir { color: var(--accent); } .cadx-pick .gr .up { grid-column: 1/-1; flex-direction: row; justify-content: center; } /* The SPAiCE strip sits ABOVE the embedded app, never over it. Floating it in the corner put it straight on top of the app's own toolbar — Palette's Open Image and close buttons, the document viewer's Grab — which is unusable whichever corner you pick, because every one of these apps uses all four. Deliberately unscoped: full screen moves the host out of #nodes into #focus-root and the strip has to look the same in both. */ .pal-host { position: relative; flex: 1; width: 100%; min-height: 0; border-radius: 9px; overflow: hidden; background: #14141f; display: flex; flex-direction: column; } .pal-frame { flex: 1; width: 100%; min-height: 0; border: 0; display: block; } .pal-bar { flex: 0 0 auto; height: 29px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 6px; background: #10101c; border-bottom: 1px solid rgba(255,255,255,.09); } .pal-bar button { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid rgba(120,150,220,.3); border-radius: 7px; background: rgba(60,72,110,.5); color: #dfe6f6; font-family: var(--font); font-size: 11px; font-weight: 700; cursor: pointer; } .pal-bar .tag { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7b86a8; padding-inline-start: 3px; } .pal-bar button:hover { background: rgba(60,80,140,.95); } .pal-bar button.go { background: linear-gradient(100deg, #F59E0B, #EC4899); border-color: transparent; color: #fff; } .pal-bar button.busy { opacity: .55; pointer-events: none; } .pal-bar button.on { background: rgba(245,158,11,.22); border-color: rgba(245,158,11,.7); color: #fde68a; } .focus-root.pal-full { padding: 0; } .focus-root.pal-full .pal-host { position: absolute; inset: 0; border-radius: 0; } /* Document viewer, Code runner, Programme, Layout, Agent — same shell, same rule: the strip is a bar, not an overlay. */ .dv-host { position: relative; flex: 1; width: 100%; min-height: 0; border-radius: 9px; overflow: hidden; background: #0e0e1a; display: flex; flex-direction: column; } .dv-frame { flex: 1; width: 100%; min-height: 0; border: 0; display: block; } .focus-root.pal-full .dv-host { position: absolute; inset: 0; border-radius: 0; } /* the Agent card uses the same host shell as the other iframe widgets */ .focus-root.pal-full .dv-host { position: absolute; inset: 0; border-radius: 0; } /* Full screen promotes the card where it stands (the Fullscreen API) rather than moving it — moving an iframe reloads it and loses the open document. */ .pal-host:fullscreen, .dv-host:fullscreen { width: 100vw; height: 100vh; border-radius: 0; background: #0e0e1a; } .pal-host:fullscreen .pal-bar, .dv-host:fullscreen .pal-bar { height: 34px; } /* CAD reference list — the named shapes that become dots on the card */ #cad-refs .cad-ref { display: flex; align-items: baseline; gap: 7px; padding: 4px 5px; border-radius: 6px; cursor: pointer; } #cad-refs .cad-ref:hover { background: rgba(255,255,255,.07); } #cad-refs .cad-ref b { font-size: .78rem; color: #ffd166; } #cad-refs .cad-ref i { font-style: normal; font-size: .68rem; color: #8b96b3; } #cad-refs .cad-ref-empty { font-size: .68rem; color: #8b96b3; line-height: 1.5; padding: 3px 5px; } /* an error you can retry, not a dead end */ .sx-empty.bad { display: flex; flex-direction: column; align-items: center; gap: 9px; } .sx-empty.bad .btn { padding: 5px 14px; font-size: 12px; } .sx-ico:disabled { opacity: .35; cursor: default; } /* Identifier card — a name the whole board can mention */ #nodes .rf-row { display: flex; align-items: center; gap: 5px; } #nodes .rf-at { font: 600 15px/1 var(--font); color: var(--accent, #0EA5E9); flex: 0 0 auto; } /* the name input must yield to the @ and the refresh button: `#nodes .nin` (later, same specificity) sets width:100% + flex:0 0 auto, which pushed the row 49px past the card; focusing the input then scrolled the overflow-hidden body and every row lost its left edge */ #nodes .rf-row .rf-nm { flex: 1 1 0; width: auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } #nodes .rf-warn { margin-top: 5px; font-size: 10.5px; color: #E11D2A; } #nodes .rf-sum { margin-top: 7px; font-size: 11px; color: var(--muted, #64748b); line-height: 1.45; } /* the remote: click its line and a pulse runs to the identifier it calls */ #nodes .rm-go { cursor: pointer; display: flex; align-items: center; gap: 4px; transition: color .12s; } #nodes .rm-go:hover { color: var(--accent, #0EA5E9); } #nodes .rm-go svg { flex: 0 0 auto; } #nodes .rf-lost { color: #E11D2A; } /* a System prompt's stance toward the brain on the same card */ #nodes .sys-modes { flex: 0 0 auto; display: flex; gap: 4px; } #nodes .sys-modes button { flex: 1; height: 22px; padding: 0 6px; border: 1px solid var(--border); border-radius: 7px; background: var(--hover); color: var(--muted); cursor: pointer; font: 700 10px/1 var(--font); white-space: nowrap; } #nodes .sys-modes button:hover { color: var(--accent); border-color: var(--accent); } #nodes .sys-modes button.on { color: #fff; background: var(--accent); border-color: var(--accent); } #nodes .sys-modes button.k-rep.on { background: #F97316; border-color: #F97316; } #nodes .brain-strip .sys-mode { display: block; font-style: normal; font-size: 10px; font-weight: 700; color: var(--accent); } #nodes .brain-strip .sys-mode.replace { color: #F97316; } /* the @-mention list */ .nd-atbox { position: fixed; z-index: 320; min-width: 168px; max-width: 240px; padding: 4px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg, #fff); box-shadow: 0 10px 30px rgba(8,12,24,.18); display: flex; flex-direction: column; gap: 1px; } .nd-atbox button { text-align: left; padding: 5px 8px; border: 0; border-radius: 6px; background: none; font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nd-atbox button:hover, .nd-atbox button.on { background: var(--hover); color: var(--accent, #0EA5E9); } /* archive cards share the document host's chrome */ #nodes .dv-host .pal-bar .tag { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── the option submittal: one row per thing the brief asks for ──────────── */ .opt-head { font-size: 12px; color: var(--dim, #7e8db0); padding: 2px 2px 8px; } .opt-head b { color: var(--ink, #e7ecf7); font-size: 14px; } .opt-head i { font-style: normal; opacity: .75; } .opt-list { display: flex; flex-direction: column; gap: 2px; } .opt-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; font-size: 12px; } .opt-row:hover { background: rgba(127, 127, 160, .10); } .opt-row .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: transparent; border: 1.5px solid var(--dim, #7e8db0); } .opt-row.on .dot { background: #CA8A04; border-color: #CA8A04; } .opt-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; } .opt-row .nm.ren { background: var(--field, #0e1428); color: inherit; border: 1px solid #CA8A04; border-radius: 5px; padding: 2px 6px; font: inherit; font-size: 12px; outline: none; } .opt-row .src { font-size: 10.5px; color: #CA8A04; white-space: nowrap; } .opt-row .miss { font-size: 10.5px; color: var(--dim, #7e8db0); opacity: .7; white-space: nowrap; } .opt-row .x { background: transparent; border: 0; color: var(--dim, #7e8db0); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0; } .opt-row:hover .x { opacity: 1; } .opt-row .x:hover { color: #E11D2A; } .opt-acts { display: flex; gap: 6px; padding-top: 9px; } .opt-acts button { background: transparent; border: 1px solid var(--line, #dde5f0); border-radius: 7px; color: var(--dim, #7e8db0); font: inherit; font-size: 11px; padding: 4px 10px; cursor: pointer; } .opt-acts button:hover { border-color: #CA8A04; color: #CA8A04; } /* ── Style card: the ledger of approved styles ─────────────────────── */ #nodes .sty-list { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; } #nodes .sty { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--hover); opacity: .55; } #nodes .sty.on { opacity: 1; border-color: rgba(202,138,4,.45); } #nodes .sty-hd { display: flex; align-items: center; gap: 6px; } #nodes .sty-hd img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; cursor: zoom-in; } #nodes .sty-hd .nin { flex: 1 1 auto; min-width: 0; } #nodes .sty-hd .nbtn { padding: 5px 7px; background: var(--border); color: var(--text); } #nodes .sty-hd .nbtn.ok { background: linear-gradient(100deg, #CA8A04, #F59E0B); color: #fff; } #nodes .sty .nta { flex: 0 0 auto; } #nodes .sty .sty-tx { min-height: 96px; } #nodes .sty .sty-nt { min-height: 44px; font-style: italic; } #nodes .sty-kw { font-size: 11px; color: var(--muted); line-height: 1.35; } /* ── CNVA Flow: the crew ──────────────────────────────────────────────── A profile tile is painted by the engine; only its caption is DOM, and it takes no pointer (the tile drags as one thing, a desktop icon). */ #nodes .pf-cap { pointer-events: none; text-align: center; padding: 0 8px; display: flex; flex-direction: column; gap: 2px; color: var(--text); } #nodes .pf-cap b { font-size: 12.5px; font-weight: 800; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #nodes .pf-cap span { font-size: 10.5px; line-height: 1.25; opacity: .7; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #nodes .pf-cap em { font-size: 9.5px; font-style: normal; opacity: .5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .pf-cap.lead b { color: #C9A227; } #nodes .pf-cap b .pf-star { display: inline-block; vertical-align: -1px; margin-right: 3px; color: #C9A227; font-style: normal; } #nodes .pf-cap b .pf-star svg { fill: #C9A227; stroke: #C9A227; } /* AIGNTX: the merged brains, the lead first and larger with its star */ #nodes .ax-mission { min-height: 54px; } #nodes .ax-brains { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; padding: 6px 4px 2px; } #nodes .ax-brains .crew-av.lead { width: 48px; height: 48px; box-shadow: 0 0 0 2.5px #C9A227, 0 0 14px rgba(201,162,39,.45); } #nodes .ax-brains .crew-av.lead s { width: 17px; height: 17px; top: -4px; right: -5px; display: grid; place-items: center; color: #1a1400; } #nodes .ax-brains .crew-av.lead s svg { fill: #1a1400; stroke: #1a1400; } #nodes .ax-slot { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px dashed rgba(201,162,39,.7); color: rgba(201,162,39,.8); } /* the brain strip on an Agent card: who it runs as */ #nodes .brain-strip { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--bc) 45%, transparent); background: color-mix(in srgb, var(--bc) 12%, transparent); } #nodes .brain-strip img, #nodes .brain-strip i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bc); } #nodes .brain-strip i { display: grid; place-items: center; background: var(--bc); color: #fff; font-style: normal; font-weight: 800; font-size: 11px; } #nodes .brain-strip > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } #nodes .brain-strip b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } #nodes .brain-strip span { font-size: 10px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } /* the Team card */ #nodes .nin { flex: 0 0 auto; width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 12.5px; font-weight: 700; padding: 6px 9px; outline: none; } #nodes .nin:focus { border-color: var(--accent); } #nodes .crew-brief { flex: 0 0 auto; min-height: 72px; } #nodes .crew-size { width: auto; flex: 0 0 auto; } #nodes .crew-prop { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; } #nodes .crew-mis { flex: 0 0 auto; font-size: 11px; line-height: 1.45; color: var(--text); opacity: .8; } #nodes .crew-list { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); padding: 3px; } #nodes .crew-m { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 7px; cursor: pointer; font-size: 11.5px; color: var(--text); } #nodes .crew-m:hover { background: var(--panel, rgba(128,128,160,.12)); } #nodes .crew-m input { margin: 0; accent-color: var(--accent); } #nodes .crew-m .dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; } #nodes .crew-m b { flex: 0 0 auto; max-width: 42%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .crew-m > span:not(.dot) { flex: 1; min-width: 0; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .crew-m em { flex: 0 0 auto; font-size: 9.5px; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #C9A227; } #nodes .crew-roster { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 2px; } #nodes .crew-av { position: relative; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--bc); cursor: pointer; box-shadow: 0 0 0 2px var(--bc); overflow: visible; } #nodes .crew-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } #nodes .crew-av i { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-style: normal; font-weight: 800; font-size: 12px; } #nodes .crew-av s { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #C9A227; box-shadow: 0 0 0 2px var(--panel, #151A2C); } #nodes .crew-av:hover { transform: translateY(-1px); filter: brightness(1.08); } /* the import list */ .cadx-pick.crew-imp .box { width: min(640px, 92vw); } .cadx-pick .ci-q { flex: 1; min-width: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 12.5px; padding: 6px 9px; outline: none; } .cadx-pick .ci-q:focus { border-color: var(--accent); } .cadx-pick .ci-body { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 3px; } .cadx-pick .ci-sec { font: 600 10.5px/1.5 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 8px 0 3px; } .cadx-pick .ci-row { display: grid; grid-template-columns: 10px auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: start; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; padding: 7px 10px; cursor: pointer; } .cadx-pick .ci-row:hover { border-color: var(--accent); } .cadx-pick .ci-row .dot { width: 10px; height: 10px; border-radius: 50%; grid-row: 1 / 3; } .cadx-pick .ci-row b { font-size: 12.5px; } .cadx-pick .ci-row > span:not(.dot) { font-size: 11px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cadx-pick .ci-row em { grid-column: 2 / 4; font-size: 10.5px; font-style: normal; opacity: .55; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .pf-hint { display: block; color: var(--muted); font-size: 12px; padding: 14px; text-align: center; font-style: italic; } /* the profile sheet */ .pf-sheet { position: fixed; inset: 0; z-index: 236; display: flex; align-items: center; justify-content: center; background: rgba(4,7,16,.55); } .pf-sheet .box { width: min(760px, 94vw); height: min(84vh, 760px); display: flex; flex-direction: column; border-radius: 18px; padding: 16px; } .pf-head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .pf-av { position: relative; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; background: var(--bc); box-shadow: 0 0 0 2.5px var(--bc); } .pf-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .pf-av i { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-style: normal; font-weight: 800; font-size: 20px; } .pf-av s { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: #C9A227; color: #241C05; display: grid; place-items: center; text-decoration: none; } .pf-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pf-who b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-who span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-who em { font-size: 10.5px; font-style: normal; color: var(--muted); opacity: .8; } .pf-mark { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 4px 12px; border-radius: 12px; background: color-mix(in srgb, var(--mc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--mc) 55%, transparent); } .pf-mark b { font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--mc); } .pf-mark span { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .pf-tabs { flex: 0 0 auto; display: flex; gap: 4px; padding: 10px 0 8px; overflow-x: auto; } .pf-tab { flex: 0 0 auto; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; opacity: .75; } .pf-tab.on { opacity: 1; border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .pf-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; } .pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } .pf-f { display: flex; flex-direction: column; gap: 4px; } .pf-f > span { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--muted); } .pf-f input, .pf-f textarea, .pf-f select { width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 12.5px; line-height: 1.5; padding: 7px 9px; outline: none; resize: vertical; } .pf-f input:focus, .pf-f textarea:focus, .pf-f select:focus { border-color: var(--accent); } .pf-f input[type=color] { height: 34px; padding: 3px; } .pf-f.chk { flex-direction: row; align-items: center; gap: 8px; padding-top: 18px; } .pf-f.chk input { width: auto; accent-color: #C9A227; } .pf-f.chk span { font-size: 12.5px; color: var(--text); } .pf-sheet .rn-row { display: flex; align-items: center; gap: 6px; } .pf-sheet .nbtn { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 8px; padding: 7px 12px; font-family: var(--font); font-size: 11.5px; font-weight: 700; cursor: pointer; color: #fff; background: linear-gradient(100deg, #0EA5E9, #22D3EE); } .pf-sheet .nbtn.ghost { background: var(--hover); color: var(--text); border: 1px solid var(--border); } .pf-sheet .nbtn[disabled] { opacity: .5; cursor: default; } .pf-prev { white-space: pre-wrap; word-break: break-word; font-family: var(--font); font-size: 11.5px; line-height: 1.55; color: var(--text); background: var(--hover); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; margin: 0; } .rec-head { display: flex; align-items: center; gap: 12px; } .rec-mark { flex: 0 0 auto; display: flex; align-items: baseline; gap: 2px; padding: 6px 14px; border-radius: 12px; background: color-mix(in srgb, var(--mc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--mc) 55%, transparent); } .rec-mark b { font-size: 26px; font-weight: 800; color: var(--mc); } .rec-mark span { font-size: 11px; color: var(--muted); } .rec-add { flex: 1; display: flex; align-items: center; gap: 6px; } .rec-add select, .rec-add input { border-radius: 8px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 12px; padding: 7px 8px; outline: none; } .rec-add input[type=number] { width: 58px; } .rec-add input[type=text] { flex: 1; min-width: 0; } .rec-list { display: flex; flex-direction: column; gap: 4px; } .rec-row { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--border); background: var(--hover); } .rec-row b { flex: 0 0 auto; min-width: 34px; text-align: center; font-size: 12px; font-weight: 800; padding: 2px 6px; border-radius: 999px; color: #fff; } .rec-row.up b { background: #16A34A; } .rec-row.down b { background: #F43F5E; } .rec-row span { flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--text); } .rec-row em { flex: 0 0 auto; font-size: 10px; font-style: normal; color: var(--muted); } .pf-sheet .sp-ico { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--border); background: var(--hover); color: var(--text); cursor: pointer; padding: 0; } .pf-sheet .sp-ico:hover { border-color: var(--accent); color: var(--accent); } /* ── brains: a profile tile that chats and acts on the board ── */ #nodes .pf-cap { height: 100%; box-sizing: border-box; padding-bottom: 6px; } #nodes .pf-act { margin-top: auto; pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: 4px; padding-top: 4px; } #nodes .pf-act button { width: 24px; height: 22px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--hover); color: var(--text); cursor: pointer; } #nodes .pf-act button:hover { border-color: var(--accent); color: var(--accent); } #nodes .pf-act s { display: grid; place-items: center; width: 16px; height: 22px; color: #0EA5E9; text-decoration: none; opacity: .85; } .pf-bar { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 0 2px; } .pf-sheet .nbtn.run { background: var(--grad); } .pf-scope { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; padding: 3px 4px 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--hover); } .pf-scope i { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11px; color: var(--muted); margin-inline-end: 4px; } .pf-scope > button { border: 0; border-radius: 999px; padding: 4px 10px; font: 700 11px/1 var(--font); color: var(--muted); background: transparent; cursor: pointer; } .pf-scope > button.on { background: var(--grad); color: #fff; } .pf-scope .sp-ico { width: 22px; height: 22px; border-radius: 50%; } .pf-f.loc > span::after { content: ' · here only'; color: #0EA5E9; font-weight: 600; letter-spacing: 0; } [dir=rtl] .pf-f.loc > span::after { content: ' · هنا فقط'; } .pf-f.loc input, .pf-f.loc textarea { border-color: rgba(14, 165, 233, .45); } .pf-av.sm { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--bc); } .pf-av.sm i { font-size: 14px; } .pf-mark.sm { padding: 2px 9px; } .pf-mark.sm b { font-size: 15px; } .brain-pick .ci-row { grid-template-columns: 10px auto 1fr auto; } .brain-pick .ci-del { grid-column: 4; grid-row: 1 / 3; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border); background: var(--hover); color: var(--muted); display: grid; place-items: center; padding: 0; cursor: pointer; font: 700 10px/1 var(--font); } .brain-pick .ci-del:hover { color: #EF4444; border-color: #EF4444; } .brain-pick .ci-del.arm { color: #fff; background: #EF4444; border-color: #EF4444; width: auto; padding: 0 7px; } .brain-pick .sp-ico, .brain-panel .sp-ico { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--border); background: var(--hover); color: var(--text); cursor: pointer; padding: 0; font: 700 10px/1 var(--font); } .brain-pick .sp-ico:hover, .brain-panel .sp-ico:hover { border-color: var(--accent); color: var(--accent); } .brain-panel .sp-ico.arm { color: #fff; background: #EF4444; border-color: #EF4444; width: auto; padding: 0 8px; } .brain-panel { position: fixed; top: 78px; bottom: 16px; inset-inline-end: 14px; width: min(420px, 94vw); z-index: 230; } body:has(> .brain-panel) .ai-panel:not(.brain-panel) { inset-inline-end: calc(14px + min(420px, 94vw) + 10px); } /* the agents panel steps aside */ .bc-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .bc-head .pf-who { flex: 1; min-width: 0; } .bc-msgs { scroll-behavior: smooth; } .bc-chips { flex: 0 0 auto; display: flex; gap: 5px; padding: 6px 12px 0; overflow-x: auto; scrollbar-width: none; } .bc-chips .st-chip { flex: none; padding: 5px 10px; font-size: 11.5px; } .brain-panel.busy .bc-chips { opacity: .45; pointer-events: none; } .bc-send:hover { filter: brightness(1.08); } .brain-panel.busy .bc-send { background: #EF4444; } .ag-m.bc-md { white-space: normal; max-width: 92%; } .bc-body > :first-child { margin-top: 0; } .bc-body > :last-child { margin-bottom: 0; } .bc-body p { margin: 0 0 8px; } .bc-body ul, .bc-body ol { margin: 0 0 8px; padding-inline-start: 20px; } .bc-body li { margin: 2px 0; } .bc-body h3, .bc-body h4 { margin: 10px 0 6px; font-size: 13px; font-weight: 800; } .bc-body pre { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: rgba(4,7,16,.35); border: 1px solid var(--border); overflow-x: auto; font-size: 11.5px; line-height: 1.45; white-space: pre; } .bc-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; padding: 1px 4px; border-radius: 4px; background: rgba(4,7,16,.3); } .bc-body pre code { padding: 0; background: none; } .bc-body a { color: var(--accent); } .bc-body hr { border: 0; border-top: 1px solid var(--border); margin: 8px 0; } .bc-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .bc-tools[hidden] { display: none; } .bc-tool { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; border: 1px solid var(--border); color: var(--muted); background: var(--panel); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bc-tool.ok { color: #10B981; border-color: rgba(16, 185, 129, .45); } .bc-tool.err { color: #EF4444; border-color: rgba(239, 68, 68, .45); } .bc-gen { display: inline-flex; align-items: center; gap: 4px; flex-basis: 100%; padding: 2px 0 0 2px; font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bc-gen em { font-style: normal; opacity: .75; } .bc-tool.run { color: var(--accent); border-color: rgba(108, 92, 231, .45); } .bc-tool.run::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: bc-blink 1s infinite; } @keyframes bc-blink { 50% { opacity: .25; } } .bc-dots { display: inline-flex; gap: 3px; vertical-align: middle; } .bc-dots s { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: bc-dot 1.1s infinite; } .bc-dots s:nth-child(2) { animation-delay: .18s; } .bc-dots s:nth-child(3) { animation-delay: .36s; } @keyframes bc-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .bc-err { margin-top: 6px; padding: 6px 9px; border-radius: 8px; font-size: 11.5px; color: #EF4444; background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .35); white-space: pre-wrap; } .sx-bar b.sx-here { display: inline-flex; align-items: center; gap: 6px; color: var(--text); } /* HTML page card: the file name sits between the tag and the buttons */ [data-html] .pal-bar .tag { margin-inline-end: 0; } [data-html] .hx-name { flex: 1; min-width: 0; padding: 0 8px; font-size: 11px; font-weight: 600; color: #a9b3cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-html]:fullscreen .hx-frame { background: #fff; } /* ── the brain composer (the DMAG composer, on the board) ── */ .bc-comp { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 12px; position: relative; } .bc-stage { display: flex; flex-wrap: wrap; gap: 5px; } .bc-stage[hidden] { display: none; } .bc-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 4px 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid var(--border); background: var(--hover); color: var(--text); white-space: nowrap; overflow: hidden; } .bc-chip img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; } .bc-chip button { width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; padding: 0; } .bc-chip button:hover { background: rgba(239, 68, 68, .18); color: #EF4444; } .bc-chip.sel { color: var(--accent); border-color: rgba(108, 92, 231, .45); } .bc-chip.act { color: #F59E0B; border-color: rgba(245, 158, 11, .45); } .bc-chip.eng { color: #F97316; border-color: rgba(249, 115, 22, .5); cursor: pointer; padding-inline-end: 9px; } .bc-chip.eng:hover { background: rgba(249, 115, 22, .12); } .bc-ta { width: 100%; box-sizing: border-box; min-height: 76px; max-height: 240px; padding: 10px 12px; border-radius: 12px; font-family: var(--font); font-size: 13px; line-height: 1.5; background: var(--hover); border: 1px solid var(--border); color: var(--text); outline: none; resize: none; } .bc-ta:focus { border-color: var(--accent); } .brain-panel.drop .bc-ta { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108, 92, 231, .25); } .bc-tools-row { display: flex; align-items: center; gap: 4px; } .bc-tb { display: inline-flex; align-items: center; gap: 4px; height: 30px; min-width: 30px; padding: 0 7px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: 700 11px/1 var(--font); } .bc-tb:hover, .bc-tb.open { background: var(--hover); border-color: var(--border); color: var(--text); } .bc-tb.on { color: #F59E0B; } .bc-tb.dim b { opacity: .5; } .bc-tb.rec { color: #EF4444; border-color: rgba(239, 68, 68, .5); animation: bc-blink 1.2s infinite; } .bc-kbd { margin-inline-start: auto; color: var(--muted); opacity: .6; display: grid; place-items: center; } .bc-send { flex: 0 0 auto; height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 0 12px 0 10px; border: 0; border-radius: 10px; background: var(--grad); color: #fff; cursor: pointer; font: 800 12px/1 var(--font); } .bc-send:hover { filter: brightness(1.08); } .brain-panel.busy .bc-send { background: #EF4444; } .bc-menu { position: absolute; bottom: calc(100% - 4px); inset-inline-start: 12px; inset-inline-end: 12px; max-height: 340px; overflow: auto; z-index: 3; padding: 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); box-shadow: 0 18px 44px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 2px; } .bc-menu[hidden] { display: none; } .bc-menu-t { display: flex; align-items: center; gap: 6px; padding: 4px 6px 6px; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .bc-menu-t .bc-mi.up { margin-inline-start: auto; width: auto; padding: 3px 8px; text-transform: none; letter-spacing: 0; } .bc-menu-g { padding: 6px 6px 2px; font-size: 10.5px; font-weight: 800; color: var(--accent); } .bc-mi.sess { display: flex; align-items: center; gap: 8px; } .bc-mi.sess span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bc-mi.sess s { text-decoration: none; font-size: 10.5px; color: var(--muted); flex: 0 0 auto; } .bc-head .sp-ico b { font-size: 9.5px; font-weight: 800; margin-inline-start: 2px; } .bc-head .sp-ico.on { color: var(--accent); } .bc-mi { display: flex; align-items: center; gap: 7px; width: 100%; text-align: start; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; font: 600 12px/1.3 var(--font); } .bc-mi:hover { background: var(--hover); } .bc-mi.on { border-color: var(--accent); color: var(--accent); } .bc-mi.off { color: var(--muted); } .bc-mi img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; } .bc-mi s { margin-inline-start: auto; text-decoration: none; color: var(--muted); font-size: 10.5px; font-weight: 600; } .bc-files { display: flex; flex-direction: column; gap: 1px; } .bc-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-height: 18px; } .bc-meta { font-size: 10.5px; color: var(--muted); font-weight: 600; } .bc-acts { margin-inline-start: auto; display: inline-flex; gap: 3px; opacity: 0; transition: opacity .15s; } .ag-m:hover .bc-acts { opacity: 1; } .bc-acts button { width: 22px; height: 20px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--hover); color: var(--muted); cursor: pointer; } .bc-acts button:hover { color: var(--accent); border-color: var(--accent); } .bc-utag { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; background: rgba(255, 255, 255, .18); } .bc-utext { white-space: pre-wrap; } .bc-ufiles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .bc-ufiles span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; background: rgba(255, 255, 255, .16); } .brain-panel .sp-ico.eng { color: #F97316; border-color: rgba(249, 115, 22, .55); } #nodes .pf-act button.on { color: #F97316; border-color: rgba(249, 115, 22, .55); } /* ── the Motor engine node ── */ #nodes .eng-head { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } #nodes .eng-on { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--hover); color: var(--muted); cursor: pointer; font: 800 10.5px/1 var(--font); } #nodes .eng-on.on { color: #F97316; border-color: rgba(249, 115, 22, .6); background: rgba(249, 115, 22, .1); box-shadow: 0 0 12px rgba(249, 115, 22, .25); } #nodes .eng-name { flex: 1; min-width: 0; box-sizing: border-box; height: 26px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--hover); color: var(--text); font: 700 12px/1 var(--font); outline: none; } #nodes .eng-name:focus { border-color: var(--accent); } #nodes .eng-drives { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); line-height: 1.35; } #nodes .eng-drives.on { color: #F97316; font-weight: 700; } #nodes .eng-skills { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 10.5px; color: #8B5CF6; line-height: 1.3; } #nodes .eng-skills b { font-weight: 800; } #nodes .eng-skills span { padding: 1px 7px; border-radius: 999px; background: rgba(139, 92, 246, .12); border: 1px solid rgba(139, 92, 246, .35); font-weight: 700; } .brain-panel .bc-tb.forced { color: #F97316; border-color: rgba(249, 115, 22, .5); } #nodes .eng-row { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 10px; border: 1px solid var(--border); border-inline-start: 3px solid #0EA5E9; background: rgba(4, 7, 16, .18); } #nodes .eng-row.k-override { border-inline-start-color: #F97316; } #nodes .eng-row.k-never { border-inline-start-color: #EF4444; } #nodes .eng-row-h { display: flex; align-items: center; gap: 4px; } #nodes .eng-kind { width: auto; flex: 0 0 auto; padding: 3px 6px; font-size: 11px; font-weight: 800; } #nodes .eng-row-h .sp-ico { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--hover); color: var(--muted); cursor: pointer; } #nodes .eng-row-h .sp-ico:hover { color: #EF4444; border-color: #EF4444; } #nodes .eng-ta { flex: 0 0 auto; min-height: 44px; max-height: 120px; font-size: 11.5px; } #nodes .eng-foot { flex: 0 0 auto; font-size: 10px; line-height: 1.4; color: var(--muted); } #nodes .eng-foot b { color: #0EA5E9; } #nodes .eng-secs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 3px; padding-inline-end: 2px; } #nodes .eng-sec { flex: 0 0 auto; border-radius: 9px; border: 1px solid transparent; } #nodes .eng-sec.has { border-color: var(--border); background: rgba(4, 7, 16, .12); } #nodes .eng-sec.open { border-color: var(--border); } #nodes .eng-sec-h { display: flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 4px 0 2px; } #nodes .eng-sec-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 4px; border: 0; border-radius: 7px; background: transparent; color: var(--text); cursor: pointer; font: 700 11px/1 var(--font); text-align: start; } #nodes .eng-sec-t:hover { background: var(--hover); } #nodes .eng-sec-t b { flex: 0 0 auto; font-weight: 800; } #nodes .eng-sec-t u { flex: 0 0 auto; min-width: 16px; padding: 1px 5px; border-radius: 999px; text-decoration: none; font-size: 9.5px; font-weight: 800; color: #0EA5E9; background: rgba(14, 165, 233, .14); text-align: center; } #nodes .eng-sec-t s { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; font-weight: 500; font-size: 10.5px; color: var(--muted); } #nodes .eng-sec-a { flex: 0 0 auto; display: inline-flex; gap: 2px; opacity: .55; transition: opacity .12s; } #nodes .eng-sec:hover .eng-sec-a, #nodes .eng-sec.has .eng-sec-a { opacity: 1; } #nodes .eng-sec-a button { width: 20px; height: 20px; padding: 0; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: var(--hover); color: var(--muted); cursor: pointer; font: 800 10px/1 var(--font); } #nodes .eng-sec-a button.k-override { color: #F97316; } #nodes .eng-sec-a button.k-direct { color: #0EA5E9; } #nodes .eng-sec-a button.k-never { color: #EF4444; } #nodes .eng-sec-a button:hover { border-color: currentColor; } #nodes .eng-cur { margin: 0 4px 4px; padding: 6px 8px; border-radius: 8px; background: rgba(4, 7, 16, .22); border: 1px dashed var(--border); display: flex; flex-direction: column; gap: 5px; } #nodes .eng-cur pre { margin: 0; max-height: 150px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 500 10.5px/1.45 var(--font); color: var(--muted); } #nodes .eng-cur .nbtn { align-self: flex-start; padding: 3px 7px; font-size: 10px; } #nodes .eng-sec .eng-row { margin: 0 4px 4px; } #nodes .eng-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; } #nodes .eng-bar i { flex: 1; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--text); } #nodes .eng-bar i b { color: #EF4444; } #nodes .eng-bar i .pass { color: var(--muted); font-weight: 600; } #nodes .eng-bar button.k-off:hover { color: #EF4444; border-color: #EF4444; } #nodes .eng-bar button.k-pass:hover { color: #16A34A; border-color: #16A34A; } #nodes .eng-bar button { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--hover); color: var(--muted); cursor: pointer; font: 700 10px/1 var(--font); } #nodes .eng-bar button:hover { color: var(--accent); border-color: var(--accent); } #nodes .eng-grp { flex: 0 0 auto; margin: 6px 4px 1px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); opacity: .85; } #nodes .eng-grp:first-child { margin-top: 0; } #nodes .eng-sec-t em { flex: 0 0 auto; min-width: 16px; padding: 1px 5px; border-radius: 999px; font-style: normal; font-size: 9.5px; font-weight: 800; color: #F97316; background: rgba(249, 115, 22, .14); text-align: center; } #nodes .eng-sec-a button { width: auto; padding: 0 6px 0 4px; gap: 2px; display: inline-flex; align-items: center; } #nodes .eng-sec-a button.k-off { padding: 0 5px; color: var(--muted); } #nodes .eng-sec-a button.k-off:hover, #nodes .eng-sec-a button.k-off.on { color: #EF4444; border-color: rgba(239, 68, 68, .6); } #nodes .eng-sec-a button.k-off.on { background: rgba(239, 68, 68, .14); } #nodes .eng-sec.off { border-color: rgba(239, 68, 68, .55); background: rgba(239, 68, 68, .07); } #nodes .eng-sec.off .eng-sec-t b { color: #EF4444; text-decoration: line-through; text-decoration-thickness: 1.5px; } #nodes .eng-sec.off .eng-sec-t s { color: #EF4444; } #nodes .eng-sec.off .eng-sec-t u { opacity: .45; } #nodes .eng-sec.off .eng-cur { border-color: rgba(239, 68, 68, .5); } #nodes .eng-sec.off .eng-cur pre { color: #EF4444; } #nodes .eng-cur.none pre { font-style: italic; } #nodes .eng-sec.empty:not(.off):not(.has) .eng-sec-t b { opacity: .7; } /* ── stores: project mind, knowledge bucket, RAG bucket, DB store, JSON store ── */ #nodes .st-sum { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; font-size: 10.5px; opacity: .85; color: var(--text); } #nodes .st-sum > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .st-sum .lnk, #nodes .st-meta .lnk { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 0; font: 700 10.5px var(--font); color: var(--accent); cursor: pointer; text-decoration: none; } #nodes .st-sum .lnk.k-rep { color: #E11D2A; } #nodes .st-busy { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: #0D9488; } #nodes .st-empty { flex: 0 0 auto; font-size: 11px; opacity: .55; color: var(--text); line-height: 1.5; padding: 4px 2px; } #nodes .st-form { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; padding: 7px; border: 1px dashed #0D9488; border-radius: 9px; } #nodes .st-form .rf-row .nin { flex: 1; width: auto; min-width: 0; } #nodes .st-form .nin { font-weight: 500; } #nodes .st-ta { flex: 0 0 auto; min-height: 56px; max-height: 140px; } #nodes .st-x { flex: 0 0 auto; width: 16px; height: 16px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(8,10,20,.55); color: #fff; cursor: pointer; padding: 0; opacity: 0; } #nodes .st-card:hover .st-x, #nodes .st-file:hover .st-x, #nodes .st-tbl tr:hover .st-x { opacity: 1; } #nodes .st-chips { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px; } #nodes .st-chips button { border: 1px solid var(--border); background: var(--hover); color: var(--text); border-radius: 999px; padding: 2px 9px; font: 600 10.5px var(--font); cursor: pointer; } #nodes .st-chips button em { font-style: normal; opacity: .55; margin-left: 3px; } #nodes .st-chips button.on { border-color: #0D9488; color: #0D9488; background: rgba(13,148,136,.1); } #nodes .st-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; } #nodes .st-card { border: 1px solid var(--border); border-left: 3px solid #0D9488; border-radius: 9px; padding: 7px 9px; background: var(--hover); } #nodes .st-hd { display: flex; align-items: center; gap: 6px; } #nodes .st-hd b { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } #nodes .st-cat { flex: 0 0 auto; font: 800 9px var(--font); text-transform: uppercase; letter-spacing: .05em; color: #0D9488; background: rgba(13,148,136,.12); border-radius: 999px; padding: 2px 7px; } #nodes .st-txt { margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: var(--text); word-break: break-word; } #nodes .st-txt p { margin: 0 0 4px; } #nodes .st-txt ul, #nodes .st-txt ol { margin: 2px 0 4px; padding-left: 18px; } #nodes .st-meta { margin-top: 4px; font-size: 9.5px; opacity: .6; color: var(--text); } #nodes .st-meta i { font-style: normal; color: #0D9488; } #nodes .st-tbl { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 9px; } #nodes .st-tbl table { border-collapse: collapse; font-size: 11px; color: var(--text); min-width: 100%; } #nodes .st-tbl th, #nodes .st-tbl td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; } #nodes .st-tbl th { position: sticky; top: 0; background: var(--panel-solid); font-weight: 800; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #0D9488; } #nodes .st-tbl td.n, #nodes .st-tbl th.n { opacity: .45; font-size: 9.5px; } #nodes .st-tbl td.x { width: 16px; padding: 0 4px; } #nodes .st-raw { flex: 1; min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; white-space: pre; } #nodes .st-tree { flex: 1; min-height: 0; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.55; color: var(--text); } #nodes .st-tree summary { cursor: pointer; opacity: .65; display: inline; } #nodes .st-tree .jk { padding-left: 14px; border-left: 1px solid var(--border); margin-left: 3px; } #nodes .st-tree b { font-weight: 700; color: #0D9488; } #nodes .st-tree .jv.s { color: #B45309; word-break: break-word; white-space: pre-wrap; } #nodes .st-tree .jv.n { color: #2563EB; } #nodes .st-tree .jv.b { color: #7C3AED; } #nodes .st-tree .jv.z { opacity: .5; } #nodes .st-files { flex: 0 1 auto; max-height: 45%; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 3px; } #nodes .st-file { display: flex; align-items: center; gap: 6px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 7px; font-size: 11px; color: var(--text); } #nodes .st-file .st-fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } #nodes .st-file em { font-style: normal; opacity: .5; font-size: 9.5px; flex: 0 0 auto; } #nodes .st-q { flex: 0 0 auto; } #nodes .st-q .nin { flex: 1; width: auto; min-width: 0; font-weight: 500; } #nodes .st-hits { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 5px; } #nodes .st-hit { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; background: var(--hover); } #nodes .st-hit b { display: block; font-size: 10px; color: #0D9488; margin-bottom: 3px; } #nodes .st-hit p { margin: 0; font-size: 11px; line-height: 1.45; color: var(--text); white-space: pre-wrap; word-break: break-word; } /* tabs: one per table, one per top-level JSON key */ #nodes .st-tabs { padding-bottom: 4px; border-bottom: 1px solid var(--border); } #nodes .st-tabs button.on { background: #0D9488; color: #fff; } #nodes .st-tabs button.on em { opacity: .8; } #nodes .st-tabs button.add { padding: 2px 6px; opacity: .6; } #nodes .st-tabs button.add:hover { opacity: 1; border-color: #0D9488; color: #0D9488; } #nodes .st-lbl { flex: 0 0 auto; font: 700 10px var(--font); text-transform: uppercase; letter-spacing: .05em; opacity: .6; color: var(--text); } #nodes .st-sum .lnk.on { color: var(--text); } #nodes .sp-gap { flex: 1; } /* key-linked cells travel to the row they point at */ #nodes .st-tbl th.k { color: #7C3AED; } #nodes .st-tbl th.k .ic-svg { vertical-align: -1px; } #nodes .st-lk { color: #7C3AED; font-weight: 700; text-decoration: none; border-bottom: 1px dotted currentColor; cursor: pointer; } #nodes .st-lk.bk { color: #0D9488; } #nodes .st-lk:hover { background: rgba(124,58,237,.12); } #nodes .st-filt { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: #7C3AED; padding: 3px 8px; border: 1px solid rgba(124,58,237,.35); border-radius: 999px; background: rgba(124,58,237,.08); } #nodes .st-filt b { font-weight: 800; } #nodes .st-filt .st-x { opacity: 1; margin-left: auto; background: #7C3AED; } /* the JSON tree: each branch says what it holds before it is opened */ #nodes .st-tree details > summary { display: block; list-style: none; padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; } #nodes .st-tree details > summary::-webkit-details-marker { display: none; } #nodes .st-tree details > summary::before { content: ''; display: inline-block; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin: 0 8px 2px 2px; opacity: .5; transition: transform .15s; } #nodes .st-tree details[open] > summary::before { transform: rotate(45deg); } #nodes .st-tree details > summary em, #nodes .st-tree .jr em { font-style: normal; font-size: 9.5px; opacity: .55; margin: 0 6px 0 4px; } #nodes .st-tree details > summary .jp { opacity: .4; font-size: 10px; } #nodes .st-tree details[open] > summary .jp { display: none; } #nodes .st-tree .jr { padding: 1px 0 1px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .st-tree .jr.top { padding-left: 0; font-size: 12px; margin-bottom: 3px; } #nodes .st-tree .jr .jv.s { white-space: nowrap; } #nodes .st-tree .st-tbl.jtab { flex: 0 0 auto; max-height: 300px; margin: 3px 0 4px; font-family: var(--font); } #nodes .st-tree .st-tbl.jtab th { color: #0D9488; } /* the RAG bucket: what each file's reading is at, and the passages */ #nodes .st-kd { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font: 800 9px var(--font); text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: 2px 7px; border: 1px solid transparent; } #nodes .st-kd em { font-style: normal; opacity: .7; } #nodes .st-kd.t { color: #0D9488; background: rgba(13,148,136,.12); } #nodes .st-kd.v { color: #7C3AED; background: rgba(124,58,237,.12); } #nodes .st-kd.d { color: #B45309; background: rgba(180,83,9,.14); } #nodes .st-kd.n { color: #2563EB; background: rgba(37,99,235,.12); } #nodes .st-chips button.st-kd { border: 1px solid transparent; } #nodes .st-chips button.st-kd.on { border-color: currentColor; } #nodes .st-emb { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font: 600 9.5px var(--font); opacity: .55; color: var(--text); } #nodes .st-file.working { border-color: rgba(13,148,136,.5); } #nodes .st-file.error { border-color: rgba(225,29,42,.5); } #nodes .st-pill { flex: 0 0 auto; position: relative; overflow: hidden; display: inline-flex; align-items: center; min-width: 88px; height: 16px; padding: 0 7px; border-radius: 999px; font: 700 9px var(--font); text-transform: uppercase; letter-spacing: .04em; } #nodes .st-pill.w { color: #0D9488; background: rgba(13,148,136,.12); } #nodes .st-pill.w i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(13,148,136,.28); transition: width .6s; } #nodes .st-pill.w b { position: relative; font-weight: 700; } #nodes .st-pill.e { color: #E11D2A; background: rgba(225,29,42,.12); min-width: 0; } #nodes .st-seg { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } #nodes .st-seg button { border: 0; background: var(--hover); color: var(--text); padding: 5px 9px; font: 700 10.5px var(--font); cursor: pointer; } #nodes .st-seg button.on { background: #0D9488; color: #fff; } #nodes .st-think { color: #0D9488; opacity: .9; } #nodes .st-ans { flex: 1; min-height: 0; overflow: auto; border: 1px solid rgba(13,148,136,.4); border-left: 3px solid #0D9488; border-radius: 9px; padding: 8px 10px; background: var(--hover); } #nodes .st-ans .st-txt { margin: 0; font-size: 12px; } #nodes .st-src { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border); } #nodes .st-cite { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border: 1px solid var(--border); background: none; color: var(--text); border-radius: 999px; padding: 2px 8px 2px 5px; font: 500 10px var(--font); cursor: pointer; } #nodes .st-cite b { color: #0D9488; } #nodes .st-cite:hover { border-color: #0D9488; } #nodes .st-hit { cursor: pointer; } #nodes .st-hit:hover { border-color: #0D9488; } #nodes .st-hit b { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } #nodes .st-hit i { display: block; font-style: normal; font-weight: 700; font-size: 11px; margin-bottom: 2px; color: var(--text); } #nodes .st-ch-hd { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } #nodes .st-ch-hd .lnk { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 0; font: 700 10.5px var(--font); color: #0D9488; cursor: pointer; } #nodes .st-ch-hd .nsel { flex: 1; width: auto; min-width: 0; padding: 4px 6px; font-size: 11px; } #nodes .st-chunks .st-card.ck { border-left-color: #0D9488; } #nodes .st-chunks .st-card.ck.v { border-left-color: #7C3AED; } #nodes .st-chunks .st-card.ck.d { border-left-color: #B45309; } #nodes .st-chunks .st-card.ck.n { border-left-color: #2563EB; } #nodes .st-chunks .st-card .sp-ico { opacity: 0; } #nodes .st-chunks .st-card:hover .sp-ico { opacity: 1; } #nodes .st-txt.pre { white-space: pre-wrap; font-size: 11px; } #nodes .st-ck-form { flex: 0 0 auto; } #nodes .st-ck-form .nsel { flex: 0 0 auto; width: auto; padding: 4px 6px; font-size: 11px; } #nodes .st-ta.tall { min-height: 120px; max-height: 260px; } #nodes .st-pager { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 10.5px; opacity: .75; color: var(--text); } #nodes .st-pager .lnk { border: 0; background: none; color: #0D9488; cursor: pointer; padding: 2px; } #nodes .st-pager .lnk[disabled] { opacity: .3; cursor: default; } #nodes .rm-host { margin-top: 4px; } /* the arena's bar names the brain wired into its head */ [data-arena] .pal-bar .tag.brain { margin-inline-end: auto; text-transform: none; letter-spacing: 0; font-weight: 600; color: #22D3EE; } [data-arena] .pal-bar:has(.tag.brain:not([hidden])) .tag:first-child { margin-inline-end: 8px; } /* ── the shows on record: Show MoM (minutes + summary) and Show replies (threads) ── */ #nodes .sh-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; } #nodes .sh-folder { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--hover); color: var(--text); border-radius: 8px; padding: 4px 8px; font: 600 11px var(--font); cursor: pointer; } #nodes .sh-folder span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; opacity: .8; } #nodes .sh-folder:hover { border-color: #B8860B; } #nodes .sh-list { flex: 0 1 auto; min-height: 0; max-height: 60%; overflow: auto; display: flex; flex-direction: column; gap: 4px; } #nodes .sh-list.picked { max-height: 112px; } #nodes .sh-show { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; align-items: center; text-align: left; border: 1px solid var(--border); background: var(--hover); color: var(--text); border-radius: 9px; padding: 6px 9px; font: 11.5px var(--font); cursor: pointer; } #nodes .sh-show:hover { border-color: #B8860B; } #nodes .sh-show.on { border-color: #B8860B; background: rgba(184,134,11,.1); } #nodes .sh-show b { font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace; color: #B8860B; letter-spacing: .04em; } #nodes .sh-show .sh-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .sh-show em { grid-column: 1 / -1; font-style: normal; font-size: 9.5px; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .sh-score { margin-left: auto; font: 800 13px var(--font); color: #B8860B; } #nodes .sh-score em { font: 400 9.5px var(--font); opacity: .6; } #nodes .st-tabs button.on { background: #B8860B; } #nodes .sh-doc { flex: 1; min-height: 0; overflow: auto; font-size: 11.5px; line-height: 1.5; color: var(--text); padding-right: 2px; } #nodes .sh-doc h1, #nodes .sh-doc h2, #nodes .sh-doc h3 { font-size: 12px; margin: 10px 0 4px; color: #B8860B; } #nodes .sh-doc h1 { font-size: 13px; } #nodes .sh-doc p { margin: 0 0 6px; } #nodes .sh-doc ul, #nodes .sh-doc ol { margin: 2px 0 6px; padding-left: 18px; } #nodes .sh-doc blockquote { margin: 4px 0 6px; padding: 4px 9px; border-left: 3px solid #B8860B; background: var(--hover); border-radius: 0 7px 7px 0; } #nodes .sh-doc hr { border: 0; border-top: 1px solid var(--border); margin: 8px 0; } #nodes .sh-sum { font-size: 12px; line-height: 1.55; } #nodes .sh-k { border: 1px solid var(--border); border-radius: 9px; padding: 7px 9px; margin-bottom: 6px; background: var(--hover); } #nodes .sh-k h5 { margin: 0 0 4px; font: 800 9.5px var(--font); text-transform: uppercase; letter-spacing: .06em; color: #B8860B; } #nodes .sh-k ul { margin: 0; padding-left: 16px; } #nodes .sh-v { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; font-size: 11px; } #nodes .sh-v b { min-width: 24px; text-align: center; color: #B8860B; } #nodes .sh-v i { font-style: normal; opacity: .6; } #nodes .sh-kinds button em { font-style: normal; opacity: .55; margin-left: 3px; } #nodes .sh-kinds button.on { border-color: currentColor; background: var(--hover); } #nodes .sh-threads { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; } #nodes .sh-th { border: 1px solid var(--border); border-left: 3px solid #0EA5E9; border-radius: 9px; padding: 7px 9px; background: var(--hover); } #nodes .sh-th.society { border-left-color: #D97706; } #nodes .sh-th.jury { border-left-color: #7C3AED; } #nodes .sh-th.authority { border-left-color: #059669; } #nodes .sh-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } #nodes .sh-hd b { font-size: 11.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .sh-hd em { font-style: normal; font-size: 9.5px; opacity: .55; margin-left: auto; } #nodes .sh-av { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 800 8.5px var(--font); color: #fff; } #nodes .sh-kd { font: 800 8.5px var(--font); letter-spacing: .05em; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.06); } #nodes .sh-x { font-size: 11.5px; line-height: 1.5; color: var(--text); word-break: break-word; } #nodes .sh-re { margin: 6px 0 0 14px; padding: 6px 8px; border-left: 2px solid var(--border); border-radius: 0 7px 7px 0; background: rgba(0,0,0,.04); } #nodes .sh-re.pres { border-left-color: #B8860B; } #nodes .k-talk, #nodes .k-reply { color: #B8860B; } #nodes .k-opinion { color: #0EA5E9; } #nodes .k-question { color: #7C3AED; } #nodes .k-critique { color: #E11D2A; } #nodes .k-praise { color: #16A34A; } #nodes .k-suggestion { color: #0D9488; } #nodes .k-concern { color: #D97706; } #nodes .k-accept { color: #059669; } #nodes .k-pushback { color: #EA580C; } /* the arena's kinds, when a shows card reads a session */ #nodes .k-story { color: #7C3AED; } #nodes .k-idea { color: #0EA5E9; } #nodes .k-req { color: #D97706; } #nodes .k-feel { color: #DB2777; } #nodes .k-agree { color: #16A34A; } #nodes .k-object { color: #E11D2A; } /* ── Arena/Stage output: the combo card's top tabs and the hall ── */ #nodes .sh-vtabs button { font-weight: 800; } #nodes .sh-hall { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; } #nodes .sh-hall-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } #nodes .sh-hall-head b { font-size: 12px; color: #B8860B; } #nodes .sh-hall-head span { font-size: 11.5px; font-weight: 700; color: var(--text); } #nodes .sh-hall-head em { font-style: normal; font-size: 9.5px; opacity: .6; width: 100%; } #nodes .sh-seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; } #nodes .sh-seat { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 5px 7px; background: var(--hover); min-width: 0; } #nodes .sh-seat b { font-size: 10.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .sh-seat span { font-size: 9px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; } #nodes .sh-seat.pres { border-color: rgba(184,134,11,.55); background: rgba(184,134,11,.08); } #nodes .sh-seat.pres i { font-style: normal; font: 800 8.5px var(--font); color: #B8860B; letter-spacing: .05em; } #nodes .sh-mats { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } #nodes .sh-mats u, #nodes .sh-extend u, #nodes .ex-judges u, #nodes .ex-recs u { text-decoration: none; font: 800 9px var(--font); letter-spacing: .07em; text-transform: uppercase; opacity: .55; margin-inline-end: 2px; } #nodes .sh-mats span { font-size: 10px; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; background: var(--hover); } #nodes .sh-extend { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; border-top: 1px dashed var(--border); padding-top: 8px; margin-top: auto; } #nodes .sh-extr { width: 24px; height: 22px; border: 1px solid var(--border); border-radius: 7px; background: var(--hover); color: var(--text); font: 700 11px var(--font); cursor: pointer; } #nodes .sh-extr.on { border-color: #B8860B; color: #B8860B; background: rgba(184,134,11,.1); } #nodes .sh-extbusy { display: flex; align-items: center; gap: 7px; font: 600 11px var(--font); color: var(--text); } /* ── Evaluation matrix ── */ #nodes .ex-bar-top { display: flex; gap: 5px; align-items: center; } #nodes .ex-show { flex: 1; min-width: 0; } #nodes .ex-inputs { display: flex; gap: 5px; flex-wrap: wrap; } #nodes .ex-inputs span { display: inline-flex; align-items: center; gap: 4px; font: 600 10px var(--font); border: 1px dashed var(--border); border-radius: 999px; padding: 2px 9px; opacity: .55; } #nodes .ex-inputs span.on { border-style: solid; border-color: #0D9488; color: #0D9488; opacity: 1; background: rgba(13,148,136,.08); } #nodes .ex-tabs { align-items: center; } #nodes .ex-code { margin-left: auto; font: 800 9.5px var(--font); letter-spacing: .05em; color: #B8860B; } #nodes .ex-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; } #nodes .ex-hero { display: flex; align-items: center; gap: 10px; } #nodes .ex-mark { display: flex; flex-direction: column; align-items: center; border: 2px solid var(--mc, #B8860B); border-radius: 12px; padding: 8px 16px; } #nodes .ex-mark b { font: 800 24px var(--font); color: var(--mc, #B8860B); } #nodes .ex-mark span { font: 700 9.5px var(--font); letter-spacing: .06em; text-transform: uppercase; opacity: .7; } #nodes .ex-vcs { display: flex; flex-direction: column; gap: 3px; } #nodes .ex-vc { display: inline-flex; align-items: center; gap: 6px; font: 700 10px var(--font); color: var(--vc); } #nodes .ex-vc b { min-width: 22px; text-align: center; border: 1px solid var(--vc); border-radius: 7px; padding: 1px 4px; } #nodes .ex-verdict { font: 600 11.5px/1.5 var(--font); color: var(--text); border-inline-start: 3px solid #B8860B; padding: 4px 9px; background: var(--hover); border-radius: 0 8px 8px 0; } #nodes .ex-cats { display: flex; flex-direction: column; gap: 5px; } #nodes .ex-cat { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline; } #nodes .ex-cat span { font: 700 11px var(--font); color: var(--text); } #nodes .ex-cat em { font: 800 10.5px var(--font); font-style: normal; } #nodes .ex-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; } #nodes .ex-bar i { display: block; height: 100%; border-radius: 999px; } #nodes .ex-judges { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } #nodes .ex-judges span { display: inline-flex; align-items: center; gap: 5px; font: 600 10px var(--font); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px 2px 3px; background: var(--hover); } #nodes .ex-judges span em { font-style: normal; font-weight: 800; opacity: .55; } #nodes .ex-recs { display: flex; flex-direction: column; gap: 4px; } #nodes .ex-rec { display: flex; gap: 7px; align-items: baseline; font: 600 11px/1.45 var(--font); color: var(--text); } #nodes .ex-rec i { flex: 0 0 auto; font: 800 8px var(--font); font-style: normal; letter-spacing: .06em; border-radius: 6px; padding: 1px 6px; color: #fff; background: #64748b; } #nodes .ex-rec.pr-high i { background: #D63031; } #nodes .ex-rec.pr-medium i { background: #D97706; } #nodes .ex-rec.pr-low i { background: #0D9488; } #nodes .ex-icat { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; } #nodes .ex-icat b { font-size: 11.5px; color: var(--text); } #nodes .ex-icat em { font-style: normal; font: 800 10.5px var(--font); color: #B8860B; } #nodes .ex-item { border: 1px solid var(--border); border-inline-start: 3px solid #F59E0B; border-radius: 9px; padding: 6px 9px; background: var(--hover); display: flex; flex-direction: column; gap: 3px; } #nodes .ex-item.v-pass { border-inline-start-color: #16A34A; } #nodes .ex-item.v-fail { border-inline-start-color: #D63031; } #nodes .ex-it-h { display: flex; align-items: baseline; gap: 6px; } #nodes .ex-it-h i { font: 800 9px var(--font); font-style: normal; opacity: .5; } #nodes .ex-it-h span { flex: 1; font: 700 11px/1.4 var(--font); color: var(--text); } #nodes .ex-it-h b { font: 800 11px var(--font); color: var(--vc, #F59E0B); border: 1px solid var(--vc, #F59E0B); border-radius: 7px; padding: 0 6px; } #nodes .ex-it-t { font: 600 9.5px var(--font); opacity: .6; } #nodes .ex-it-j { display: flex; align-items: center; gap: 5px; font: 600 10px var(--font); opacity: .8; } #nodes .ex-it-f { font: 500 10.5px/1.5 var(--font); color: var(--text); } #nodes .ex-it-r { font: 600 10px/1.45 var(--font); color: #0D9488; display: flex; gap: 4px; align-items: baseline; } /* a plain text body FILLS its card — the words get the space the card has */ #nodes .nta-wrap.grow { flex: 1 1 auto; } #nodes .nta-wrap.grow > .nta { flex: 1; min-height: 40px; overflow-y: auto; } /* the World Studio prompt: drag its lower edge to give the brief more room */ #nodes .wd-ta { flex: 0 0 auto; height: 116px; min-height: 56px; max-height: 420px; resize: vertical; overflow-y: auto; } /* ── Summarize: sources line, depth toggle, progress bar ── */ #nodes .dg-src { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--hover); font-size: 10.5px; color: var(--muted, #64748b); } #nodes .dg-src b { color: var(--text); font-weight: 800; } #nodes .dg-src .dg-names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } #nodes .dg-src.empty { border-style: dashed; } #nodes .dg-seg { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 9px; border: 1px solid var(--border); background: var(--hover); } #nodes .dg-mode { border: 0; border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 11px; font-weight: 700; color: var(--muted, #64748b); background: transparent; cursor: pointer; transition: background .15s, color .15s; } #nodes .dg-mode:hover { color: var(--text); } #nodes .dg-mode.on { color: #fff; background: var(--accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); } #nodes .dg-mode:disabled { cursor: progress; opacity: .7; } #nodes .dg-ta { flex: 0 0 auto; height: 54px; min-height: 36px; max-height: 300px; resize: vertical; overflow-y: auto; } #nodes .dg-prog { flex: 0 0 auto; height: 6px; border-radius: 4px; overflow: hidden; background: var(--hover); border: 1px solid var(--border); } #nodes .dg-prog i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .8s ease; } /* ── the running-tasks bar (bottom corner, like the nSPAiCE agents bar) ── */ #cnva-tasks { position: fixed; inset-inline-start: 14px; bottom: 14px; z-index: 340; min-width: 220px; max-width: 320px; border-radius: 13px; padding: 8px; display: flex; flex-direction: column; gap: 4px; } #cnva-tasks .ct-cap { display: flex; align-items: center; gap: 6px; font: 800 9.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #B8860B; padding: 0 3px 2px; } #cnva-tasks .ct-cap em { font-style: normal; opacity: .6; } #cnva-tasks .ct-row { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); color: var(--text); padding: 5px 8px; font: 600 11px var(--font); cursor: pointer; text-align: start; } #cnva-tasks .ct-row:hover { border-color: #B8860B; } #cnva-tasks .ct-row i { display: inline-flex; opacity: .75; } #cnva-tasks .ct-lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #cnva-tasks .ct-row em { font-style: normal; font-size: 9.5px; opacity: .6; } #cnva-tasks .ct-spin { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #F59E0B; animation: ctp 1.1s ease-in-out infinite; } @keyframes ctp { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } } /* ── Agent & Teams inventory ── */ #nodes .inv-bar { display: flex; gap: 5px; align-items: center; } #nodes .inv-src { flex: 1; min-width: 0; } #nodes .inv-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; } #nodes .inv-row { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); color: var(--text); padding: 6px 8px; cursor: pointer; text-align: start; } #nodes .inv-row:hover { border-color: #7C5CFF; } #nodes .inv-row.busy { opacity: .6; pointer-events: none; } #nodes .inv-row .dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; } #nodes .inv-m { flex: 1; min-width: 0; display: flex; flex-direction: column; } #nodes .inv-m b { font: 700 11px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .inv-m span { font: 500 9.5px var(--font); opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .inv-m em { font: 500 9px var(--font); font-style: normal; opacity: .5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .inv-row u { text-decoration: none; font: 700 8.5px var(--font); letter-spacing: .04em; opacity: .5; text-transform: uppercase; white-space: nowrap; } #nodes .inv-add { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 7px; border: 1px solid #7C5CFF; color: #7C5CFF; flex: 0 0 auto; } #nodes .inv-row:hover .inv-add { background: #7C5CFF; color: #fff; } /* the avatar grid: as many faces per row as the card's width allows */ #nodes .inv-grid { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); grid-auto-rows: max-content; gap: 8px 6px; align-content: start; padding: 2px; } #nodes .inv-av { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 4px 2px; border-radius: 10px; cursor: pointer; min-width: 0; } #nodes .inv-av:hover { background: var(--hover); } #nodes .inv-av.busy { opacity: .5; pointer-events: none; } #nodes .inv-face { position: relative; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(124,92,255,.35); } #nodes .inv-av:hover .inv-face { box-shadow: 0 0 0 2.5px #7C5CFF; } #nodes .inv-face b { font: 800 16px var(--font); color: #fff; } #nodes .inv-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #nodes .inv-nm { font: 600 9.5px/1.25 var(--font); color: var(--text); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } #nodes .inv-av u { text-decoration: none; font: 700 7.5px var(--font); letter-spacing: .05em; text-transform: uppercase; opacity: .5; } /* the hover card: the profile in brief, floating beside the tile */ .inv-hover { position: fixed; z-index: 380; width: 270px; border-radius: 13px; padding: 11px 12px; pointer-events: none; display: flex; flex-direction: column; gap: 7px; } .inv-hover .ih-hd { display: flex; align-items: center; gap: 9px; } .inv-hover .inv-face { position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: 0 0 auto; } .inv-hover .inv-face b { font: 800 15px var(--font); color: #fff; } .inv-hover .inv-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .inv-hover .ih-hd div { min-width: 0; display: flex; flex-direction: column; } .inv-hover .ih-hd b { font: 800 12.5px var(--font); color: var(--text); } .inv-hover .ih-hd span { font: 600 10px/1.35 var(--font); opacity: .7; color: var(--text); } .inv-hover .ih-tags { display: flex; gap: 4px; flex-wrap: wrap; } .inv-hover .ih-tags em { font: 700 8.5px var(--font); font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: #7C5CFF; border: 1px solid rgba(124,92,255,.4); border-radius: 999px; padding: 1px 7px; } .inv-hover p { margin: 0; font: 500 10.5px/1.55 var(--font); color: var(--text); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .inv-hover .ih-chips { display: flex; gap: 3px; flex-wrap: wrap; } .inv-hover .ih-chips span { font: 600 9px var(--font); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; color: var(--text); opacity: .85; } /* the live hall feed while a session is being extended */ #nodes .sh-livefeed { max-height: 46%; flex: 0 1 auto; } /* ── Agents bucket · Deck · Charter ── */ #nodes .bk-hits { flex: 0 1 auto; max-height: 40%; overflow: auto; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px dashed var(--border); padding-bottom: 6px; } #nodes .bk-it { position: relative; } #nodes .bk-it .fl-x { position: absolute; top: 4px; inset-inline-end: 4px; } #nodes .dk-rows { flex: 0 1 auto; max-height: 190px; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; } /* the deck writes its own pages */ #nodes .dk-ai { border: 1px solid var(--border); border-radius: 10px; padding: 8px; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } #nodes .dk-ai > b { font-size: 9.5px; letter-spacing: .09em; opacity: .65; } #nodes .dk-ai .rn-row { gap: 5px; } #nodes .dk-ai .nsel { flex: 1; min-width: 0; } #nodes .chipb { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 10px; padding: 4px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap; background: var(--hover); border: 1px solid var(--border); color: var(--muted, #64748b); } #nodes .chipb:hover { color: #00E5FF; border-color: rgba(0,229,255,.45); } #nodes .chipb.on { background: rgba(0,229,255,.14); border-color: #00E5FF; color: var(--fg, #e8ecf7); } #nodes .dk-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); padding: 6px 9px; opacity: .55; } #nodes .dk-row.on { opacity: 1; border-inline-start: 3px solid #F43F5E; } #nodes .dk-row b { font: 800 11px var(--font); color: #F43F5E; min-width: 14px; } #nodes .dk-row span { flex: 1; font: 600 10.5px var(--font); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .dk-row i { font-style: normal; color: #16A34A; display: inline-flex; } #nodes .dk-row i.miss { color: #D97706; font: 600 9px var(--font); } #nodes .ch-sealed { border-color: #C9A227 !important; color: #C9A227 !important; opacity: 1 !important; background: rgba(201,162,39,.1) !important; } #nodes .ch-qs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; } #nodes .ch-q { border: 1px solid var(--border); border-inline-start: 3px solid #C9A227; border-radius: 9px; background: var(--hover); padding: 7px 9px; display: flex; flex-direction: column; gap: 5px; } #nodes .ch-q > b { font: 800 10px var(--font); color: #C9A227; } #nodes .ch-qt { display: flex; flex-direction: column; gap: 2px; } #nodes .ch-qt span { font: 700 11px/1.5 var(--font); color: var(--text); } #nodes .ch-a { flex: 0 0 auto; min-height: 40px; height: 52px; resize: vertical; } #nodes .ch-doc { flex: 1; min-height: 80px; overflow: auto; border: 1.5px solid rgba(201,162,39,.5); border-radius: 10px; padding: 8px 11px; background: rgba(201,162,39,.05); } /* ── Crop · Grid composer · Smart select ── */ #nodes .cx-host, #nodes .ct-host { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; outline: none; } #nodes .cx-wrap { flex: 1; min-height: 120px; border-radius: 10px; overflow: hidden; background: #0e0e1a; display: grid; } #nodes .cx-cv { width: 100%; height: 100%; display: block; touch-action: none; } #nodes .ct-cv { width: 100%; height: 100%; object-fit: contain; display: block; touch-action: none; cursor: crosshair; } #nodes .ct-sam { flex: 1; min-width: 0; } #nodes .ct-tolw { flex: 0 0 auto; } #nodes .ct-tolw input { width: 74px; } #nodes .gm-step { display: inline-flex; align-items: center; gap: 4px; } #nodes .gm-step b { font: 800 9px var(--font); letter-spacing: .05em; text-transform: uppercase; opacity: .55; } #nodes .gm-step button { width: 20px; height: 20px; border: 1px solid var(--border); border-radius: 6px; background: var(--hover); color: var(--text); font: 700 12px var(--font); cursor: pointer; } #nodes .gm-step button:disabled { opacity: .35; pointer-events: none; } #nodes .gm-step i { font: 800 11px var(--font); font-style: normal; min-width: 14px; text-align: center; } #nodes .gm-ink { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--border); flex: 0 0 auto; } #nodes .sv-modes button { font-size: 9.5px; padding: 2px 8px; } /* ── Web research ── */ #nodes .ws-q { flex: 0 0 auto; height: 58px; min-height: 38px; resize: vertical; } /* the research activity feed: every phase, stamped, with a running clock */ #nodes .ws-feed { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); padding: 8px 10px; font-size: 11px; color: var(--muted, #64748b); max-height: 120px; overflow: auto; } #nodes .ws-feed b { display: flex; align-items: center; gap: 6px; font-size: 9.5px; letter-spacing: .12em; color: var(--text); } #nodes .ws-feed.live { border-color: rgba(245,158,11,.5); } #nodes .ws-feed.live b { color: #B45309; } #nodes .ws-feed span { line-height: 1.45; } #nodes .ws-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; } #nodes .ws-sum, #nodes .ws-an { border: 1px solid var(--border); border-inline-start: 3px solid #0EA5E9; border-radius: 9px; background: var(--hover); padding: 7px 10px; display: flex; flex-direction: column; gap: 4px; } #nodes .ws-an { border-inline-start-color: #CA8A04; } #nodes .ws-sum > b, #nodes .ws-an > b { font: 800 9.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: #0EA5E9; } #nodes .ws-an > b { color: #CA8A04; } #nodes .ws-sum > span { font: 500 11px/1.6 var(--font); color: var(--text); } #nodes .ws-an > span { font: 600 10.5px/1.5 var(--font); color: var(--text); display: flex; gap: 5px; } #nodes .ws-an > span::before { content: "—"; opacity: .4; } #nodes .ws-rec { border: 1px solid var(--border); border-radius: 9px; background: var(--hover); padding: 6px 9px; display: flex; flex-direction: column; gap: 3px; } #nodes .ws-rec-h { display: flex; align-items: baseline; gap: 6px; } #nodes .ws-rec-h b { flex: 1; font: 700 11px/1.4 var(--font); color: var(--text); } #nodes .ws-cred { flex: 0 0 auto; font: 800 7.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--wc); border-radius: 6px; padding: 1.5px 6px; } #nodes .ws-q5 { flex: 0 0 auto; display: inline-flex; gap: 2px; } #nodes .ws-q5 i { width: 6px; height: 6px; border-radius: 50%; background: var(--border); display: block; } #nodes .ws-q5 i.on { background: #CA8A04; } #nodes .ws-rec-m { font: 600 9px var(--font); opacity: .55; } #nodes .ws-rec-t { font: 500 10.5px/1.5 var(--font); color: var(--text); } #nodes .ws-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(14,165,233,.5); border-radius: 999px; background: rgba(14,165,233,.08); color: #0EA5E9; font: 700 9.5px var(--font); padding: 2px 10px; cursor: pointer; max-width: 100%; overflow: hidden; } #nodes .ws-link:hover { background: #0EA5E9; color: #fff; } /* ── GLOBAL ledger · Option card ── */ #nodes .gx-add { display: flex; flex-direction: column; gap: 4px; border-bottom: 1px dashed var(--border); padding-bottom: 7px; } #nodes .gx-add .gx-text { flex: 0 0 auto; height: 46px; min-height: 34px; resize: vertical; } #nodes .gx-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 5px; } #nodes .gx-it { border: 1px solid var(--border); border-inline-start: 3px solid #0D9488; border-radius: 8px; background: var(--hover); padding: 5px 8px; display: flex; flex-direction: column; gap: 2px; } #nodes .gx-it-h { display: flex; align-items: center; gap: 6px; } #nodes .gx-it-h b { flex: 1; font: 700 10.5px var(--font); color: var(--text); } #nodes .gx-it > span { font: 500 10.5px/1.5 var(--font); color: var(--text); } #nodes .gx-it > em { font: 500 8.5px var(--font); font-style: normal; opacity: .5; } #nodes .oc-secs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; } #nodes .oc-sec b { display: block; font: 800 9.5px var(--font); letter-spacing: .05em; text-transform: uppercase; color: #CA8A04; margin-bottom: 2px; } #nodes .oc-ta { flex: 0 0 auto; height: 52px; min-height: 34px; resize: vertical; } #nodes .sv-ask { border: 1px solid rgba(245,158,11,.5); background: rgba(245,158,11,.08); border-radius: 9px; padding: 7px 9px; font: 600 10.5px/1.5 var(--font); color: var(--text); display: flex; flex-direction: column; gap: 6px; } #nodes .sv-report { display: flex; flex-direction: column; gap: 2px; overflow: auto; min-height: 0; flex: 1 1 auto; } #nodes .sv-report span { display: flex; align-items: baseline; gap: 4px; font: 600 9.5px/1.4 var(--font); color: var(--text); opacity: .85; } #nodes .sv-report span.ok i, #nodes .sv-report span.ok svg { color: #16A34A; } #nodes .sv-report span.bad { color: #D63031; opacity: 1; } #nodes .sv-note { display: flex; align-items: center; gap: 5px; font: 700 11px var(--font); color: #16A34A; flex-wrap: wrap; } #nodes .sv-note u { text-decoration: none; font: 700 8.5px var(--font); letter-spacing: .05em; text-transform: uppercase; opacity: .6; } #nodes .sv-note em { font-style: normal; font-size: 9.5px; opacity: .55; margin-inline-start: auto; } /* ── Reference board · Style DNA · DNA composer ── */ /* the reference board's brief: the focus for the reading, the note for the board */ #nodes .sx-brief { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } #nodes .sx-brief label { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #nodes .sx-brief label span { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #64748b); } #nodes .sx-brief .sx-ta { height: 58px; min-height: 36px; max-height: 220px; resize: vertical; overflow-y: auto; font-size: 11px; } #nodes .sx-grid { flex: 1 1 auto; min-height: 90px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-auto-rows: max-content; gap: 6px; align-content: start; } #nodes .sx-tile { position: relative; aspect-ratio: 4/3; border: 2px solid var(--border); border-radius: 9px; overflow: hidden; background: rgba(0,0,0,.12); cursor: pointer; } #nodes .sx-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } #nodes .sx-tile.on { border-color: #16A34A; } #nodes .sx-tick { position: absolute; top: 5px; inset-inline-start: 5px; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #fff; background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; } #nodes .sx-tile.on .sx-tick { background: #16A34A; border-color: #16A34A; } #nodes .sx-wired { position: absolute; bottom: 4px; inset-inline-start: 4px; font: 700 8px var(--font); font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(13,148,136,.85); border-radius: 5px; padding: 1px 5px; } #nodes .sx-facets { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 5px; } #nodes .sx-facet { border: 1px solid var(--border); border-inline-start: 3px solid #CA8A04; border-radius: 8px; background: var(--hover); padding: 5px 8px; } #nodes .sx-facet b { display: block; font: 800 10px var(--font); letter-spacing: .04em; text-transform: uppercase; color: #CA8A04; margin-bottom: 2px; } #nodes .sx-facet span { font: 500 10.5px/1.5 var(--font); color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #nodes .dm-name { display: flex; align-items: center; gap: 6px; } #nodes .dm-name b { font: 800 15px var(--font); color: #CA8A04; } #nodes .dm-rows { flex: 0 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; } #nodes .dm-row { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); padding: 4px 8px; } #nodes .dm-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); } #nodes .dm-row.on .dot { background: #16A34A; } #nodes .dm-row b { flex: 1; font: 700 10.5px var(--font); color: var(--text); } #nodes .dm-row em { font: 600 9px var(--font); font-style: normal; opacity: .6; color: #16A34A; } #nodes .dm-row em.miss { color: inherit; opacity: .4; } #nodes .dm-row .x { border: 0; background: none; color: var(--text); opacity: .45; cursor: pointer; padding: 2px; } #nodes .dm-row .x:hover { opacity: 1; color: #D63031; } #nodes .dm-extra { flex: 0 0 auto; height: 54px; } #nodes .dm-prev { flex: 1 1 auto; min-height: 60px; overflow: auto; font-size: 10.5px; white-space: pre-wrap; } /* ── Video grid · Gallery grid · Extract image data ── */ /* the clip plays in the card at a fixed height, so the split, the refs and the sheets keep their room under it */ #nodes .vg-play { flex: 0 0 auto; height: 190px; min-height: 0; border-radius: 9px; overflow: hidden; background: #000; } #nodes .vg-play video, #nodes .vg-play iframe { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000; } #nodes .rn-out.empty.vg-play { height: 96px; background: var(--hover); } #nodes .vg-set { align-items: end; } #nodes .vg-set .rn-num { flex: 1 1 0; } #nodes .vg-set .rn-num.wide { flex: 1.5 1 0; } #nodes .vg-set .rn-num input, #nodes .vg-set .rn-num .nsel { width: 100%; box-sizing: border-box; } #nodes .vg-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; } #nodes .vg-head b { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #64748b); } #nodes .sx-grid.vg-grid { flex: 0 1 auto; min-height: 62px; max-height: 148px; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); } #nodes .vg-grid .st-empty { grid-column: 1 / -1; } /* the sheets: two to a row, in the sheet's own orientation */ #nodes .vg-out { flex: 1 1 auto; min-height: 110px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; align-content: start; } #nodes .vg-out .rn-out { min-height: 0; aspect-ratio: 16 / 9; } #nodes .vg-out .rn-out.sq { aspect-ratio: 1; } #nodes .vg-out .rn-out.tall { aspect-ratio: 3 / 4; } /* the reading: the whole text, scrolled, as the model wrote it */ #nodes .xt-out { flex: 1 1 auto; min-height: 120px; overflow: auto; font-size: 11px; line-height: 1.55; white-space: pre-wrap; } /* ── HOW A PICTURE WAS MADE ──────────────────────────────────────────────── Every generated image carries its prompt: on the render card behind a fold, and on any image on the board through the Prompt button. */ .mw-prompt { font-size: 12.5px; line-height: 1.55; color: var(--text); white-space: pre-wrap; max-height: 46vh; overflow: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); } .mw-neg { font-size: 11.5px; line-height: 1.5; margin-top: 8px; opacity: .8; } .mw-neg b { opacity: .7; } .mw-line { font-size: 10.5px; margin-top: 10px; opacity: .55; letter-spacing: .02em; } .modal-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } #nodes .rn-made { margin-top: 4px; } #nodes .rn-made > summary { cursor: pointer; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .5; display: flex; align-items: center; gap: 6px; list-style: none; } #nodes .rn-made > summary::-webkit-details-marker { display: none; } #nodes .rn-made > summary:hover { opacity: .85; } #nodes .rn-made > summary button { background: none; border: 0; color: inherit; cursor: pointer; display: inline-flex; padding: 0; margin-inline-start: auto; } #nodes .rn-made .nfoot { white-space: pre-wrap; max-height: 140px; overflow: auto; } #nodes .rn-made .nfoot b { display: block; margin-top: 6px; opacity: .6; } /* ── IMAGE PREVIEW ───────────────────────────────────────────────────────── One picture, looked at properly. The chequerboard is the point: a PNG's transparency is something you should be able to SEE, not a claim in a panel. The dark backdrop is the other half — pale artwork disappears on a light chequer, so the card can flip. */ /* The stage was pinned at 236px whatever the card's height, so growing the card grew the empty space under the picture instead of the picture. It fills what is there now; object-fit:contain keeps the ratio honest. */ #nodes .iv-stage { position: relative; flex: 0 1 auto; min-height: 90px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: grid; place-items: center; background-color: #f3f4f8; background-image: linear-gradient(45deg, #d9dbe4 25%, transparent 25%, transparent 75%, #d9dbe4 75%), linear-gradient(45deg, #d9dbe4 25%, transparent 25%, transparent 75%, #d9dbe4 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; } #nodes .iv-stage.dark { background-color: #1a1d28; background-image: linear-gradient(45deg, #262a38 25%, transparent 25%, transparent 75%, #262a38 75%), linear-gradient(45deg, #262a38 25%, transparent 25%, transparent 75%, #262a38 75%); } #nodes .iv-stage img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; } #nodes .iv-tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; } #nodes .iv-stage:hover .iv-tools { opacity: 1; } #nodes .iv-tools button { background: rgba(12,16,26,.72); border: 0; color: #dfe7ff; cursor: pointer; border-radius: 6px; padding: 4px; display: inline-flex; } #nodes .iv-tools button:hover { background: rgba(12,16,26,.95); color: #fff; } #nodes .iv-chip.alpha { position: absolute; left: 6px; bottom: 6px; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: rgba(65,217,126,.92); color: #06240f; } /* one row under the picture: the facts, what is known about it, and the light copy - three strips of chrome were taller than some of the pictures */ #nodes .iv-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; } #nodes .iv-facts { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 10px; } #nodes .iv-facts b, #nodes .iv-facts span { padding: 2px 6px; border-radius: 5px; background: var(--hover); border: 1px solid var(--border); opacity: .85; } #nodes .iv-facts b { font-weight: 800; opacity: 1; } #nodes .iv-facts .mdl { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 40%, transparent); } #nodes .iv-none { font-size: 10.5px; font-style: normal; opacity: .5; } #nodes .iv-prompt { margin-top: 8px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; } #nodes .iv-h { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 9px; font-weight: 800; letter-spacing: .09em; opacity: .55; background: var(--hover); } #nodes .iv-h button { margin-inline-start: auto; background: none; border: 0; color: inherit; cursor: pointer; display: inline-flex; padding: 0; } #nodes .iv-h button:hover { color: var(--accent-2); opacity: 1; } #nodes .iv-p { padding: 8px; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; max-height: 132px; overflow: auto; } #nodes .iv-neg { padding: 0 8px 8px; font-size: 10.5px; line-height: 1.45; opacity: .7; } #nodes .iv-neg b { opacity: .6; text-transform: uppercase; letter-spacing: .06em; font-size: 9px; } #nodes .iv-light { display: flex; align-items: center; gap: 8px; } #nodes .iv-sp { flex: 1 1 auto; min-width: 4px; } #nodes .iv-bar .nbtn { padding: 5px 9px; } #nodes .iv-light .nbtn { flex: 0 0 auto; } #nodes .iv-light i { font-style: normal; font-size: 10px; opacity: .6; } /* ── 3D SKETCH PLANES ────────────────────────────────────────────────────── Panes of glass standing in the model. The bar borrows the sketch bar's shape because it is the same gesture in a different place — but it is cyan, not blue, so there is never a doubt which pen is in your hand. */ .cad-p3bar { background: #101a24; border-bottom-color: rgba(0,229,255,.22); } .cad-p3bar select { background: #0b0e14; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; color: #dfe7ff; font: inherit; font-size: 11px; padding: 3px 6px; outline: none; max-width: 160px; } .cad-p3bar input[type=range] { width: 76px; accent-color: #00E5FF; } .cad-p3bar input[type=color] { width: 24px; height: 20px; border: none; background: none; padding: 0; cursor: pointer; } .cad-p3bar button.on { background: rgba(0,229,255,.18); border-color: rgba(0,229,255,.5); color: #bff4ff; } .cad-pl-top { display: flex; gap: 6px; margin-bottom: 7px; } .cad-pl-top button { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: #9fb0cc; font: inherit; font-size: 10px; font-weight: 700; padding: 4px 6px; cursor: pointer; } .cad-pl-top button.on { background: rgba(0,229,255,.16); border-color: rgba(0,229,255,.45); color: #bff4ff; } .cad-pl-alpha { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #7f8ca5; } .cad-pl-alpha input { flex: 1; accent-color: #00E5FF; } .cad-pl-alpha i { font-style: normal; width: 30px; text-align: right; } .cad-pl { border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: 5px 6px; margin-bottom: 6px; background: rgba(255,255,255,.02); } .cad-pl.live { border-color: rgba(0,229,255,.5); background: rgba(0,229,255,.07); } .cad-pl.off { opacity: .45; } .cad-pl-r1 { display: flex; align-items: center; gap: 4px; } .cad-pl-r1 input { flex: 1; min-width: 0; background: transparent; border: 0; color: #dfe7ff; font: inherit; font-size: 11px; font-weight: 700; outline: none; padding: 1px 2px; border-radius: 4px; } .cad-pl-r1 input:focus { background: rgba(255,255,255,.07); } .cad-pl-r1 em { font-style: normal; font-size: 8.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .45; white-space: nowrap; } .cad-pl-r1 u { text-decoration: none; font-size: 8.5px; font-weight: 800; padding: 1px 5px; border-radius: 5px; background: rgba(0,229,255,.16); color: #9fe9ff; } .cad-pl-r1 u.mk { background: rgba(255,207,90,.18); color: #ffcf5a; } .cad-pl-r1 button { background: none; border: 0; color: #8b96b3; cursor: pointer; display: inline-flex; padding: 2px; } .cad-pl-r1 button:hover { color: #00E5FF; } .cad-pl-r1 button.on { color: #00E5FF; } .cad-pl-r2 { display: flex; gap: 4px; margin-top: 4px; } .cad-pl-r2 label { flex: 1; display: flex; align-items: center; gap: 2px; font-size: 8.5px; opacity: .5; min-width: 0; } .cad-pl-r2 input { width: 100%; min-width: 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 5px; color: #dfe7ff; font: inherit; font-size: 10px; padding: 2px 3px; outline: none; } .cad-pl-r2 input:focus { border-color: rgba(0,229,255,.5); } .cad-pl-r2.rot input { accent-color: #ff9f43; } .cad-pl-r2 > button { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 5px; color: #8b96b3; font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; padding: 0 6px; } .cad-pl-add { display: flex; gap: 5px; margin-top: 8px; } .cad-pl-add button { flex: 1; background: rgba(0,229,255,.08); border: 1px dashed rgba(0,229,255,.35); border-radius: 7px; color: #9fe9ff; font: inherit; font-size: 9.5px; font-weight: 700; padding: 5px 4px; cursor: pointer; } .cad-pl-add button:hover { background: rgba(0,229,255,.18); } /* attributes on a drawing — the same fields an inventory item carries */ .cad-at { margin-top: 5px; } .cad-at-r { display: flex; gap: 4px; margin-bottom: 3px; } .cad-at-r input { min-width: 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 5px; color: #dfe7ff; font: inherit; font-size: 10px; padding: 2px 4px; outline: none; } .cad-at-r input:first-child { flex: 0 0 38%; opacity: .75; } .cad-at-r input:nth-child(2) { flex: 1; } .cad-at-r input:focus { border-color: rgba(0,229,255,.5); opacity: 1; } .cad-at-r button { background: none; border: 0; color: #6b7690; cursor: pointer; display: inline-flex; padding: 2px; } .cad-at-r button:hover { color: #ff5d7a; } .cad-at-add { background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.16); border-radius: 6px; color: #8b96b3; font: inherit; font-size: 9px; font-weight: 700; padding: 3px 8px; cursor: pointer; } .cad-at-add:hover { color: #00E5FF; border-color: rgba(0,229,255,.4); } .cad-at-add.wide { display: block; width: 100%; margin-bottom: 7px; } .cad-sk-at { padding: 0 6px 6px; } .cad-pl.grp { border-color: rgba(255,159,67,.35); background: rgba(255,159,67,.05); } .cad-pl.grp.live { border-color: rgba(255,159,67,.75); background: rgba(255,159,67,.11); } .cad-pl-r1 em.g { color: #ff9f43; opacity: .8; max-width: 74px; overflow: hidden; text-overflow: ellipsis; } .cad-pl-r2 label.hgt { flex: 0 0 46%; color: #7fd4ff; opacity: .85; font-weight: 700; } .cad-pl-r2 label.hgt input { color: #bff4ff; border-color: rgba(0,229,255,.22); } .cad-pl-r2 > button[data-pl-a="nov"] { flex: 1; font-size: 8.5px; letter-spacing: .03em; } .cad-pl-r2 > button[data-pl-a="nov"].on { background: rgba(255,93,122,.14); border-color: rgba(255,93,122,.45); color: #ffb3c1; } .cad-p3bar input[type=number] { width: 52px; background: #0b0e14; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; color: #dfe7ff; font: inherit; font-size: 11px; padding: 3px 5px; outline: none; } .cad-p3bar input[type=number]:focus { border-color: rgba(0,229,255,.55); } /* ── HISTORY ─────────────────────────────────────────────────────────────── What a card used to be, and what was deleted. A deletion is the row people come here for, so it is the one that stands out. */ .hi-note { font-size: 11.5px; line-height: 1.5; opacity: .6; margin-bottom: 12px; } .hi-list { max-height: 56vh; overflow: auto; display: flex; flex-direction: column; gap: 5px; } .hi-empty { font-size: 12px; opacity: .5; padding: 24px; text-align: center; } .hi-row { display: grid; grid-template-columns: 62px minmax(0,1fr) auto auto auto; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); } .hi-row.del { border-color: rgba(255,93,122,.42); background: rgba(255,93,122,.07); } .hi-k { font-size: 8.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; opacity: .55; text-align: center; padding: 2px 0; border-radius: 5px; background: rgba(128,128,170,.14); } .hi-row.del .hi-k { color: #ff8fa3; opacity: 1; background: rgba(255,93,122,.16); } .hi-row b { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hi-row em { font-style: normal; font-size: 10px; opacity: .5; white-space: nowrap; } .hi-row i { font-style: normal; font-size: 10px; opacity: .45; white-space: nowrap; } .hi-row .btn { font-size: 10.5px; padding: 4px 10px; } /* ── THE DRAWING SHEET ───────────────────────────────────────────────────── The card that makes paper. It reads as a form, because a title block is one, and it says up front what it has to work with. */ #nodes .sh-src { display: flex; align-items: center; gap: 6px; font-size: 10px; margin-bottom: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); } #nodes .sh-src i { display: inline-flex; opacity: .35; } #nodes .sh-src i.ok { opacity: 1; color: #41d97e; } #nodes .sh-src b { font-weight: 600; opacity: .8; margin-inline-end: 6px; } #nodes .sh-row { display: flex; gap: 5px; margin-bottom: 7px; } #nodes .sh-row .nsel { flex: 1; min-width: 0; } #nodes .sh-row3 { display: flex; gap: 5px; } #nodes .sh-f { display: block; margin-bottom: 6px; flex: 1; min-width: 0; } #nodes .sh-f > span { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; opacity: .45; margin-bottom: 2px; } #nodes .sh-f input { width: 100%; box-sizing: border-box; background: var(--hover); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font: inherit; font-size: 11.5px; padding: 4px 6px; outline: none; } #nodes .sh-f input:focus { border-color: var(--accent-2); } #nodes .sh-out { margin-top: 8px; padding: 8px; border: 1px solid rgba(65,217,126,.4); border-radius: 8px; background: rgba(65,217,126,.07); } #nodes .sh-out b { display: block; font-size: 11.5px; } #nodes .sh-out em { display: block; font-style: normal; font-size: 10px; opacity: .6; margin: 2px 0 6px; } /* ── FINDINGS ────────────────────────────────────────────────────────────── What the instruments concluded, back on the drawing they read. The colour says what kind of thing it is; the number ties the row to the mark. */ .cad-fnd-head { display: flex; align-items: center; gap: 6px; margin: 8px 0 5px; font-size: 8.5px; font-weight: 800; letter-spacing: .09em; color: #7f8ca5; } .cad-fnd-head b { font-weight: 800; } .cad-fnd-head i { font-style: normal; margin-inline-start: auto; opacity: .6; } .cad-fnd-head button { margin-inline-start: auto; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: #8b96b3; font: inherit; font-size: 8.5px; font-weight: 700; padding: 2px 7px; cursor: pointer; } .cad-fnd-head button.on { background: rgba(0,229,255,.14); border-color: rgba(0,229,255,.4); color: #bff4ff; } .cad-fnd { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 6px; align-items: start; padding: 6px 7px; margin-bottom: 5px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: rgba(255,255,255,.02); cursor: pointer; border-inline-start: 2px solid var(--fc, #4aa8ff); } .cad-fnd:hover { background: rgba(255,255,255,.05); } .cad-fnd.avail { border-style: dashed; opacity: .82; } .cad-fnd.avail:hover { opacity: 1; border-color: var(--fc); } .cad-fnd.done { opacity: .45; } .cad-fnd > u { text-decoration: none; font-size: 9.5px; font-weight: 800; text-align: center; color: #0b0e14; background: var(--fc, #4aa8ff); border-radius: 50%; width: 18px; height: 18px; line-height: 18px; } .cad-fnd b { display: block; font-size: 10px; color: var(--fc, #4aa8ff); margin-bottom: 2px; } .cad-fnd span { display: block; font-size: 10.5px; line-height: 1.42; opacity: .85; } .cad-fnd em { display: block; font-style: normal; font-size: 10px; line-height: 1.42; margin-top: 3px; opacity: .62; padding-inline-start: 6px; border-inline-start: 1px solid rgba(255,255,255,.16); } .cad-fnd-b { display: flex; flex-direction: column; gap: 2px; } .cad-fnd-b button { background: none; border: 0; color: #6b7690; cursor: pointer; display: inline-flex; padding: 2px; } .cad-fnd-b button:hover { color: #00E5FF; } /* ── THE TEXT CARD: WRITE AND READ ───────────────────────────────────────── What is typed is markdown. WRITE shows it as it is written, with a bar that writes the punctuation for you; READ shows how it lands — real headings, real weight, real lists — because a brief you cannot read is a brief nobody reads. */ #nodes .tx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid var(--border); } #nodes .tx-bar button { min-width: 22px; height: 21px; padding: 0 5px; border-radius: 5px; border: 1px solid transparent; background: none; color: var(--text); opacity: .62; font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; line-height: 1; } #nodes .tx-bar button:hover { opacity: 1; background: var(--hover); } #nodes .tx-bar button.on { opacity: 1; background: var(--accent-2); color: #fff; border-color: transparent; } #nodes .tx-bar .tx-sep { width: 1px; height: 14px; margin: 0 4px; background: var(--border); } /* the tools are asked for from the header: a T over the title bar, the same overlay as the folder button (see FIND THIS CARD'S FILE) and beside it when the card has a file. Lit while the row is out. */ #nodes .nd > .nd-fmt { position: absolute; top: 6px; inset-inline-end: 8px; z-index: 4; pointer-events: auto; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 7px; cursor: pointer; padding: 0; background: transparent; color: var(--muted, #8a94a6); opacity: .45; transition: opacity .12s ease, background .12s ease; } #nodes .nd > .nd-fmt:hover { opacity: 1; background: var(--hover); color: var(--text); } #nodes .nd > .nd-fmt.on { opacity: 1; color: var(--accent); } #nodes .nd > .nd-fmt svg { width: 12px; height: 12px; } #nodes .nd > .nd-fmt[hidden] { display: none; } #nodes .nd > .nd-loc:not([hidden]) ~ .nd-fmt { inset-inline-end: 32px; } #nodes .tx-read { flex: 1 1 auto; overflow: auto; padding: 2px 2px 6px; font-size: 12.5px; line-height: 1.55; } #nodes .tx-read h3 { font-size: 17px; font-weight: 800; line-height: 1.25; margin: 14px 0 6px; letter-spacing: -.01em; } #nodes .tx-read h4 { font-size: 14.5px; font-weight: 800; line-height: 1.3; margin: 13px 0 5px; } #nodes .tx-read h5 { font-size: 12.5px; font-weight: 800; margin: 11px 0 4px; text-transform: uppercase; letter-spacing: .06em; opacity: .72; } #nodes .tx-read h6 { font-size: 11.5px; font-weight: 800; margin: 10px 0 4px; opacity: .62; } #nodes .tx-read > *:first-child { margin-top: 0; } #nodes .tx-read p { margin: 0 0 6px; } /* a document of one-line paragraphs — which is what pasted chat text is — reads as a page of gaps at a full paragraph's spacing */ #nodes .tx-read p + p { margin-top: 0; } #nodes .tx-read b, #nodes .tx-read strong { font-weight: 800; } #nodes .tx-read ul, #nodes .tx-read ol { margin: 0 0 9px; padding-inline-start: 20px; } #nodes .tx-read li { margin: 2px 0; } #nodes .tx-read blockquote { margin: 9px 0; padding: 4px 0 4px 11px; border-inline-start: 3px solid var(--accent-2); opacity: .84; font-style: italic; } #nodes .tx-read hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; } #nodes .tx-read code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; padding: 1px 4px; border-radius: 4px; background: var(--hover); } #nodes .tx-read pre { background: var(--hover); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; overflow: auto; font-size: 11px; line-height: 1.5; margin: 9px 0; } #nodes .tx-read table { border-collapse: collapse; width: 100%; margin: 9px 0; font-size: 11.5px; } #nodes .tx-read th, #nodes .tx-read td { border: 1px solid var(--border); padding: 4px 7px; text-align: start; } #nodes .tx-read th { background: var(--hover); font-weight: 800; } #nodes .tx-read a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; } #nodes .tx-read .tx-empty { opacity: .45; font-style: italic; } /* ── THE FAR LABEL ───────────────────────────────────────────────────────── What a frame is, when its own title has gone too small to read. It follows the pointer with a transform and nothing else: painted on the canvas it cost a full board repaint per mouse move and lagged behind the cursor. */ .far-lbl { position: absolute; left: 0; top: 0; z-index: 40; pointer-events: none; max-width: 460px; padding: 9px 14px 11px; border-radius: 13px; background: var(--panel); border: 1.5px solid var(--border); box-shadow: 0 10px 30px rgba(8,12,22,.28); opacity: 0; visibility: hidden; transition: opacity .09s linear; will-change: transform; } .far-lbl.on { opacity: 1; visibility: visible; } .far-lbl b { display: block; font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .far-lbl span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; opacity: .62; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #nodes .tx-bar button[disabled] { opacity: .3; cursor: default; } #nodes .tx-bar button[disabled]:hover { background: none; opacity: .3; } /* ── YOUR BOARD BACKGROUNDS ──────────────────────────────────────────────── Not a colour picker — a small gradient editor. A background is one to four stops; one stop is a flat ground. Every stop shows its hex, because reading a colour back OUT of a gradient is half of what this is opened for. */ .bg-pop { max-width: 330px; } .bg-pop .bg-title.mine { margin-top: 12px; } .bg-row { flex-wrap: wrap; max-width: 300px; align-items: center; } .bg-sw.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } .bg-sw.bg-add { background: var(--hover); color: var(--muted); font-size: 19px; font-weight: 700; line-height: 1; display: grid; place-items: center; border-style: dashed; } .bg-sw.bg-add:hover { color: var(--accent); border-color: var(--accent); } .bg-own { position: relative; display: inline-flex; } .bg-pen { position: absolute; inset-inline-end: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 9px; line-height: 1; cursor: pointer; opacity: 0; transition: .12s; padding: 0; } .bg-own:hover .bg-pen { opacity: 1; } .bg-pen:hover { color: var(--accent); border-color: var(--accent); } .bg-mix { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .bg-mixhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .bg-mixhead b { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .bg-prev { flex: 1; height: 20px; border-radius: 7px; border: 1px solid var(--border); } .bg-kind { font-size: 9.5px; color: var(--muted); white-space: nowrap; } .bg-stop { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } .bg-stop input[type=color] { width: 30px; height: 26px; padding: 0; border: 1.5px solid var(--border); border-radius: 8px; background: none; cursor: pointer; flex: 0 0 auto; } .bg-hex { flex: 1; min-width: 0; background: var(--hover); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font: inherit; font-family: ui-monospace, Menlo, monospace; font-size: 11px; padding: 4px 6px; outline: none; text-transform: lowercase; } .bg-hex:focus { border-color: var(--accent); } .bg-stop button { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 0; } .bg-stop button:hover:not([disabled]) { background: var(--hover); color: var(--text); } .bg-stop button[disabled] { opacity: .25; cursor: default; } .bg-mixbtns { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .bg-mixbtns button { border: 1px solid var(--border); background: var(--hover); color: var(--text); border-radius: 8px; font: inherit; font-size: 11px; font-weight: 700; padding: 5px 10px; cursor: pointer; } .bg-mixbtns button[disabled] { opacity: .35; cursor: default; } .bg-mixbtns button.go { background: var(--grad); color: #fff; border: 0; } /* the grid's own colour, chosen next to the background it sits on */ .bg-row.bg-grid .bg-sw { display: grid; place-items: center; color: var(--muted); font-size: 13px; } .bg-gd { width: 9px; height: 9px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px rgba(128,128,170,.3); } .bg-gpick { position: relative; overflow: hidden; cursor: pointer; } .bg-gpick input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; } /* ── IMAGE → PARAMETRIC PAGE ─────────────────────────────────────────────── The page is rebuilt from percentage boxes, so it is drawn at whatever size the card is and stays the same composition. Type sizes are in cqw — a percentage of the page's own width — which is why a title stays a title when the card is resized. */ #nodes .pl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 7px; } #nodes .pl-bar button { border: 1px solid var(--border); background: var(--hover); color: var(--text); border-radius: 7px; font: inherit; font-size: 10.5px; font-weight: 700; padding: 3px 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } #nodes .pl-bar button.on { background: var(--accent-2); color: #fff; border-color: transparent; } #nodes .pl-bar button.go { background: var(--grad); color: #fff; border: 0; } #nodes .pl-bar button[disabled] { opacity: .5; cursor: default; } #nodes .pl-bar b { font-size: 10px; opacity: .55; } #nodes .pl-busy { display: flex; align-items: center; gap: 7px; font-size: 11px; opacity: .7; margin-bottom: 6px; } #nodes .pl-src { display: flex; align-items: center; gap: 6px; font-size: 11px; margin-bottom: 7px; opacity: .8; } #nodes .pl-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 9px; background: #fff; } #nodes .pl-page { position: relative; width: 100%; overflow: hidden; } #nodes .pl-s { position: absolute; } #nodes .pl-tag { position: absolute; top: 1px; inset-inline-start: 1px; font-style: normal; font-size: 7.5px; font-weight: 800; letter-spacing: .03em; color: #fff; padding: 0 3px; border-radius: 3px; opacity: 0; pointer-events: none; white-space: nowrap; } #nodes .pl-wrap:hover .pl-tag { opacity: .82; } #nodes .pl-wrap.commenting .pl-s { cursor: pointer; outline: 1px dashed rgba(120,140,190,.5); outline-offset: -1px; } #nodes .pl-wrap.commenting .pl-s:hover { outline-color: var(--accent-2); background: rgba(108,92,231,.06); } #nodes .pl-s.sel { outline: 2px solid var(--accent-2) !important; outline-offset: -2px; } #nodes .pl-s.has-c { box-shadow: inset 0 0 0 2px rgba(245,158,11,.7); } #nodes .pl-ph { width: 100%; height: 100%; border: 1px dashed; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 4px; text-align: center; background: rgba(148,163,184,.07); } #nodes .pl-ph b { font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .6; } #nodes .pl-ph span { font-size: 7px; line-height: 1.3; opacity: .45; } #nodes .pl-cmts { flex: 0 0 auto; margin-top: 7px; max-height: 190px; overflow: auto; } #nodes .pl-hint { font-size: 10.5px; opacity: .5; padding: 4px 2px; } #nodes .pl-new { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; } #nodes .pl-new b { font-size: 9.5px; font-weight: 800; color: var(--accent-2); white-space: nowrap; } /* same trap as .sw-top: flex:1 alone leaves width:100% standing, and min-width:auto then takes the specified width as the floor — the input refuses to shrink and squeezes the Add button off the row */ #nodes .pl-new .nin { flex: 1 1 0; width: auto; min-width: 0; } #nodes .pl-new button { border: 0; background: var(--accent-2); color: #fff; border-radius: 6px; font: inherit; font-size: 10.5px; font-weight: 700; padding: 4px 9px; cursor: pointer; } #nodes .pl-c { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: start; padding: 4px 5px; border-radius: 6px; margin-bottom: 3px; background: var(--hover); } #nodes .pl-c.done { opacity: .42; } #nodes .pl-c u { text-decoration: none; font-size: 8.5px; font-weight: 800; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); border-radius: 4px; padding: 1px 4px; } #nodes .pl-c span { font-size: 10.5px; line-height: 1.4; } #nodes .pl-c button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; } /* titles & heads */ #nodes .tt-rows { display: flex; flex-direction: column; gap: 4px; } #nodes .tt-r { display: grid; grid-template-columns: 74px 1fr auto; gap: 4px; align-items: center; } #nodes .tt-r.head .tt-out { color: #a78bfa; } #nodes .tt-out { background: var(--hover); border: 1px solid var(--border); border-radius: 6px; color: var(--accent-2); font: inherit; font-family: ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700; padding: 4px 5px; outline: none; min-width: 0; } #nodes .tt-txt { background: var(--hover); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font: inherit; font-size: 11.5px; padding: 4px 6px; outline: none; min-width: 0; } #nodes .tt-out:focus, #nodes .tt-txt:focus { border-color: var(--accent-2); } #nodes .tt-r button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px; } #nodes .tt-add { display: flex; gap: 5px; margin-top: 7px; } #nodes .tt-add button { flex: 1; border: 1px dashed var(--border); background: none; color: var(--muted); border-radius: 7px; font: inherit; font-size: 10px; font-weight: 700; padding: 5px; cursor: pointer; } #nodes .tt-add button:hover { color: var(--accent-2); border-color: var(--accent-2); } #nodes .pl-cards { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 7px; font-size: 10px; } #nodes .pl-cards > b { font-size: 8.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; opacity: .45; margin-inline-end: 2px; } #nodes .pl-cards span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px; background: var(--hover); border: 1px solid var(--border); } #nodes .pl-cards u { text-decoration: none; font-size: 8.5px; font-weight: 800; color: var(--accent-2); } /* ── GALLERY GROUPS ──────────────────────────────────────────────────────── A gallery of four hundred renders is a pile; groups make it a set of shortlists. A group is a LABEL on a picture — never a copy, never a move — so a picture can be in several at once and taking it out of one takes nothing away from the board. */ #nodes .gal-gbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 2px 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } #nodes .gal-gbar > i { font-style: normal; font-size: 9.5px; opacity: .45; } #nodes .gal-g { display: inline-flex; align-items: center; gap: 2px; border-radius: 7px; padding: 1px 2px 1px 4px; background: color-mix(in srgb, var(--gc, #64748b) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gc, #64748b) 40%, transparent); } #nodes .gal-g.on { background: color-mix(in srgb, var(--gc) 26%, transparent); border-color: var(--gc); box-shadow: 0 0 0 1px var(--gc); } #nodes .gal-g.off { opacity: .4; } #nodes .gal-g button { background: none; border: 0; color: var(--text); cursor: pointer; padding: 1px 3px; font: inherit; font-size: 10px; font-weight: 700; line-height: 1.2; } #nodes .gal-g button:hover { color: var(--gc); } #nodes .gal-g u { text-decoration: none; font-size: 8.5px; font-weight: 800; opacity: .65; padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--gc) 22%, transparent); } #nodes .gal-gname { width: 62px; min-width: 0; background: none; border: 0; color: var(--text); font: inherit; font-size: 10px; font-weight: 800; padding: 1px 2px; outline: none; border-radius: 4px; } #nodes .gal-gname:focus { background: var(--hover); width: 92px; } #nodes .gal-g.none { --gc: #94a3b8; } #nodes .gal-gnew, #nodes .gal-gclear, #nodes .gal-gby { background: var(--hover); border: 1px dashed var(--border); color: var(--muted); border-radius: 7px; font: inherit; font-size: 9.5px; font-weight: 700; padding: 2px 7px; cursor: pointer; } #nodes .gal-gnew:hover, #nodes .gal-gclear:hover, #nodes .gal-gby:hover { color: var(--accent-2); border-color: var(--accent-2); } #nodes .gal-gby.on { background: var(--accent-2); color: #fff; border-style: solid; border-color: transparent; } #nodes .gal-gsec { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; padding-inline-start: 6px; border-inline-start: 3px solid var(--gc, #94a3b8); } #nodes .gal-gsec b { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--gc, #94a3b8); } #nodes .gal-gsec u { text-decoration: none; font-size: 9px; opacity: .5; } #nodes .gal-gdots { position: absolute; bottom: 3px; inset-inline-end: 3px; display: flex; gap: 2px; } #nodes .gal-gdots s { width: 7px; height: 7px; border-radius: 50%; display: block; box-shadow: 0 0 0 1.5px rgba(12,16,26,.55); } /* building → scene: the two inputs, named for their jobs so they read at a glance and cannot be mistaken for each other */ #nodes .sw-ins { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin-bottom: 8px; } #nodes .sw-in { border: 1px solid var(--border); border-radius: 9px; padding: 5px; text-align: center; background: var(--hover); min-width: 0; } #nodes .sw-in.ok { border-color: #41d97e; background: rgba(65,217,126,.07); } #nodes .sw-in img { width: 100%; height: 64px; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 4px; } #nodes .sw-in > i { display: grid; place-items: center; height: 64px; opacity: .3; margin-bottom: 4px; } #nodes .sw-in b { display: block; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .6; } #nodes .sw-in span { display: block; font-size: 9.5px; opacity: .5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .sw-arrow { display: grid; place-items: center; opacity: .35; } /* ── PAINT WHERE, WIRE WHAT ──────────────────────────────────────────────── The marks are painted on a canvas at the PICTURE'S pixel size, not the card's: a mask drawn at card size and scaled up later lands beside the thing it was drawn on. */ #nodes .mk-regs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } #nodes .mk-c { display: inline-flex; align-items: center; gap: 3px; border-radius: 7px; padding: 1px 3px 1px 2px; background: color-mix(in srgb, var(--mc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--mc) 45%, transparent); } #nodes .mk-c.on { border-color: var(--mc); box-shadow: 0 0 0 1.5px var(--mc); } #nodes .mk-c.wired { background: color-mix(in srgb, var(--mc) 26%, transparent); } #nodes .mk-c > button:first-child { width: 15px; height: 15px; border-radius: 4px; border: 0; background: var(--mc); cursor: pointer; padding: 0; } #nodes .mk-c input { width: 62px; min-width: 0; background: none; border: 0; color: var(--text); font: inherit; font-size: 10px; font-weight: 700; padding: 1px 2px; outline: none; border-radius: 4px; } #nodes .mk-c input:focus { background: var(--hover); width: 88px; } #nodes .mk-c u { text-decoration: none; font-size: 8.5px; font-weight: 800; opacity: .7; } #nodes .mk-c .mk-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px; } #nodes .mk-add { background: var(--hover); border: 1px dashed var(--border); color: var(--muted); border-radius: 7px; font: inherit; font-size: 9.5px; font-weight: 700; padding: 2px 8px; cursor: pointer; } #nodes .mk-add:hover { color: var(--accent-2); border-color: var(--accent-2); } #nodes .mk-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } #nodes .mk-tools button { border: 1px solid var(--border); background: var(--hover); color: var(--text); border-radius: 6px; font: inherit; font-size: 10px; font-weight: 700; padding: 3px 7px; cursor: pointer; display: inline-flex; align-items: center; } #nodes .mk-tools button.on { background: var(--accent-2); color: #fff; border-color: transparent; } #nodes .mk-tools input[type=range] { width: 92px; accent-color: var(--accent-2); } #nodes .mk-tools b { font-size: 9.5px; opacity: .55; } #nodes .mk-host { flex: 1 1 auto; min-height: 150px; margin-bottom: 6px; } #nodes .mk-paint { position: relative; width: 100%; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: #0b0e14; } #nodes .mk-paint img { width: 100%; display: block; } #nodes .mk-paint canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; opacity: .72; touch-action: none; } /* ── AWARD-WINNING LIGHT ─────────────────────────────────────────────────── The hour is the one real choice on this card, so it is four buttons that say what each one is FOR rather than a dropdown of adjectives. */ #nodes .rl-src { display: flex; align-items: center; gap: 7px; padding: 5px 7px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); } #nodes .rl-src.ok { border-color: #41d97e; background: rgba(65,217,126,.07); } #nodes .rl-src img { width: 44px; height: 32px; object-fit: cover; border-radius: 5px; display: block; } #nodes .rl-src > i { display: grid; place-items: center; width: 44px; height: 32px; opacity: .3; } #nodes .rl-src b { font-size: 10.5px; font-weight: 600; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nodes .rl-hours { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 8px; } #nodes .rl-hours button { text-align: start; border: 1px solid var(--border); background: var(--hover); color: var(--text); border-radius: 9px; padding: 6px 8px; cursor: pointer; font: inherit; } #nodes .rl-hours button b { display: block; font-size: 11.5px; font-weight: 800; } #nodes .rl-hours button span { display: block; font-size: 9px; line-height: 1.25; opacity: .5; margin-top: 1px; } #nodes .rl-hours button.on { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); } #nodes .rl-hours button.on span { opacity: .75; } #nodes .rl-btns { display: flex; gap: 5px; } #nodes .rl-btns .nbtn { flex: 1; } #nodes .rl-btns .nbtn:last-child { flex: 0 0 auto; } /* ══ ANNOTATED REGION ══════════════════════════════════════════════════════ A picture, parts of it painted in colour, and what each part is for. The overlay is translucent on purpose: the point is to direct what is underneath, so covering it up would defeat the card. */ .nd .rg-bar { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid var(--border); flex: none; } .nd .rg-cols { display: flex; gap: 5px; } .nd .rg-cols button { width: 22px; height: 22px; border-radius: 7px; background: var(--rc); border: 2px solid transparent; color: #fff; font-size: 10px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: .55; transition: .13s; } .nd .rg-cols button:hover { opacity: .85; } .nd .rg-cols button.on { opacity: 1; border-color: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc) 35%, transparent); } .nd .rg-sz { display: flex; align-items: center; } .nd .rg-sz input { width: 96px; accent-color: var(--accent); } .nd .rg-bar > button { padding: 5px 8px; border-radius: 8px; color: var(--muted); border: 1px solid var(--border); background: var(--hover); cursor: pointer; } .nd .rg-bar > button:hover { color: var(--text); border-color: var(--accent); } .nd .rg-bar b { font-size: 11px; color: var(--muted); } .nd .rg-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--hover); touch-action: none; cursor: crosshair; } .nd .rg-stage img { max-width: 100%; max-height: 100%; display: block; user-select: none; -webkit-user-drag: none; } .nd .rg-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .nd .rg-list { flex: none; max-height: 34%; overflow-y: auto; border-top: 1px solid var(--border); padding: 6px; } .nd .rg-hint { padding: 9px 10px; font-size: 11.5px; line-height: 1.5; color: var(--muted); } .nd .rg-row { display: flex; align-items: center; gap: 7px; padding: 4px 5px; border-radius: 8px; } .nd .rg-row:hover { background: var(--hover); } .nd .rg-row u { width: 10px; height: 10px; border-radius: 50%; background: var(--rc); flex: none; text-decoration: none; } .nd .rg-row input { flex: 1 1 140px; min-width: 80px; background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 4px 7px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text); outline: none; } .nd .rg-row input:hover { border-color: var(--border); } .nd .rg-row input:focus { border-color: var(--accent); background: var(--hover); } /* what is actually wired to this region — grey until something is */ .nd .rg-fed { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 10.5px; font-weight: 700; color: var(--muted); opacity: .55; max-width: 190px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .nd .rg-fed.on { opacity: 1; color: var(--text); } .nd .rg-fed svg { width: 12px; height: 12px; } /* the row is the legend row in miniature: the colour's NAME beside its dot, and the pictures wired to the zone framed in that colour */ .nd .rg-cn { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rc); font-style: normal; width: 40px; } .nd .rg-thumbs { display: inline-flex; align-items: center; gap: 3px; flex: none; } .nd .rg-thumbs img { width: 26px; height: 26px; object-fit: cover; border-radius: 6px; border: 1.5px solid var(--rc); display: block; background: var(--hover); } .nd .rg-thumbs b { font-size: 10px; font-weight: 800; color: var(--muted); padding: 0 2px; } /* ── the picker's shelves: one open at a time, so a category of fifty cards is still about a screen tall ── */ .nd-picker-sub .ndp-shelf { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: transparent; border: 0; } .nd-picker-sub .ndp-shelf:hover { background: var(--hover); color: var(--text); } .nd-picker-sub .ndp-shelf .arw { font-size: 9px; opacity: .6; transition: transform .14s; } .nd-picker-sub .ndp-shelf.on { color: var(--text); } .nd-picker-sub .ndp-shelf.on .arw { transform: rotate(90deg); opacity: 1; } .nd-picker-sub .ndp-shelf span { flex: 1; text-align: start; } .nd-picker-sub .ndp-shelf em { font-style: normal; font-size: 10px; opacity: .5; } .nd-picker-sub .ndp-shelfw { padding-inline-start: 8px; } .nd-picker-sub .ndp-shelfw[hidden] { display: none; } /* ══ OPTIONS ═══════════════════════════════════════════════════════════════ OP1 and OP2 are the two answers to the brief; everything else on the bar is a part of the work. They sit at the right-hand end, away from the parts. */ .tgap { flex: 1 1 auto; min-width: 12px; } .tchip.t-opt { font-weight: 800; letter-spacing: .02em; padding-inline-end: 8px; } .tchip.t-opt svg { width: 13px; height: 13px; opacity: .55; } .tchip.t-opt s { width: 10px; height: 10px; } /* the panel: in from the right, rooms stacked, staying open while you move between them — comparing two rooms means going back and forth */ .opt-panel { position: fixed; inset-inline-end: 0; top: 0; bottom: 0; width: min(330px, 84vw); z-index: 120; display: flex; flex-direction: column; background: var(--panel-solid); border-inline-start: 1px solid var(--border); box-shadow: -22px 0 50px -24px rgba(0,0,0,.55); transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.8,.3,1); } .opt-panel.in { transform: none; } .opt-hd { display: flex; align-items: center; gap: 9px; padding: 14px 14px 12px; border-bottom: 1px solid var(--border); } .opt-hd s { width: 11px; height: 11px; border-radius: 50%; background: var(--tc); text-decoration: none; flex: none; } .opt-hd b { font-size: 15px; font-weight: 800; letter-spacing: .02em; } .opt-hd em { font-style: normal; font-size: 11px; color: var(--muted); flex: 1; } .opt-x { padding: 5px; border-radius: 8px; color: var(--muted); cursor: pointer; } .opt-x:hover { background: var(--hover); color: var(--text); } .opt-stack { flex: 1 1 auto; overflow-y: auto; padding: 8px; } .opt-row { display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 4px; padding: 11px 12px; border-radius: 11px; cursor: pointer; text-align: start; font-size: 13px; font-weight: 700; color: var(--text); background: var(--hover); border: 1px solid transparent; animation: optin .26s cubic-bezier(.2,.8,.3,1) both; } @keyframes optin { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } } .opt-row:hover { border-color: var(--tc); } .opt-row s { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); text-decoration: none; flex: none; } .opt-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .opt-row i { font-style: normal; font-size: 11px; opacity: .5; font-weight: 800; } .opt-row.on { border-color: var(--tc); box-shadow: 0 0 0 1px var(--tc) inset; } .opt-row.dim { opacity: .62; } .opt-row.off { opacity: .4; } .opt-row.off s { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tc); } .opt-row.dim s { background: linear-gradient(180deg, var(--tc) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--tc); } .opt-foot { flex: none; display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--border); } .opt-foot button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 6px; border-radius: 9px; cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--hover); border: 1px solid var(--border); } .opt-foot button:hover { color: var(--text); border-color: var(--accent); } .opt-foot svg { width: 13px; height: 13px; } /* GONE — not on the board at all. Fainter than hidden, because hidden still leaves its outline out there to find and this leaves nothing: the chip is the only way back, so the chip must not disappear with it. */ .tchip.gone { opacity: .34; border-style: dashed; } .tchip.gone s { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tc); opacity: .6; } .tchip.gone i { text-decoration: line-through; } /* not read by the AI — orthogonal to all of the above, so it gets its own mark rather than another shade of the same one */ .tchip .tnoai { display: inline-flex; margin-inline-start: 1px; color: var(--danger, #E11D2A); opacity: .8; } .tchip .tnoai svg { width: 12px; height: 12px; } .tchip.noai { border-color: color-mix(in srgb, var(--danger, #E11D2A) 45%, var(--border)); } /* ── THE OPTION RAIL — on the right edge, turned on its side ── In the row they wrapped with everything else and read as two more parts. Standing here they are what they are: the answers the rest of the board is working towards, beside the work rather than queued with it. FLUSH TO THE EDGE, not floating six pixels off it. A tab with a flat side and a gap behind it does not read as attached to anything — it reads as cut off, which is exactly how it looked. Against the edge the flat side is the point of it. */ /* ── THE OPTIONS CROSS TO THE LEFT ──────────────────────────────────────── They stood on the right edge against the tab drawer and the rail — three things competing for one strip of screen — and the options are the answers the rest of the board is working towards, so being the ones that lost was backwards. The top left is empty on nearly every board: the palette floats clear of it and the AI dock sits at the middle of that edge. They go there, above the dock, where nothing else is. */ .optrail { position: absolute; inset-inline-start: 0; top: 21%; z-index: 39; display: flex; flex-direction: column; gap: 8px; padding: 0; pointer-events: none; } .optrail > * { pointer-events: auto; } .optrail .tchip.t-opt { writing-mode: vertical-rl; text-orientation: mixed; width: 46px; height: auto; min-height: 104px; padding: 18px 0; gap: 10px; justify-content: center; font-size: 13px; font-weight: 800; letter-spacing: .08em; /* it hangs off the LEFT edge now, so the rounded side and the missing border swap — a chip with its flat side out reads as a torn-off label */ border-radius: 0 15px 15px 0; border-inline-start: 0; box-shadow: -10px 0 26px -16px rgba(0,0,0,.45); } .optrail .tchip.t-opt s { width: 9px; height: 9px; } .optrail .tchip.t-opt i { font-size: 11px; letter-spacing: 0; } .optrail .tchip.t-opt u { border-inline-start: 0; border-top: 1px solid currentColor; padding-inline-start: 0; padding-top: 7px; margin-inline-start: 0; margin-top: 5px; font-size: 11px; letter-spacing: .02em; } .optrail .tchip.t-opt:hover { width: 52px; } .optrail .tchip.t-opt.on { box-shadow: 0 0 0 1px var(--tc) inset, -10px 0 26px -12px var(--tc); } /* the shelf column: a row you hover, not a drawer you click */ .nd-picker-sub .ndp-shelf .arw { margin-inline-start: auto; } .nd-picker-sub .ndp-shelf.active { background: var(--hover); color: var(--text); } .nd-picker-sub .ndp-shelf.active .arw { opacity: 1; transform: none; } .nd-picker-shelf { animation: shelfin .15s ease-out; } @keyframes shelfin { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } /* ── THE GROUND UNDER THE CHROME ── The bars float as separate glass pills with gaps between them, and a card passing underneath showed through every gap — a widget sliced into strips by the toolbar, which is the one thing that made the board look unfinished. A scrim in the board's own colour, fading out rather than ending on a line: a hard edge would just move the problem, trading a sliced widget for a visible seam across the board. It sits above the cards (z 20) and below the chrome (39-40), and it is sized from the REAL bars, so a tab row that wraps to three lines is covered by three lines' worth. */ .scrim { position: absolute; z-index: 31; pointer-events: none; } .scrim-top { inset-inline: 0; top: 0; height: var(--scrimh, 132px); background: linear-gradient(to bottom, var(--canvas-bg) 0%, var(--canvas-bg) 68%, transparent 100%); } .scrim-bottom { inset-inline: 0; bottom: 0; height: var(--scrimb, 70px); background: linear-gradient(to top, var(--canvas-bg) 0%, var(--canvas-bg) 60%, transparent 100%); } /* ── ANNOTATED REGION: the full-screen stage, and what came back ── The overlay is the same card seen closer, so it borrows the card's own stage rules rather than restating them; only the frame around it is new. */ .rg-full{position:fixed;inset:0;z-index:10200;background:rgba(12,14,20,.94); display:flex;flex-direction:column;gap:10px;padding:14px} .rg-full .rg-full-bar{display:flex;align-items:center;gap:10px;color:#fff; font-size:13px;font-weight:700;flex:none} .rg-full .rg-full-bar button{border:1px solid rgba(255,255,255,.3);background:transparent; color:#fff;border-radius:9px;padding:6px 16px;font:inherit;font-weight:700;cursor:pointer} .rg-full .rg-full-bar button:hover{background:#E11D2A;border-color:#E11D2A} .rg-full .rg-stage{flex:1 1 auto;min-height:0;display:grid;place-items:center; position:relative;touch-action:none;cursor:crosshair} .rg-full .rg-stage img{max-width:100%;max-height:100%;object-fit:contain; user-select:none;-webkit-user-drag:none} .rg-full .rg-stage svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} /* the two pictures a run produces, side by side and captioned */ .rg-outs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 10px 8px} /* the sheet alone, before a render: it is a tall image (picture + legend), so it gets the width but stays a preview, not the card */ .rg-outs.one{grid-template-columns:1fr} .rg-outs.one img{max-height:260px;width:auto;max-width:100%;margin:0 auto;object-fit:contain} .rg-outs figure{margin:0;display:flex;flex-direction:column;gap:4px;min-width:0} .rg-outs img{width:100%;border:1px solid var(--line,#dde3ec);border-radius:8px;display:block} .rg-outs figcaption{font-size:10.5px;font-weight:700;color:var(--muted,#6b7280); text-transform:uppercase;letter-spacing:.04em;text-align:center} .rg-bar.rg-go{gap:6px} .rg-bar.rg-go select{flex:1 1 auto;min-width:0} /* ── THE SHELF: TABS NOT IN THE BAR YET ── The same chips as the top bar, set apart only by where they sit and by the arrow that lifts them. Along the bottom edge, clear of the info line, and out of the way of the board itself. */ .tabdock{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:60; display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:min(1100px,92vw); padding:7px 11px;border-radius:14px; background:var(--panel-solid,#fff);border:1px dashed var(--line,#c9d2e0); box-shadow:0 14px 40px rgba(16,24,40,.18)} .tabdock .tdock-lb{display:inline-flex;align-items:center;gap:5px; font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; color:var(--muted,#6b7280);padding-inline-end:4px} .tabdock .tdock-lb svg{width:13px;height:13px} .tabdock .tdock-1{display:inline-flex;align-items:center;gap:2px} .tabdock .tchip{cursor:grab} .tabdock .tchip:active{cursor:grabbing} .tabdock .tdock-up{display:grid;place-items:center;width:24px;height:24px;padding:0; border:1px solid var(--line,#dde3ec);background:transparent;border-radius:8px; color:var(--muted,#6b7280);cursor:pointer} .tabdock .tdock-up:hover{border-color:#6d5cff;color:#6d5cff;background:rgba(109,92,255,.08)} /* in the taskbar it is the middle zone: same shelf, standing in the row */ .taskbar .tabdock{position:static;transform:none;flex:0 1 auto;max-width:44vw;z-index:auto;box-shadow:none;pointer-events:auto} /* the bar says it will take the drop */ .tabbar.tdrop{outline:2px dashed #6d5cff;outline-offset:3px;border-radius:12px} /* ── THE WIRE-DROP MENU ────────────────────────────────────────────────── Dropping a data wire on empty canvas offers the nodes that can take what it carries. It reuses .nd-picker so it reads as the same object as the node palette; only the two group headings and the port chip are new. */ .nd-wiredrop { max-height: 62vh; overflow: auto; min-width: 264px; } .nd-picker .ndp-head { padding: 8px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--muted, #8a94a6); border-bottom: 1px solid var(--line, rgba(140,150,170,.18)); } .nd-picker .ndp-head b { color: var(--text); } .nd-picker .ndp-grp { padding: 8px 10px 3px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #8a94a6); opacity: .8; } /* the socket the wire will land on — the answer to "connected to WHAT" */ .nd-picker .ndp-item u { margin-inline-start: auto; text-decoration: none; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; color: var(--muted, #8a94a6); background: color-mix(in srgb, var(--pc) 16%, transparent); } /* ── THE REGION'S OVERLAY IS SIZED TO THE PICTURE ───────────────────────── The stage is a flex box that centres the image, so the image is letterboxed inside it. An overlay pinned to the STAGE therefore covered a bigger box than the photograph, while the pointer was measured against the photograph — which is why paint appeared beside the cursor and spilled past the edges of the image. This box shrinks to the image, so both agree. */ .nd .rg-stage .rg-fit, .rg-full .rg-stage .rg-fit { position: relative; display: inline-block; line-height: 0; max-width: 100%; max-height: 100%; } .nd .rg-stage .rg-fit img, .rg-full .rg-stage .rg-fit img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .nd .rg-stage .rg-fit svg, .rg-full .rg-stage .rg-fit svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* ── HTML EDITOR WIDGET ─────────────────────────────────────────────────── The card is a preview and one button; the work happens full-screen, where the page can be the size it was designed at. */ .nd .hte-prev { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; background: #fff; border-radius: 10px; } .nd .hte-src { font-size: 10.5px; color: var(--muted); margin-inline-start: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%; } .nd .hte-src.warn { color: #b45309; } .nd .hte-ok { font-size: 10.5px; font-weight: 700; color: #059669; margin-inline-start: auto; } .hte-full { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: var(--panel-solid, #fff); } .hte-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; } .hte-bar b { font-weight: 800; } .hte-bar button { border: 1px solid var(--border); background: var(--hover); color: var(--text); font-family: var(--font); font-size: 11.5px; font-weight: 700; border-radius: 8px; padding: 5px 10px; cursor: pointer; } .hte-bar button:hover { border-color: var(--accent); } .hte-bar button.on { background: var(--accent); color: #fff; border-color: var(--accent); } .hte-bar button.danger:hover { background: #E11D2A; color: #fff; border-color: #E11D2A; } .hte-tools, .hte-acts { display: inline-flex; gap: 6px; } /* what is selected, in the page's own language of tags — the answer to "which thing am I about to change" */ .hte-sel { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--muted); min-width: 90px; } .hte-state { margin-inline-start: auto; font-size: 11px; color: var(--muted); } .hte-x { font-weight: 800 !important; } .hte-doc { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; background: #fff; } .hte-imgs { max-height: 60vh; overflow: auto; } /* ── FIND THIS CARD'S FILE ──────────────────────────────────────────────── A card's header is painted on the canvas, so this sits over it as the one piece of DOM up there. Top-RIGHT of the header band, clear of the title on the left and above the first port row, which starts lower down. TWO THINGS THIS MUST DO THAT ARE NOT OBVIOUS. #nodes is pointer-events:none — the whole overlay is transparent to the mouse so the canvas underneath can be dragged — so anything meant to be clicked has to opt back in, the way .nsent does a few rules above. And it cannot hide behind .nd:hover for the same reason: a card that does not receive pointer events is never :hover, so the button would have stayed invisible forever. It is quiet but present. */ #nodes .nd > .nd-loc { position: absolute; top: 6px; inset-inline-end: 8px; z-index: 4; pointer-events: auto; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 7px; cursor: pointer; padding: 0; background: transparent; color: var(--muted, #8a94a6); opacity: .45; transition: opacity .12s ease, background .12s ease; } #nodes .nd > .nd-loc:hover { opacity: 1; background: var(--hover); color: var(--text); } #nodes .nd > .nd-loc svg { width: 12px; height: 12px; } #nodes .nd > .nd-loc[hidden] { display: none; } /* ── the SPAiCE3d kit explorer ─────────────────────────────────────────── A grid of things rather than a list of rows: these are chosen by looking, and forty-nine of them read as a wall of text in the inputs list's shape. It borrows .cad-inputs for the frame so the two panels are plainly the same kind of object, and changes only what has to change. */ .cad-sp3d { width: 340px; inset-inline-start: auto; inset-inline-end: 10px; } .cad-sp3d .sp3-find { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.08); } .cad-sp3d .sp3-find input { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #dfe7ff; font: inherit; font-size: 12px; padding: 5px 9px; outline: none; } .cad-sp3d .sp3-find input:focus { border-color: #00E5FF; } .cad-sp3d .sp3-list { padding: 8px; gap: 0; } .cad-sp3d .sp3-grp { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: #8fa2c4; margin: 10px 2px 6px; } .cad-sp3d .sp3-grp:first-child { margin-top: 2px; } .cad-sp3d .sp3-grp u { text-decoration: none; opacity: .5; font-size: 9.5px; } .cad-sp3d .sp3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .cad-sp3d .sp3-it { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; background: rgba(255,255,255,.03); border: 1px solid transparent; border-radius: 9px; padding: 7px 4px 6px; cursor: pointer; color: #dfe7ff; font: inherit; text-align: center; } .cad-sp3d .sp3-it:hover { background: rgba(0,229,255,.08); border-color: rgba(0,229,255,.35); } .cad-sp3d .sp3-it.armed { border-color: #00E5FF; background: rgba(0,229,255,.14); } .cad-sp3d .sp3-it i { display: block; line-height: 0; } .cad-sp3d .sp3-it b { font-size: 10.5px; font-weight: 600; line-height: 1.2; } .cad-sp3d .sp3-it u { text-decoration: none; font-size: 9px; opacity: .45; } /* how many of this type are already in the drawing */ .cad-sp3d .sp3-it em { position: absolute; top: 4px; inset-inline-end: 5px; font-style: normal; font-size: 9px; font-weight: 800; background: #00E5FF; color: #06202a; border-radius: 999px; padding: 0 4px; } .cad-sp3d .sp3-none { padding: 18px 6px; text-align: center; font-size: 12px; opacity: .5; } .cad-sp3d .sp3-arm { padding: 7px 10px; font-size: 11.5px; color: #06202a; background: #00E5FF; } .cad-sp3d .sp3-arm b { font-weight: 800; } /* ── a kit item's properties: typed rows, not a column of text boxes ─────── */ .cad-pf-edge.sp3-p { grid-template-columns: 1fr auto 22px; align-items: center; } .cad-pf-edge.sp3-p > u { text-decoration: none; font-size: 11px; opacity: .72; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cad-pf-edge.sp3-p > input[type="number"] { width: 84px; text-align: end; } .cad-pf-edge.sp3-p > input[type="color"] { width: 34px; height: 20px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; background: none; cursor: pointer; } .cad-pf-edge.sp3-p > input[type="checkbox"] { width: 15px; height: 15px; justify-self: end; cursor: pointer; } .cad-pf-edge.sp3-p > select { width: 118px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 6px; color: inherit; font: inherit; font-size: 11.5px; padding: 2px 5px; } .cad-pf-edge.sp3-p > i { font-size: 9.5px; opacity: .45; font-style: normal; text-align: end; } /* what this one measures, kept at the top where it is read while designing */ .cad-pf-ro.sp3-qty > b { color: #00E5FF; font-size: 13px; } .cad-pf-ro.sp3-qparts > span { font-size: 10px; opacity: .6; line-height: 1.4; } /* ── the SPAiCE3d view: the studio environment, over the drafting stage ──── */ .cad-s3v { position: absolute; inset: 0; z-index: 8; background: #eaf0f2; } .cad-s3v.hidden { display: none; } .cad-s3v > canvas { display: block; width: 100%; height: 100%; } .cad-s3v .s3v-bar { position: absolute; top: 10px; inset-inline-start: 10px; display: flex; align-items: center; gap: 7px; padding: 6px 9px; background: rgba(12,16,26,.9); border: 1px solid rgba(255,255,255,.14); border-radius: 11px; color: #dfe7ff; font-size: 11.5px; } .cad-s3v .s3v-bar b { font-size: 11px; letter-spacing: .07em; } .cad-s3v .s3v-bar button { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 7px; color: inherit; font: inherit; font-size: 11px; padding: 3px 9px; cursor: pointer; } .cad-s3v .s3v-bar button:hover { border-color: #00E5FF; color: #00E5FF; } .cad-s3v .s3v-n { opacity: .55; font-size: 10.5px; } .cad-s3v .s3v-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: #33414f; font-size: 13px; } /* the shadow study's controls, in the 3D view's bar */ .cad-s3v .s3v-sun { display: inline-flex; align-items: center; gap: 6px; padding-inline-start: 4px; border-inline-start: 1px solid rgba(255,255,255,.14); } .cad-s3v .s3v-sun button[data-s3v="sunon"] { font-size: 13px; line-height: 1; padding: 2px 7px; } .cad-s3v .s3v-sun button.on { background: #f4b93f; border-color: #f4b93f; color: #201400; } .cad-s3v .s3v-sun input[type="date"] { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; color: inherit; font: inherit; font-size: 10.5px; padding: 2px 5px; color-scheme: dark; } .cad-s3v .s3v-sun input[type="range"] { width: 110px; accent-color: #f4b93f; } .cad-s3v .s3v-sun i { font-style: normal; font-size: 10.5px; opacity: .7; min-width: 118px; } /* the sun-study legend: a scale nobody has to guess at */ .cad-s3v .s3v-legend { position: absolute; inset-inline-start: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 420px; padding: 7px 10px; background: rgba(12,16,26,.9); border: 1px solid rgba(255,255,255,.14); border-radius: 11px; color: #dfe7ff; font-size: 10.5px; } .cad-s3v .s3v-legend.hidden { display: none; } .cad-s3v .s3v-ramp { width: 140px; height: 9px; border-radius: 999px; display: block; background: linear-gradient(90deg, #2e5698, #5aa8a0 35%, #e8c85c 60%, #e68c3e 80%, #ce3e30); } .cad-s3v .s3v-legend b { flex: 1 0 100%; font-size: 10px; opacity: .75; font-weight: 600; } .cad-s3v .s3v-legend u { flex: 1 0 100%; text-decoration: none; font-size: 9.5px; opacity: .5; } /* a measured value in the properties panel: read, not edited */ .cad-pf-edge.sp3-p > b.sp3-ro { font-size: 12px; font-weight: 700; color: #00E5FF; text-align: end; } /* ── the bill of quantities ──────────────────────────────────────────────── */ .cad-bill { width: 460px; inset-inline-start: auto; inset-inline-end: 10px; } .cad-bill .bill-list { padding: 6px 8px 10px; gap: 0; } .cad-bill .bill-row { display: grid; grid-template-columns: 1fr 34px 92px 78px 96px; align-items: center; gap: 6px; padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 11.5px; } .cad-bill .bill-row > u { text-decoration: none; min-width: 0; } .cad-bill .bill-row > u b { display: block; font-weight: 650; } .cad-bill .bill-row > u span { display: block; font-size: 9.5px; opacity: .5; } .cad-bill .bill-row > i { font-style: normal; text-align: end; font-variant-numeric: tabular-nums; } .cad-bill .bill-row > i em { font-style: normal; font-size: 9px; opacity: .45; } .cad-bill .bill-head { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; opacity: .5; } .cad-bill .bill-amt { font-weight: 700; color: #00E5FF; } .cad-bill .bill-row input[type="number"] { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; color: inherit; font: inherit; font-size: 11px; padding: 2px 5px; text-align: end; } .cad-bill .bill-total { border-bottom: 0; border-top: 1px solid rgba(255,255,255,.2); margin-top: 4px; padding-top: 8px; } .cad-bill .bill-total > u { font-weight: 700; } .cad-bill .bill-note { padding: 8px 10px; font-size: 9.5px; opacity: .5; line-height: 1.5; border-top: 1px solid rgba(255,255,255,.08); } /* ══ TAB FLOW EXPLORER ═════════════════════════════════════════════════════ A floating window over the board, so it takes the board's own ground: on a dark board a white panel is a hole burnt in the middle of the work. Where it sits and how big it is are this browser's business; what is drawn inside it belongs to the board, and everyone sees it. */ .tabflow { position: fixed; z-index: 120; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--tf-bg, var(--panel, #fff)); box-shadow: 0 24px 70px -18px rgba(0, 0, 0, .45), 0 2px 10px rgba(0, 0, 0, .18); color: var(--text); } .tabflow.hidden { display: none; } .tabflow .tf-head { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-bottom: 1px solid var(--border); cursor: grab; user-select: none; background: color-mix(in srgb, var(--tf-bg, var(--panel, #fff)) 82%, var(--text) 4%); } .tabflow .tf-head:active { cursor: grabbing; } .tabflow .tf-grip { width: 9px; height: 15px; flex: none; opacity: .45; background: radial-gradient(circle, currentColor 1px, transparent 1.2px) 0 0/4.5px 5px; } .tabflow .tf-title { font-size: 12.5px; font-weight: 800; letter-spacing: .01em; } .tabflow .tf-count { font-size: 10.5px; color: var(--muted); font-weight: 600; } .tabflow .tf-sp { flex: 1 1 auto; } .tabflow .tf-b { flex: none; min-width: 25px; height: 25px; padding: 0 7px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 700; line-height: 1; } .tabflow .tf-b:hover { border-color: var(--accent); color: var(--accent); } .tabflow .tf-b.tf-ai { color: #7C5CFF; border-color: color-mix(in srgb, #7C5CFF 45%, transparent); } .tabflow .tf-b.tf-ai:hover { background: #7C5CFF; color: #fff; border-color: #7C5CFF; } .tabflow .tf-b.tf-x:hover { border-color: #E11D2A; color: #E11D2A; } .tabflow .tf-stage { flex: 1 1 auto; position: relative; overflow: hidden; touch-action: none; background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 13%, transparent) 1px, transparent 1.3px); background-size: 26px 26px; cursor: default; } .tabflow.tf-panning .tf-stage { cursor: grabbing; } .tabflow .tf-cam { position: absolute; inset: 0; transform-origin: 0 0; } .tabflow .tf-wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; color: var(--muted); } .tabflow .tf-nodes { position: absolute; left: 0; top: 0; } .tabflow .tf-rs { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; z-index: 3; background: linear-gradient(135deg, transparent 48%, var(--muted) 48%, var(--muted) 56%, transparent 56%, transparent 68%, var(--muted) 68%, var(--muted) 76%, transparent 76%); opacity: .6; } .tabflow .tf-rs:hover { opacity: 1; } .tabflow .tf-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; pointer-events: none; background: var(--accent); color: #fff; opacity: 0; transition: opacity .12s; white-space: nowrap; } .tabflow .tf-hint.on { opacity: .96; } /* a node: a tab, a group of tabs, or the board itself */ .tabflow .tf-n { position: absolute; width: 188px; box-sizing: border-box; cursor: grab; border: 1.5px solid var(--border); border-radius: 11px; padding: 7px 9px 6px; background: var(--panel, #fff); --tf-c: var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .1); transition: box-shadow .12s, border-color .12s; } .tabflow.tf-dark .tf-n { background: color-mix(in srgb, var(--tf-bg, #10131c) 62%, #fff 7%); } .tabflow .tf-n:hover { border-color: var(--tf-c); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } .tabflow .tf-n.is-group { border-style: dashed; } .tabflow .tf-n.is-root { border-color: var(--muted); border-style: dotted; opacity: .92; } .tabflow .tf-n.is-here { border-color: var(--tf-c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tf-c) 38%, transparent); } .tabflow .tf-n.is-sel { border-color: var(--tf-c); } .tabflow .tf-n.tf-dragging { opacity: .85; cursor: grabbing; box-shadow: 0 14px 34px rgba(0, 0, 0, .3); z-index: 9; } .tabflow .tf-n.tf-drop { border-color: #16A34A; box-shadow: 0 0 0 3px color-mix(in srgb, #16A34A 40%, transparent); } .tabflow .tf-nh { display: flex; align-items: center; gap: 6px; } .tabflow .tf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tf-c); flex: none; } .tabflow .tf-n.is-group .tf-dot { border-radius: 2px; } .tabflow .tf-lb { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tabflow .tf-n-n { flex: none; font-size: 9.5px; font-weight: 800; color: var(--muted); background: color-mix(in srgb, var(--text) 10%, transparent); border-radius: 999px; padding: 1px 6px; } .tabflow .tf-ren { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12px; font-weight: 700; border: 1px solid var(--accent); border-radius: 6px; padding: 1px 5px; outline: none; background: var(--panel, #fff); color: var(--text); } /* how far it is done, as a bar that reads across the whole chart */ .tabflow .tf-bar { height: 4px; margin: 6px 0 4px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--text) 12%, transparent); } .tabflow .tf-bar i { display: block; height: 100%; border-radius: 3px; background: var(--tf-c); transition: width .15s; } .tabflow .tf-n .tf-nf { display: flex; align-items: center; gap: 4px; } .tabflow .tf-pct { font-size: 9.5px; font-weight: 800; color: var(--muted); } .tabflow .tf-pct.full { color: #16A34A; } .tabflow .tf-cm { font-size: 9.5px; font-weight: 700; color: var(--muted); } .tabflow .tf-mini { width: 18px; height: 18px; padding: 0; border-radius: 5px; cursor: pointer; line-height: 1; border: 1px solid var(--border); background: transparent; color: var(--muted); font: inherit; font-size: 10px; } .tabflow .tf-mini:hover { border-color: var(--tf-c); color: var(--tf-c); } /* notes pinned around the chart */ .tabflow .tf-note { position: absolute; border-radius: 9px; padding: 8px 20px 8px 9px; cursor: grab; background: var(--tf-nc, #FFE58A); color: #1b1b2f; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); font-size: 11.5px; line-height: 1.45; } .tabflow .tf-note.is-text { background: transparent; box-shadow: none; color: var(--text); font-weight: 700; padding: 3px 20px 3px 5px; } .tabflow .tf-note-b { outline: none; min-height: 1.4em; white-space: pre-wrap; word-break: break-word; cursor: text; } .tabflow .tf-note-x { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; padding: 0; line-height: 1; border: 0; border-radius: 4px; background: transparent; color: inherit; opacity: 0; cursor: pointer; font-size: 10px; } .tabflow .tf-note:hover .tf-note-x { opacity: .55; } .tabflow .tf-note-x:hover { opacity: 1 !important; background: rgba(0, 0, 0, .14); } /* the popovers: a comment thread, and the node menu */ .tf-pop { position: fixed; z-index: 400; width: 264px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel, #fff); color: var(--text); box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .45); padding: 10px; } .tf-pop .tf-pop-h { font-size: 12px; font-weight: 800; margin-bottom: 7px; } .tf-pop .tf-pop-h2 { font-size: 10px; font-weight: 800; color: var(--muted); margin: 8px 0 4px; text-transform: uppercase; letter-spacing: .04em; } .tf-pop .tf-pop-l { max-height: 190px; overflow: auto; margin-bottom: 7px; } .tf-pop .tf-c { border-top: 1px solid var(--border); padding: 5px 0 4px; position: relative; } .tf-pop .tf-c b { font-size: 10.5px; } .tf-pop .tf-c span { font-size: 9.5px; color: var(--muted); margin-inline-start: 5px; } .tf-pop .tf-c p { margin: 2px 0 0; font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .tf-pop .tf-c-x { position: absolute; top: 4px; right: 0; width: 16px; height: 16px; padding: 0; border: 0; line-height: 1; background: transparent; color: var(--muted); cursor: pointer; border-radius: 4px; font-size: 10px; opacity: .5; } .tf-pop .tf-c-x:hover { opacity: 1; color: #E11D2A; } .tf-pop .tf-c-none { font-size: 11px; color: var(--muted); } .tf-pop .tf-pop-t { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; background: transparent; color: var(--text); outline: none; } .tf-pop .tf-pop-t:focus { border-color: var(--accent); } .tf-pop .tf-pop-f { display: flex; justify-content: flex-end; margin-top: 6px; } .tf-pop.tf-menu { width: 208px; padding: 8px; } .tf-pop.tf-menu button[data-m] { display: block; width: 100%; text-align: start; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; padding: 6px 8px; border-radius: 7px; cursor: pointer; } .tf-pop.tf-menu button[data-m]:hover { background: var(--hover); color: var(--accent); } .tf-pop .tf-set { display: flex; gap: 4px; } .tf-pop .tf-set button { flex: 1 1 0; border: 1px solid var(--border); background: transparent; color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 700; padding: 4px 0; border-radius: 6px; cursor: pointer; } .tf-pop .tf-set button:hover { border-color: var(--accent); color: var(--accent); } /* a rolled-up figure is the average of the rooms below, not a number someone set — drawn lighter, so a decided 80% and a calculated 80% do not look alike */ .tabflow .tf-bar.is-roll i { opacity: .55; } .tabflow .tf-pct.is-roll { opacity: .6; font-style: italic; } /* ── PROGRAMME DIAGRAM CARD ─────────────────────────────────────────────── The drawing fills the card; the bar above it only says which of the three readings you are looking at, and what the programme adds up to. */ #nodes .pd-bar { flex: 0 0 auto; gap: 4px; } #nodes .pd-bar .pd-sp { flex: 1 1 auto; } #nodes .pd-v { flex: 0 0 auto; border: 1px solid var(--border); background: transparent; color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 7px; cursor: pointer; } #nodes .pd-v:hover { border-color: var(--accent); color: var(--accent); } #nodes .pd-v.on { background: var(--accent); border-color: var(--accent); color: #fff; } #nodes .pd-stage { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; } #nodes .pd-stage svg { flex: 1 1 auto; min-width: 0; } /* the editor: the programme on the left, what ties it together on the right */ .pd-edit .pd-ed-body { display: flex; gap: 14px; padding: 16px; max-width: min(1100px, 94vw); margin: 0 auto; } .pd-edit .pd-ed-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .pd-edit .pd-ed-col b { color: #fff; font-size: 12.5px; } .pd-edit .pd-ed-col i { color: rgba(255,255,255,.55); font-size: 11px; font-style: normal; } .pd-edit textarea { width: 100%; box-sizing: border-box; height: min(60vh, 460px); resize: vertical; background: #12122a; color: #EDEDF7; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 10px 12px; font: 12.5px/1.5 ui-monospace, Consolas, monospace; outline: none; } .pd-edit textarea:focus { border-color: var(--accent, #7C5CFF); } .pd-edit .nl-ico[data-pd-ok] { background: var(--accent, #7C5CFF); color: #fff; padding: 0 14px; width: auto; font-weight: 700; } /* ── PLOT STUDIO CARD ───────────────────────────────────────────────────── The drawing takes the whole card; the bars above and below it carry the figures. The alarm is deliberately loud: a block 25% past the area the client declared has to be impossible to miss while you are still moving it. */ #nodes .ps-bar { flex: 0 0 auto; flex-wrap: wrap; gap: 4px; } #nodes .ps-sel { min-height: 22px; } #nodes .ps-sel.dim { font-size: 10px; color: var(--muted); line-height: 1.4; } #nodes .ps-sel b { font-size: 11.5px; font-weight: 800; margin-inline-end: 4px; } #nodes .ps-pill { display: inline-flex; align-items: center; gap: 5px; flex: none; border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 800; color: var(--text); white-space: nowrap; } #nodes .ps-pill i { font-style: normal; font-weight: 600; opacity: .6; text-transform: uppercase; letter-spacing: .03em; font-size: 9px; } #nodes .ps-pill.bad { border-color: #E11D2A; color: #E11D2A; background: color-mix(in srgb, #E11D2A 12%, transparent); } #nodes .ps-host { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); } #nodes .ps-host svg { display: block; color: var(--text); touch-action: none; cursor: default; } #nodes .ps-live { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nodes .ps-live.warn { color: #F59E0B; } #nodes .ps-live.bad { color: #E11D2A; } /* the blocks themselves */ #nodes .ps-b { cursor: grab; } #nodes .ps-b:hover .ps-shape { fill-opacity: .5; } #nodes .ps-b.is-sel { cursor: move; } #nodes .ps-b .ps-lb { fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 2.6px; pointer-events: none; } #nodes .ps-b .ps-ar { fill: #fff; fill-opacity: .92; paint-order: stroke; stroke: rgba(0,0,0,.4); stroke-width: 2.4px; pointer-events: none; } #nodes .ps-b .ps-ar.bad { fill: #FFD3D3; } #nodes .ps-b .ps-dim { fill: var(--accent); paint-order: stroke; stroke: var(--panel, #fff); stroke-width: 2.6px; pointer-events: none; } /* OVER THE BRIEF, AND SAYING SO. A dashed red outline that breathes: a figure in a table is something you look up, an outline that moves is something you cannot help noticing while your hand is still on the shape. */ #nodes .ps-b.is-bad .ps-shape { stroke-dasharray: 7 4; } #nodes .ps-b.is-wild .ps-shape { stroke-dasharray: 7 4; animation: ps-alarm 1.3s ease-in-out infinite; } #nodes .ps-b.is-out .ps-shape { stroke-dasharray: 2 3; stroke-width: 2.2; } @keyframes ps-alarm { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .32; } } @media (prefers-reduced-motion: reduce) { #nodes .ps-b.is-wild .ps-shape { animation: none; } } /* the handles */ #nodes .ps-vx { fill: var(--panel, #fff); stroke: var(--accent); stroke-width: 1.8; cursor: nwse-resize; } #nodes .ps-vx:hover { fill: var(--accent); } #nodes .ps-mid { fill: var(--accent); fill-opacity: .38; stroke: var(--accent); stroke-width: 1; cursor: copy; } #nodes .ps-mid:hover { fill-opacity: 1; } #nodes .ps-plot { pointer-events: none; } #nodes .ps-chrome { pointer-events: none; opacity: .75; } /* the one-field prompt */ .ps-ask .ps-ask-b { display: flex; gap: 8px; padding: 18px; max-width: 520px; margin: 0 auto; } .ps-ask .ps-ask-i { flex: 1 1 auto; min-width: 0; background: #12122a; color: #EDEDF7; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 14px; outline: none; } .ps-ask .ps-ask-i:focus { border-color: var(--accent, #7C5CFF); } /* ── EVERY AI CONTROL IN ONE PLACE ──────────────────────────────────────── They were scattered: NEVO up in the nav, SPAiCE AI and Ask AI and Agents down the tool palette, the agent orbs in a dock of their own, and the explorer's agent only reachable from inside the explorer. Five places to look for one kind of thing. They are one dock now, at the middle of the left edge, and the originals stay in the DOM (with their own handlers) but out of sight — the orb forwards the click, so nothing had to be rewired. */ #toolbar #btn-ai, #toolbar #btn-askai, #toolbar #btn-agents, #toolbar .tb-sep.ai-sep, .board-top #btn-nevo { display: none !important; } .agdock .ag-sep { width: 18px; height: 1px; background: var(--border); flex: none; margin: 1px 0; } .agdock .agorb.nev { --oc: #0EA5E9; --oc2: #38BDF8; --og: rgba(14,165,233,.55); --bc: #0EA5E9; } .agdock .agorb.ask { --oc: #EC4899; --oc2: #F472B6; --og: rgba(236,72,153,.55); --bc: #EC4899; } .agdock .agorb.crew { --oc: #16A34A; --oc2: #4ADE80; --og: rgba(22,163,74,.55); --bc: #16A34A; } .agdock .agorb.spa { --oc: #6366F1; --oc2: #A5B4FC; --og: rgba(99,102,241,.55); --bc: #6366F1; } .agdock .agorb.exp { --oc: #C9A227; --oc2: #F1C75B; --og: rgba(201,162,39,.55); --bc: #C9A227; } /* a dock that outgrows a short screen scrolls rather than running off it */ .agdock { max-height: calc(100% - 120px); overflow-y: auto; scrollbar-width: none; } .agdock::-webkit-scrollbar { display: none; } /* ── the explorer's filter row ─────────────────────────────────────────── */ .tabflow .tf-filter { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-bottom: 1px solid var(--border); } .tabflow .tf-q, .tabflow .tf-sort { border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 11.5px; padding: 4px 8px; outline: none; height: 25px; box-sizing: border-box; } .tabflow .tf-q { flex: 1 1 auto; min-width: 60px; } .tabflow .tf-q:focus, .tabflow .tf-sort:focus { border-color: var(--accent); } .tabflow .tf-sort { flex: 0 0 auto; max-width: 168px; cursor: pointer; } .tabflow .tf-found { flex: 0 0 auto; font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; } .tabflow .tf-favonly.on { background: #C9A227; border-color: #C9A227; color: #fff; } /* while a filter is on, the panel says so at a glance */ .tabflow.tf-filtering .tf-filter { background: color-mix(in srgb, var(--accent) 9%, transparent); } /* what matched, and what is only the path to it */ .tabflow.tf-filtering .tf-n { opacity: .52; } .tabflow.tf-filtering .tf-n.is-hit { opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 42%, transparent); } .tabflow .tf-n.is-fav .tf-lb::after { content: ' ★'; color: #C9A227; font-size: 9px; vertical-align: 1px; } .tabflow .tf-mini.tf-star.on { color: #C9A227; border-color: #C9A227; } .tabflow .tf-age { font-size: 9px; font-weight: 800; color: var(--accent); letter-spacing: .02em; } /* the explorer sits with the other view switches, beside Main */ .tctl .tst.texp.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); } /* ── the explorer, docked or full screen ────────────────────────────────── Floating is the default. Docked it takes an edge and keeps it; maximised it takes the screen. Both are a class, so taking hold of the header or the resize corner simply drops the class and hands the window back. */ .tabflow.tf-max { left: 12px !important; top: 12px !important; width: calc(100vw - 24px) !important; height: calc(100vh - 24px) !important; border-radius: 12px; } .tabflow.tf-dock-left { left: 0 !important; top: var(--topy, 8px) !important; width: min(520px, 46vw) !important; height: calc(100vh - 2 * var(--topy, 8px)) !important; border-radius: 0 14px 14px 0; } .tabflow.tf-dock-right { left: auto !important; right: 0; top: var(--topy, 8px) !important; width: min(520px, 46vw) !important; height: calc(100vh - 2 * var(--topy, 8px)) !important; border-radius: 14px 0 0 14px; } .tabflow.tf-dock-bottom { left: 0 !important; top: auto !important; bottom: 0; width: 100vw !important; height: min(46vh, 460px) !important; border-radius: 14px 14px 0 0; } .tabflow.tf-max .tf-rs, .tabflow:not(.tf-free) .tf-rs { display: none; } .tabflow .tf-b.on { background: var(--accent); border-color: var(--accent); color: #fff; } /* ── THE DRAWER'S OWN FIND, ORDER AND GROUP ─────────────────────────────── At the top of the list they filter, not up in the title bar a screen away. */ /* two lines rather than three squeezed controls: the search takes a line of its own and the order, the group and the manage button share the next */ /* the narrower the drawer, the more of this row stacks; none of it may push the drawer wider than the width that was set for it */ .tabbar .tbar-filt > * { min-width: 0; } .tabbar #board-find, .tabbar .tbar-filt { max-width: 100%; } /* THE ROW IS AS WIDE AS THE DRAWER, NOT AS WIDE AS ITS CONTENTS. The drawer is a column with align-items:flex-start, so a child sizes to its content — and this row, being wider than the panel, pushed its last two buttons (the one that MAKES a group and the one that manages them) off the right edge, where the panel's own overflow hid them. */ .tabbar .tbar-filt { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 0 6px 6px; width: 100%; box-sizing: border-box; } .tabbar .tbar-head { width: 100%; box-sizing: border-box; } .tabbar .tbar-filt .tfind { flex: 1 1 100%; } .tabbar .tbar-filt .tsort { flex: 1 1 0; max-width: none; } .tabbar .tbar-filt .tgsel { flex: 1 1 0; max-width: none; } .tabbar .tbar-filt .tfind { min-width: 40px; height: 24px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 11px; padding: 0 7px; outline: none; } .tabbar .tbar-filt .tfind:focus { border-color: var(--accent); } .tabbar .tbar-filt .tsort, .tabbar .tbar-filt .tgsel { min-width: 0; height: 24px; box-sizing: border-box; cursor: pointer; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 10.5px; padding: 0 3px; outline: none; } .tabbar .tbar-filt .tsort:hover, .tabbar .tbar-filt .tgsel:hover { color: var(--text); border-color: var(--accent); } .tabbar .tbar-filt .tgman { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--muted); padding: 0; } .tabbar .tbar-filt .tgman:hover { color: var(--accent); border-color: var(--accent); } /* THE SEARCHES STAY IN SLIM MODE. Hiding them there was the reason "the filter is still not in the panel" kept coming back: the drawer remembers slim across reloads, and slim was the one state where both fields and the group buttons were switched off. The row wraps, so a narrow drawer simply stacks it. */ /* ONE ROW. Stacked, the order, the groups and the two group buttons took four lines of a narrow panel for three controls you set once and leave. The find keeps its own line because you type in it; the rest share one. */ .tabbar.slim .tbar-filt { display: flex; } .tabbar .tbar-filt .tsort, .tabbar .tbar-filt .tgsel { flex: 1 1 0; min-width: 0; max-width: none; } .tabbar .tbar-filt .tgnew, .tabbar .tbar-filt .tgman { flex: 0 0 auto; } .tabbar .tbar-filt .tfind { flex: 1 1 100%; } /* ── THE GROUP, CAPPING THE CHIP ────────────────────────────────────────── A hairline, then the group's colour filling the rounded right end. A chip with no group is exactly as it was — the mark only appears when it means something. */ .tchip { position: relative; } .tchip .tgrp { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 14px; background: var(--gc, var(--accent)); border-start-end-radius: inherit; border-end-end-radius: inherit; box-shadow: inset 2px 0 0 0 var(--panel, #fff); pointer-events: none; } [dir="rtl"] .tchip .tgrp { box-shadow: inset -2px 0 0 0 var(--panel, #fff); } /* the chip makes room for it rather than letting it sit on the count */ .tchip:has(.tgrp) { padding-inline-end: 22px; } /* ── MAKING AND UNMAKING THE SETS ─────────────────────────────────────────── */ .tgpop { position: fixed; z-index: 420; width: 268px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel, #fff); color: var(--text); box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .45); } .tgpop .tgp-h { font-size: 12px; font-weight: 800; margin-bottom: 7px; } .tgpop .tgp-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; } .tgpop .tgp-row input[type="color"] { flex: 0 0 auto; width: 20px; height: 20px; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: none; cursor: pointer; } .tgpop .tgp-n { flex: 1 1 auto; min-width: 0; height: 22px; box-sizing: border-box; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: 12px; padding: 0 5px; outline: none; } .tgpop .tgp-n:hover, .tgpop .tgp-n:focus { border-color: var(--border); } .tgpop .tgp-row i { flex: 0 0 auto; font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--muted); min-width: 14px; text-align: end; } .tgpop .tgp-row button { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; opacity: .6; } .tgpop .tgp-row button:hover { opacity: 1; color: #E11D2A; background: rgba(225, 29, 42, .12); } .tgpop .tgp-none { font-size: 11.5px; color: var(--muted); padding: 4px 2px; } .tgpop .tgp-f { margin-top: 6px; } .tgpop .tgp-add { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--border); border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 700; padding: 5px 0; cursor: pointer; } .tgpop .tgp-add:hover { border-color: var(--accent); color: var(--accent); border-style: solid; } .tgpop .tgp-note { margin-top: 8px; font-size: 10px; line-height: 1.45; color: var(--muted); opacity: .9; } .tgask .tgask-b { display: flex; gap: 8px; padding: 18px; max-width: 460px; margin: 0 auto; } .tgask .tgask-b input { flex: 1 1 auto; min-width: 0; background: #12122a; color: #EDEDF7; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 14px; outline: none; } .tgask .tgask-b input:focus { border-color: var(--accent, #7C5CFF); } /* ── THE EXPLORER, NAMED ─────────────────────────────────────────────────── Four small grey switches in one pill and no way to tell them apart: the one that opens the tab tree carries its name. */ .tctl .tst.texp { width: auto; gap: 4px; padding: 0 8px 0 6px; } .tctl .tst.texp b { font-size: 10.5px; font-weight: 800; letter-spacing: .2px; } .tctl .tst.texp:hover { color: var(--accent); } /* ── THE FINE ZOOM, IN THE VIEW BAR ──────────────────────────────────────── A pair of steps and the number between them. The wheel is for getting there; these are for landing on it before the view is saved. */ .viewbar .vb-zoom { display: inline-flex; align-items: center; gap: 1px; height: 24px; padding: 0 3px; flex: none; border: 1px solid var(--border); border-radius: 999px; background: var(--panel, rgba(255,255,255,.6)); } .viewbar .vbz { width: 21px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; transition: .12s; touch-action: none; } .viewbar .vbz svg { width: 13px; height: 13px; } .viewbar .vbz:hover { color: var(--accent); background: var(--hover); } .viewbar .vbz:active { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); } .viewbar .vbz-v { min-width: 34px; text-align: center; font-size: 10.5px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; user-select: none; } /* ── WHAT AN ORB IS ──────────────────────────────────────────────────────── A child of the page, placed from the orb's own position, so the dock ~ which scrolls, and is 40px wide ~ cannot clip it. Name, then what it does, then what it is pointed at right now, in the orb's own colour. */ .aghint { position: fixed; left: 0; top: 0; z-index: 500; width: max-content; max-width: 244px; padding: 8px 11px 9px; border-radius: 12px; background: var(--panel-solid, #fff); border: 1px solid var(--border); color: var(--text); box-shadow: 0 16px 38px -16px rgba(0, 0, 0, .5); opacity: 0; transform: translateX(-7px); transition: opacity .13s, transform .13s; pointer-events: none; } [dir="rtl"] .aghint { transform: translateX(7px); } .aghint.on { opacity: 1; transform: none; } .aghint b { display: block; font-size: 12.5px; font-weight: 800; line-height: 1.25; } .aghint i { display: block; margin-top: 3px; font-style: normal; font-size: 11px; font-weight: 500; line-height: 1.45; color: var(--muted); } .aghint s { display: block; margin-top: 6px; padding-top: 5px; text-decoration: none; border-top: 1px solid var(--border); font-size: 10.5px; font-weight: 800; line-height: 1.3; color: var(--hc, var(--accent)); } /* ══ PULSE ════════════════════════════════════════════════════════════════ The agent used to be a lamp in the title bar and a card that deleted itself after a minute. It is a panel now, because an agent whose work you cannot see, keep, correct or argue with is not worth paying for. Amber throughout: the colour the insight card wore, kept so the thing is still recognisably the same agent. */ .agdock .agorb.pls { --oc: #F59E0B; --oc2: #FDCB6E; --og: rgba(253, 203, 110, .6); --bc: #F59E0B; } .pls-panel { width: 372px; gap: 0; border: 1.4px solid rgba(253, 203, 110, .38); box-shadow: 0 10px 46px rgba(253, 203, 110, .14); } .pls-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px; flex: none; background: linear-gradient(135deg, rgba(253, 203, 110, .17), rgba(245, 158, 11, .06)); border-bottom: 1px solid rgba(253, 203, 110, .3); } .pls-head .pls-glyph { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; color: #FDCB6E; background: rgba(253, 203, 110, .13); box-shadow: 0 0 12px rgba(253, 203, 110, .34); } .pls-head .pls-glyph.busy { animation: plsbeat 1.5s ease-in-out infinite; } @keyframes plsbeat { 0%, 100% { box-shadow: 0 0 0 0 rgba(253, 203, 110, .5); } 50% { box-shadow: 0 0 22px 5px rgba(253, 203, 110, .55); } } .pls-head > div { flex: 1 1 auto; min-width: 0; } .pls-head b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: .05em; } .pls-head span { display: block; font-size: 10.8px; line-height: 1.35; color: var(--muted); margin-top: 2px; } .pls-head .pls-x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; } .pls-head .pls-x:hover { color: var(--text); background: var(--hover); } /* ── the scope: said before it runs, never after ── */ .pls-scope { flex: none; padding: 11px 14px 12px; border-bottom: 1px solid var(--border); } /* the section heading, by CLASS: `.pls-scope > label` also caught the auto-run checkbox, which is a