/* The board is one plane. Chrome belongs to the host, content to its document. */
#board-studio {
  --bs-bg:#f4f4f6; --bs-panel:#fff; --bs-soft:#eeedf2; --bs-ink:#25242c;
  --bs-muted:#777481; --bs-line:#dddce4; --bs-accent:#7666c5; --bs-tint:#eeebfa;
  --bs-danger-ink:#a5473b; --bs-danger-wash:#fde9e7;
  position:fixed; inset:0; z-index:60; overflow:hidden; color:var(--bs-ink);
  background:var(--bs-bg); font:13px/1.45 Inter,system-ui,sans-serif; isolation:isolate;
}
[data-theme="dark"] #board-studio {
  --bs-bg:#18181c; --bs-panel:#232328; --bs-soft:#2a292f; --bs-ink:#e9e8ef;
  --bs-muted:#a3a0ae; --bs-line:#3b3943; --bs-accent:#b4a3f3; --bs-tint:#343044;
  --bs-danger-ink:#efaaa2; --bs-danger-wash:#4a302f;
}
/* Stored tokens identify a hue; its ink and surface follow the current theme. */
#board-studio [data-color] {--bs-group:#777481;--bs-group-wash:#eeedf2}
#board-studio [data-color="violet"] {--bs-group:#7560af;--bs-group-wash:#eee9f8}
#board-studio [data-color="blue"] {--bs-group:#437caa;--bs-group-wash:#e7f0f9}
#board-studio [data-color="teal"] {--bs-group:#387e77;--bs-group-wash:#e5f1ed}
#board-studio [data-color="amber"] {--bs-group:#996a2d;--bs-group-wash:#f8efdf}
#board-studio [data-color="rose"] {--bs-group:#aa607a;--bs-group-wash:#f7e9ee}
[data-theme="dark"] #board-studio [data-color] {--bs-group:#a3a0ae;--bs-group-wash:#302e37}
[data-theme="dark"] #board-studio [data-color="violet"] {--bs-group:#b4a0e6;--bs-group-wash:#342d45}
[data-theme="dark"] #board-studio [data-color="blue"] {--bs-group:#87b5dc;--bs-group-wash:#263746}
[data-theme="dark"] #board-studio [data-color="teal"] {--bs-group:#83bdb3;--bs-group-wash:#253c37}
[data-theme="dark"] #board-studio [data-color="amber"] {--bs-group:#d7b17c;--bs-group-wash:#413727}
[data-theme="dark"] #board-studio [data-color="rose"] {--bs-group:#daa0b4;--bs-group-wash:#432f38}
#board-studio *, #board-studio *::before, #board-studio *::after {box-sizing:border-box}
#board-studio [hidden] {display:none!important}
#board-studio button, #board-studio input, #board-studio textarea, #board-studio select {font:inherit;color:inherit}
#board-studio button {display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:7px;background:transparent;padding:7px 10px;cursor:pointer;white-space:nowrap}
#board-studio button:hover {background:var(--bs-soft)}
#board-studio button:focus-visible, #board-studio [tabindex]:focus-visible {outline:2px solid var(--bs-accent);outline-offset:3px}
#board-studio button:disabled {opacity:.4;cursor:default}
#board-studio svg {width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#board-studio .bs-icon {padding:7px;width:33px;height:33px}
#board-studio .bs-divider {width:1px;height:18px;background:var(--bs-line);margin:0 5px;flex:none}
#board-studio .bs-top {height:54px;position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:6px;padding:0 15px;background:var(--bs-panel);border-bottom:1px solid var(--bs-line);z-index:6}
#board-studio .bs-top-secondary {display:contents}
#board-studio .bs-brand {font-size:14px;font-weight:750;letter-spacing:-.05em;padding:0 7px}
#board-studio .bs-project {min-width:0;display:flex;align-items:center;gap:8px;flex:1}
#board-studio .bs-project-title {font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:36vw}
#board-studio .bs-subtle {color:var(--bs-muted);font-size:11px}
#board-studio .bs-pill {font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--bs-muted);padding:3px 7px;border:1px solid var(--bs-line);border-radius:5px}
#board-studio .bs-stage {position:absolute;inset:54px 0 0;overflow:hidden;touch-action:none;background-image:radial-gradient(var(--bs-line) .7px,transparent .7px);background-size:22px 22px;outline:none}
#board-studio .bs-world {position:absolute;left:0;top:0;transform-origin:0 0;width:0;height:0}
#board-studio .bs-tools {position:absolute;left:16px;top:78px;display:flex;flex-direction:column;gap:5px;padding:5px;background:var(--bs-panel);border:1px solid var(--bs-line);border-radius:10px;box-shadow:0 3px 12px #00000008;z-index:5}
#board-studio .bs-tools .bs-divider {height:1px;width:23px;margin:3px 5px}
#board-studio .bs-tools button[aria-pressed="true"] {color:var(--bs-accent);background:var(--bs-tint)}
#board-studio .bs-breadcrumb {position:absolute;left:77px;top:68px;display:flex;align-items:center;gap:2px;z-index:4;max-width:calc(100% - 110px);overflow:auto;background:var(--bs-bg);border-radius:7px}
#board-studio .bs-breadcrumb button {font-size:11px;padding:5px 8px;color:var(--bs-muted)}
#board-studio .bs-breadcrumb button:last-child {color:var(--bs-ink);font-weight:600}
#board-studio .bs-area {position:absolute;border:1px solid color-mix(in srgb,var(--bs-group) 38%,var(--bs-line));border-radius:12px;background:color-mix(in srgb,var(--bs-group-wash) 26%,transparent);pointer-events:none}
#board-studio .bs-area[data-active="true"] {border-color:var(--bs-group);background:color-mix(in srgb,var(--bs-group-wash) 42%,transparent)}
#board-studio .bs-area-header {position:absolute;left:16px;right:12px;top:10px;display:flex;align-items:center;gap:8px;pointer-events:auto;color:var(--bs-muted)}
#board-studio .bs-area-name {font-weight:650;letter-spacing:.01em;font-size:13px;padding:4px 6px;overflow:hidden;text-overflow:ellipsis;max-width:70%;color:var(--bs-ink)}
#board-studio .bs-area-name::before {content:'';width:7px;height:7px;border-radius:50%;background:var(--bs-group);flex:none}
#board-studio .bs-area-count {font-size:10px;opacity:.7;flex:1}
#board-studio .bs-area-header .bs-icon {width:28px;height:28px;opacity:.7}
#board-studio[data-organizing="true"] .bs-area {border-style:dashed}
#board-studio .bs-area-header .bs-area-move {cursor:grab;color:var(--bs-accent);background:var(--bs-panel);border:1px solid var(--bs-line);opacity:1;touch-action:none}
#board-studio .bs-group-dragging {opacity:.8}
#board-studio .bs-group-dragging .bs-area-move {cursor:grabbing}
#board-studio .bs-area.bs-drop-target {outline:2px solid var(--bs-accent);outline-offset:4px;background:color-mix(in srgb,var(--bs-group-wash) 60%,transparent)}
#board-studio .bc-port.bs-drop-target {outline:2px solid var(--bs-accent);outline-offset:4px;border-radius:50%}
#board-studio .bs-area-resize {position:absolute;right:-12px;bottom:-12px;width:24px;height:24px;padding:4px;pointer-events:auto;touch-action:none;cursor:nwse-resize;transform-origin:center;z-index:3;color:var(--bs-group);background:var(--bs-panel);border:1px solid var(--bs-line);border-radius:6px;box-shadow:0 2px 5px #0001}
#board-studio .bs-area-resize svg {width:14px;height:14px}
#board-studio .bs-area-resize:hover, #board-studio .bs-area-resize:focus-visible {border-color:var(--bs-group);background:var(--bs-group-wash)}
#board-studio .bs-area[data-parent-id=""] .bs-area-resize {z-index:4}
#board-studio .bs-area[data-active="true"] .bs-area-resize {z-index:5;border-color:var(--bs-group)}
#board-studio .bs-area-resize:focus-visible {z-index:6}
#board-studio .bs-area.bs-area-resizing {border-color:var(--bs-group);border-style:solid}
#board-studio .bs-card {position:absolute;border-radius:8px;background:var(--bs-panel);border:1px solid var(--bs-line);box-shadow:0 3px 8px #00000005;overflow:hidden;cursor:grab;user-select:none;touch-action:none;transition:box-shadow .15s}
#board-studio .bs-card:hover {box-shadow:0 6px 18px #00000014}
#board-studio .bs-card[aria-selected="true"] {outline:2px solid var(--bs-accent);outline-offset:3px}
#board-studio .bs-card.bs-dragging {cursor:grabbing;box-shadow:0 14px 35px #0003;z-index:4}
#board-studio .bs-card-top {padding:13px 15px 4px;display:flex;align-items:center;gap:8px;font-size:10px;color:var(--bs-muted);text-transform:uppercase;letter-spacing:.075em}
#board-studio .bs-card-top svg {width:13px;height:13px}
#board-studio .bs-card h3 {font-weight:600;font-size:15px;line-height:1.4;letter-spacing:-.02em;margin:6px 15px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#board-studio .bs-card p {margin:0 15px;color:var(--bs-muted);font-size:12px;line-height:1.65;white-space:pre-wrap;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow-wrap:anywhere}
#board-studio .bs-card-foot {position:absolute;inset:auto 15px 10px;color:var(--bs-muted);font-size:10px;display:flex;gap:6px;align-items:center}
#board-studio .bs-prompt-origin {border:0;background:none;color:var(--bs-muted);padding:0;font:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;cursor:pointer;max-width:100%}
#board-studio .bs-cost {font-variant-numeric:tabular-nums;color:var(--bs-accent);font-weight:600;letter-spacing:.02em}
#board-studio .bs-note {border-top:2px solid color-mix(in srgb,var(--bs-accent) 65%,var(--bs-line))}
#board-studio .bs-media img {display:block;width:100%;height:180px;object-fit:contain;background:var(--bs-soft);pointer-events:none}
#board-studio .bs-media > .bs-result-preview{height:180px;width:100%;position:relative}
#board-studio .bs-media h3 {font-size:12px;margin:9px 12px 2px}
#board-studio .bs-media .bs-card-top {position:absolute;top:8px;left:8px;padding:4px 6px;border-radius:4px;background:var(--bs-panel);font-size:9px}
#board-studio .bs-placeholder {height:112px;display:flex;align-items:center;justify-content:center;color:var(--bs-muted);background:var(--bs-soft);gap:8px;font-size:12px}
#board-studio .bs-placeholder svg {width:28px;height:28px;opacity:.5}
#board-studio .bs-bottom {position:absolute;bottom:14px;left:16px;right:16px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:end;z-index:5;pointer-events:none}
#board-studio .bs-tabs {display:flex;gap:3px;overflow:auto;max-width:100%;width:max-content;padding:4px;background:var(--bs-panel);border:1px solid var(--bs-line);border-radius:9px;pointer-events:auto;scrollbar-width:thin}
#board-studio .bs-tabs button {flex:none;font-size:11px;max-width:170px;overflow:hidden;text-overflow:ellipsis;display:block;padding:7px 11px}
#board-studio .bs-tabs button[aria-current="true"] {background:var(--bs-tint);color:var(--bs-accent)}
#board-studio .bs-tabs button[data-color]::before {content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bs-group);margin-right:7px;vertical-align:1px}
#board-studio .bs-tabs button[data-color][aria-current="true"] {color:var(--bs-ink);background:var(--bs-group-wash)}
#board-studio .bs-area-tabs {position:absolute;left:12px;bottom:12px;z-index:4;transform-origin:bottom left;overscroll-behavior:contain}
#board-studio .bs-area-tabs button {flex:none}
#board-studio .bs-view-controls {justify-self:end;display:flex;align-items:center;gap:3px;background:var(--bs-panel);border:1px solid var(--bs-line);padding:3px;border-radius:9px;pointer-events:auto}
#board-studio .bs-zoom {font-size:11px;min-width:44px;text-align:center;color:var(--bs-muted)}
#board-studio .bs-selection {position:absolute;top:70px;right:16px;display:flex;align-items:center;gap:3px;background:var(--bs-panel);border:1px solid var(--bs-line);border-radius:9px;padding:4px;z-index:5;box-shadow:0 3px 12px #0001}
#board-studio .bs-selection-title {max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 8px;font-size:11px}
#board-studio .bs-notice {position:absolute;left:80px;right:80px;bottom:72px;z-index:9;display:flex;justify-content:center;pointer-events:none}
#board-studio .bs-notice span {max-width:740px;padding:9px 16px;background:var(--bs-panel);border:1px solid var(--bs-line);border-radius:8px;font-size:12px;box-shadow:0 3px 16px #0001}
#board-studio .bs-drawer {position:absolute;right:16px;top:116px;bottom:76px;width:min(320px,calc(100vw - 100px));background:var(--bs-panel);border:1px solid var(--bs-line);border-radius:12px;box-shadow:0 10px 40px #0002;z-index:7;overflow:auto;padding:16px}
#board-studio .bs-drawer h2 {font-size:16px;margin:0 0 4px}
#board-studio .bs-drawer > p {font-size:12px;color:var(--bs-muted);margin:0 0 20px}
#board-studio .bs-drawer-row {display:flex;align-items:center;gap:8px;border-top:1px solid var(--bs-line);padding:12px 0}
#board-studio .bs-drawer-row span {flex:1;overflow:hidden;text-overflow:ellipsis;font-size:12px}
#board-studio .bs-work-card {display:grid;grid-template-columns:auto minmax(0,1fr) auto;width:100%;text-align:left;border-top:1px solid var(--bs-line);border-radius:0;padding:12px 2px;white-space:normal}
#board-studio .bs-work-copy {display:flex;min-width:0;flex-direction:column;gap:2px}
#board-studio .bs-work-copy strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
#board-studio .bs-work-copy small {color:var(--bs-muted);font-size:9px}
#board-studio .bs-work-state {padding:3px 6px;border-radius:5px;background:var(--bs-soft);color:var(--bs-muted);font-size:9px;text-transform:uppercase;letter-spacing:.04em}
#board-studio .bs-work-state[data-state="active"],#board-studio .bs-work-state[data-state="review"] {background:var(--bs-tint);color:var(--bs-accent)}
#board-studio .bs-work-state[data-state="blocked"] {background:var(--bs-danger-wash);color:var(--bs-danger-ink)}
#board-studio button.bs-work-state {border:0;cursor:pointer}
#board-studio .bs-with-work .bs-card-foot {bottom:52px}
#board-studio .bs-work-actions {position:absolute;left:12px;right:12px;bottom:10px;height:28px;display:flex;align-items:center;gap:6px}
#board-studio .bs-work-actions > button {min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#board-studio .bs-work-review {flex:none;border:1px solid var(--bs-line);border-radius:5px;padding:4px 7px;background:var(--bs-panel);color:var(--bs-ink);font-size:10px;cursor:pointer}
#board-studio .bs-dialog-shade {position:absolute;inset:0;z-index:20;background:#0005;display:grid;place-items:center;backdrop-filter:blur(3px)}
#board-studio .bs-dialog {width:min(520px,calc(100% - 40px));max-height:85vh;overflow:auto;border-radius:14px;background:var(--bs-panel);border:1px solid var(--bs-line);box-shadow:0 24px 90px #0004;padding:24px}
#board-studio .bs-dialog h2 {font-size:20px;font-weight:600;margin:0 0 18px;letter-spacing:-.03em}
#board-studio .bs-dialog label {display:block;font-size:11px;color:var(--bs-muted);margin:14px 0 6px}
#board-studio .bs-dialog input, #board-studio .bs-dialog textarea, #board-studio .bs-dialog select {display:block;width:100%;border:1px solid var(--bs-line);background:var(--bs-bg);border-radius:7px;padding:10px;outline:none}
#board-studio .bs-dialog input:focus, #board-studio .bs-dialog textarea:focus, #board-studio .bs-dialog select:focus {border-color:var(--bs-accent)}
#board-studio .bs-dialog textarea {min-height:170px;resize:vertical;line-height:1.6}
#board-studio .bs-field-label {font-size:11px;color:var(--bs-muted);margin:14px 0 8px}
#board-studio .bs-color-picker {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
#board-studio .bs-color-choice {flex-direction:column;gap:6px;padding:9px 2px;font-size:10px;color:var(--bs-muted)}
#board-studio .bs-color-dot {width:22px;height:22px;border-radius:50%;background:var(--bs-group);border:3px solid var(--bs-group-wash)}
#board-studio .bs-color-choice[aria-checked="true"] {border-color:var(--bs-group);background:var(--bs-group-wash);color:var(--bs-ink)}
#board-studio .bs-dialog footer {display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
#board-studio .bs-primary {background:var(--bs-ink);color:var(--bs-panel)}
#board-studio .bs-primary:hover {background:var(--bs-muted)}
#board-studio .bs-dialog-error {font-size:12px;color:#d57373;white-space:pre-wrap;margin-top:12px}
#board-studio .bs-image-view {width:min(1100px,calc(100% - 80px))}
#board-studio .bs-image-view img {display:block;width:100%;max-height:60vh;object-fit:contain;background:var(--bs-bg);border-radius:7px}
#board-studio .bs-welcome {position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);width:min(440px,75vw);text-align:center}
#board-studio .bs-welcome h1 {font-size:28px;font-weight:500;letter-spacing:-.055em;margin:12px 0}
#board-studio .bs-welcome p {color:var(--bs-muted);font-size:13px;margin-bottom:22px}
#board-studio .bs-welcome-actions {display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
#board-studio .bs-welcome-actions button {border-color:var(--bs-line);background:var(--bs-panel)}
#board-studio .bs-drop {position:absolute;inset:68px 70px 76px;z-index:15;border:2px dashed var(--bs-accent);border-radius:16px;background:var(--bs-tint);display:grid;place-items:center;font-size:20px;pointer-events:none}
body:has(#board-studio) #manager-board-status {display:none!important}
body:has(#board-studio) {overflow:hidden}
@media(max-width:760px) {
  #board-studio .bs-top {padding:0 8px;gap:2px}
  #board-studio .bs-top .bs-brand,#board-studio .bs-top>.bs-divider,#board-studio .bs-top-secondary {display:none}
  #board-studio .bs-top>button:not(.bs-icon) {font-size:0;gap:0;width:30px;height:33px;padding:6px}
  #board-studio .bs-top>.bs-icon {width:30px;flex:none;padding:6px}
  #board-studio .bs-project-title {max-width:none}
  #board-studio .bs-top .bs-optional, #board-studio .bs-pill {display:none}
  #board-studio .bs-tools {left:9px}
  #board-studio .bs-breadcrumb {left:65px}
  #board-studio .bs-bottom {left:9px;right:9px;grid-template-columns:minmax(0,1fr) auto;gap:5px}
  #board-studio .bs-bottom-space {display:none}
  #board-studio .bs-view-controls {gap:0}
  #board-studio .bs-view-controls .bs-icon,#board-studio .bs-index-trigger {width:28px;height:30px;padding:5px}
  #board-studio .bs-index-trigger {font-size:0;gap:0}
  #board-studio .bs-zoom {min-width:32px;font-size:10px}
  #board-studio .bs-view-controls .bs-optional {display:none}
  #board-studio .bs-selection-title {max-width:100px}
  #board-studio .bs-selection {top:104px;right:9px;max-width:calc(100% - 78px)}
}
@media(prefers-reduced-motion:reduce) {#board-studio * {transition:none!important}}
/* Overview stays at screen scale; entering a leaf returns to its real canvas. */
#board-studio .bs-group-index{position:absolute;inset:112px 28px 76px 76px;z-index:4;background:var(--bs-bg);padding:22px;overflow:auto;border:1px solid var(--bs-line);border-radius:12px;color:var(--bs-ink)}
#board-studio .bs-group-index header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
#board-studio .bs-group-index h2{font-size:18px;margin:0}
#board-studio .bs-group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:16px}
#board-studio .bs-group-index .bs-group-grid button.bs-group-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;white-space:normal;gap:12px;background:var(--bs-panel);color:var(--bs-ink);border:1px solid var(--bs-line);border-radius:10px;padding:20px;min-height:125px;min-width:0;font:inherit;cursor:pointer;overflow-wrap:anywhere}
#board-studio .bs-group-card strong{font-size:16px}.bs-group-card span,.bs-group-card p{font-size:12px;line-height:1.5;margin:0;color:var(--bs-muted)}
#board-studio .bs-group-card:hover{border-color:var(--bs-accent)}
@media(max-width:600px){#board-studio .bs-group-index{inset:108px 12px 84px 64px;padding:12px}#board-studio .bs-group-grid{grid-template-columns:1fr}}
/* Distant canvas navigation shows one hierarchy level; editing controls return on zoom. */
#board-studio[data-zoom-overview="true"] .bs-area-tabs,
#board-studio[data-zoom-overview="true"] .bc-ports,
#board-studio[data-zoom-overview="true"] .bs-area-header{visibility:hidden}
#board-studio[data-zoom-overview="true"] .bs-area[data-overview-primary="true"] .bs-area-header{visibility:visible;z-index:6}
#board-studio[data-zoom-overview="true"] .bs-area-header .bs-icon:not(.bs-area-expand),
#board-studio[data-zoom-overview="true"] .bs-area-header .bs-area-count{display:none}
#board-studio[data-zoom-overview="true"] .bs-area-name{max-width:calc(100% - 36px);background:var(--bs-panel);border-radius:4px}