/* ==========================================================================
   Application shell. Owns layout tokens and shell geometry only.
   Theme colours and component primitives live in main.css; feature-specific
   styling lives in features.css.

   Hierarchy:  1 Tokens  2 App bar  3 Tool rail  4 Context bar  5 Canvas
               6 Inspector  7 Bottom bar + status  8 Shared control states
               9 Breakpoints
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root{
  --h-topbar:44px;--h-doctabs:0px;--h-toolopts:36px;--w-toolbar:52px;--w-rightpanel:288px;
  --h-statusbar:26px;--h-widgetrow:32px;--h-swatchstrip:28px;
  --icon-size:18px;--text-xs:11px;--text-sm:12px;--text-md:12px;--text-lg:13px;
  --radius-sm:4px;--radius-md:6px;--radius-lg:8px;--tracking-label:0;--weight-value:500;
  --control-height:28px;
  /* One z-index scale. Anything above --z-modal must be transient (tooltip, toast). */
  --z-popover:50;--z-inline:70;--z-context:80;--z-panel:90;--z-mobile:400;--z-menu:500;
  --z-flyout:700;--z-drawer:900;--z-modal:1000;--z-toast:2000;--z-tooltip:2500;--z-onboarding:3000;
  --accent-line:var(--accent);--guide-line:var(--accent);--node-stroke:var(--accent);--handle-stroke:var(--accent);
}
:root[data-canvas-bg="light"]{--canvas-bg:#e8e8e8}
:root[data-canvas-bg="dark"]{--canvas-bg:#101113}
:root[data-canvas-bg="neutral"]{--canvas-bg:#808080}
#doctabs{display:none}
[hidden]{display:none!important}

/* ---- 2. Application bar ------------------------------------------------- */
#topbar{height:var(--h-topbar);padding:0 10px;gap:4px;background:var(--bg-panel);border-bottom:1px solid var(--border)}
#logo{display:flex;align-items:center;gap:9px;min-width:0;padding:0 10px 0 0;border:0;font-size:14px;flex-shrink:0}
#logo .brand-mark{display:block;flex:0 0 24px;width:24px;height:26px;color:var(--text)}
#logo .brand-copy{display:flex;flex-direction:column;gap:2px;line-height:1.15}
#logo .brand-release{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--accent)}
#logo .brand-version{font-size:9px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-faint);font-variant-numeric:tabular-nums}
#logo .brand-name{font-size:14px;letter-spacing:-.02em;white-space:nowrap}

#menus{display:flex;flex:0 1 auto;min-width:0}
.menu-item{height:30px;padding:0 8px;display:flex;align-items:center;font-size:12px;white-space:nowrap;color:var(--text-dim)}
.menu-item:hover{background:var(--hover);color:var(--text)}
.menu-dropdown{padding:4px;border-radius:var(--radius-md);z-index:var(--z-menu)}
.menu-row{padding:7px 9px}

/* Document identity: name + save state, centred in the free space. */
#doc-info{display:flex;align-items:center;gap:6px;margin:0 auto;min-width:0;padding:0 8px}
#doc-name{min-width:0;max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;color:var(--text)}
#doc-name:empty{display:none}
#doc-name{padding:3px 6px;border-radius:var(--radius-sm);cursor:text}
#doc-name:hover{background:var(--hover)}
#doc-name input{width:24ch;max-width:100%;height:24px;min-height:24px;padding:0 6px;font:inherit;color:var(--text);background:var(--bg-input);border:1px solid var(--accent);border-radius:var(--radius-sm)}
#save-status{margin:0;background:transparent;border:0;box-shadow:none;color:var(--text-dim);font-size:11px;padding:0 4px;white-space:nowrap}

/* Right cluster: explicit order so injected controls always land in the same slot. */
#topbar-right{display:flex;align-items:center;gap:2px;margin-left:0;flex-shrink:0}
#topbar-right>.home-workspace-button{order:0;width:auto;padding:0 8px;font-size:12px;color:var(--text-dim)}
#btn-undo{order:1;margin-left:6px}#btn-redo{order:2}
#topbar-right>.workspace-lock-button{order:3}
#btn-theme{order:4}
#topbar-right>.beta-bar{order:5}
#btn-export{order:6}
.tb-btn{width:28px;height:28px;min-width:28px;border-radius:var(--radius-sm)}
.tb-btn:hover{background:var(--hover)}
.tb-btn svg{width:var(--icon-size);height:var(--icon-size)}
#btn-export{height:28px;padding:0 11px;gap:6px;margin-left:6px;display:flex;align-items:center;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent);color:var(--on-accent);font-weight:600}
#btn-export:hover{background:var(--accent-hover)}

/* Campaign chip: the full-width banner is reduced to one quiet action in the app bar.
   The element (and its button) stays in the DOM for the account/sign-in flows that click it. */
#topbar .beta-bar{min-height:0;padding:0;margin:0 0 0 6px;gap:0;background:none;border:0}
#topbar .beta-label,#topbar .beta-clock,#topbar .beta-bar-offer{display:none}
#topbar .beta-bar .btn{height:28px;min-height:28px;padding:0 10px;font-size:12px;background:transparent;border:1px solid var(--border-strong);color:var(--text-dim)}
#topbar .beta-bar .btn:hover{background:var(--hover);color:var(--text)}

/* ---- 3. Tool rail ------------------------------------------------------- */
#lefttoolbar{width:var(--w-toolbar);padding:7px 0;gap:2px;background:var(--bg-panel);border-right:1px solid var(--border)}
.tool-btn{width:36px;height:36px;border-radius:var(--radius-md)}
.tool-btn svg{width:var(--icon-size);height:var(--icon-size)}
.tool-btn.active{background:var(--accent-subtle);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-border)}
.tool-sep{width:24px;margin:5px 0;background:var(--border)}

/* ---- 4. Context bar (tool options) -------------------------------------- */
#toolopts{height:var(--h-toolopts);padding:0 12px;gap:12px;background:var(--bg-panel);border-bottom:1px solid var(--border);overflow-x:auto}
#toolopts .opt-group{flex-shrink:0;gap:6px;padding-right:10px;border-right:1px solid var(--border-soft)}
#toolopts input,#toolopts select{height:var(--control-height);background:var(--bg-input)}
#toolopts input[type=number]{min-width:68px}
#toolopts .artboard-clip-btn,#toolopts .boolean-btn{width:auto;min-width:max-content;padding:4px 8px;gap:6px;flex-shrink:0}
.opt-group label{color:var(--text-dim)}

/* ---- 5. Canvas ---------------------------------------------------------- */
#ruler-h,#ruler-v,#corner{background:var(--bg-app)}
.ruler-tick{color:var(--text-faint)}
/* Camera-sized SVG: document extents never constrain the workspace. */
#viewport{overflow:hidden}
#viewport #stage{position:absolute;inset:0;margin:0;width:100%;height:100%}
/* Tool cursors are set per-tool via a custom property. !important is required to beat
   the inline cursor styles tools apply to SVG nodes. */
#viewport[data-cursor],#viewport[data-cursor] svg,#viewport[data-cursor] svg *{cursor:var(--tool-cursor)!important}
#boolean-context-toolbar{position:absolute;z-index:var(--z-context);display:flex;gap:3px;padding:4px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
.boolean-context-action{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:var(--radius-sm);color:var(--text);background:transparent}
.boolean-context-action:hover,.boolean-context-action:focus-visible{background:var(--accent);color:var(--on-accent);outline:0}
.boolean-context-action svg{width:17px;height:17px}

/* ---- 6. Inspector ------------------------------------------------------- */
#rightpanel{width:var(--w-rightpanel);background:var(--bg-panel);border-left:1px solid var(--border)}
.inspector-tabs{display:flex;position:sticky;top:0;z-index:3;height:40px;padding:0 12px;flex-shrink:0;background:var(--bg-panel);border-bottom:1px solid var(--border)}
.inspector-tab{height:40px;flex:1;font-size:12px;text-transform:none;letter-spacing:0;color:var(--text-dim);border-bottom:2px solid transparent}
.inspector-tab:hover{color:var(--text);background:var(--hover)}
.inspector-tab[aria-pressed=true]{color:var(--text);border-bottom-color:var(--accent)}
.panel-section{flex-shrink:0;border-bottom:1px solid var(--border-soft)}
.panel-header{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;color:var(--text);padding:12px 16px}
.panel-header .chev{order:-1;width:12px;margin-right:6px;text-align:center;color:var(--text-faint)}
.panel-body{padding:0 16px 14px;gap:10px}
.row label,.field label{text-transform:none;letter-spacing:0;color:var(--text-dim)}
.row label{width:auto;min-width:16px}
.row input[type=number]{padding-left:5px;padding-right:3px;min-width:50px}
.field input{min-width:0;width:100%}
.workspace-empty{padding:18px 0;color:var(--text-dim);line-height:1.6}
.workspace-empty .icon{width:26px;height:26px;color:var(--text-faint);margin-bottom:12px}
.workspace-empty strong{display:block;color:var(--text);font-weight:500;margin-bottom:4px}
.workspace-empty p{margin:0;font-size:12px}
#layerlist{max-height:none;gap:2px}
.layer-row{min-height:32px;border-radius:var(--radius-sm)}
.layer-row.selected{background:var(--accent-subtle);box-shadow:inset 2px 0 var(--accent)}
.layer-row .lname{order:2;font-size:12px}
.layer-row button[data-act]{order:3}
.layer-row .layer-thumb{color:var(--text-dim)}
.layer-row button[data-act=del]{opacity:0}
.layer-row:hover button[data-act=del],.layer-row:focus-within button[data-act=del]{opacity:1}
/* Floating / dockable panels */
#rightpanel .workspace-panel-header{cursor:grab}
.workspace-locked #rightpanel .workspace-panel-header{cursor:default}
.workspace-panel-header:active{cursor:grabbing}
.workspace-panel-menu{margin-left:auto;width:22px;height:22px;border-radius:var(--radius-sm);color:var(--text-dim);font-size:16px;line-height:1}
.workspace-panel-menu:hover{background:var(--hover);color:var(--text)}
.workspace-floating{max-width:calc(100vw - 12px);max-height:calc(100vh - 60px);background:var(--bg-panel);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:auto;resize:both;min-width:220px;min-height:160px}
.workspace-dragging{opacity:.82}
.workspace-panel-popup{position:fixed;z-index:var(--z-menu);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:4px;box-shadow:var(--shadow-md)}
.workspace-panel-popup button{display:block;width:150px;text-align:left;padding:7px 9px;border-radius:var(--radius-sm);color:var(--text-dim)}
.workspace-panel-popup button:hover{background:var(--hover);color:var(--text)}

/* ---- 7. Bottom bar + status bar ----------------------------------------- */
/* Three separate rows, top to bottom: #bottom-color-controls (widgets) > #swatchstrip (palette) > #statusbar.
   #canvas-colors stacks the first two in a column; widgets and swatches never share a row. */
#bottom-color-controls .btn{display:inline-flex;align-items:center;white-space:nowrap}
#bottom-color-controls .btn svg{width:14px;height:14px;flex-shrink:0}
#bottom-color-controls #workspace-units{margin-left:auto}
#bottom-color-controls .btn[aria-pressed=true]{background:var(--accent-subtle);color:var(--accent)}
#swatchstrip{overflow:hidden}
#swatch-scroll{overflow-x:auto;overflow-y:hidden;min-width:0}
#swatchstrip{height:var(--h-swatchstrip);padding-left:12px;background:var(--bg-panel)}
#statusbar{height:var(--h-statusbar);padding:0 10px;gap:14px;font-size:11px;color:var(--text-faint);background:var(--bg-app)}
#st-pos{font-variant-numeric:tabular-nums}
#st-hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* View controls live where the eye already looks for view state. */
#status-tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
#zoom-group{display:flex;align-items:center}
#statusbar .tb-btn{width:22px;height:22px;min-width:22px}
#statusbar .tb-btn svg{width:14px;height:14px}
#zoom-readout{width:44px;text-align:center;font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-dim)}
#statusbar select{height:22px;min-height:22px;padding:0 20px 0 6px;font-size:11px;background-color:transparent;border:1px solid transparent;color:var(--text-dim)}
#statusbar select:hover{border-color:var(--border-strong);color:var(--text)}
.status-link{height:22px;padding:0 6px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;border-radius:var(--radius-sm);color:var(--text-dim)}
.status-link:hover{background:var(--hover);color:var(--text)}
.swatch-chip{border-radius:2px}

/* ---- 8. Shared control states ------------------------------------------- */
input:not([type=checkbox]):not([type=range]):not([type=color]),select{min-height:var(--control-height);border:1px solid transparent;border-radius:var(--radius-sm);padding:4px 8px;font-variant-numeric:tabular-nums}
input:hover,select:hover{border-color:var(--border-strong)}
input:focus,select:focus{border-color:var(--accent)}
input[type=checkbox],input[type=range]{accent-color:var(--accent)}
.btn{min-height:var(--control-height);border-radius:var(--radius-sm);box-shadow:none}
.btn-primary,.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent-border);box-shadow:none}
.icon-btn{width:var(--control-height);height:var(--control-height);border-color:transparent;background:var(--bg-input)}
.grid7{grid-template-columns:repeat(7,minmax(0,1fr))}
.grid7 .icon-btn{width:100%}
.seg button{min-height:var(--control-height)}
.fill-type-btns button{min-height:26px;font-size:11px}
.seg button[aria-pressed=true],.icon-btn.active,.fill-type-btns button.active{background:var(--accent-subtle);color:var(--accent);border-color:var(--accent-border)}
button{transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
button:disabled,.disabled{opacity:.4;cursor:default}
button:active:not(:disabled){filter:brightness(.93)}
:where(button,[role=button],a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.modal{border-radius:10px;overflow:hidden}
.modal-header{padding:16px 20px}
.modal-body{padding:18px 20px;gap:14px}
.modal-footer{padding:12px 20px}
.proj-item{padding:12px}
.toast{border-radius:6px;box-shadow:var(--shadow-md)}

/* Inspector resize handle (desktop only) and hide-panels mode */
#panel-resizer{flex:0 0 4px;margin:0 -2px;position:relative;z-index:var(--z-context);cursor:col-resize;background:transparent;touch-action:none}
#panel-resizer:hover,#panel-resizer.dragging,#panel-resizer:focus-visible{background:var(--accent);opacity:.6}
.panels-hidden #lefttoolbar,.panels-hidden #rightpanel,.panels-hidden #toolopts,.panels-hidden #panel-resizer{display:none}
@media(max-width:1199px){#panel-resizer{display:none}}

/* ---- 9. Breakpoints ----------------------------------------------------- */
/* Tablet: menus drop to their own row; hit targets grow. */
@media(min-width:768px) and (max-width:1199px){
  :root{--w-rightpanel:264px;--w-toolbar:56px}
  #logo small,#doc-name{display:none}
  #topbar{flex-wrap:wrap;height:auto;min-height:var(--h-topbar)}
  #doc-info{margin-left:auto}
  #menus{order:3;width:100%;border-top:1px solid var(--border-soft)}
  .tool-btn{width:44px;height:44px}
  .inspector-tab{height:44px}
  .tb-btn{min-width:36px}
  #statusbar .tb-btn{min-width:28px;width:28px;height:24px}
  .icon-btn{min-width:0}
  #rightpanel input,#rightpanel select{min-height:36px}
}
/* Phone: bottom tool strip + inspector sheet; view controls join the app bar (see workspace.js). */
@media(max-width:767px){
  :root{--h-doctabs:38px;--h-toolopts:44px}
  #logo,#doc-name,#topbar .beta-bar{display:none}
  #doc-info{margin:0 auto 0 0;padding:0 4px}
  #topbar{height:auto;min-height:var(--h-topbar);padding:4px 8px;gap:0;flex-wrap:wrap}
  #topbar-right{flex:1;justify-content:flex-end;gap:0}
  #topbar-right .tb-btn{min-width:36px;width:36px;min-height:44px}
  #topbar-right>#status-tools{order:3;gap:0}
  #topbar-right #zoom-readout{width:42px}
  #topbar-right #workspace-units{width:56px}
  #topbar-right .status-link{display:none}
  #btn-zoom-fit,#btn-theme{display:none}
  #btn-export{height:36px;margin-left:4px;padding:0 9px}
  #btn-export .icon{display:none}
  #menus{order:9;flex:0 0 100%;overflow-x:auto;min-height:40px;border-top:1px solid var(--border-soft)}
  .menu-item{position:static;flex-shrink:0;padding:12px 9px}
  .menu-dropdown{position:fixed;left:8px;top:90px;max-height:65dvh;overflow:auto}
  .menu-row{min-height:44px}
  #doctabs{padding-left:0}
  #toolopts{padding:0 10px}
  #toolopts .icon-btn{flex-shrink:0;width:auto;min-width:36px}
  /* 58px tool strip + 20px collapsed inspector handle: keep both clear of the widget and palette rows. */
  #main{padding-bottom:calc(80px + var(--safe-b))}
  #mobile-bottom-toolbar{gap:0;justify-content:space-around;padding:4px 0 calc(4px + var(--safe-b))}
  #mobile-bottom-toolbar .mbt-btn{min-width:44px;flex:1}
  #mobile-bottom-toolbar .mbt-btn.active{color:var(--accent);background:var(--accent-subtle)}
  /* Collapsed inspector sheet stays out of the tool hit area. */
  :root[data-breakpoint="mobile"] #rightpanel{bottom:calc(58px + var(--safe-b));max-height:65dvh;transform:none;height:20px;min-height:0;overflow:hidden}
  :root[data-breakpoint="mobile"] #rightpanel.sheet-open{height:auto;max-height:65dvh;overflow-y:auto}
  .sheet-handle{flex-shrink:0;min-height:20px}
  .inspector-tab{height:44px}
  .panel-body{padding:0 16px 16px}
  .icon-btn{min-width:0}
  .modal{min-width:0;max-width:100vw;display:flex;flex-direction:column;border-radius:0}
  #onboard .modal{width:100vw}
  .layer-row button{width:32px;height:40px}
  .layer-row button[data-act=del]{opacity:1}
  /* State is carried by the dot; the label stays available to screen readers. */
  #save-status-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #save-status{padding:0 8px}
  #bottom-color-controls{height:40px;padding:0 8px}
  #bottom-color-controls .btn{min-height:32px}
}
/* Narrow phones: the units selector joins the bottom utility row (see workspace.js). */
#bottom-color-controls #workspace-units{height:24px;min-height:24px;width:auto;padding:0 20px 0 8px;font-size:11px;background-color:transparent;border:1px solid var(--border-soft);color:var(--text-dim)}