/* Edit.html — editor styles
   Mono workshop look: monospace type, square corners, one acid accent.
   Everything is built from the tokens below: colours, a 4px spacing
   scale, three text sizes and two control heights.

   1. Tokens and base      6. Properties panel
   2. Controls             7. Colour chips and theme
   3. Layout and panels    8. Menus, command bar, tooltip, toast
   4. Stage and overlays   9. Dialogs and export
   5. Canvas toolbar      10. Helpers
*/

/* ── 1. Tokens and base ─────────────────────────────────── */
:root{
  /* colour */
  --ui-bg:#0E0E0E; --ui-panel:#171717; --ui-raised:#1C1C1C; --ui-field:#1F1F1F;
  --ui-line:#2A2A2A; --ui-line-soft:#212121; --ui-line-strong:#333; --ui-line-hover:#3A3A3A;
  --ui-text:#EDEDEA;
  --ui-black:#000;       /* fill for secondary buttons */
  --ui-dim:#8A8A85;      /* labels, secondary text: 5.2:1 on the panel */
  --ui-faint:#5C5C58;    /* decoration only: twisties, separators, disabled */
  --ui-accent:#D6FF3F; --ui-accent-hi:#E4FF6E; --ui-accent-ink:#0E0E0E; --ui-accent-bg:#1C1C18;
  --ui-stage:#0E0E0E; --ui-grid:#1B1B1B;
  --ui-danger:#FF6B5B; --ui-danger-dim:#A0554F; --ui-danger-line:#5A2A30;
  --ui-shadow:0 12px 32px rgba(0,0,0,.6);
  --ui-shadow-lg:0 24px 64px rgba(0,0,0,.6);

  /* spacing: 4px steps */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;

  /* type */
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-label:10px;   /* uppercase labels */
  --fs:12px;         /* text, values, buttons */
  --fs-title:13px;   /* brand, command input */

  /* control heights */
  --h:28px;
  --h-sm:24px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--ui-bg);color:var(--ui-text);font:var(--fs)/1.5 var(--mono);
  display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0;font:inherit}
::selection{background:var(--ui-accent);color:var(--ui-accent-ink)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#262626}
::-webkit-scrollbar-thumb:hover{background:var(--ui-line-strong)}
::-webkit-scrollbar-track{background:transparent}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
kbd{font:inherit;font-size:var(--fs-label);letter-spacing:.04em;color:var(--ui-dim)}
.icon{width:16px;height:16px;display:block;flex:0 0 auto}

/* one keyboard focus ring everywhere */
:focus{outline:none}
:focus-visible{outline:2px solid var(--ui-accent);outline-offset:1px}

/* ── 2. Controls ────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:var(--h);padding:0 var(--s3);background:var(--ui-black);border:1px solid var(--ui-line);
  border-radius:0;color:var(--ui-dim);white-space:nowrap;letter-spacing:.02em;
  transition:color .12s,border-color .12s,background .12s}
.btn:hover{color:var(--ui-text);border-color:var(--ui-line-hover);background:var(--ui-line-soft)}
.btn:disabled{opacity:.35;cursor:default}
.btn:disabled:hover{color:var(--ui-dim);border-color:var(--ui-line);background:var(--ui-black)}
.btn.on,.btn.go{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-ink)}
.btn.go{font-weight:500}
.btn.go:hover{background:var(--ui-accent-hi);border-color:var(--ui-accent-hi);color:var(--ui-accent-ink)}
.btn.sm{height:var(--h-sm);padding:0 var(--s2);gap:var(--s1)}
.pbody .acts .btn{flex:1}
.btn.sm .icon{width:14px;height:14px}
.icon-btn{width:var(--h);padding:0;flex:0 0 var(--h)}
.btn.danger{color:var(--ui-danger-dim)}
.btn.danger:hover{color:var(--ui-danger);border-color:var(--ui-danger-line)}

/* text fields */
.field,.f input,.f select,.ic-input>input,.psearch input,.optrow input[type=number],
.modbody input[type=text],#right select,.modbody select{
  height:var(--h-sm);min-width:0;width:100%;padding:0 var(--s2);
  background:var(--ui-field);border:1px solid var(--ui-line);border-radius:0;color:var(--ui-text);
  font-variant-numeric:tabular-nums}
.modbody input[type=text],.modbody select,.optrow input[type=number]{height:var(--h)}
input::placeholder{color:var(--ui-dim)}
#right input:focus,#right select:focus,.modbody input:focus,.modbody select:focus{
  outline:1px solid var(--ui-accent);outline-offset:0;border-color:var(--ui-accent)}

/* dropdowns */
#right select,.modbody select{-webkit-appearance:none;appearance:none;padding-right:var(--s6);
  background-image:linear-gradient(45deg,transparent 50%,var(--ui-dim) 50%),
    linear-gradient(135deg,var(--ui-dim) 50%,transparent 50%);
  background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
#right select option,.modbody select option{background:var(--ui-panel);color:var(--ui-text)}

/* number fields without spinners */
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

input[type=color]{height:var(--h-sm);padding:1px;background:var(--ui-field);border:1px solid var(--ui-line);cursor:pointer}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:var(--s6);background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--ui-line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-5px;
  background:var(--ui-accent);border:0;cursor:pointer}

/* segmented buttons */
.seg,.seg3,.iconseg{display:flex;gap:2px}
.seg button,.seg3 button,.iconseg button{flex:1;display:flex;align-items:center;justify-content:center;
  background:var(--ui-field);border:1px solid var(--ui-line);border-radius:0;color:var(--ui-dim)}
.seg button{height:var(--h)}
.seg3{margin-top:var(--s1)}
.seg3 button{height:20px;font-size:var(--fs-label)}
.iconseg button{height:var(--h)}
.iconseg button:disabled{opacity:.35;cursor:default}
.seg button:hover,.seg3 button:hover,.iconseg button:hover{color:var(--ui-text)}
.seg button.on,.seg3 button.on,.iconseg button.on{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-ink)}

/* small uppercase labels */
.label,.f label,.sect>h2,.phead,.modhead h2,.modbody label.lbl,.cpop .lbl,.cmd .grp{
  font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ui-dim);font-weight:500}

/* ── 3. Layout and panels ───────────────────────────────── */
#bar{flex:0 0 40px;display:flex;align-items:center;gap:var(--s1);padding:0 var(--s2);
  background:var(--ui-panel);border-bottom:1px solid var(--ui-line)}
#bar .brand{display:flex;align-items:center;gap:var(--s2);margin-right:var(--s3);white-space:nowrap;
  font-weight:600;font-size:var(--fs-title);letter-spacing:-.03em}
#bar .brand svg{display:block;flex:0 0 auto}
#bar .brand i,#empty .word i{font-style:normal;color:var(--ui-dim)}
#bar .file{color:var(--ui-dim);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bar .file::before{content:"/ ";color:var(--ui-faint)}
#bar .file b{color:var(--ui-text);font-weight:400}
.save-state{margin-left:var(--s2);font-size:var(--fs-label);letter-spacing:.06em;color:var(--ui-dim);white-space:nowrap}
.save-state::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;vertical-align:1px;background:currentColor}
.save-state:empty{display:none}
.save-state.dirty{color:var(--ui-accent)}
.save-state.failed{color:var(--ui-danger)}
.chip-warn{display:inline-flex;align-items:center;gap:var(--s1);margin-left:var(--s2);padding:0;background:none;border:0;
  font-size:var(--fs-label);letter-spacing:.06em;color:var(--ui-accent);white-space:nowrap}
.chip-warn .icon{width:14px;height:14px}
.chip-warn:hover{text-decoration:underline}
#bar .grow,.modfoot .grow{margin-right:auto}
.sp{width:1px;height:var(--s4);background:var(--ui-line);margin:0 var(--s1)}
.btn.search{min-width:200px;justify-content:flex-start;background:var(--ui-field);color:var(--ui-dim)}
.btn.search .icon{width:14px;height:14px}
.btn.search kbd{margin-left:auto}
.btn.search:hover{color:var(--ui-text)}

#main{flex:1;display:flex;min-height:0}
aside{background:var(--ui-panel);display:flex;flex-direction:column;min-height:0;flex:0 0 auto}
#left{width:240px;border-right:1px solid var(--ui-line)}
#right{width:280px;border-left:1px solid var(--ui-line);overflow-y:auto}

/* collapsible groups in the left panel */
.pgroup{display:flex;flex-direction:column;min-height:0;border-bottom:1px solid var(--ui-line)}
.pgroup.grow{flex:1}
.pgroup.shut{flex:0 0 auto}
.pgroup.shut .pbody{display:none}
.phead button,.sect>h2 .fold{display:flex;align-items:center;gap:6px;flex:1;width:100%;min-width:0;
  background:none;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left}
.phead button{padding:var(--s3)}
.phead button:hover,.sect>h2 .fold:hover{color:var(--ui-text)}
.tw,.sec-tw{color:var(--ui-faint);display:inline-flex;transition:transform .12s}
.tw .icon,.sec-tw .icon{width:12px;height:12px}
.pgroup.shut .phead .tw,.sect.collapsed .sec-tw{transform:rotate(-90deg)}
.pbody{display:flex;flex-direction:column;min-height:0;padding:0 var(--s2) var(--s2)}
#gFiles .pbody{max-height:36vh}
#gVersions .pbody{max-height:30vh;overflow-y:auto}
.row .meta{margin-left:auto;color:var(--ui-faint);font-size:var(--fs-label)}
.pad-8{padding:var(--s2)}
#files,#layers{overflow-y:auto}
#files{flex:1;min-height:60px;margin-top:var(--s1)}
#layers{flex:1;min-height:80px;position:relative}
#layersInner{position:relative}
#layersInner .lyr{position:absolute;left:0;right:0}
.acts{display:flex;flex-wrap:wrap;gap:var(--s1)}
.hint.path{margin-top:var(--s2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* file rows and layer rows */
.row,.lyr{display:flex;align-items:center;gap:6px;height:var(--h-sm);padding:0 var(--s2);
  white-space:nowrap;cursor:pointer;color:var(--ui-dim);overflow:hidden}
.row>span:last-child,.lyr .tg{overflow:hidden;text-overflow:ellipsis}
.lyr{user-select:none}
.row:hover,.lyr:hover{background:var(--ui-line-soft);color:var(--ui-text)}
.row.on,.lyr.on{background:var(--ui-accent-bg);color:var(--ui-accent);box-shadow:inset 2px 0 0 var(--ui-accent)}
.row .ic{color:var(--ui-faint);display:inline-flex}
.row .ic .icon{width:14px;height:14px}
.row.on .ic{color:var(--ui-accent)}
.lyr .tw{width:12px;flex:0 0 12px}
.lyr .tw.closed{transform:rotate(-90deg)}
.lyr .kind{display:inline-flex;color:var(--ui-faint)}
.lyr .kind .icon{width:12px;height:12px}
.lyr.on .kind{color:var(--ui-accent)}
.lyr .tg{flex:1;min-width:0}
.lyr.main{background:var(--ui-accent-bg)}
.lyr.on:not(.main){background:transparent;box-shadow:inset 2px 0 0 var(--ui-accent)}
.lyr.is-hidden .tg,.lyr.is-hidden .kind{opacity:.4}
.lyr-tools{display:flex;gap:2px;margin-left:auto}
.lyr-btn{display:none;align-items:center;justify-content:center;width:20px;height:20px;padding:0;
  background:none;border:0;color:var(--ui-dim)}
.lyr-btn .icon{width:12px;height:12px}
.lyr-btn:hover{color:var(--ui-text)}
.lyr:hover .lyr-btn,.lyr-btn.on,.lyr-btn:focus-visible{display:inline-flex}
.lyr-btn.on{color:var(--ui-accent)}
.lyr-name{flex:1;min-width:0;height:20px;padding:0 4px;background:var(--ui-field);
  border:1px solid var(--ui-accent);color:var(--ui-text);font:inherit}
.lyr .tw:hover{color:var(--ui-text)}
.lyr.on .tw{color:var(--ui-accent)}
.lyr.dragging{opacity:.35}
.lyr.drop-before{box-shadow:inset 0 2px 0 0 var(--ui-accent)}
.lyr.drop-after{box-shadow:inset 0 -2px 0 0 var(--ui-accent)}
.lyr.drop-inside{outline:1px solid var(--ui-accent);outline-offset:-1px;background:var(--ui-accent-bg);color:var(--ui-accent)}

/* tabs at the stage edge bring a hidden panel back */
.tab{position:absolute;top:var(--s2);z-index:19;display:none;padding:var(--s1);
  background:var(--ui-panel);color:var(--ui-dim);border:1px solid var(--ui-line)}
.tab:hover{color:var(--ui-accent)}
.tab.show{display:block}
#tabL{left:0}
#tabR{right:0}

/* ── 4. Stage and overlays ──────────────────────────────── */
#stageWrap{flex:1;position:relative;display:flex;min-width:0}
#stage{flex:1;overflow:auto;background:var(--ui-stage);position:relative;min-width:0;
  background-image:linear-gradient(var(--ui-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ui-grid) 1px,transparent 1px);
  background-size:24px 24px}
#pad{padding:16px;margin:0 auto;position:relative}      /* padding = PAD in state.js */
#wrap{transform-origin:top left;background:#fff}
#wrap.unloaded{visibility:hidden}
#cv{display:block;border:0;background:#fff}
#wrap.boards,#wrap.boards #cv{background:transparent}

#empty{position:absolute;inset:0;display:grid;place-items:center;padding:var(--s6);
  color:var(--ui-dim);text-align:center;pointer-events:none}
#empty .in{display:flex;flex-direction:column;align-items:center;gap:var(--s4);pointer-events:auto;width:min(360px,100%)}
#empty .word{font-weight:600;font-size:32px;letter-spacing:-.03em;color:var(--ui-text);line-height:1}
.empty-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin-top:var(--s2)}
.access{display:flex;flex-direction:column;align-items:center;gap:var(--s2);margin-top:var(--s4)}
.recent{width:100%;text-align:left;margin-top:var(--s2)}
.recent .label{margin-bottom:var(--s1);padding:0 var(--s2)}
#empty kbd{border:1px solid var(--ui-line);padding:1px 6px;color:var(--ui-text)}

/* selection, hover and canvas outlines */
.ovl{position:absolute;pointer-events:none;display:none;z-index:5;border:1.5px solid var(--ui-accent);
  box-shadow:0 0 0 1px rgba(14,14,14,.35)}
.ovl.hov{border:1px dashed rgba(214,255,63,.7);box-shadow:none;z-index:4}
.ovl.cvm{border:1px solid rgba(255,255,255,.14);box-shadow:none;z-index:3}
.ovl.cvm.act{border-color:rgba(255,255,255,.4)}
#ovTag{position:absolute;left:-1.5px;bottom:100%;margin-bottom:var(--s1);padding:3px 6px;
  background:var(--ui-accent);color:var(--ui-accent-ink);font:500 var(--fs-label)/1 var(--mono);
  font-style:normal;white-space:nowrap;pointer-events:none}
#ovS.low #ovTag{bottom:auto;top:100%;margin:var(--s1) 0 0}

/* handles: corners always drawn; side handles and dragging only on pictures */
.ovl i{position:absolute;width:8px;height:8px;margin:-4px;background:var(--ui-accent);border:1px solid var(--ui-accent-ink)}
.ovl i.tl{left:0;top:0}
.ovl i.tr{right:-2px;top:0}
.ovl i.bl{left:0;bottom:-2px}
.ovl i.br{right:-2px;bottom:-2px}
.ovl i.mt{left:50%;top:0}
.ovl i.mb{left:50%;bottom:-2px}
.ovl i.ml{left:0;top:50%}
.ovl i.mr{right:-2px;top:50%}
.ovl i.mt,.ovl i.mb,.ovl i.ml,.ovl i.mr{display:none}
#ovS.live i{pointer-events:auto;cursor:nwse-resize}
#ovS.live i.mt,#ovS.live i.mb,#ovS.live i.ml,#ovS.live i.mr{display:block}
#ovS.live i.tr,#ovS.live i.bl{cursor:nesw-resize}
#ovS.live i.mt,#ovS.live i.mb{cursor:ns-resize}
#ovS.live i.ml,#ovS.live i.mr{cursor:ew-resize}
#ovS.live i:hover{background:#fff}
.resizing,.resizing *{cursor:inherit!important;user-select:none}

/* other selected elements, drop place, box selection, snap lines */
.ovl.also{border:1px solid var(--ui-accent);box-shadow:none;z-index:5}
#ovS.many i{display:none!important}
#ovS.dragging{opacity:.6;transition:none}
#dropMark{position:absolute;display:none;z-index:7;pointer-events:none}
#dropMark.drop-line{background:var(--ui-accent);box-shadow:0 0 0 1px rgba(14,14,14,.5)}
#dropMark.drop-box{border:2px solid var(--ui-accent);background:rgba(214,255,63,.08)}
#marquee{position:absolute;display:none;z-index:8;pointer-events:none;
  border:1px solid var(--ui-accent);background:rgba(214,255,63,.08)}
.snapline{position:absolute;display:none;z-index:7;pointer-events:none;background:#FF4DA6}
body.dragging-el,body.dragging-el *{cursor:grabbing!important}

/* spacing guides */
.ovl.mgn{border:1px dashed #fff;box-shadow:none;z-index:3;opacity:.5;mix-blend-mode:difference;isolation:isolate}
.ovl.mgn.sub{border-style:dotted;opacity:.35}
.ovl.mgn.gap,.ovl.mgn.pad{border:0;opacity:.32;background:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 6px)}
.ovl.mgn.mar{border:0;opacity:.32;background:repeating-linear-gradient(-45deg,#fff 0 1px,transparent 1px 6px)}
.ovl.mgn.box{border:1px dashed #fff;opacity:.6}
.mgnv{position:absolute;z-index:6;transform:translate(-50%,-50%);pointer-events:none;display:none;
  padding:2px var(--s1);background:#000;color:#fff;font:var(--fs-label)/1 var(--mono);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* panning */
body.panready #stageWrap,body.panready #stage{cursor:grab}
body.panning,body.panning *{cursor:grabbing!important}

/* ── 5. Canvas toolbar ──────────────────────────────────── */
#dock{position:absolute;left:50%;bottom:var(--s6);transform:translateX(-50%);z-index:20;
  display:flex;align-items:center;gap:var(--s1);padding:var(--s1);
  background:rgba(23,23,23,.94);border:1px solid var(--ui-line);backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.5)}
#dock .btn{border-color:transparent}
#dock .btn:hover{border-color:var(--ui-line)}
#dock .btn.on{border-color:var(--ui-accent)}
#dock .btn.zoom{min-width:72px;gap:var(--s1);color:var(--ui-text);font-variant-numeric:tabular-nums}
#dock .btn.zoom .icon{width:12px;height:12px;color:var(--ui-dim)}
.menu-wrap{position:relative}
#zoomMenu{bottom:calc(100% + var(--s2));left:50%;transform:translateX(-50%)}

/* ── 6. Properties panel ────────────────────────────────── */
.sect{border-bottom:1px solid var(--ui-line);padding:var(--s3)}
.sect>h2{display:flex;align-items:center;gap:6px;margin-bottom:var(--s2)}
.sect.collapsed>h2{margin-bottom:0}
#props .sect.collapsed>*:not(h2),#themeBox.collapsed>*:not(h2){display:none}
#props .sect.filtered{display:none}

#crumb{display:flex;flex-wrap:wrap;gap:var(--s1)}
#crumb span{padding:2px 6px;background:var(--ui-field);color:var(--ui-dim);cursor:pointer}
#crumb span:hover{color:var(--ui-text)}
#crumb span.on{background:var(--ui-accent);color:var(--ui-accent-ink)}
#crumb .crumb-hint{background:none;padding:0;cursor:default}

.qbar{display:flex;gap:var(--s1);padding:var(--s2) var(--s3);border-bottom:1px solid var(--ui-line);flex-wrap:wrap}
.qbar .btn.danger{margin-left:auto}

/* "Only this one / All …": what a change applies to */
.scope{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--ui-line)}
.scope .seg button{height:var(--h-sm);min-width:0;padding:0 var(--s2)}
.scope .seg button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "Only this one" is the normal state, so it stays quiet; "All" stands out */
.scope .seg button.on{background:var(--ui-line);border-color:var(--ui-line-strong);color:var(--ui-text)}
.scope .seg button#scopeAll.on{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-ink)}
#props.scoped .scope{background:var(--ui-accent-bg)}

.psearch{position:relative;padding:var(--s2) var(--s3);border-bottom:1px solid var(--ui-line);color:var(--ui-dim)}
.psearch .icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:14px;height:14px;pointer-events:none}
.psearch input{padding-left:28px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1)}
.row2{display:flex;gap:var(--s2);align-items:center}
.row2>select,.row2>.btn{flex:1;min-width:0}
.row2>.icon-btn{flex:0 0 var(--h)}
.row2 .grow{flex:1;min-width:0}
.row2>select:not(.grow){flex:0 0 96px}
.sz-row{margin-bottom:var(--s2)}
.sz-row .hint{margin-right:auto}
.sz-row .icon-btn{height:var(--h-sm);width:var(--h-sm);flex-basis:var(--h-sm)}
.sz-row .icon-btn .icon{width:14px;height:14px}

/* labelled field */
.f{display:flex;flex-direction:column;gap:var(--s1);position:relative}
.f input[type=color]{width:100%}

/* field with a short name or icon inside; drag the name to change the number */
.ic-input{position:relative}
.ic-input>span{position:absolute;left:0;top:0;bottom:0;width:24px;display:flex;align-items:center;justify-content:center;
  color:var(--ui-dim);cursor:ew-resize;user-select:none}
.ic-input>span .icon{width:12px;height:12px}
.ic-input>span:hover{color:var(--ui-text)}
.ic-input>input{padding-left:24px}
.f>label{cursor:ew-resize}
.f>label[for="mAlt"]{cursor:default}
.scrubbing,.scrubbing *{cursor:ew-resize!important;user-select:none}

/* a value set on this element gets a dot; click it to clear */
.rdot{position:absolute;right:-3px;top:-3px;width:8px;height:8px;padding:0;z-index:2;
  background:var(--ui-accent);border:1px solid var(--ui-bg)}
.rdot:hover{background:#fff}

#tstyles{margin-bottom:var(--s2)}
#tstyles:empty{display:none}
.alab{margin:var(--s3) 0 var(--s1)}

/* ── 7. Colour chips and theme ──────────────────────────── */
.sw{display:flex;flex-wrap:wrap;gap:var(--s1)}
.sw b{width:16px;height:16px;cursor:pointer;border:1px solid rgba(255,255,255,.18)}
.sw b:hover{outline:1px solid var(--ui-accent);outline-offset:1px}

.cchip{position:relative;flex:0 0 auto}
.cbtn{display:flex;align-items:center;gap:6px;height:var(--h-sm);padding:0 var(--s2);width:100%;
  background:var(--ui-field);border:1px solid var(--ui-line);color:var(--ui-text);font-variant-numeric:tabular-nums}
.cbtn:hover{border-color:var(--ui-line-hover)}
.cbtn i{width:12px;height:12px;display:block;border:1px solid rgba(255,255,255,.22);
  background-image:linear-gradient(45deg,#333 25%,transparent 25%,transparent 75%,#333 75%),
    linear-gradient(45deg,#333 25%,transparent 25%,transparent 75%,#333 75%);
  background-size:8px 8px;background-position:0 0,4px 4px}
/* fixed, so the panel's scroll box does not clip it; placed by colour.js */
.cpop{position:fixed;z-index:40;width:200px;padding:var(--s2);background:var(--ui-panel);
  border:1px solid var(--ui-line-strong);box-shadow:var(--ui-shadow)}
.cpop input[type=color]{display:block;width:100%;height:var(--h)}
.cpop .lbl{margin:var(--s2) 0 var(--s1)}
.cpop .sw{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s1)}
.cpop .sw b{width:100%;height:24px}

#themeBox .count{flex:0 0 auto;margin-left:var(--s2);letter-spacing:0;text-transform:none;white-space:nowrap}
#themeGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2) var(--s1)}
.tsw{min-width:0;text-align:center;cursor:pointer}
.tsw input{display:block;width:100%}
.tsw input:focus{outline:1px solid var(--ui-accent);border-color:var(--ui-accent)}
.tsw span{display:block;margin-top:2px;font-size:var(--fs-label);line-height:1.3;color:var(--ui-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 8. Menus, command bar, tooltip, toast ──────────────── */
.menu,#ctx{position:absolute;z-index:120;min-width:160px;padding:var(--s1);
  background:var(--ui-panel);border:1px solid var(--ui-line-strong);box-shadow:var(--ui-shadow)}
#ctx{position:fixed;display:none}
#ctx.show{display:block}
.menu button,#ctx button{display:flex;align-items:center;gap:var(--s3);width:100%;height:var(--h);padding:0 var(--s2);
  background:transparent;border:0;color:var(--ui-dim);text-align:left;white-space:nowrap}
.menu button kbd,#ctx button kbd{margin-left:auto}
.menu button:hover,.menu button:focus-visible,#ctx button:hover{background:var(--ui-accent-bg);color:var(--ui-accent);outline:none}
#ctx button.danger:hover{color:var(--ui-danger)}
#ctx hr{border:0;border-top:1px solid var(--ui-line);margin:var(--s1) 0}

#cmdk{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.55);display:none;
  align-items:flex-start;justify-content:center;padding-top:14vh}
#cmdk.show{display:flex}
#cmdBox{width:min(520px,92vw);max-height:60vh;display:flex;flex-direction:column;
  background:var(--ui-panel);border:1px solid var(--ui-line-strong);box-shadow:var(--ui-shadow-lg)}
.cmd-search{position:relative;border-bottom:1px solid var(--ui-line);color:var(--ui-dim)}
.cmd-search .icon{position:absolute;left:var(--s4);top:50%;transform:translateY(-50%)}
#cmdInput{width:100%;height:48px;padding:0 var(--s4) 0 44px;background:transparent;border:0;
  font-size:var(--fs-title);color:var(--ui-text);letter-spacing:.02em}
#cmdInput:focus-visible{outline:none}
#cmdList{overflow-y:auto;padding:var(--s1)}
.cmd{display:flex;align-items:center;gap:var(--s3);height:32px;padding:0 var(--s3);cursor:pointer;color:var(--ui-dim)}
.cmd .nm{color:var(--ui-text)}
.cmd .grp{min-width:52px}
.cmd kbd{margin-left:auto}
.cmd.on{background:var(--ui-accent-bg);box-shadow:inset 2px 0 0 var(--ui-accent)}
.cmd.on .nm{color:var(--ui-accent)}
.cmd-empty{padding:var(--s4);color:var(--ui-dim)}

#tip{position:fixed;z-index:130;display:none;max-width:260px;padding:var(--s1) var(--s2);pointer-events:none;
  background:#000;border:1px solid var(--ui-line-strong);color:var(--ui-text);font-size:11px;line-height:1.4;white-space:nowrap}
#tip.show{display:flex;align-items:center;gap:var(--s2)}
#tip kbd{color:var(--ui-dim)}

#msg{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:99;
  padding:var(--s2) var(--s3);background:var(--ui-panel);border:1px solid var(--ui-line);
  border-left:2px solid var(--ui-accent);opacity:0;transition:opacity .2s;pointer-events:none}
#msg.show{opacity:1}

/* ── 9. Dialogs and export ──────────────────────────────── */
.mod{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.55);display:none;
  align-items:flex-start;justify-content:center;padding-top:12vh}
.mod.show{display:flex}
.modbox{width:min(480px,92vw);max-height:76vh;overflow-y:auto;
  background:var(--ui-panel);border:1px solid var(--ui-line-strong);box-shadow:var(--ui-shadow-lg)}
.modbox.narrow{width:min(380px,92vw)}
.modbox.wide{width:min(640px,94vw)}
.modhead{display:flex;align-items:center;gap:var(--s2);height:44px;padding:0 var(--s2) 0 var(--s4);border-bottom:1px solid var(--ui-line)}
.modhead .x{margin-left:auto;height:var(--h);display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--ui-dim)}
.modhead .x:hover{color:var(--ui-text)}
.modbody{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4)}
.modbody .text{color:var(--ui-text);line-height:1.6}
.modfoot{display:flex;gap:var(--s2);justify-content:flex-end;padding:var(--s3) var(--s4);border-top:1px solid var(--ui-line)}
.modbody .note{color:var(--ui-dim);font-size:11px;line-height:1.6}

/* missing files */
.ltable{border:1px solid var(--ui-line);max-height:40vh;overflow-y:auto}
.lrow{display:grid;grid-template-columns:minmax(0,1fr) 84px 128px;gap:var(--s3);align-items:center;
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--ui-line-soft)}
.lrow:last-child{border-bottom:0}
.lhead{position:sticky;top:0;background:var(--ui-raised);padding-top:var(--s1);padding-bottom:var(--s1);
  font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ui-dim)}
.lname{min-width:0}
.lname b,.lname small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lname b{font-weight:500}
.lname small,.ltype{color:var(--ui-dim);font-size:11px}
.lact{display:flex;align-items:center;justify-content:flex-end;gap:var(--s2)}
.lok{display:inline-flex;align-items:center;gap:var(--s1);color:var(--ui-accent);font-size:11px}
.lok .icon{width:14px;height:14px}

/* format picker */
.fmt{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1)}
.fmt button{display:flex;flex-direction:column;gap:2px;padding:var(--s2) var(--s3);text-align:left;
  background:var(--ui-field);border:1px solid var(--ui-line);color:var(--ui-dim)}
.fmt button b{color:var(--ui-text);font-weight:500}
.fmt button small{font-size:11px;color:var(--ui-dim)}
.fmt button:hover{border-color:var(--ui-line-hover)}
.fmt button.on{border-color:var(--ui-accent);background:var(--ui-accent-bg)}
.fmt button.on b{color:var(--ui-accent)}

/* per-format options */
.opt{display:flex;flex-direction:column;gap:var(--s2);border-top:1px solid var(--ui-line);padding-top:var(--s3)}
.optrow{display:flex;align-items:center;gap:var(--s2)}
.optrow .grow{flex:1}
.optrow>select{min-width:0}
.val{text-align:right;color:var(--ui-dim);font-variant-numeric:tabular-nums}
.val.num{min-width:32px}
.f-paper{flex:1.6}
.f-bleed{flex:0 0 80px}
.f-mm{flex:0 0 88px}
.f-scale{flex:0 0 80px}
.f-auto{flex:0 0 auto}
.w-56{flex:0 0 56px}
.w-96{flex:0 0 96px}

/* canvas picker */
.picks{display:flex;flex-wrap:wrap;gap:var(--s1);max-height:96px;overflow-y:auto}
.picks button{height:var(--h-sm);min-width:var(--h-sm);padding:0 var(--s2);
  background:var(--ui-field);border:1px solid var(--ui-line);color:var(--ui-dim);font-variant-numeric:tabular-nums}
.picks button:hover{color:var(--ui-text);border-color:var(--ui-line-hover)}
.picks button.on{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-ink)}
.picks button.all{letter-spacing:.1em;text-transform:uppercase;font-size:var(--fs-label)}

/* progress */
#prog{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:105;display:none;
  min-width:260px;max-width:min(420px,90vw);padding:var(--s3);
  background:var(--ui-panel);border:1px solid var(--ui-line);box-shadow:var(--ui-shadow)}
#prog.show{display:block}
#prog .pl{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s2)}
#prog .pc{margin-left:auto;color:var(--ui-dim);font-variant-numeric:tabular-nums}
#prog .x{display:flex;align-items:center;justify-content:center;width:var(--h-sm);height:var(--h-sm);
  margin:-4px -6px -4px 0;padding:0;background:transparent;border:0;color:var(--ui-dim)}
#prog .x:hover{color:var(--ui-text)}
#prog .pc:empty{display:none}
#prog .pc:empty + .x{margin-left:auto}
/* covers the whole editor while exporting; progress and dialogs sit above */
#lock{position:fixed;inset:0;z-index:104;display:none;background:rgba(0,0,0,.35);cursor:wait}
#lock.show{display:block}
#prog .track{height:2px;background:var(--ui-line);position:relative;overflow:hidden}
#prog .fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--ui-accent);transition:width .18s linear}
#prog.busy .fill{width:38%;animation:pslide 1.1s ease-in-out infinite}
@keyframes pslide{0%{left:-40%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){
  #prog.busy .fill{animation:none;width:100%;opacity:.4}
  *{transition:none!important}
}

/* ── 10. Helpers ────────────────────────────────────────── */
.hint{color:var(--ui-dim);font-size:11px;line-height:1.5}
.hint.below{margin-top:var(--s2)}
.pad-12{padding:var(--s3)}
.mt-8{margin-top:var(--s2)}
.mb-8{margin-bottom:var(--s2)}
.hide{display:none!important}