/* ------------------------------------------------------------------------------------------------
   Design rules (one set for every mode and desk; reference: nagatanien.life)
   - Shape: small corners, never 0-or-capsule. --r-ctl 4px for buttons, tags and choices; --r-box 6px for
            the search box, cards, tiles, menus and the main action (Export). Menu items are plain rows (0).
            Circles stay circles (swatches, check, slider knob).
   - States: hover (--hover), pressed (--press), keyboard focus (2px ink ring), chosen (fill or line).
            Hover is only a hint; chosen and pressed never depend on it, so touch screens lose nothing.
            A tool is chosen with a bar under it (like a tab); a material card with a frame and a check.
   - Space: padding, margin and gap only use 4 / 8 / 12 / 16 / 24 / 32px (and 0). spacing.test.cjs checks this.
            Inside a control 8, between controls 8–12, between groups 16–24, between big areas 24–32.
            The panel's left edge is 16px for everything. Controls are 44px (--h-control) or 36px (--h-small);
            on touch screens every control is 44px.
   - Depth: cards sit on the panel by background (white on light grey), not by a frame. Frames appear on hover/chosen.
   - Type: 5 sizes only: --fs-caption 13 (supporting) / --fs-body 15 / --fs-item 17 (material names) /
            --fs-title 20 (the tool heading) / --fs-brand 24 (logo). Bold (--fw-strong) only for the tool heading,
            material names and the main actions (Export, Download PNG); everything else is --fw-regular.
            A chosen state is never shown by weight alone: it uses a fill, a line or a check.
   - Lines: always 1px, four roles that are never swapped: --line-divider (between areas), --line (outline of
            a control or card at rest), --line-hover (under the pointer), --line-sel (chosen = the ink).
   - Colour: plain neutral greys, no beige. The only warm tone is the paper itself (#F8F6F1-ish);
            cards are white, the panel a very light grey (#F5F5F5), the desk a mid grey.
            No colour accent in the UI: the main actions (Export, Download PNG) are filled with the ink, so the
            watercolours are the only colour on screen.
   - Chosen: small controls fill with the ink (--sel-bg / --sel-ink); cards and tools get an ink line.
   - Text: --ink, --ink2 for anything meant to be read (≥4.5:1). --ink3 only for placeholders.
            Disabled keeps readable text (--ink-dis) and shows itself with the cursor, not by fading out.
   - The desk setting only colours the desk around the paper and the top bar.
   ------------------------------------------------------------------------------------------------ */
:root{
  /* Type: one UI face for both languages (system gothic, nothing to download), Mincho for the logo only. */
  --font-ui:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Segoe UI","Yu Gothic UI",Meiryo,sans-serif;
  --font-brand:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --fs-caption:13px;--fs-body:15px;--fs-item:17px;--fs-title:20px;--fs-brand:24px;
  --fw-regular:400;--fw-strong:700;
  --lh-ui:1.35;--lh-text:1.5;
  --ease:cubic-bezier(.2,.7,.2,1);--t:160ms;
  --sel-x:0px;--sel-y:0px;--sel-w:0px;--sel-h:0px;
  --rw:148;--rh:105;
  --pw-open:clamp(340px,30vw,400px);--pw:var(--pw-open);
  /* Bottom sheet (≤900px): 88px bar when folded, 50–70% of the screen (never under 320px) when open. */
  --sheet-folded:calc(88px + env(safe-area-inset-bottom,0px));
  --sheet-open:min(max(50dvh,320px),70dvh);
  --h-control:44px;--h-small:36px; /* two control heights only */
  --r-ctl:4px;--r-box:6px;
  --top-h:56px;

  /* Light surfaces (all desks) */
  --ink:#333333;--ink2:#5A5A5A;--ink3:#8C8C8C;--ink-dis:#767676;
  --hover:rgba(0,0,0,.07);--press:rgba(0,0,0,.14);
  --panel:#F5F5F5;
  --line-divider:#DEDEDE;--line:#ABABAB;--line-hover:#6E6E6E;--line-sel:var(--ink);
  --line-strong:var(--ink);
  --tile:#FFFFFF;--tile-ink:#333333;--tile-ink2:#5A5A5A;
  --field:#FFFFFF;
  --accent:#333333;--accent-ink:#FFFFFF;--sel-bg:var(--ink);--sel-ink:var(--panel);
  --chip:transparent;--chip-ink:var(--ink);--chip-on:var(--sel-bg);--chip-on-ink:var(--sel-ink);
  --sel-halo:0 0 0 0 transparent;
  --use:#3F6B4A;--danger:#8A3B2E;
  --toast-warning-bg:#FFF4CC;--toast-warning-ink:#4F3B00;--toast-warning-line:#8A6D1D;
  /* Shadows by height: toast (low) < menu / bar (middle) < draft dialog (high). */
  --shadow-1:0 1px 2px rgba(0,0,0,.1);
  --shadow-2:0 2px 6px rgba(0,0,0,.1),0 8px 24px -8px rgba(0,0,0,.18);
  --shadow-3:0 4px 12px rgba(0,0,0,.12),0 24px 48px -12px rgba(0,0,0,.28);
  --island-shadow:var(--shadow-2);

  /* Default desk: silver grey (ginnezu) */
  --desk:#A4A4A1;--desk-line:#959592;--desk-ink:#222222;--desk-ink2:#3A3A38;--desk-ink-dis:#505050;--desk-hover:rgba(0,0,0,.09);
  --primary:var(--accent);--primary-ink:var(--accent-ink);
  /* One thin contact shadow; the paper texture does the rest. */
  --paper-shadow:0 1px 2px rgba(0,0,0,.2),0 4px 12px -4px rgba(0,0,0,.16);

  /* Older names still used below and by tests */
  --desk-bg:var(--desk);
  --panel-line:var(--line-divider);--tile-line:var(--line);--field-line:var(--line);--sel:var(--line-sel);
  --ink-2:var(--ink2);--ink-3:var(--ink3);
  --island:var(--panel);--hair:var(--panel-line);--surface:var(--panel);
  --leaf:var(--use);--card-shadow:var(--paper-shadow);
}

/* Desks (light) */
html[data-desk="ainezu"]{
  --desk:#C2CACF;--desk-line:#B0B9BF;--desk-ink:#1A2227;--desk-ink2:#45515A;--desk-ink-dis:#56626B;--desk-hover:rgba(0,0,0,.08);
  --paper-shadow:0 1px 2px rgba(20,35,45,.2),0 4px 12px -4px rgba(20,35,45,.16);
}
html[data-desk="plain"]{
  --desk:#F3F3F1;--desk-line:#E3E3E0;--desk-ink:#222222;--desk-ink2:#5A5A5A;--desk-ink-dis:#767676;--desk-hover:rgba(0,0,0,.06);
  --paper-shadow:0 0 0 1px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.12),0 4px 12px -4px rgba(0,0,0,.1);
}
html[data-desk="mat"]{
  --desk:#2E5E4A;
  --desk-bg:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px) 0 0/100px 100px,linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px) 0 0/100px 100px,linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/20px 20px,#2E5E4A;
  --desk-line:rgba(255,255,255,.16);--desk-ink:#F1F4F0;--desk-ink2:#BFD2C6;--desk-ink-dis:#A6BCAE;--desk-hover:rgba(255,255,255,.12);
  --primary:#F1F4F0;--primary-ink:#1C241F;
  --paper-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 12px -4px rgba(0,0,0,.3);
}

/* Dark surfaces (all desks). Tiles stay light so the watercolour previews keep their colour. */
html[data-mode="dark"]{
  --ink:#EDEDED;--ink2:#B4B4B4;--ink3:#8A8A8A;--ink-dis:#999999;--hover:rgba(255,255,255,.09);--press:rgba(255,255,255,.16);
  --panel:#1F1F1F;
  --line-divider:rgba(255,255,255,.1);--line:rgba(255,255,255,.24);--line-hover:rgba(255,255,255,.55);
  --tile:#2A2A2A;--tile-ink:#EDEDED;--tile-ink2:#B4B4B4;
  --field:#2A2A2A;
  --accent:#EDEDED;--accent-ink:#1C1C1C;
  --sel-halo:0 0 0 0 transparent;
  --danger:#E08A7A;
  --toast-warning-bg:#4A3A13;--toast-warning-ink:#FFF1B0;--toast-warning-line:#D7B957;
  --desk-ink:#EDEDED;--desk-ink2:#A8A8A8;--desk-ink-dis:#8C8C8C;--desk-hover:rgba(255,255,255,.1);
  --paper-shadow:0 1px 2px rgba(0,0,0,.5),0 4px 12px -4px rgba(0,0,0,.45);
}
html[data-mode="dark"][data-desk="ginnezu"]{--desk:#3B3B3B;--desk-line:#4A4A4A}
html[data-mode="dark"][data-desk="ainezu"]{--desk:#26313A;--desk-line:#35424C}
html[data-mode="dark"][data-desk="plain"]{--desk:#1B1B1A;--desk-line:#2C2C2A}
html[data-mode="dark"][data-desk="mat"]{
  --desk:#1D3A2E;
  --desk-bg:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px) 0 0/100px 100px,linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px) 0 0/100px 100px,linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/20px 20px,#1D3A2E;
  --desk-line:rgba(255,255,255,.1);
}


*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;letter-spacing:0;background:var(--desk-bg,var(--desk));-webkit-tap-highlight-color:transparent}
body{font:var(--fw-regular) var(--fs-body)/var(--lh-text) var(--font-ui);color:var(--ink);-webkit-font-smoothing:antialiased}
img{display:block;max-width:none;filter:none;opacity:1;mix-blend-mode:normal}
button,input{font:inherit;color:inherit;letter-spacing:0;-webkit-appearance:none;appearance:none}
button{background:transparent;background-color:transparent;border:0;padding:0;cursor:pointer;border-radius:0;-webkit-tap-highlight-color:transparent}
button:disabled{color:var(--ink-dis);cursor:not-allowed;background:transparent;background-color:transparent;-webkit-appearance:none;appearance:none}
[hidden]{display:none!important}
body.viewing .edit-chrome{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.top-bar :focus-visible{outline-color:var(--desk-ink)}
.toolbox-search:focus-within{border-color:var(--line-sel);box-shadow:0 0 0 2px var(--line-sel)}

/* ---------- Shared parts ---------- */
/* Boxes: panel ground, one hairline, square. */
.menu-panel,.inspector,.toasts>:not(:empty),.draft,#view-exit,.export{
  background:var(--panel);border:1px solid var(--line-divider);border-radius:var(--r-box);box-shadow:var(--shadow-2);color:var(--ink);
}
.toasts>:not(:empty),#view-exit{box-shadow:var(--shadow-1)}
.draft{box-shadow:var(--shadow-3)}
.menu-panel{border-color:transparent}
/* Small controls: pill with a hairline; hover darkens the line; chosen fills. */
.chip,.tb-tag-btn,.seg button,.desk-btn,.inspect-actions button,.toolbox-empty button{
  border-radius:var(--r-ctl);background:var(--chip);color:var(--chip-ink);box-shadow:inset 0 0 0 1px var(--line);
}
:is(.chip,.tb-tag-btn,.seg button,.desk-btn,.inspect-actions button,.toolbox-empty button):hover{background:var(--hover);box-shadow:inset 0 0 0 1px var(--line-hover)}
:is(.seg button,.desk-btn)[aria-checked="true"],.tb-tag-btn[aria-pressed="true"]{background:var(--sel-bg);color:var(--sel-ink);box-shadow:inset 0 0 0 1px var(--sel-bg)}
:is(.seg button,.desk-btn,.lang button)[aria-checked="true"]::after{content:"✓";margin-left:4px;font-weight:var(--fw-strong)}
:is(.chip,.seg button,.desk-btn,.inspect-actions button,.toolbox-empty button,.png-opt,#tb-filter-toggle):not([aria-checked="true"]):active,.tb-tag-btn:not([aria-pressed="true"]):active{background:var(--press)}
/* Cards and tiles: square, hairline; chosen = strong line. */
.toolbox-row,.toolbox-tile,#toolbox-now-preview{
  background:var(--tile);border:1px solid transparent;border-radius:var(--r-box);color:var(--tile-ink);
}
:is(.toolbox-row,.toolbox-tile):hover{border-color:var(--line-hover)}
:is(.toolbox-row.on,.toolbox-tile.on){border-color:var(--line-sel)}
/* Tool buttons: no frame at rest; chosen = tile with a strong line. */
.toolbox-tools button[data-tool],.toolbox-strip-tools button[data-strip-tool]{border:1px solid transparent;border-radius:var(--r-box) var(--r-box) 0 0}
:is(.toolbox-tools button[data-tool],.toolbox-strip-tools button[data-strip-tool]):hover{background:var(--hover)}
:is(.toolbox-tools button[data-tool],.toolbox-strip-tools button[data-strip-tool])[aria-checked="true"]{
  background:var(--tile);color:var(--tile-ink);box-shadow:inset 0 -2px 0 var(--line-sel);
}
:is(.toolbox-tools button[data-tool],.toolbox-strip-tools button[data-strip-tool]):not([aria-checked="true"]):active{background:var(--press)}
/* Quiet buttons on panels and on the desk: no frame, a pill-shaped hover. */
#undo,#reset-all,#file-menu,#settings-menu,#toolbox-fold,#toolbox-unfold,#lib-search-clear,#toolbox-clear,#tb-filter-toggle,
#single-edit button,.png-opt,.tb-swatch-btn,#draft button{border-radius:var(--r-ctl)}
:is(#undo,#reset-all,#file-menu,#settings-menu):not(:disabled):active{background:var(--press)}
:is(#toolbox-fold,#toolbox-unfold,#lib-search-clear,#toolbox-clear,#single-edit button,.tb-swatch-btn,.menu-panel .item,.menu-panel>button):not(:disabled):active{background:var(--press)}
/* File-menu items are rows across the menu, not rounded buttons. */
.menu-panel .item,.menu-panel>button{border-radius:0}

/* ---------- Layout ---------- */
.shell.app{
  display:grid;grid-template-columns:minmax(0,1fr) var(--pw);grid-template-rows:var(--top-h) minmax(0,1fr);
  width:100%;height:100%;min-height:100dvh;min-width:0;
  background:var(--desk-bg,var(--desk));
  transition:grid-template-columns .28s ease;
}
body.toolbox-folded{--pw:108px}

.top-bar{
  grid-column:1/-1;grid-row:1;
  display:flex;align-items:center;gap:8px;
  padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px));
  border-bottom:1px solid var(--desk-line);
  color:var(--desk-ink);min-width:0;z-index:20;overflow:visible;
}
.brand{display:flex;align-items:center;gap:8px;min-width:0;flex:none}
/* The logo is the only Mincho on the page, whichever language is chosen. */
.mark{margin:0;font:600 var(--fs-brand)/1.2 var(--font-brand);color:var(--desk-ink);letter-spacing:0;white-space:nowrap}
.save{display:flex;align-items:center;gap:8px;font-size:var(--fs-caption);color:var(--desk-ink2);min-width:0;position:relative}
.save-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--use);border:1px solid transparent}
body[data-save="unsaved"] .save-dot{background:transparent;border-color:currentColor}
body[data-save="saving"] .save-dot{animation:save-pulse 1.2s var(--ease) 1}
@keyframes save-pulse{50%{opacity:.35}}
#app-word{font-size:var(--fs-caption);color:var(--desk-ink2);white-space:nowrap}
#status{font-size:var(--fs-caption);color:var(--desk-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28vw}
body.is-ready #status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0}
body:not(.is-ready) #app-word{display:none}
.top-spacer{flex:1;min-width:8px}
.top-actions{display:flex;align-items:center;gap:4px;flex:none}
#undo,#reset-all,#file-menu{
  height:var(--h-control);padding:0 16px;
  display:inline-flex;align-items:center;gap:8px;
  font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--desk-ink);
}
#settings-menu{width:var(--h-control);height:var(--h-control);display:inline-flex;align-items:center;justify-content:center;color:var(--desk-ink);flex:none}
:is(#undo,#reset-all,#file-menu,#settings-menu):hover{background:var(--desk-hover)}
:is(#undo,#reset-all,#file-menu,#settings-menu):disabled{color:var(--desk-ink-dis);background:transparent}
.top-vline{width:1px;height:24px;background:var(--desk-line);margin:0 12px;flex:none}
/* Language switch sits on the top bar, both names always shown, so the app reads as bilingual at a glance. */
.lang{display:inline-flex;align-items:center;gap:4px;height:var(--h-control);padding:0 4px 0 12px;flex:none;
  border:1px solid var(--desk-line);border-radius:var(--r-box);color:var(--desk-ink)}
.lang-globe{flex:none;margin-right:4px}
.lang button{height:var(--h-small);padding:0 12px;border-radius:var(--r-ctl);font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--desk-ink2)}
.lang button:hover{background:var(--desk-hover);color:var(--desk-ink)}
.lang button[aria-checked="true"]{background:var(--desk-ink);color:var(--desk);cursor:default}
#view-enter{
  height:var(--h-control);padding:0 24px;border-radius:var(--r-box);margin-left:8px;
  background:var(--primary);color:var(--primary-ink);
  font:var(--fw-strong) var(--fs-body)/var(--lh-ui) var(--font-ui);flex:none;
}
#view-enter:hover{filter:brightness(.92)}
#view-enter:not(:disabled):active{filter:brightness(.8)}
#view-enter:disabled{background:var(--desk-hover);color:var(--desk-ink-dis)}

/* ---------- File menu ---------- */
.menu{position:relative;display:flex;align-items:center;overflow:visible}

/* Top bar on narrower screens.
   - Up to 1120px: Undo, Reset and File keep only their icons (their names stay as aria-labels and titles).
   - Up to 820px: two rows. Row 1 = logo + language, so the two languages stay in sight;
     row 2 = Undo, Reset … light/dark, File, Export. The dark-mode icon stays here; the menu also has Light/Dark/Auto. */
@media(max-width:1120px){
  #undo,#reset-all,#file-menu{width:44px;padding:0;justify-content:center}
  :is(#undo,#reset-all,#file-menu) .txt{display:none}
}
@media(max-width:820px){
  :root{--top-h:96px;--fs-brand:20px}
  .top-bar{
    display:grid;align-items:center;column-gap:4px;
    grid-template-columns:auto auto minmax(0,1fr) auto auto auto;grid-template-rows:48px 48px;
    padding:0 12px 0 16px!important;
  }
  .top-actions{display:contents}
  .top-spacer,.top-vline{display:none}
  .brand{grid-row:1;grid-column:1/4;min-width:0}
  .lang{grid-row:1;grid-column:4/-1;justify-self:end;height:40px}
  .lang button{height:32px;padding:0 8px;font-size:var(--fs-caption)}
  .lang-globe{width:16px;height:16px}
  #undo{grid-row:2;grid-column:1;margin-left:-8px}
  #reset-all{grid-row:2;grid-column:2}
  .menu:has(#settings-menu){grid-row:2;grid-column:4}
  .menu{grid-row:2;grid-column:5}
  #view-enter{grid-row:2;grid-column:6;padding:0 16px;margin-left:8px}
  .top-bar::after{content:"";grid-row:1;grid-column:1/-1;align-self:end;height:1px;background:var(--desk-line);margin:0 -12px 0 -16px}
}
/* Very narrow phones: logo 19px (≤400px), then drop the globe (≤380px) so “English | Japanese” never touches it. */
@media(max-width:400px){:root{--fs-brand:19px}}
@media(max-width:380px){.lang{padding-left:4px}.lang-globe{display:none}}
@media(max-width:340px){.lang button{padding:0 4px}}
.menu-panel{
  /* Anchored under the “…” button; wide enough for two columns of desk names; scrolls on short screens. */
  position:absolute;top:calc(100% + 8px);right:0;width:min(344px,calc(100vw - 24px));z-index:100;
  display:flex;flex-direction:column;
  padding:8px;font-size:var(--fs-body);
  max-height:calc(100dvh - var(--top-h) - 24px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-tap-highlight-color:transparent;
  isolation:isolate;
}
.menu-panel[hidden]{display:none!important}
/* Two-row top bar: the “…” button sits mid-row, so the menu pins to the screen edge instead. */
@media(max-width:820px){.menu-panel{position:fixed;top:calc(var(--top-h) + 4px);right:12px}}
@media(max-width:900px){
  .settings-panel{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;max-height:80dvh;
    border-radius:var(--r-box) var(--r-box) 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
    box-shadow:var(--shadow-3),0 0 0 100vmax rgba(0,0,0,.32)} /* the huge spread dims the page behind the sheet */
}
.menu-panel .item,.menu-panel>button{
  display:block;width:100%;text-align:left;padding:8px 8px;min-height:var(--h-small);
  font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink);
}
.menu-panel a.item{text-decoration:none;color:inherit;cursor:pointer}
.menu-panel .item:hover,.menu-panel>button:hover{background:var(--hover)}
.menu-panel .item.notes,.menu-panel .docs summary,.menu-panel .inspect summary{font-size:var(--fs-caption);color:var(--ink2)}
.settings-title{margin:0;padding:8px 8px 4px;font:var(--fw-strong) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink)}
.field-note{margin:-4px 0 8px;font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui);color:var(--ink2)}
.menu-panel .rule{height:1px;background:var(--line-divider);margin:8px 4px;border:0}
.menu-panel .field{padding:8px 8px 8px}
.field-lbl,.paper-choice-label{display:block;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink2);margin-bottom:8px}
.menu-meta,#work-meta,#draft-status{margin:4px 8px 8px;font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui);color:var(--ink2)}
.inspect,.docs{padding:4px 0;color:var(--ink);font-size:var(--fs-body)}
summary{cursor:pointer;font-size:var(--fs-caption);padding:8px 8px;color:var(--ink2);list-style:none}
summary::-webkit-details-marker{display:none}
.inspect-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 8px;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui)}
.inspect-actions button{padding:8px 12px;min-height:36px;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui)}
.bleed-note{margin:4px 8px;font-size:var(--fs-caption);line-height:var(--lh-ui);color:var(--ink2)}
#inventory{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 8px;max-height:180px;overflow:auto}
.asset{background:var(--desk);padding:8px;border:0;border-radius:var(--r-box)}
.asset img{width:100%;height:72px;object-fit:contain}
.asset p{line-height:1.4;margin:0 0 4px;font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui)}
#docs-copy{margin:8px 8px;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink2);max-height:140px;overflow:auto}
#docs-copy p{margin:0 0 8px}
#closeups:not([hidden]){display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:8px}
figure{margin:8px 0}
figure canvas{display:block;width:360px;max-width:100%;height:auto;aspect-ratio:3/2;background:var(--panel);border:0;border-radius:var(--r-box)}
figcaption{font-size:var(--fs-caption);margin:8px;color:var(--ink2)}

.seg,.seg.mini{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seg button,.seg.mini button{height:var(--h-small);padding:0 16px;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui)}
.desk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.desk-btn{
  display:flex;align-items:center;gap:8px;min-height:var(--h-control);padding:8px;
  font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);text-align:left;min-width:0;
}
.desk-btn .desk-name{min-width:0}
.desk-swatch{width:24px;height:18px;border-radius:2px;flex:none;overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.desk-swatch::before{content:"";position:absolute;left:4px;top:5px;width:10px;height:7px;background:#FAF8F3;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.desk-swatch u{position:absolute;right:0;top:0;bottom:0;width:7px}

/* ---------- Paper ---------- */
.stage{
  grid-column:1;grid-row:2;
  container-type:size;display:grid;place-items:center;
  position:relative;min-width:0;min-height:0;z-index:1;
}
.paper{
  width:min(88cqw,calc(84cqh * var(--rw) / var(--rh)));aspect-ratio:var(--rw)/var(--rh);position:relative;
  border-radius:2px;box-shadow:var(--paper-shadow);background:#F7F4EE;max-width:100%;
}
#garden{display:block;width:100%;height:auto;aspect-ratio:var(--rw)/var(--rh);touch-action:none;background:transparent;cursor:crosshair}
#tool-hint{display:none}
.card-readout{
  position:absolute;left:0;top:100%;margin-top:12px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;padding:0;white-space:nowrap;
  font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--desk-ink);pointer-events:auto;
}
.card-btn{
  height:var(--h-small);padding:0 4px 0 0;display:inline-flex;align-items:center;gap:8px;
  font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--desk-ink);
  background:transparent;border:0;
}
.card-btn:hover{text-decoration:underline;text-underline-offset:4px}
.card-readout .dims{font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui);color:var(--desk-ink2);font-variant-numeric:tabular-nums}
.card-readout .autosave{display:inline-flex;align-items:center;gap:8px;font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui);color:var(--desk-ink2);font-variant-numeric:tabular-nums}
.card-readout .autosave::before{content:"·";margin-right:4px}
.ratio-icon{width:16px;height:16px;flex:none;color:var(--desk-ink);display:grid;place-items:center}
.ratio-box{display:block;box-shadow:inset 0 0 0 1px currentColor}
.card-pop.menu-panel{
  position:absolute;left:0;top:auto;bottom:calc(100% + 8px);right:auto;
  width:min(360px,calc(100vw - 24px));
  max-height:min(360px,50dvh);overflow-y:auto;overscroll-behavior:contain;
  padding:8px;z-index:100;
}
.card-pop[hidden]{display:none!important}
.card-pop-head{display:flex;align-items:baseline;justify-content:space-between;padding:8px 8px 4px}
.card-pop-head h2{margin:0;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui)}
.card-pop-head .dpi{font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink2)}
.card-pop .card-row{
  display:flex;align-items:center;gap:8px;width:100%;min-height:var(--h-small);padding:0 8px;
  text-align:left;background:transparent;
}
.card-pop .card-row:hover{background:var(--hover)}
.card-pop .card-row[aria-pressed="true"]{background:var(--press)}
.card-pop .card-row:focus-visible{outline-offset:-2px}
.card-mini{width:24px;height:24px;flex:none;display:grid;place-items:center;color:var(--ink)}
.card-row-name{flex:1 1 auto;min-width:0;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);text-align:left;white-space:nowrap}
.card-row-dim{flex:none;font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap}
.card-orient{display:flex;justify-content:center;padding:8px;gap:8px}
.card-px{
  margin:4px 8px 8px;text-align:center;
  font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink2);
}

/* ---------- Toolbox ---------- */
.toolbox-panel{
  grid-column:2;grid-row:2;
  background:var(--panel);border-left:1px solid var(--line-divider);
  color:var(--ink);min-width:0;min-height:0;overflow:hidden;position:relative;z-index:1;
  font-size:var(--fs-body);
}
.toolbox-body{
  position:absolute;inset:0;width:var(--pw-open);max-width:100%;
  display:flex;flex-direction:column;min-height:0;
  /* One scroll for the whole toolbox: tools, search, filters and list move together, so the list is never squeezed. */
  overflow-y:auto;overscroll-behavior:contain;
  container:toolbox/inline-size;
}
body.toolbox-folded .toolbox-body{visibility:hidden;pointer-events:none}
.toolbox-head{
  flex:none;height:52px;display:flex;align-items:center;justify-content:space-between;
  padding:0 8px 0 16px;border-bottom:1px solid var(--line-divider);
  position:sticky;top:0;z-index:2;background:var(--panel);
}
.toolbox-head b{font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui)}
#toolbox-fold{
  height:var(--h-small);padding:0 8px 0 16px;
  display:inline-flex;align-items:center;gap:4px;
  font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink2);
}
#toolbox-fold:hover{background:var(--hover);color:var(--ink)}
.toolbox-tools{
  flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 16px 12px;
}
.toolbox-tools button[data-tool]{
  height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px;gap:4px;color:var(--ink2);text-align:center;
}
.tool-thumb{height:58px;width:100%;display:grid;place-items:center}
.tool-thumb canvas{max-height:58px;max-width:100%;display:block}
.tool-name{font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui)}
/* The chosen tool card already shows the name, so the heading and its line read as one sentence. */
.tool-head{flex:none;padding:0 16px 16px;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui)}
.tool-head h2{display:inline;margin:0 8px 0 0;font:var(--fw-strong) var(--fs-body)/var(--lh-ui) var(--font-ui)}
.tool-head p{display:inline;margin:0;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink2)}
.toolbox-search{
  flex:none;margin:0 16px 12px;height:var(--h-control);border-radius:var(--r-box);
  background:var(--field);border:1px solid var(--line);
  display:flex;align-items:center;gap:8px;padding:0 8px 0 16px;color:var(--ink2);
}
#lib-search{flex:1;min-width:0;border:0;background:transparent;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink);outline:none}
@media(pointer:coarse){#lib-search{font-size:16px}} /* iOS zooms into inputs under 16px: the one exception to the 5 sizes */
#lib-search::placeholder{color:var(--ink3)}
#lib-search-clear{width:var(--h-small);height:var(--h-small);display:grid;place-items:center;color:var(--ink2)}
#lib-search-clear:hover{background:var(--hover)}
/* Filters open on request (every width); with few materials, search and filters are not shown at all. */
#tb-filter-toggle{flex:none;display:flex;align-items:center;gap:8px;margin:0 16px 12px;height:var(--h-control);padding:0 16px;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
#tb-filter-toggle:hover{background:var(--hover);box-shadow:inset 0 0 0 1px var(--line-hover)}
#tb-filter-toggle::after{content:"";width:8px;height:8px;margin-left:auto;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
body.filters-open #tb-filter-toggle::after{transform:translateY(2px) rotate(-135deg)}
body:not(.filters-open) .tb-filter-row{display:none}
body.few-materials :is(.toolbox-search,#tb-filter-toggle,.tb-filter-row){display:none}
.tb-filter-row{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:0 16px 12px;min-width:0}
.tb-filter-lbl{flex:none;font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui);color:var(--ink2)}
.tb-swatches{display:flex;gap:4px;flex-wrap:wrap;min-width:0}
.tb-swatch-btn{
  position:relative;
  width:44px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0;
  font-size:var(--fs-caption);color:var(--ink2);flex:none;
}
.tb-swatch-btn:hover{background:var(--hover)}
.tb-swatch-btn i{
  width:28px;height:28px;border-radius:50%;
  /* Flat paint, with a clear rim so the white one does not melt into the panel. */
  background:var(--c,#ccc);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.tb-swatch-btn[aria-checked="true"]{color:var(--ink)}
/* A swatch keeps a small gap before its ring so the colour stays readable. */
.tb-swatch-btn[aria-checked="true"] i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 0 0 2px var(--panel),0 0 0 3px var(--line-sel)}
.tb-swatch-btn[aria-checked="true"]::after{content:"✓";position:absolute;top:0;right:0;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--panel);font-size:var(--fs-caption);line-height:1}
/* “All” is not a colour: an empty ring with three small dots. */
.tb-swatch-btn[data-tb-color=""] i{
  background:radial-gradient(circle at 32% 58%,#9C8FD0 0 3px,transparent 3.5px),radial-gradient(circle at 50% 36%,#E3A1B8 0 3px,transparent 3.5px),radial-gradient(circle at 68% 58%,#8FB07A 0 3px,transparent 3.5px),var(--field);
}
.tb-tags{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.tb-tag-btn{flex:none;height:var(--h-small);padding:0 16px;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui)}
#toolbox-result{
  flex:none;display:flex;align-items:center;gap:8px;min-height:var(--h-control);padding:4px 16px;
  font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink2);border-top:1px solid var(--line-divider);
}
#toolbox-result b{color:var(--ink);font-weight:var(--fw-regular)}
#toolbox-clear{margin-left:auto;height:var(--h-small);padding:0 12px;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink)}
#toolbox-clear:hover{background:var(--hover)}
#toolbox-list{flex:none;display:grid;grid-template-columns:1fr;gap:8px;align-content:start;padding:0 16px 24px;font-size:var(--fs-body)}
#toolbox-list>:is(.toolbox-plant-head,.toolbox-grid3,.toolbox-empty){grid-column:1/-1}
/* Single-part tiles get more columns when the toolbox itself is wide (bottom sheet), not the screen. */
@container toolbox (min-width:560px){.toolbox-grid3{grid-template-columns:repeat(5,1fr)}}
.toolbox-plant-head{display:flex;align-items:baseline;gap:8px;margin:8px 0 0}
.toolbox-plant-head b{font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink)}
.toolbox-plant-count{font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui);color:var(--ink2)}
.toolbox-row{
  /* One card per line: name and description on the left, the picture on the right. */
  position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) min(176px,48%);align-items:center;gap:8px;
  min-height:92px;padding:12px 16px;text-align:left;
}
.toolbox-row-text{display:block;min-width:0}
.toolbox-row b{display:block;font:var(--fw-strong) var(--fs-item)/var(--lh-ui) var(--font-ui)}
.toolbox-row small{display:block;font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui);color:var(--tile-ink2);margin-top:4px}
/* Selected card: a frame and a small check at the card’s top-right (same place as single tiles). The word stays for screen readers. */
.toolbox-row em.toolbox-use{display:none;position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  background:var(--tile-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;
  font-size:0;color:transparent;overflow:hidden;z-index:1}
.toolbox-row.on em.toolbox-use{display:block}
html[data-mode="dark"] .toolbox-row em.toolbox-use{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%231C1C1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.toolbox-row-preview{height:72px;display:grid;place-items:center}
.toolbox-row-preview canvas{max-height:72px;max-width:100%;display:block}
.toolbox-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.toolbox-tile{
  position:relative;padding:8px 8px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
}
.toolbox-tile.on::after{content:"✓";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--tile-ink);color:var(--tile);font-weight:var(--fw-strong)}
.toolbox-tile canvas{max-height:84px;max-width:100%;display:block}
.toolbox-tile span{font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui)}
.toolbox-empty{margin:16px 0;padding:24px 16px;border-radius:var(--r-box);border:1px dashed var(--line);text-align:center;color:var(--ink2);font-size:var(--fs-body);line-height:var(--lh-text)}
.toolbox-empty button{margin-top:16px;height:var(--h-control);width:100%;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui)}
.toolbox-tool-section{flex:none;padding:0 16px 12px}
.dots{display:block}
.dots>.dot-lead{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.dots{padding:0;border-top:1px solid var(--line-divider)}
.dots[hidden]{display:none!important}
.dot-settings{flex:none;border-top:1px solid var(--line-divider);padding:12px 16px 16px}
.dot-settings h3{font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);margin:0 0 8px}
.dot-set{display:grid;grid-template-columns:52px 1fr;align-items:center;column-gap:12px;margin-bottom:8px}
.dot-set b{font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui)}
.dot-set .ends{grid-column:2;display:flex;justify-content:space-between;font-size:var(--fs-caption);color:var(--ink2);margin-top:0px;margin-bottom:4px}
.slider-row,.dot-control{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}
/* “Variation” is both a dot-set row and a dot-control: keep the dot-set grid so its labels sit under the slider. */
.dot-set.dot-control{display:grid}
.slider-row .lbl,.dot-spacing-label,.dot-strength-label{font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink2);min-width:4.2em}
.slider-row .dense,.slider-row .sparse,.slider-row .mild,.slider-row .strong{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.dot-set .ends .dense,.dot-set .ends .sparse,.dot-set .ends .mild,.dot-set .ends .strong{
  position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;
}
/* Sliders: a hairline track and a white knob with a hairline edge. */
.range{position:relative;flex:1;min-width:80px;height:28px}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;touch-action:pan-x}
input[type="range"]::-webkit-slider-runnable-track{height:2px;border-radius:0;background:var(--line)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;margin-top:-8px;background:var(--panel);border:1px solid var(--line-hover);box-shadow:none}
input[type="range"]::-moz-range-track{height:2px;background:var(--line);border:0}
input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--panel);border:1px solid var(--line-hover);box-shadow:none}
/* Folded toolbox: a narrow strip */
.toolbox-strip{
  grid-column:2;grid-row:2;
  position:relative;z-index:2;
  background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0;
  opacity:0;pointer-events:none;transition:opacity .15s;min-width:0;overflow:hidden;
}
body.toolbox-folded .toolbox-strip{opacity:1;pointer-events:auto;transition-delay:.15s}
#toolbox-unfold{
  width:88px;height:var(--h-control);display:flex;align-items:center;justify-content:center;gap:4px;
  font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink2);margin-bottom:8px;
}
#toolbox-unfold:hover{background:var(--hover);color:var(--ink)}
.toolbox-strip-tools{display:flex;flex-direction:column;align-items:center;gap:8px}
.toolbox-strip-tools button[data-strip-tool]{
  width:88px;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink2);text-align:center;
}
.strip-thumb{width:70px;height:40px;display:grid;place-items:center}
.strip-thumb canvas{max-width:70px;max-height:40px;display:block}
.toolbox-now{margin-top:16px;width:88px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.toolbox-now em{font-style:normal;font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui);color:var(--ink2)}
#toolbox-now-preview{width:88px;height:70px;display:grid;place-items:center;padding:8px}
#toolbox-now-preview canvas{max-width:100%;max-height:56px;display:block}
#toolbox-now-label{font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink)}

/* ---------- Bar over a selected part ---------- */
.inspector{
  position:fixed;left:var(--sel-x);top:calc(var(--sel-y) - 8px);transform:translateY(-100%);
  width:max-content;max-width:calc(100vw - 32px);z-index:8;height:44px;
  display:none;overflow:visible;pointer-events:none;visibility:hidden;padding:8px;
}
.inspector.is-open{display:flex;align-items:center;pointer-events:auto;visibility:visible;transform:translateY(-100%)}
/* While a part is being turned the bar steps aside; it comes back placed clear of the new frame. */
body.is-turning .inspector.is-open{visibility:hidden;pointer-events:none}
.inspector.is-open.below{top:calc(var(--sel-y) + var(--sel-h) + 8px);transform:none}
.inspector.is-open.docked{left:16px;right:16px;top:auto;bottom:calc(var(--sheet-h,var(--sheet-open)) + 8px);transform:none;width:auto;max-width:none}
@media(prefers-reduced-motion:reduce){.inspector,.save-dot,.shell.app,body.is-drawing .card-readout{transition:none}}
body.is-drawing .card-readout{opacity:.18;transition:opacity var(--t) var(--ease)}
.edit{display:flex;align-items:center;gap:4px;height:32px;margin:0}
.ctx-main,.ctx-slider{display:flex;align-items:center;gap:4px;height:32px}
.inspector.is-slider .ctx-main{display:none}
.inspector:not(.is-slider) .ctx-slider{display:none}
.ctx-slider .range{width:160px}
.ctx-size-wrap,.ctx-angle-wrap{display:flex;align-items:center;gap:8px}
.inspector.is-slider[data-ctx="size"] .ctx-angle-wrap{display:none}
.inspector.is-slider[data-ctx="rotate"] .ctx-size-wrap{display:none}
.size-label,.angle-label,.ctx-slider-lbl{font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui);color:var(--ink2)}
#single-edit button{min-width:28px;height:36px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;gap:4px;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink);min-height:36px}
#single-edit button:hover{background:var(--hover)}

#single-edit .txt{font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui)}
.sep{width:1px;height:16px;background:var(--line-divider);margin:0 4px;flex:none}

/* ---------- Viewing / export ---------- */
.viewbar{position:absolute;inset:0;z-index:4;pointer-events:none;border:0;background:transparent;display:block;padding:0}
#view-exit{position:absolute;top:16px;left:16px;pointer-events:auto;display:inline-flex;align-items:center;gap:8px;height:44px;padding:8px 16px;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);min-height:36px;box-shadow:none}
.export{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);pointer-events:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;padding:8px 12px}
.export-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.export-size{font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap}
.png-warning{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);margin:0;font:var(--fw-regular) var(--fs-caption)/var(--lh-ui) var(--font-ui);color:var(--ink2);pointer-events:none;width:max-content}
#viewbar #png-status{border:0;padding:0;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.png-seg{display:flex;align-items:center;gap:8px}
.png-opt{position:relative;display:inline-flex;align-items:center;height:36px;padding:0 16px;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--chip-ink);cursor:pointer;min-height:36px;box-shadow:inset 0 0 0 1px var(--line)}
.png-opt:hover{background:var(--hover);box-shadow:inset 0 0 0 1px var(--line-hover)}
.png-opt:has(input:checked){color:var(--sel-ink);background:var(--sel-bg);box-shadow:inset 0 0 0 1px var(--sel-bg)}
.export input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);appearance:none;pointer-events:none}
#png-export{height:var(--h-small);padding:0 16px;border-radius:var(--r-box);background:var(--accent);color:var(--accent-ink);font:var(--fw-strong) var(--fs-body)/var(--lh-ui) var(--font-ui);min-height:36px}

/* ---------- Messages ---------- */
.toasts{position:absolute;left:16px;bottom:24px;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:min(360px,calc(100vw - 32px));pointer-events:none}
.toasts>:not(:empty){pointer-events:none;padding:8px 12px;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);width:max-content;max-width:100%}
.toasts .toast-info:not(:empty){background:var(--panel);color:var(--ink);border-color:var(--line-divider)}
.toasts .toast-warning:not(:empty){background:var(--toast-warning-bg);color:var(--toast-warning-ink);border:1px solid var(--toast-warning-line);border-left-width:4px}
.toasts .toast-warning:not(:empty)::before{content:"!";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border:1px solid currentColor;border-radius:50%;font-weight:var(--fw-strong);line-height:1}
#status:empty,#paper-status:empty,#file-status:empty,#draft-status:empty{display:none}
#draft-takeover{pointer-events:auto;min-height:36px;height:auto;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui)}
.draft{display:flex;flex-direction:column;gap:8px}
.draft p{margin:0;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink2)}
.draft h2,.draft #draft-message{font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink)}
.draft button{pointer-events:auto}
.draft-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#draft-resume,#draft-new,#draft-discard,#draft-keep{height:36px;padding:0;font:var(--fw-regular) var(--fs-body)/var(--lh-ui) var(--font-ui);color:var(--ink);background:transparent;border:0;min-height:36px}
#draft-discard{color:var(--danger)}
#draft:not([hidden]){position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 32px));z-index:12;padding:16px;display:flex;flex-direction:column;gap:8px;max-height:none;overflow:visible;pointer-events:auto}

/* ---------- Screen sizes ---------- */

@media(max-width:900px){
  html,body,.shell.app{overflow-x:hidden}
  .shell.app{
    grid-template-columns:1fr;
    grid-template-rows:var(--top-h) minmax(0,1fr) var(--sheet-h,var(--sheet-open));
  }
  /* Folded = one 88px bar with just two things: what you are drawing with now, and “open materials”. */
  body.toolbox-folded{--sheet-h:var(--sheet-folded);--pw:100%}
  .toolbox-panel{grid-column:1;grid-row:3;border-left:0;border-top:1px solid var(--line)}
  .toolbox-strip{
    grid-column:1;grid-row:3;
    border-left:0;border-top:1px solid var(--line);
    flex-direction:row;justify-content:space-between;align-items:center;gap:12px;width:100%;height:100%;
    padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));overflow:hidden;
  }
  .toolbox-strip-tools{display:none}
  .toolbox-now{margin:0;width:auto;flex:1;min-width:0;display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;text-align:left;align-items:center}
  .toolbox-now em{grid-column:2;grid-row:1;align-self:end}
  #toolbox-now-preview{grid-column:1;grid-row:1/3;width:72px;height:56px;padding:4px}
  #toolbox-now-preview canvas{max-height:48px}
  #toolbox-now-label{grid-column:2;grid-row:2;align-self:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #toolbox-unfold{order:2;flex:none;width:auto;height:var(--h-control);padding:0 16px;margin:0;border-radius:var(--r-ctl);box-shadow:inset 0 0 0 1px var(--line)}
  .toolbox-body{width:100%;padding-bottom:env(safe-area-inset-bottom,0px)}
  /* The open sheet says what it is and how to close it: a grab bar on top of the “Toolbox / close” heading. */
  .toolbox-head{padding-top:8px}
  .toolbox-head::before{content:"";position:absolute;left:50%;top:8px;width:32px;height:4px;margin-left:-16px;background:var(--line)}
  /* Open sheet: tools as one row of small picture + name, so the list keeps the room. */
  .toolbox-tools{padding:12px 16px}
  .toolbox-tools button[data-tool]{height:var(--h-control);min-height:52px;flex-direction:row;justify-content:flex-start;gap:8px;padding:4px 8px}
  .tool-thumb{width:48px;height:32px;flex:none}
  .tool-thumb canvas{max-height:32px}
  .card-readout .card-btn{display:none}
  body.card-menu-open .stage{z-index:15}
  .card-pop.as-sheet{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;z-index:40;
    max-height:80dvh;border-radius:var(--r-box) var(--r-box) 0 0;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
    box-shadow:var(--shadow-3),0 0 0 100vmax rgba(0,0,0,.32);
  }
  .top-bar{padding:0 12px 0 16px}
  #status{max-width:40vw}
  .toasts{bottom:calc(var(--sheet-h,var(--sheet-open)) + 16px)}
}

@media(min-width:901px){
  .inspector.is-open.docked{bottom:16px}
}
/* Touch screens and phones: every control is at least 44px. */
@media(max-width:900px),(pointer:coarse){:root{--h-small:44px}}

body:not(.debug) .debug-only{display:none!important}