/* Krafty — chrome.
   Same design language as the landing page: floral-white stock, ink with a
   little cerulean in it, the addon's lasso gold as the one accent, and every
   raised surface a piece of card with a soft shadow under it. */

/* Scrollbars and form controls drawn to match the look (dark in soft). */
:root {
  color-scheme: light;
  --bg: #FEF9EF;
  --surface: #FFFDF8;
  --ink: #22303D;
  --muted: #5F6B78;
  --faint: #8A94A0;
  --rule: #EEE2CC;
  --edge: #DCCDB0;
  --gold: #FFEE33;
  --gold-ink: #8A6D05;
  --cut: #FE6D73;
  --shadow: 0 1px 0 rgba(120, 96, 50, .10), 0 6px 16px -6px rgba(60, 45, 20, .28);
  --pop-shadow: 0 12px 40px -10px rgba(60, 45, 20, .45);
  --hover: #FBF3E2;
  --hover-2: #F6EAD0;
  --field: #FFFEFB;
  --knob: #FFFDF8;
  --switch-on: #F2C230;       /* switches that are on */
  --slider: #D9C416;
  --gold-edge: #D9C416;       /* the rim of anything yellow */
  --gold-hot: #FFE41A;        /* yellow, being dragged */
  --gold-pale: #FFE9A8;
  --switch-off: #D8D2C6;
  --danger-bg: #FFE9EA;
  --on-gold: #22303D;         /* icons and words sitting on the yellow */
  --gold-soft: #FFF6A8;
  --groove: linear-gradient(#D9CCB3, #EFE5D2);
  --toast-bg: rgba(34, 48, 61, .92);
  --toast-ink: #FEF9EF;
  --brand: #22303D;           /* the logo and big hint, over the stage */
  --font-display: "General Sans", ui-sans-serif, system-ui, sans-serif;
  --font-label: "Supreme", ui-sans-serif, system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* Soft charcoal: a low-contrast look. Charcoal card, off-white marks, the same
   yellow. Easier on the eye than either black on white or white on black. */
html.soft {
  color-scheme: dark;
  --bg: #36373B;
  --surface: #424347;
  --ink: #E4DFD4;
  --muted: #ABA69C;
  --faint: #8A867F;
  --rule: #4F5055;
  --edge: #505156;
  --gold-ink: #95F2CB;
  --shadow: 0 1px 0 rgba(0, 0, 0, .10), 0 6px 18px -6px rgba(0, 0, 0, .42);
  --pop-shadow: 0 12px 40px -10px rgba(0, 0, 0, .55);
  --hover: #4C4D52;
  --hover-2: #55565B;
  --field: #393A3E;
  --knob: #303135;
  /* The UI's own accent (the yellow stays the brand's): a fresh turquoise, since
     18 Oct 2026. Two strengths: the full one for thin things (the stage's pick
     lines, handles and box select read --gold-rgb in main.js; slider thumbs),
     where pulling the eye is the point, and a calmer one for the filled buttons
     and switches (--gold), so big blocks don't shout.
     The sage green it replaced, kept to go back to:
       --gold-ink #B8D09E; --gold #A1BF82; --gold-rgb 161, 191, 130;
       --gold-edge #8EAC70; --gold-hot #B0CC93; --switch-on, --slider #A1BF82 */
  --gold-line: #74F9C1;
  --gold-rgb: 116, 249, 193;
  --gold: #68E8B5;
  --gold-edge: #54D0A0;
  --gold-hot: #7DF0C2;
  --gold-pale: rgba(var(--gold-rgb), .35);
  --switch-on: var(--gold);
  --slider: var(--gold-line);
  --switch-off: #6A6B70;
  --danger-bg: rgba(224, 68, 76, .20);
  --on-gold: #303135;
  --gold-soft: rgba(var(--gold-rgb), .32);
  --groove: linear-gradient(#35363A, #4A4B50);
  --toast-bg: rgba(228, 223, 212, .95);
  --toast-ink: #303135;
  --brand: #3B3C40;
}
html.soft #btn-delete:hover, html.soft #btn-bone-delete:hover, html.soft #btn-lamp-delete:hover { color: #FF8A8F; }
html.soft #tl-auto svg { stroke: #FF7B82; }

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-label);
  -webkit-font-smoothing: antialiased;
  /* A drawing surface: no text selection, no callouts, no browser gestures. */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  overscroll-behavior: none;
}
/* ...but every text box can be typed in: on iPad, no selection means no keyboard. */
input, textarea { -webkit-user-select: text; user-select: text; }
/* Number boxes without the browser's up/down arrows: a pen press on one can
   miss its release, and the arrow then counts on by itself. Type, or the arrow keys. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

#stage { position: fixed; inset: 0; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ink { pointer-events: none; }
/* The shot camera's frame (src/shot.js): what's outside it dimmed, a thin line round it. */
#shot-mask { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#shot-frame { position: absolute; pointer-events: none; box-sizing: border-box; border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 0 0 1px rgba(20,28,40,0.35), 0 0 0 200vmax rgba(14,20,30,0.42); }
#shot-frame[hidden] { display: none; }
/* Locked to the view: a padlock in the shot's bottom-left corner, in the camera's blue (as its key). */
#shot-frame .lock-mark { position: absolute; left: 14px; bottom: 14px; width: 36px; height: 51px; fill: #3A6FE0; stroke: #3A6FE0; stroke-width: 2.6; opacity: 0.5; display: none; }
#shot-frame .lock-mark path { fill: none; }
#shot-frame.locked .lock-mark { display: block; }

/* No browser padding: Safari's is wide (iPad), and squeezes icons off their buttons. */
button { font: inherit; color: inherit; padding: 0; -webkit-tap-highlight-color: transparent; }

svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round; }

.chrome { position: fixed; z-index: 10; }

/* A key: a small square of card. --key sets its size (and what lines up
   with it: the sun dial, the daylight bar, the fold keys); --key-gap the room
   between keys. */
:root { --key: 43px; --key-gap: 5px; }
.key {
  width: var(--key); height: var(--key); border-radius: 6.5px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--edge);
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
/* The icon is pinned to the middle of its square rather than laid out by the
   button: older iPad Safari (iPadOS 17) nudged it a few points right. */
.key { position: relative; padding: 0; }
.key > svg:only-of-type { position: absolute; inset: 0; margin: auto; }
.key svg { width: calc(var(--key) * .54); height: calc(var(--key) * .54); }
.key:active { transform: translateY(1px) scale(.97); }
.key[disabled] { opacity: .38; cursor: default; }
.key.on { background: var(--gold); border-color: var(--gold-edge); }

/* ---- top left: the room, and the brand --------------------------------- */
#topleft {
  top: calc(14px + var(--safe-t)); left: calc(16px + var(--safe-l));
  display: flex; align-items: center; gap: 14px;
}
#brand { width: 104px; color: var(--brand); pointer-events: none; }
/* The room: a key with its name on it, so you always know where you are. */
#btn-room { width: auto; display: flex; gap: 6px; padding: 0 14px 0 10px; font: 600 14px var(--font-display); }
#btn-room > svg { position: static; flex: none; }
#topright > #btn-room { margin-right: 6px; }
#btn-room.holding { animation: chip-hold .48s linear forwards; }
#room-menu {
  position: fixed; z-index: 20; top: calc(14px + var(--key) + 8px + var(--safe-t)); left: calc(16px + var(--safe-l));
  width: 190px; padding: 6px;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--pop-shadow);
}
#room-menu[hidden] { display: none; }
#room-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none;
  border-radius: 11px; cursor: pointer; text-align: left; font: 600 14px var(--font-display);
}
#room-menu button svg { width: 22px; height: 22px; flex: none; }
#room-menu button:hover { background: var(--hover); }
#room-menu button.active { background: var(--gold); color: var(--on-gold); }
#room-menu button[disabled] { opacity: .35; cursor: default; background: none; }
#room-menu kbd { margin-left: auto; }
#brand svg { width: 100%; height: auto; fill: currentColor; stroke: none; display: block; }

/* ---- top right ------------------------------------------------------ */
#topright {
  top: calc(14px + var(--safe-t)); right: calc(16px + var(--safe-r));
  display: flex; gap: var(--key-gap); align-items: center;
}
.dial {
  width: 58px; height: var(--key); border-radius: 7px; position: relative;
  background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow);
  overflow: hidden; cursor: grab; touch-action: none;
}
.dial-sky { position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 120%, #F6E7C6 0%, #FFF8E6 55%, #EEF3F8 100%); }
#sun-dot {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #FFF7B0, #FFC93C 70%);
  box-shadow: 0 0 0 3px rgba(255, 214, 80, .35), 0 0 12px rgba(255, 190, 60, .8);
}

.daybar {
  width: 28px; height: var(--key); border-radius: 6px; position: relative; margin-left: -2px;
  background: linear-gradient(#FFF6DF, #F4C98A 45%, #6A6FA0 78%, #232A40);
  border: 1px solid var(--edge); box-shadow: var(--shadow); cursor: ns-resize; touch-action: none;
}
.daybar[hidden] { display: none; }
/* The sky's own bar: the backdrop's colours, paper down to the night blue. */
#skylight { background: linear-gradient(#EFE6D6, #9AA0C0 40%, #3A4A88 70%, #0F1838); }
#skylight + #daylight { margin-left: 2px; }
/* A bigger grab area than it looks: a finger lands on it easily. */
.daybar::before { content: ''; position: absolute; inset: -10px -6px; }
.daybar.dragging .daybar-knob { transform: scale(1.25); }
.daybar-knob {
  position: absolute; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  transition: transform .12s ease;
  background: var(--surface); border: 1.5px solid var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#ask-value .pp-pill { padding: 0 9px; border-radius: 9px; background: none; cursor: pointer; font: inherit; }
.dial-sky { transition: filter .15s ease; }

body.night #brand, body.night .hint-big { color: #FEF9EF; }
body.studio #brand, body.studio .hint-big { color: #D9DEE6; }
body.night .hint-small { color: #C9CFDB; }

/* ---- left bar ------------------------------------------------------- */
/* Every room's tools start at the same place, just under the keys top right
   (Make, Paint and its Sheet, Animate, Assets), so the column never jumps as you
   change room. --tools-k: where the first key sits, below the tuck key. */
:root { --tools-gap: 3px; --tools-t: calc(14px + var(--key) + 12px + var(--safe-t)); --tools-k: calc(var(--tools-t) + 20px + var(--tools-gap)); }
#leftbar {
  left: calc(16px + var(--safe-l)); top: var(--tools-t);
  display: flex; flex-direction: column; gap: var(--tools-gap);
}
#leftbar .gap { height: 4px; }
/* The little colour ring at the foot of the tools (src/colourring.js), in Make and Paint. */
#colour-ring { display: none; }
:is(body.room-make, body.room-paint) #colour-ring { display: block; width: var(--key); height: var(--key); margin-top: 6px; cursor: pointer; touch-action: none; }
#leftbar.tucked #colour-ring { visibility: hidden; }
/* Short screens (an iPad in landscape, with Safari's bars): a tighter bar. */
@media (max-height: 820px) {
  :root { --key: 40px; --key-gap: 3px; --tools-gap: 2px; }
  #leftbar .gap { height: 2px; }
}

/* ---- brush size and strength, beside the left bar ------------------- */
#brushbars {
  left: calc(16px + var(--key) + 12px + var(--safe-l)); top: var(--tools-k);   /* level with the first tool */
  display: flex; flex-direction: column; gap: 12px; transition: left .22s ease;
}
#brushbars[hidden] { display: none; }
#leftbar.tucked ~ #brushbars { left: calc(16px + var(--safe-l)); }
.bbar {
  position: relative; width: 24px; height: min(20vh, 160px); border-radius: 12px;
  background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow);
  overflow: hidden; touch-action: none; cursor: ns-resize;
}
.bbar[hidden] { display: none; }
.bbar-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--gold-soft); pointer-events: none; }
.bbar-thumb {
  position: absolute; left: 3px; right: 3px; height: 6px; margin-top: -3px; border-radius: 3px;
  background: var(--gold); border: 1px solid var(--gold-edge); pointer-events: none;
}
.bbar svg { position: absolute; left: 50%; bottom: 5px; width: 16px; height: 16px; margin-left: -8px;
  color: var(--muted); pointer-events: none; }

/* ---- depth rail ----------------------------------------------------- */
#rail {   /* centred in the space between the top-right keys and the craft bar, never under them (iPad 6) */
  right: calc(14px + var(--safe-r)); top: calc(14px + var(--key) + 14px + var(--safe-t)); bottom: calc(16px + var(--key) + 24px + var(--safe-b));
  width: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.rail-label, #rail-mode {
  font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
#rail-mode {
  writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 6px;
  letter-spacing: .08em; font-size: 10px; color: var(--faint);
}
#rail-mode.card { color: var(--gold-ink); }
#rail-track {
  position: relative; width: 29px; height: min(46vh, 380px);
  border-radius: 15px; background: var(--surface); border: 1px solid var(--edge);
  box-shadow: var(--shadow); touch-action: none; cursor: ns-resize;
}
#rail-track::before { /* the groove */
  content: ""; position: absolute; left: 50%; top: 16px; bottom: 16px; width: 4px; margin-left: -2px;
  border-radius: 2px;
  background: var(--groove);
}
#rail-ticks { position: absolute; inset: 16px 0; pointer-events: none; }
.tick {
  position: absolute; left: 50%; width: 14px; height: 4px; margin: -2px 0 0 -7px;
  border-radius: 2px; opacity: .9; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
/* A lamp: a small gold cross. */
.tick.lamp { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 0; box-shadow: none; opacity: .95;
  background: linear-gradient(#C9A800, #C9A800) center / 14px 3px no-repeat, linear-gradient(#C9A800, #C9A800) center / 3px 14px no-repeat; }
.tick.lamp.on { background: linear-gradient(#22303D, #22303D) center / 16px 3px no-repeat, linear-gradient(#22303D, #22303D) center / 3px 16px no-repeat; }
#rail-thumb {
  position: absolute; left: 50%; width: 25px; height: 22px; margin: -11px 0 0 -12.5px;
  border-radius: 8px; background: var(--gold); border: 1px solid var(--gold-edge);
  box-shadow: 0 2px 6px rgba(80, 60, 0, .3); pointer-events: none;
  display: grid; place-items: center;
}
#rail-thumb span { width: 12px; height: 2px; background: rgba(0,0,0,.35); border-radius: 1px;
  box-shadow: 0 -5px 0 rgba(0,0,0,.2), 0 5px 0 rgba(0,0,0,.2); }

/* ---- palette -------------------------------------------------------- */
/* Bottom right, and tight: it tucks off to the right into its corner. */
#palette {
  right: calc(16px + var(--safe-r)); bottom: calc(16px + var(--safe-b));
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 10px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow);
}
/* Floating (Q, a finger held still in Make, or dragged by its grip): where
   you left it, over everything, an x at its end to dock it (src/craftbar.js). */
#palette.hud { right: auto; bottom: auto; z-index: 25; box-shadow: var(--pop-shadow); }
#palette.hud > .tuck { display: none; }
#palette { padding-left: 2px; }
.cb-grip {
  align-self: stretch; display: grid; place-items: center; width: 14px; margin-right: -4px; border-radius: 9px;
  color: var(--faint); cursor: grab; touch-action: none; position: relative; flex: none;
}
.cb-grip::before { content: ''; position: absolute; inset: -4px -6px; }   /* easier to catch than it looks */
.cb-grip:hover, #palette.dragging > .cb-grip { color: var(--ink); background: var(--hover); }
#palette.dragging > .cb-grip { cursor: grabbing; }
.cb-grip svg { width: 10px; height: 20px; fill: currentColor; stroke: none; }
.cb-dock {
  display: none; width: 28px; height: 28px; margin-left: -2px; border: 0; border-radius: 50%; background: var(--hover); color: var(--ink);
  place-items: center; padding: 0; cursor: pointer; flex: none; position: relative;
}
#palette.hud > .cb-dock { display: grid; }
.cb-dock:hover { background: var(--rule); }
.cb-dock svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cb-dock::before { content: ''; position: absolute; inset: -6px; }
@media (pointer: coarse) {
  .cb-grip { width: 20px; }
  .cb-dock { width: 34px; height: 34px; }
}
.palname {
  display: flex; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; white-space: nowrap;
  padding: 4px 0;
}
.palname svg { width: 16px; height: 16px; }
/* The tool's own buttons, then a rule, then the palette: its name by its chips. */
#palette > :not([hidden]):not(.tuck):not(.cb-grip) ~ .palname { border-left: 1px solid var(--rule); padding-left: 10px; border-radius: 0; }
#chips { display: flex; gap: 3px; }
#nibs { display: flex; gap: 2px; padding-right: 8px; border-right: 1px solid var(--rule); }
#nibs[hidden] { display: none; }
#nibs button {
  width: 32px; height: 32px; border: 0; border-radius: 5px; background: none; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
#nibs button i { display: block; border-radius: 50%; background: var(--ink); }
#nibs #brush { margin-left: 6px; }
#nibs #brush[hidden], #nibs #pressure[hidden], #nibs #pressure-shade[hidden] { display: none; }
#nibs #brush canvas { display: block; }
#brush-list, #bristle-pop { width: min(210px, calc(100vw - 32px)); padding: 6px; border-radius: 14px; }   /* the brush lists: about half the area of the other lists */
#brush-list .palrow, #bristle-pop .palrow { padding: 3px 9px; gap: 8px; border-radius: 4.5px; }
#brush-list .palrow b, #bristle-pop .palrow b { font-size: 12.5px; }
#brush-list .palrow small, #bristle-pop .palrow small { font-size: 11px; margin-top: 1px; }
#brush-list .palrow canvas { flex: none; }
#brush-list .palrow.family { position: relative; }
/* Held, it does more: a grey tab tucked into the bottom-right corner, its
   corner rounded to sit inside the button's own. */
.hold-tab {
  position: absolute; right: 4px; bottom: 4px; width: 10px; height: 10px; pointer-events: none;
  background: var(--faint); opacity: .7; clip-path: polygon(100% 0, 100% 100%, 0 100%); border-bottom-right-radius: 2.5px;
}
#nibs .hold-tab { right: 3px; bottom: 3px; width: 8px; height: 8px; border-bottom-right-radius: 2px; }
#nibs #brush { position: relative; }
#brush-list .palrow.back b { color: var(--muted); font-weight: 500; }
#brush-list .palrow.family::after {                          /* a corner tab: more inside */
  content: ''; position: absolute; right: 4px; bottom: 4px; width: 13.5px; height: 13.5px;
  background: var(--faint); clip-path: polygon(100% 0, 100% 100%, 0 100%); border-bottom-right-radius: 1.5px; opacity: .7;
}
#brush-list .palrow .more { font-style: normal; color: var(--muted); font-weight: 400; }
#brush-list .palrow.family { touch-action: none; }           /* held and slid off: no scrolling the list */
#bristle-pop { right: auto; bottom: auto; width: min(210px, calc(100vw - 32px)); z-index: 21; touch-action: none; }
#bristle-pop .palrow canvas { flex: none; }
#bristle-pop .palrow.hover { background: var(--hover); }
#brush-list.at { transform: none; bottom: auto; right: auto; }
#brush-list.beside { transform: none; bottom: auto; right: auto; width: min(210px, calc(100vw - 90px)); }
#nibs :is(#pressure, #pressure-shade) svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.15; }   /* drawn close in: thinner lines to match */
#nibs button.active { background: var(--gold); }
/* Edges: a quality of the line, so it sits with the colours. It pulses when
   you pick up the pencil or the scissors, so you know which edge you'll get. */
#edge {
  width: 34px; height: 30px; margin-right: 8px; border: 0; border-radius: 4.5px; background: none; cursor: pointer;
  display: grid; place-items: center; padding: 0; color: var(--ink); flex: none;
}
#edge[hidden] { display: none; }
#edge:hover { background: var(--rule); }
#edge svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#edge.pulse { animation: edge-pulse .9s ease-out; }
@keyframes edge-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 var(--gold); }
  25%  { transform: scale(1.18); box-shadow: 0 0 0 3px var(--gold); }
  60%  { transform: scale(1); box-shadow: 0 0 0 5px transparent; }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
:is(#cutmodes, #drawmodes, #inklayers, .cb-seg) { display: flex; gap: 2px; padding-right: 8px; border-right: 1px solid var(--rule); }
#cutmodes[hidden], #drawmodes[hidden], #inklayers[hidden] { display: none; }
#lightmodes { display: flex; align-items: center; gap: 6px; padding-right: 8px; border-right: 1px solid var(--rule); }
#lightmodes[hidden] { display: none; }
#inkshape[hidden] { display: none; }
:is(#cutmodes, #drawmodes, #inklayers, .cb-seg) button {
  height: 30px; padding: 0 9px; border: 0; border-radius: 4.5px; background: none; cursor: pointer;
  font-weight: 600; font-size: 13px; white-space: nowrap;
}
/* Shapes / Strips: a compact switch, so the whole bar stays short (Matt, 9 Oct). */
#drawmodes button { height: 26px; padding: 0 6px; font-size: 12px; }
@media (pointer: coarse) { #drawmodes button { height: 32px; padding: 0 8px; } }
:is(#cutmodes, #drawmodes, #inklayers, .cb-seg) button:is(.active, .on) { background: var(--gold); }
/* Line and Fill: two little boxes stacked as the layers are, Line on top. */
#inklayers { flex-direction: column; gap: 2px; }
#inklayers button {
  height: 15px; width: 38px; padding: 0; border: 1px solid var(--edge); border-radius: 4px;
  font-size: 10px; line-height: 13px; background: var(--surface);
}
#inklayers button.active { border-color: var(--gold-edge); }
:is(#inkacross, #fillcontig, .cb-btn) {
  height: 30px; padding: 0 9px; margin-right: 8px; border: 0; border-radius: 4.5px; background: none; cursor: pointer;
  font-weight: 600; font-size: 13px; white-space: nowrap;
}
#inkacross[hidden], #fillcontig[hidden] { display: none; }
:is(#inkacross, #fillcontig).active, .cb-btn.on { background: var(--gold); }
.cb-btn { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-family: inherit; }
.cb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#nibs.erase button i { background: none; border: 1.5px solid var(--ink); transform: scale(1.35); }
.chip {
  width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.15);
  transition: transform .12s ease;
}
.chip.active { transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }

.popover {
  position: fixed; z-index: 20; right: calc(16px + var(--safe-r));
  bottom: calc(64px + var(--safe-b));
  background: var(--surface); border: 1px solid var(--edge); border-radius: 18px;
  box-shadow: var(--pop-shadow); padding: 8px; width: min(420px, calc(100vw - 32px));
  max-height: 60vh; overflow: auto;
}
.palrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 10px 12px; border: 0; background: none; border-radius: 6px; cursor: pointer; text-align: left;
}
.palrow:hover, .palrow.active { background: var(--hover); }
.palrow b { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.palrow small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.palrow .mini { display: flex; flex: none; }
.palrow .mini i { width: 16px; height: 22px; display: block; }
.palrow .mini i:first-child { border-radius: 5px 0 0 5px; }
.palrow .mini i:last-child { border-radius: 0 5px 5px 0; }

/* ---- file menu ------------------------------------------------------ */
#file-menu {
  position: fixed; z-index: 20; top: calc(72px + var(--safe-t)); right: calc(16px + var(--safe-r));
  width: min(340px, calc(100vw - 32px)); padding: 8px;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 18px;
  box-shadow: var(--pop-shadow);
}
#file-menu[hidden] { display: none; }
.fm-name { display: block; padding: 8px 10px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.fm-name > span:first-child { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.fm-name input {
  width: 100%; font: 600 16px var(--font-display); color: var(--ink); padding: 8px 10px;
  border: 1px solid var(--edge); border-radius: 10px; background: var(--field);
  -webkit-user-select: text; user-select: text; outline: none;
}
.fm-file { display: flex; align-items: center; gap: 6px; }
.fm-file i { font-style: normal; color: var(--muted); font-size: 14px; }
.fm-name input:focus { border-color: var(--gold-edge); box-shadow: 0 0 0 3px rgba(255, 238, 51, .45); }
.fm-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; background: none; border-radius: 6px; cursor: pointer; text-align: left;
}
.fm-row:hover { background: var(--hover); }
.fm-row b { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.fm-row small { grid-column: 1; color: var(--muted); font-size: 12px; margin-top: 2px; }
.fm-row kbd { grid-row: 1 / span 2; grid-column: 2; }
/* A dot on the folder: this box has changes not yet saved to a file. */
#btn-file { position: relative; }
#btn-file.unsaved::after {
  content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cut); box-shadow: 0 0 0 2px var(--surface);
}

/* ---- colour wheel --------------------------------------------------- */
/* The wheel chip: your own colour inside a rainbow ring. */
.chip.wheel {
  --c: #FFFDF8;
  background: radial-gradient(circle, var(--c) 0 56%, transparent 57%),
    conic-gradient(from 90deg, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00);
}
.chip.wheel.empty { --c: #FFFDF8; }
/* The eyedropper, beside the wheel chip: always to hand on an iPad (on the
   craft bar, and in Make's panel). */
#btn-dropper {
  width: 28px; height: 28px; margin-left: 2px; border: 0; border-radius: 50%; background: none; cursor: pointer;
  display: grid; place-items: center; padding: 0; color: var(--ink); flex: none;
}
#btn-dropper svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#btn-dropper:hover { background: var(--rule); }
#btn-dropper.on { background: var(--gold); }
/* Paper: a swatch of the paper new cards are made of. */
#btn-paper {
  width: 26px; height: 26px; margin-left: 2px; border: 0; border-radius: 50%; cursor: pointer; padding: 0; flex: none;
  background: #FFFDF8 center / cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.15);
}
#btn-paper.plain { background-image: repeating-linear-gradient(135deg, #F3EBDD 0 3px, #FFFDF8 3px 6px); }
.paperrow { justify-content: flex-start; position: relative; }
.paperrow .swatch { width: 44px; height: 32px; flex: none; border-radius: 6px; background: #FFFDF8 center / cover;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); display: grid; place-items: center; font-style: normal; font-size: 20px; color: var(--muted); }
.plainrow .swatch { background-image: repeating-linear-gradient(135deg, #F3EBDD 0 3px, #FFFDF8 3px 6px); }
.paperrow .swatch svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.paper-x { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; cursor: pointer;
  font-size: 18px; color: var(--muted); flex: none; }
.paper-x:hover { background: var(--rule); color: var(--ink); }
/* Holding a chip: a gold ring grows round it until the wheel opens. */
.chip.holding { animation: chip-hold .48s linear forwards; }
@keyframes chip-hold {
  from { box-shadow: 0 0 0 3px var(--surface), 0 0 0 3px var(--gold); }
  to   { box-shadow: 0 0 0 3px var(--surface), 0 0 0 7px var(--gold); }
}
#picker {
  position: fixed; z-index: 21; width: 264px; padding: 10px 12px 12px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 20px;
  box-shadow: var(--pop-shadow);
}
#picker[hidden] { display: none; }
.pk-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pk-swatch { display: flex; height: 32px; flex: 1; border-radius: 10px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pk-old { flex: 1; border: 0; cursor: pointer; padding: 0; }
.pk-new { flex: 1.4; }
.pk-mode, .pk-dropper {
  width: 36px; height: 36px; border-radius: 5px; border: 1px solid var(--edge); background: var(--surface);
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
}
.pk-dropper.on { background: var(--gold); border-color: var(--gold-edge); }
.pk-dice.on { background: var(--gold); }
.pk-mode svg, .pk-dice svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pk-wheel[hidden], .pk-sliders[hidden], .pk-discrow[hidden] { display: none; }
/* Triangle / Disc / Sliders */
.pk-seg { display: flex; gap: 2px; padding: 2px; margin-bottom: 8px; border-radius: 10px; background: var(--rule); }
.pk-seg button { flex: 1; height: 26px; border: 0; border-radius: 4px; background: none; cursor: pointer;
  font: 600 12px var(--font-display, inherit); color: var(--muted); }
.pk-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.pk-sl output { width: 38px; font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); text-align: right; }
/* Blender's disc, with its value bar beside it */
.pk-discrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 2px 0 4px; }
.pk-disc { display: block; touch-action: none; cursor: crosshair; }
.pk-vtrack { position: relative; width: 26px; height: 200px; touch-action: none; cursor: pointer; }
.pk-vbar { position: absolute; left: 6px; right: 6px; top: -4px; bottom: -4px; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.pk-vtrack .pk-thumb { left: 50%; margin: -8px 0 0 -8px; }
.pk-sliders { display: grid; gap: 2px; padding: 2px 0; }
.pk-sl { display: flex; align-items: center; gap: 10px; }
.pk-sl b { width: 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
/* A finger-sized strip to grab; the bar in it slender. */
.pk-track { position: relative; flex: 1; height: 30px; margin: 0 8px; touch-action: none; cursor: pointer; }
.pk-bar { position: absolute; left: -8px; right: -8px; top: 50%; height: 9px; margin-top: -4.5px; border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pk-thumb { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  box-shadow: 0 0 0 2px #FFFDF8, 0 0 0 3px rgba(34,48,61,.55), 0 1px 3px 2px rgba(0,0,0,.18); pointer-events: none; }
.pk-shades, .pk-harmony { display: flex; gap: 4px; }
.pk-vary { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.pk-vary[hidden] { display: none; }
.pk-dice { width: 32px; height: 32px; flex: none; border: 0; background: none; padding: 0; border-radius: 4.5px;
  display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.pk-harm-head { display: flex; align-items: center; justify-content: space-between; }
.pk-rule { appearance: none; -webkit-appearance: none; border: 0; background: none; cursor: pointer; padding: 2px 16px 2px 4px;
  font: 600 12px var(--font-display, inherit); color: var(--ink); text-transform: none; letter-spacing: 0; text-align: right;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 6px center, right 2px center; background-size: 4px 4px; background-repeat: no-repeat; }
/* The open list is drawn by the system (white on ChromeOS and Windows): give it our colours. */
.pk-rule option { background: var(--surface); color: var(--ink); }
.pk-shade { flex: 1; height: 24px; border: 0; padding: 0; border-radius: 7px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pk-shade.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }
.pk-wheel { display: block; margin: 0 auto; touch-action: none; cursor: crosshair; }
.pk-hex { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.pk-hex span { color: var(--muted); font-weight: 600; }
.pk-hex input {
  flex: 1; font: 600 15px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; color: var(--ink);
  padding: 5px 9px; border: 1px solid var(--edge); border-radius: 9px; background: var(--field);
  -webkit-user-select: text; user-select: text; outline: none; text-transform: uppercase;
}
.pk-hex input:focus { border-color: var(--gold-edge); box-shadow: 0 0 0 3px rgba(255, 238, 51, .45); }
.pk-label { margin: 8px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.pk-label[hidden], .pk-recents[hidden] { display: none; }
.pk-recents { display: flex; gap: 5px; flex-wrap: wrap; }
.pk-recent { width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
#stage.eyedrop { cursor: crosshair; }
/* Every colour wheel (.pk: the pop-out #picker, the Sheet's Colour tab) is the
   compact one (Makey copies it): about 70% of the old size (the wheel and
   disc by PICKER_SCALE, src/picker.js; this shrinks the rest to match). Sizes
   only: colours and fonts are Krafty's own. The wheel is --pk-w wide wherever
   it sits; nothing in it may be wider (a sideways scroll shows as a bar). */
:root { --pk-w: 172px; }
#picker { width: calc(var(--pk-w) + 18px); padding: 8px 9px 9px; border-radius: 14px; overflow-x: hidden; }
.pk .pk-hex input { min-width: 0; width: 0; }
.pk .pk-harm-head { min-width: 0; }
.pk .pk-rule { min-width: 0; max-width: 60%; }
.pk .pk-head { margin-bottom: 6px; gap: 4px; }
.pk .pk-swatch { height: 24px; border-radius: 7px; }
.pk .pk-dropper { width: 26px; height: 26px; border-radius: 7px; }
.pk .pk-dropper svg { width: 16px; height: 16px; }
.pk .pk-seg { margin-bottom: 6px; border-radius: 8px; }
.pk .pk-seg button { height: 20px; font-size: 10.5px; border-radius: 6px; }
.pk .pk-discrow { gap: 10px; }
.pk .pk-vtrack { width: 20px; }
.pk .pk-vbar { left: 5px; right: 5px; }
.pk .pk-label { margin: 6px 0 3px; font-size: 9.5px; }
.pk .pk-shades, .pk .pk-harmony { gap: 3px; }
.pk .pk-shade { height: 17px; border-radius: 5px; }
.pk .pk-track { height: 24px; margin: 0 6px; }
.pk .pk-bar { left: -6px; right: -6px; height: 7px; margin-top: -3.5px; }
.pk .pk-thumb { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.pk .pk-sl { gap: 6px; }
.pk .pk-sl b { width: 10px; font-size: 10.5px; }
.pk .pk-sl output { width: 30px; font-size: 10px; }
.pk .pk-hex { margin-top: 6px; }
.pk .pk-hex input { font-size: 12px; padding: 3px 7px; border-radius: 7px; }
.pk .pk-recents { gap: 4px; }
.pk .pk-recent { width: 18px; height: 18px; }
.pk .pk-dice { width: 24px; height: 24px; }
.pk .pk-dice svg { width: 16px; height: 16px; }
.pk .pk-rule { font-size: 10.5px; }


/* ---- drawing sheet ---------------------------------------------------- */
#btn-sheet { width: calc(var(--key) + 4px); height: calc(var(--key) + 4px); flex-direction: column; gap: 1px; margin-bottom: 4px; }
#btn-sheet svg { width: 23px; height: 23px; position: static; }
#btn-sheet span { font-size: 8.5px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; margin-right: 6px; }   /* clear of the hold mark */
#btn-sheet.holding { animation: chip-hold .48s linear forwards; }
#btn-sheet.matching { background: var(--gold); border-color: var(--gold-edge); }
#btn-sheet { position: relative; }
#btn-sheet.oncard::after { content: ''; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px var(--ink); }
#sheet-menu hr { border: 0; border-top: 1px solid var(--edge); margin: 5px 8px; }
#draw-menu, #ink-menu {
  position: fixed; z-index: 20; width: 280px; padding: 6px;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 16px;
  box-shadow: var(--pop-shadow);
}
#draw-menu[hidden], #ink-menu[hidden] { display: none; }
#erase-menu { position: fixed; z-index: 20; width: 250px; padding: 6px; background: var(--surface); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--pop-shadow); }
#erase-menu[hidden] { display: none; }
#erase-menu button { display: block; width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: 5.5px; cursor: pointer; text-align: left; }
#erase-menu button:hover, #erase-menu button.active { background: var(--hover); }
#erase-menu b { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
#erase-menu small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
/* Brush mode: a small dot of ink in the eraser's square. */
#btn-tool-erase.brushy::after { content: ''; position: absolute; right: 12px; bottom: 12px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
#btn-tool-erase.holding { animation: chip-hold .48s linear forwards; }
:is(#draw-menu, #ink-menu) button { display: block; width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: 5.5px; cursor: pointer; text-align: left; }
:is(#draw-menu, #ink-menu) button:hover, :is(#draw-menu, #ink-menu) button.active { background: var(--hover); }
:is(#draw-menu, #ink-menu, #erase-menu) button.active:not(.toggle) b::after, :is(#sheet-menu, #cam-menu, #path-menu, #loop-menu, #world-menu) button.active:not(.toggle) b::after { content: ' ✓'; color: var(--gold); font-weight: 700; }   /* what's set, at a glance */
:is(#draw-menu, #ink-menu) b { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
:is(#draw-menu, #ink-menu) small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
:is(#draw-menu, #ink-menu, #erase-menu) hr { border: 0; border-top: 1px solid var(--edge); margin: 5px 8px; }
/* The scissors only cut: shapes or strips is the draw tool's. */
#draw-menu:not(.cutting) [data-cutmode], #draw-menu:not(.cutting) hr.cuts,
#draw-menu.cutting [data-strip], #draw-menu.cutting hr:not(.both, .cuts), #draw-menu.cutting .ends, #draw-menu.cutting [data-dragthick] { display: none; }
#box-menu hr { border: 0; border-top: 1px solid var(--edge); margin: 5px 8px; }
#sheet-menu .toggle, :is(#draw-menu, #ink-menu, #erase-menu) .toggle, :is(#box-menu, #cam-menu) .toggle { display: flex; align-items: center; gap: 10px; }
#sheet-menu .toggle.active, :is(#draw-menu, #ink-menu, #erase-menu) .toggle.active, :is(#box-menu, #cam-menu) .toggle.active { background: none; }
#sheet-menu .toggle .switch, :is(#draw-menu, #ink-menu, #erase-menu) .toggle .switch, :is(#box-menu, #cam-menu) .toggle .switch, .sswitch > span { flex: none; position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--switch-off); transition: background .15s; }
#sheet-menu .toggle .switch::after, :is(#draw-menu, #ink-menu, #erase-menu) .toggle .switch::after, :is(#box-menu, #cam-menu) .toggle .switch::after, .sswitch > span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--knob); transition: left .15s; }
#sheet-menu .toggle .switch.on, :is(#draw-menu, #ink-menu, #erase-menu) .toggle .switch.on, :is(#box-menu, #cam-menu) .toggle .switch.on, .sswitch > input:checked + span { background: var(--switch-on); }
#sheet-menu .toggle .switch.on::after, :is(#draw-menu, #ink-menu, #erase-menu) .toggle .switch.on::after, :is(#box-menu, #cam-menu) .toggle .switch.on::after, .sswitch > input:checked + span::after { left: 14px; }
:is(#draw-menu, #ink-menu, #erase-menu) .ends { display: flex; gap: 4px; padding-left: 14px; }
:is(#draw-menu, #ink-menu, #erase-menu) .ends button { width: auto; padding: 6px 10px; }
:is(#draw-menu, #ink-menu, #erase-menu) .ends b { font-size: 13px; }
/* A labelled row of choices: Edges (draw, scissors), Layer (ink, eraser). */
:is(#ink-menu, #erase-menu) .ends, #draw-menu .edges { align-items: center; padding-left: 12px; }
:is(#ink-menu, #erase-menu) .ends > span, #draw-menu .edges > span { width: 52px; flex: none; font-size: 12px; color: var(--muted); }
#draw-menu .edges { display: flex; gap: 2px; padding: 2px 4px 2px 12px; }
#draw-menu .edges button { width: auto; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 4px 5px; }
#draw-menu .edges svg { width: 22px; height: 22px; stroke-width: 2; }
#draw-menu .edges b { font-size: 12px; }
#draw-menu .edges button.active b::after { content: none; }
#draw-menu .edges button.active { background: var(--gold); color: var(--on-gold); }
/* The eraser's menu: the brush's choices only while it brushes. */
#erase-menu:not(.brushing) .brushy { display: none; }
/* Strips on: a little tapered stroke in the tool's square. */
/* The same marks on the draw glyph by the pointer (src/main.js). */
:is(#btn-tool-draw, .draw-glyph).strip::before {
  content: ''; position: absolute; left: 6px; bottom: 7px; width: 11px; height: 4px;
  background: currentColor; border-radius: 1px 4px 4px 1px; transform: rotate(-12deg);
}
/* Box select on: the arrow in a dashed box. */
#btn-tool-select .i-box, #btn-tool-select.boxing .i-arrow { display: none; }
#btn-tool-select.boxing .i-box { display: block; }
/* Bézier on: the draw tool is a pen, not a pencil. */
:is(#btn-tool-draw, .draw-glyph) .i-pen, :is(#btn-tool-draw, .draw-glyph).corners .i-pencil { display: none; }
:is(#btn-tool-draw, .draw-glyph).corners .i-pen { display: block; }
/* Rectangle on: the draw tool is a rectangle. */
:is(#btn-tool-draw, .draw-glyph) .i-rect, :is(#btn-tool-draw, .draw-glyph).rect .i-pencil { display: none; }
:is(#btn-tool-draw, .draw-glyph).rect .i-rect { display: block; }
/* The draw key, small, by the pointer: what the next line makes. */
.draw-glyph { position: fixed; z-index: 5; margin: 14px 0 0 14px; pointer-events: none; transform: scale(.45); transform-origin: 0 0; }
.draw-glyph[hidden] { display: none; }
/* The scissors cut freehand: Rectangle is the draw tool's. */
#draw-menu.cutting [data-corners="rect"] { display: none; }
/* Cut away or cut in two: the scissors' picture shows which (a slice off the shape, or the shape in halves). */
#btn-tool-cut :is(.i-two, .i-keep), #btn-tool-cut:is(.slice, .keep) .i-away { display: none; }
#btn-tool-cut.slice .i-two, #btn-tool-cut.keep .i-keep { display: block; }
/* Bézier on: a small corner mark in the scissors' square. */
#btn-tool-cut.corners::after {
  content: ''; position: absolute; right: 9px; bottom: 9px; width: 6px; height: 6px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; border-radius: 0 0 2px 0;
}
#btn-tool-draw.holding, #btn-tool-cut.holding, #btn-tool-ink.holding { animation: chip-hold .48s linear forwards; }
/* The sheet button's menu, and the camera key's (the lens) with it: one look. */
:is(#sheet-menu, #cam-menu, #path-menu, #loop-menu, #world-menu) {
  position: fixed; z-index: 20; width: 212px; padding: 4px;   /* tight: full-size words, little room round them */
  background: var(--surface); border: 1px solid var(--edge); border-radius: 12px;
  box-shadow: var(--pop-shadow);
}
:is(#sheet-menu, #cam-menu, #path-menu, #loop-menu, #world-menu)[hidden], :is(#sheet-menu, #cam-menu, #path-menu, #loop-menu, #world-menu) [hidden] { display: none; }
:is(#sheet-menu, #cam-menu, #path-menu, #loop-menu, #world-menu) button {
  display: block; width: 100%; padding: 5px 9px; border: 0; background: none; border-radius: 5.5px;
  cursor: pointer; text-align: left;
}
:is(#sheet-menu, #cam-menu, #path-menu, #loop-menu, #world-menu) button:hover, :is(#sheet-menu, #cam-menu, #path-menu, #loop-menu, #world-menu) button.active { background: var(--hover); }
:is(#sheet-menu, #cam-menu, #path-menu, #loop-menu, #world-menu) b { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
:is(#sheet-menu, #cam-menu, #path-menu, #loop-menu, #world-menu) small { display: block; color: var(--muted); font-size: 12px; margin-top: 0; line-height: 1.25; }
:is(#sheet-menu, #cam-menu, #path-menu, #loop-menu, #world-menu) hr { margin: 3px 6px; }
:is(#sheet-menu, #cam-menu, #path-menu, #loop-menu, #world-menu) .toggle { gap: 8px; }

#sheet-menu kbd { float: right; margin-top: 2px; }

/* ---- settings (the gear): the box's size, and the look ------------------ */
#box-menu {
  position: fixed; z-index: 20; width: min(290px, calc(100vw - 32px)); padding: 6px;
  max-height: calc(100vh - 90px - var(--safe-t) - var(--safe-b)); overflow: auto;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 16px;
  box-shadow: var(--pop-shadow);
}
#box-menu[hidden] { display: none; }
#box-menu button {
  display: block; width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: 5.5px;
  cursor: pointer; text-align: left;
}
#box-menu button:hover, #box-menu button.active { background: var(--hover); }
.bm-head { padding: 8px 12px 4px; }
.bm-head b { font-size: 15px; }
#box-menu [data-box] { padding-left: 22px; }
#box-menu b { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
#box-menu small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.bm-custom { border-top: 1px solid var(--rule); margin-top: 4px; padding: 10px 12px 6px; }
.bm-custom span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.bm-custom label { display: grid; grid-template-columns: 52px 1fr 34px; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.bm-custom input { width: 100%; accent-color: var(--slider); }
#draw-menu .snips { padding: 2px 12px 4px; }
#draw-menu .bezfit { padding-left: 14px; }                /* under Freehand, as Round / Flat ends under Strips */
#draw-menu:not(.free) .bezfit, #draw-menu.cutting .bezfit, #draw-menu:not(.bezfit) .smooth { display: none; }
#draw-menu .smooth { border-top: 0; margin-top: 0; padding: 0 12px 4px; }
#draw-menu .snips label b { font-weight: 600; }
#draw-menu .snip-ends { display: flex; justify-content: space-between; margin: -4px 42px 0 60px; color: var(--muted); font-size: 11px; }
.bm-custom output { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
#tilt-bar {
  position: fixed; z-index: 15; left: 50%; top: calc(72px + var(--safe-t)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 7px 7px 7px 16px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow);
  font-size: 14px; white-space: nowrap;
}
#tilt-bar[hidden] { display: none; }
#tilt-slope { font-weight: 700; color: var(--gold-ink); min-width: 78px; cursor: text; }   /* tap to type a slope */
#tilt-bar .primary { padding: 8px 16px; font-size: 14px; }

/* ---- card rings button, and the G/R/S bar ---------------------------- */
.gz-group { display: flex; gap: 0; padding: 0 2px; margin: 0 3px; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.gz-group button {
  width: 38px; height: 40px; border-radius: 6px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
}
.gz-group button svg { width: 24px; height: 24px; }
.gz-group button:hover { background: var(--hover); }
.gz-group button.on { background: var(--gold); }
.gz-group .gz-orient { width: auto; padding: 0 9px; font: 600 12.5px var(--font-label); }
#modal-bar {
  position: fixed; z-index: 16; left: 50%; top: calc(72px + var(--safe-t)); transform: translateX(-50%);
  display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: baseline;
  padding: 9px 16px 8px; border-radius: 14px; background: var(--toast-bg); color: var(--toast-ink);
  box-shadow: var(--shadow); pointer-events: none; white-space: nowrap;
}
#modal-bar[hidden] { display: none; }
#modal-op { font-family: var(--font-display); font-size: 15px; }
#modal-val { font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace; }
#modal-bar small { grid-column: 1 / span 2; font-size: 11.5px; opacity: .7; margin-top: 3px; }

/* ---- card bar ------------------------------------------------------- */
#cardbar {
  position: fixed; z-index: 12; display: flex; gap: 1px; align-items: center;
  padding: 5px; border-radius: 18px; background: var(--surface); border: 1px solid var(--edge);
  box-shadow: var(--shadow); transform: translateX(-50%);
}
#cardbar[hidden] { display: none; }
/* A pull-tab (main.js pullTab): the card's thickness, an asset's Size. */
.pull-tab[hidden] { display: none; }
.pull-tab {
  display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 8px 0 4px; margin: 0 2px;
  border-radius: 6.5px; background: var(--gold); border: 1px solid var(--gold-edge);
  font-weight: 700; font-size: 13px; cursor: ns-resize; touch-action: none; white-space: nowrap;
}
/* Narrow: small arrows, the number over its unit. */
.pull-tab > svg { width: 15px; height: 15px; flex: none; }
.pull-tab .pt-val { display: flex; flex-direction: column; align-items: center; line-height: 1.05; min-width: 22px; }
.pull-tab .pt-val small { font-size: 9.5px; font-weight: 600; opacity: .75; }
.pull-tab.dragging { background: var(--gold-hot); }
#btn-glow {
  width: 40px; height: 40px; border-radius: 6.5px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--muted);
}
#btn-glow:hover { background: var(--hover); }
#btn-glow .rays { display: none; }
#btn-glow.glow, #btn-glow.lamp { color: var(--ink); background: var(--gold-pale); }
#btn-glow.lamp { background: var(--gold); }
#btn-glow.lamp .rays { display: inline; }
#btn-lamp-flicker, #btn-card-flicker, #btn-hose {
  width: 40px; height: 40px; border-radius: 6.5px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--muted);
}
#btn-card-flicker[hidden], #btn-hose[hidden] { display: none; }
#btn-lamp-flicker:hover, #btn-card-flicker:hover, #btn-hose:hover { background: var(--hover); color: var(--ink); }
#btn-lamp-flicker.on, #btn-card-flicker.on { background: var(--gold-pale); color: var(--ink); }
/* The edge key: a card seen from the side, its face and its edge beside it. */
/* In the keys' line style (Matt's drawing): the edge band an outline, filled in when the core is white. */
#btn-card-core svg :is(.face, .rim) { fill: none; stroke: currentColor; stroke-linejoin: round; }
#btn-card-clear svg * { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
#btn-card-clear svg .mark { stroke-width: 2.2; }
#btn-card-clear.on svg .sheet { stroke-dasharray: 2 2.4; opacity: 0.6; }
#btn-card-core.on svg .rim { fill: currentColor; }
#btn-card-shadow svg .block { fill: currentColor; stroke: none; }
#btn-card-shadow svg .fall { fill: url(#shadow-fall); stroke: none; }
#btn-card-shadow.no-cast svg .fall { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 1.6 1.6; opacity: 0.6; }
#btn-card-shadow.no-receive svg .block { fill: none; stroke: currentColor; stroke-width: 1.6; }
#btn-hose.on { background: var(--gold); color: var(--on-gold); }   /* in use: green, as a tool key */
#flicker-pop, #hose-pop, #shadow-pop {
  position: fixed; z-index: 20; width: 250px; padding: 12px 14px 10px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px; touch-action: none;
}
#flicker-pop[hidden], #hose-pop[hidden], #shadow-pop[hidden] { display: none; }
#flicker-pop label, #hose-pop label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
#flicker-pop label span, #hose-pop label span { display: flex; justify-content: space-between; }
#flicker-pop label b, #hose-pop label b { font-weight: 700; }
#flicker-pop input[type=range], #hose-pop input[type=range] { width: 100%; height: 32px; margin: 0; accent-color: #C9A800; cursor: pointer; }
#flicker-pop .fl-ends, #hose-pop .fl-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin: -4px 0 6px; }
#hose-pop { width: 220px; }
#shadow-pop { width: 180px; padding-bottom: 4px; }
#hose-pop .hp-row, #shadow-pop .hp-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 500; margin: 2px 0 8px; }
#hose-pop .hp-off { height: 34px; border-radius: 5.5px; border: 1px solid var(--edge); background: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
#hose-pop .hp-off:hover { background: var(--hover); color: var(--ink); }
/* An on/off switch, like a light switch should be. */
.switch { width: 44px; height: 26px; flex: none; border-radius: 13px; border: 0; background: var(--switch-off);
  position: relative; cursor: pointer; margin: 0 4px; transition: background .15s ease; }
.switch[hidden] { display: none; }
.switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--knob); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s ease; }
.switch.on { background: var(--switch-on); }
.switch.on i { transform: translateX(18px); }
/* Tap a value to type one. */
.val { cursor: text; border-radius: 5px; }
#flicker-pop .val:hover { background: var(--hover); }
#ask-value {
  position: fixed; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 14px;
  box-shadow: var(--pop-shadow); font-size: 13px; white-space: nowrap;
}
#ask-value span { font-weight: 600; }
#ask-value i { font-style: normal; color: var(--muted); }
.bm-custom output { cursor: text; border-radius: 5px; }
.bm-custom output:hover { background: var(--hover); }
.val-edit { width: 4.2em; font: inherit; font-weight: 700; text-align: center; color: var(--ink);
  border: 1.5px solid var(--gold-edge); border-radius: 7px; background: var(--field); padding: 1px 3px; outline: none;
  -webkit-user-select: text; user-select: text; }
.val-edit.text { width: 11em; text-align: left; padding: 1px 6px; }
#btn-dup, #btn-lamp-dup, #btn-solo, #btn-lock, #btn-asset {
  width: 40px; height: 40px; border-radius: 6.5px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--muted);
}
#btn-dup:hover, #btn-lamp-dup:hover, #btn-solo:hover, #btn-lock:hover, #btn-asset:hover { background: var(--hover); color: var(--ink); }
#btn-pick-more, #btn-slide-paper {
  width: 40px; height: 40px; border-radius: 6.5px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--muted); padding: 0;
}
#btn-pick-more:hover, #btn-slide-paper:hover { background: var(--hover); color: var(--ink); }
#btn-pick-more.on, #btn-slide-paper.on { background: var(--gold); color: var(--ink); }
#btn-group, #btn-join {
  height: 40px; padding: 0 12px 0 8px; border-radius: 6.5px; border: 0; background: var(--hover); cursor: pointer;
  display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px; white-space: nowrap;
}
#btn-group[hidden], #btn-join[hidden] { display: none; }
#btn-group:hover, #btn-join:hover { background: var(--hover-2); }
#btn-group.ungroup { background: none; color: var(--muted); }
#btn-group.ungroup:hover { background: var(--hover); color: var(--ink); }
#btn-delete {
  width: 40px; height: 40px; border-radius: 6.5px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--muted);
}
#btn-delete:hover { color: #C2353C; background: var(--danger-bg); }
/* The selected bone's bar: Move and Turn gizmos, Global / Local, and a bin. */
#bonebar {
  position: fixed; z-index: 12; padding: 4px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--edge); box-shadow: var(--shadow); transform: translateX(-50%);
}
#bonebar { display: flex; gap: 2px; align-items: center; }
/* The grip at the right end of a floating bar: drag the bar by it. */
.bar-grip {
  position: relative; width: 18px; height: 40px; margin-left: 2px; border-radius: 9px; flex: none;
  display: grid; place-items: center; color: var(--faint); cursor: grab; touch-action: none;
}
.bar-grip::before { content: ''; position: absolute; inset: -6px -8px; }   /* easier to catch than it looks */
.bar-grip:hover, .dragging > .bar-grip { color: var(--ink); background: var(--hover); }
.dragging > .bar-grip { cursor: grabbing; }
.bar-grip svg { width: 10px; height: 20px; fill: currentColor; stroke: none; }
body.bar-dock :is(#cardbar, #lampbar, #bonebar:not(.at-pointer)) > .bar-grip { display: none; }
#bonebar[hidden] { display: none; }
#bonebar button {
  width: 40px; height: 40px; border-radius: 6px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--muted);
}
#bonebar button.on { background: var(--gold); color: var(--on-gold); }
#bonebar #btn-bone-axis { font: 700 15px var(--font-label); }
#bonebar #btn-bone-axis[hidden] { display: none; }
#bonebar #btn-bone-orient { width: auto; padding: 0 9px; font: 600 12.5px var(--font-label); color: var(--ink); }
#btn-bone-delete:hover { color: #C2353C; background: var(--danger-bg); }
#btn-bone-move:hover { color: var(--ink); background: rgba(38,201,196,0.16); }
#rig-menu { position: fixed; z-index: 20; width: 180px; padding: 6px; background: var(--surface); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--pop-shadow); }
#rig-menu[hidden] { display: none; }
#rig-menu button { display: block; width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: 5.5px; cursor: pointer; text-align: left; }
#rig-menu button:hover { background: var(--hover); }
#rig-menu b { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
#btn-tool-pin.holding { animation: chip-hold .48s linear forwards; }
#loosebar {
  position: fixed; z-index: 12; display: flex; gap: 2px; align-items: center; padding: 4px 4px 4px 12px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow); transform: translateX(-50%);
}
#loosebar[hidden] { display: none; }
#loose-name { font: 600 13px var(--font-label); color: var(--ink); margin-right: 6px; white-space: nowrap; }
#loosebar button {
  min-width: 40px; height: 40px; border-radius: 6px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--muted); font: 600 18px var(--font-label);
}
#loosebar button:hover { color: var(--ink); background: var(--hover); }
#loosebar button.done { font-size: 13px; padding: 0 12px; color: var(--ink); }
#btn-loose-delete:hover { color: #C2353C; background: var(--danger-bg); }
#btn-loose-delete svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#bone-ask {
  position: fixed; z-index: 13; display: flex; gap: 6px; align-items: center; padding: 5px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow);
  transform: translateX(-50%); font: 600 13px var(--font-label); white-space: nowrap;
}
#bone-ask[hidden] { display: none; }
#bone-ask button {
  height: 34px; padding: 0 12px; border-radius: 11px; border: 0; cursor: pointer;
  background: var(--hover); color: var(--ink); font: inherit;
}
#bone-ask button.primary { background: var(--gold); color: var(--on-gold); }
#btn-bone-move svg, #btn-bone-parent svg, #btn-bone-delete svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#lampbar {
  position: fixed; z-index: 12; display: flex; gap: 1px; align-items: center;
  padding: 5px; border-radius: 18px; background: var(--surface); border: 1px solid var(--edge);
  box-shadow: var(--shadow); transform: translateX(-50%);
}
#lampbar[hidden] { display: none; }
#lamptab {
  display: flex; align-items: center; gap: 5px; height: 40px; padding: 0 12px 0 9px; margin: 0 2px;
  border-radius: 6.5px; background: var(--gold); border: 1px solid var(--gold-edge);
  font-weight: 700; font-size: 13px; cursor: ns-resize; touch-action: none; white-space: nowrap;
}
#lamptab.dragging { background: var(--gold-hot); }
#btn-lamp-delete {
  width: 40px; height: 40px; border-radius: 6.5px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--muted);
}
#btn-lamp-delete:hover { color: #C2353C; background: var(--danger-bg); }

/* The little arrow at the end of the card and lamp bars: shrinks the bar down
   to just itself, and opens it out again. */
#cardbar > .shrink, #lampbar > .shrink {
  position: relative; width: 22px; height: 40px; margin-left: -2px; padding: 0; border: 0; border-radius: 11px;
  background: none; cursor: pointer; display: grid; place-items: center; color: var(--faint);
}
#cardbar > .shrink:hover, #lampbar > .shrink:hover { background: var(--hover); color: var(--ink); }
.shrink svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.shrink::before { content: ''; position: absolute; inset: -6px; }
.shrunk > .shrink svg { transform: rotate(180deg); }

/* ---- hint ----------------------------------------------------------- */
#hint {
  position: fixed; z-index: 5; left: 50%; top: 22%; transform: translateX(-50%);
  text-align: center; pointer-events: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.3,1);
  width: min(520px, 80vw);
}
#hint.gone { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.97); }   /* drifts up a touch as it fades */
.hint-big { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 5vw, 44px);
  color: var(--brand); letter-spacing: -.01em; }
.hint-small { margin-top: 6px; font-size: 15px; color: #5F6B78; }

/* ---- toast ---------------------------------------------------------- */
/* Tips beside the buttons (src/tips.js) */
#tip {
  position: fixed; z-index: 40; max-width: 260px; pointer-events: none;
  background: var(--toast-bg); color: var(--toast-ink); padding: 6px 10px; border-radius: 9px;
  font-size: 13px; font-weight: 500; line-height: 1.35; box-shadow: var(--shadow);
}
#tip[hidden] { display: none; }

#toast {
  position: fixed; z-index: 30; left: 50%; top: calc(18px + var(--safe-t)); transform: translateX(-50%);
  background: var(--toast-bg); color: var(--toast-ink); padding: 10px 16px; border-radius: 12px;
  font-size: 14px; font-weight: 500; box-shadow: var(--shadow); pointer-events: none;
}

#solo-pill {
  position: fixed; z-index: 25; left: 50%; top: calc(84px + var(--safe-t)); transform: translateX(-50%);
  background: var(--gold); color: var(--ink); border: 0; padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 700; box-shadow: var(--shadow); cursor: pointer;
}
#solo-pill[hidden] { display: none; }
#btn-solo.on { background: var(--gold); color: var(--ink); }
#solo-pill span { font-weight: 500; }
#solo-pill .pill-x { font-style: normal; font-weight: 500; font-size: 18px; line-height: 1; margin: -4px -8px -4px 8px;
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; }
#solo-pill .pill-x:hover { background: rgba(0,0,0,.12); }

/* ---- help sheet ----------------------------------------------------- */
.sheet {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(34, 48, 61, .28); padding: 16px;
  touch-action: auto; -webkit-user-select: text; user-select: text;
}
.sheet[hidden] { display: none; }
.sheet-card {
  width: min(680px, 100%); max-height: 90vh; overflow: auto;
  background: var(--surface); border-radius: 22px; border: 1px solid var(--edge);
  box-shadow: 0 24px 60px -20px rgba(34, 48, 61, .5); padding: 26px 28px 24px;
}
.sheet h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; margin: 0; }
.sheet h2 small { font-family: var(--font-label); font-size: 12px; font-weight: 500; color: var(--faint);
  letter-spacing: .06em; text-transform: uppercase; margin-left: 8px; }
.sheet .lede { color: var(--muted); margin: 6px 0 18px; font-size: 16px; }
.sheet h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 8px; }
.sheet ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.5; }
.sheet li { margin-bottom: 4px; }
.sheet .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sheet .keys { color: var(--muted); font-size: 13px; margin: 18px 0; }
kbd { font-family: inherit; font-size: 12px; background: var(--hover); border: 1px solid var(--edge);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
#email-gate, #key-gate { z-index: 100; background: rgba(34, 48, 61, .55); }
#email-gate .sheet-card, #key-gate .sheet-card { width: min(400px, 100%); }
#key-gate a.secondary { color: var(--ink); text-decoration: none; }
/* The name, as the logo: wherever Krafty is a name or heading, not plain text. */
.logo-inline { display: inline-block; vertical-align: -0.12em; color: var(--ink); }
.logo-inline svg { height: 1.15em; width: auto; display: block; fill: currentColor; }
#email-input, #code-input, #key-input { width: 100%; box-sizing: border-box; margin: 0 0 16px; padding: 12px 14px; font: inherit; font-size: 16px;
  border-radius: 12px; border: 1px solid var(--edge); background: var(--field); color: var(--ink); }
#code-input { font-size: 24px; letter-spacing: 6px; text-align: center; }
.secondary {
  padding: 12px 18px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--edge); font-weight: 600; font-size: 15px;
}
.primary {
  display: block; padding: 12px 20px; border-radius: 14px; cursor: pointer;
  background: var(--gold); border: 1px solid var(--gold-edge); font-weight: 700; font-size: 15px;
}

/* ---- small screens -------------------------------------------------- */
@media (max-width: 700px) {
  .sheet .cols { grid-template-columns: 1fr; }
  #brand { display: none; }
  .palname span { display: none; }
  #palette { padding: 4px 6px; gap: 6px; }
  #chips { gap: 5px; }
  .chip { width: 24px; height: 24px; }
  #rail { width: 44px; right: calc(8px + var(--safe-r)); }
  #rail-track { height: 36vh; width: 24px; }
  #rail > .tuck { width: 24px; }
  #rail-thumb { width: 21px; margin-left: -10.5px; }
  #rail-mode { display: none; }
  #leftbar { left: calc(8px + var(--safe-l)); }
  #brushbars { left: calc(8px + var(--key) + 8px + var(--safe-l)); }
  #leftbar.tucked ~ #brushbars { left: calc(8px + var(--safe-l)); }
  .bbar { width: 21px; }
  :root { --key: 40px; }
}

/* ---- the panels down the right: tabs and pages ------------------------ */
/* One look for every side panel: Make's palette panel, the Paint room's (card
   and Sheet) and the Assets shelf. Each room's rules only place and size it. */
.panel {
  padding: 6px 8px 8px;
  background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow); border-radius: 16px;
}
.pp-icon, .pl-eye, .pl-lock {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--ink); cursor: pointer;
}
.pp-icon:hover, .pl-eye:hover, .pl-lock:hover { background: var(--hover); }
.pp-icon.on { background: var(--gold); color: var(--on-gold); }   /* a switch held down */
:is(.pp-icon, .pl-eye, .pl-lock) svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-tabs { display: flex; align-items: center; gap: 2px; min-width: 0; }
.pp-tabs :is([data-tab], [data-dock]) { padding: 0 7px; flex: 0 1 auto; min-width: 0; white-space: nowrap; }   /* four fit a panel (the Sheet's) */
.pp-tabs :is([data-tab], [data-dock]), .pb-kinds button, .pp-pill {
  height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--muted);
  font: 600 13px var(--font-display); cursor: pointer;
}
.pp-tabs :is([data-tab], [data-dock]):hover, .pb-kinds button:hover, .pp-pill:hover { background: var(--hover); color: var(--ink); }
.pp-tabs :is([data-tab], [data-dock]):is(.on, .active) { background: var(--hover); color: var(--ink); }
.pp-pill { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--edge); height: 28px; color: var(--ink); }
.pp-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pp-pill:disabled { opacity: .35; cursor: default; }
.pl-import { cursor: pointer; }
.pl-import[hidden] { display: none; }
.pp-pill:is(.on, .active) { background: var(--gold); color: var(--on-gold); border-color: transparent; }
.pp-page { display: flex; flex-direction: column; }
/* A tool's own controls, over the page while it's in hand (the Paint room's gradient). */
.pp-toolopts { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--edge); }
.pp-toolopts[hidden] { display: none; }
.pp-page[hidden] { display: none; }

/* ---- Make: the palette panel ----------------------------------------- */
/* Down the right, between the box and the depth rail (src/makepanel.js): a
   tab each for brushes, colour and paper. It floats over the scene, which runs
   on under it to the edge; the view is shifted (stage.setShift) so the box
   frames in the room to its left (--mp-space). Tucked, the panel slides off to
   the right and the box has the whole width again. Its tag sits beside its
   top right corner, level with its top, over the depth rail's column. */
#make-panel { display: none; }
body:is(.room-make, .room-assets) {   /* the Library's shelf panel sits just as Make's does */
  --mp-w: 248px;
  --mp-r: calc(14px + 56px + 10px + var(--safe-r));
  --mp-t: calc(14px + var(--key) + 12px + var(--safe-t));
  --mp-b: calc(16px + 48px + 10px + var(--safe-b));
  --mp-space: calc(var(--mp-r) + var(--mp-w) + 10px);
}
body.room-make.tuck-make-panel { --mp-space: 0px; }
body:is(.room-make, .room-assets) #rail { top: calc(var(--mp-t) + 34px); }   /* under the panel's tag */
body.room-make #make-panel {
  display: flex; flex-direction: column; gap: 4px;
  right: var(--mp-r); top: var(--mp-t); bottom: var(--mp-b); width: var(--mp-w);
  transition: transform .22s ease;
}
#make-panel.tucked { transform: translateX(calc(100% + var(--mp-r) + 24px)); }
.mp-body { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.mp-sub { margin: 10px 2px 4px; font: 600 11px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.mp-sub[hidden] { display: none; }
.pp-page > .mp-sub:first-child { margin-top: 4px; }
/* Brushes: two to a row, the stroke over the name. */
.mp-brushes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mp-brush {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 5px;
  border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer;
}
.mp-brush:hover { background: var(--hover); }
.mp-brush.active { background: var(--gold); color: var(--on-gold); }
.mp-brush b { font: 600 11.5px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mp-brush canvas { display: block; max-width: 100%; }
/* The palette maker: your colour first (marked), then the rolled ones. */
.pm { padding: 8px 0 8px; border-bottom: 1px solid var(--edge); margin-bottom: 8px; }
.pm-top { display: flex; gap: 4px; }
.pm-row { flex: 1; display: flex; height: 52px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pm-chip { flex: 1; cursor: pointer; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.pm-chip.on { box-shadow: inset 0 0 0 2px var(--ink); }
/* Each colour's padlock: faint till you're over it, or it's locked. */
.pm-lock { width: 22px; height: 22px; margin-bottom: 3px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; opacity: .35; }
.pm-chip:hover .pm-lock { opacity: .75; }
.pm-chip.locked .pm-lock { opacity: 1; }
.pm-lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm-count { display: flex; flex-direction: column; gap: 2px; }
.pm-count button { flex: 1; width: 22px; border: 1px solid var(--edge); border-radius: 7px; background: none; color: var(--ink); font: 600 14px/1 var(--font-display); cursor: pointer; padding: 0; }
.pm-count button:hover:not(:disabled) { background: var(--hover); }
.pm-count button:disabled { opacity: .3; cursor: default; }
.pm-bar { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.pm-now { width: 14px; height: 14px; cursor: inherit; }
.pm-rule { flex: 1; min-width: 0; height: 28px; padding: 0 6px; border: 1px solid var(--edge); border-radius: 9px; background: var(--surface); color: var(--ink); font: 600 12px var(--font-display); cursor: pointer; }
.pm-name { display: flex; gap: 6px; margin-top: 6px; }
.pm-name[hidden] { display: none; }
.pm-files { display: flex; gap: 6px; margin-top: 6px; }
.pm-files .pp-pill { flex: 1; justify-content: center; cursor: pointer; }
/* Export: your palettes, tap to leave one out (all in to start with). */
.pm-pick { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pm-pick[hidden] { display: none; }
.pm-picks { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; }
.pm-picks .palrow:not(.active) { opacity: .4; }
.pm-pick > .pp-pill { justify-content: center; }
.pm-pick > .pp-pill:disabled { opacity: .4; cursor: default; }
.pm-name input { flex: 1; min-width: 0; height: 28px; padding: 0 8px; border: 1px solid var(--edge); border-radius: 8px; background: var(--surface); color: var(--ink); font: 600 13px var(--font-display); }
/* The top of every Colour tab (src/colourpage.js): the wheel, docked, as wide
   as the panel lets it be; on the Sheet (.lent) its own wheel stands in. */
#colour-page .cp-wheel { width: var(--pk-w); margin: 4px auto 0; }
.lent #colour-page .cp-wheel { display: none; }
/* The palettes, under a twirl-down: they're a long list. */
.cp-palettes > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.cp-palettes > summary::-webkit-details-marker { display: none; }
.cp-palettes > summary::before { content: ''; width: 0; height: 0; border: 4px solid transparent; border-left: 5px solid currentColor; margin-left: 2px; transition: transform .15s; transform-origin: 2px 50%; }
.cp-palettes[open] > summary::before { transform: rotate(90deg); }
/* A palette: its name, then its colours edge to edge, most of the row: tap
   the name for the palette, a colour for that colour. */
#mp-palette-list .palrow, .pm-picks .palrow { padding: 6px 6px 6px 8px; gap: 6px; }
#mp-palette-list .palrow b, .pm-picks .palrow b { display: block; flex: 0 0 60px; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mp-palette-list .palrow .mini, .pm-picks .palrow .mini { flex: 1; min-width: 0; }
#mp-palette-list .palrow .mini i, .pm-picks .palrow .mini i { flex: 1; width: auto; height: 24px; }
/* A finger (iPad, ChB): the name over its colours, so they have the whole
   row (wider and taller cells); bigger chips. */
@media (pointer: coarse) {
  #mp-palette-list { display: flex; flex-direction: column; gap: 2px; }
  #mp-palette-list .palrow { flex-direction: column; align-items: stretch; gap: 3px; padding: 5px 6px 7px; }
  #mp-palette-list .palrow b { flex: none; }
  #mp-palette-list .palrow .mini { flex: none; }
  #mp-palette-list .palrow .mini i { height: 34px; }
}
#mp-paper-list .paperrow { padding: 7px 8px; gap: 10px; }
#mp-paper-list .paperrow b { font-size: 13px; }
#mp-paper-list .paperrow small { font-size: 11.5px; }
/* The tag: tap it to tuck the panel away, tap it again for it back. */
.mp-tag { display: none; }
body.room-make .mp-tag {
  position: fixed; z-index: 10; top: var(--mp-t); right: calc(14px + 28px + var(--safe-r)); transform: translateX(50%);
  display: grid; place-items: center; width: 29px; height: 20px; padding: 0; cursor: pointer;
  border-radius: 11px; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow); color: var(--faint);
}
.mp-tag:hover { color: var(--ink); }
.mp-tag::before { content: ''; position: absolute; inset: -6px; }
.mp-tag svg { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .18s ease; }
/* Tucked: the gold pip, as every menu folds to (see "tucking the menus away"). */
body.tuck-make-panel .mp-tag { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); border-color: var(--gold-edge); color: var(--on-gold); }
body.tuck-make-panel .mp-tag svg { transform: rotate(180deg); width: 12px; height: 12px; }
body.tuck-make-panel .mp-tag::before { inset: -10px; }
/* Centred things (the hint, the timeline) centre over the box. */
body.room-make #hint { left: calc(50% - var(--mp-space, 0px) / 2); }
body.room-make #timeline, body.room-make #curves { left: calc(50% - var(--mp-space, 0px) / 2); width: min(1100px, calc(100vw - 190px - var(--mp-space, 0px))); }
@media (orientation: portrait), (max-width: 900px) {
  body:is(.room-make, .room-assets) { --mp-w: 220px; }
}
@media (max-width: 700px) {
  body:is(.room-make, .room-assets) { --mp-r: calc(8px + 44px + 8px + var(--safe-r)); --mp-w: 200px; }
  body.room-make .mp-tag { width: 24px; right: calc(8px + 22px + var(--safe-r)); }
}

/* ---- tucking the menus away ---------------------------------------- */
/* Each menu has its own fold button, part of it like the card bar's arrow:
   tap it and the menu folds down to just that button, where it stands. */
.tucked > :not(.tuck), .shrunk > :not(.shrink) { visibility: hidden; }
/* Folded, a menu keeps its place, so the circle is where you tapped; only the
   circle can be touched. */
.tucked, .shrunk { pointer-events: none; }
.tucked > .tuck, .shrunk > .shrink { pointer-events: auto; }
.tuck {
  position: relative; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; background: none; color: var(--faint);
}
.tuck:hover { color: var(--ink); }
.tuck svg { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .18s ease; }
.tuck::before { content: ''; position: absolute; inset: -6px; }       /* easier to hit than it looks */
/* In a column of keys (tools, depth rail): a slim key at the top. */
#leftbar > .tuck, #rail > .tuck {
  width: var(--key); height: 20px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow);
}
#rail > .tuck { width: 29px; }
/* In the top row: a slim key at its right end, in the corner. */
#topright > .tuck {
  width: 20px; height: var(--key); border-radius: 11px;
  background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow);
}
/* In the colour bar: at its right end, in the corner. */
#palette > .tuck { width: 22px; height: 40px; border-radius: 11px; }
/* Folded: the button alone, in the accent, so it's easy to find again. */
/* Folded, every menu and bar is the same little circle, in the accent. */
#palette.tucked, #cardbar.shrunk, #lampbar.shrunk { background: none; border-color: transparent; box-shadow: none; }
#leftbar.tucked > .tuck, #rail.tucked > .tuck, #topright.tucked > .tuck, #palette.tucked > .tuck,
#cardbar.shrunk > .shrink, #lampbar.shrunk > .shrink {
  width: 24px; height: 24px; margin: 0; border-radius: 50%;
  background: var(--gold); border: 1px solid var(--gold-edge); box-shadow: var(--shadow); color: var(--on-gold);
}
/* The chevron points the way the menu folds. */
.tuck-left svg { transform: rotate(180deg); }
.tuck-top svg  { transform: rotate(-90deg); }
.tucked > .tuck-left svg  { transform: none; }
.tucked > .tuck-right svg { transform: rotate(180deg); }
.tucked > .tuck-top svg   { transform: rotate(90deg); }
/* With the palette tucked, the timeline and curves come down to the edge. */
#timeline, #curves { transition: bottom .22s ease; }

/* ---- timeline (animation) ------------------------------------------ */
/* Two rows: the buttons along the top, and the track under them the whole width. */
#timeline {
  left: 50%; transform: translateX(-50%); bottom: calc(82px + var(--safe-b));
  width: min(1100px, calc(100vw - 190px)); display: flex; flex-direction: column; gap: 2px;
  padding: 4px 6px 4px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow);
}
#timeline[hidden] { display: none; }
#tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tl-gap { flex: 1; }
/* The transport (start, play, record...): Animate's, and the Sound room's the same. */
:is(#timeline #tl-bar, #snd-room #snd-tl-bar) > button {
  width: 36px; height: 36px; flex: none; border-radius: 12px; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
}
:is(#timeline #tl-bar, #snd-room #snd-tl-bar) > button:hover { background: var(--rule); }
:is(#tl-bar, #snd-tl-bar) > button svg { width: 23px; height: 23px; }
#tl-play .i-pause, #tl-play.playing .i-play, #btn-play .i-pause, #btn-play.playing .i-play { display: none; }
#tl-play.playing .i-pause, #btn-play.playing .i-pause { display: block; }
#btn-play[hidden] { display: none; }
#tl-frame { min-width: 34px; text-align: center; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
#tl-track { position: relative; height: 67px; touch-action: none; cursor: pointer; }
.tl-rename {
  position: absolute; left: 2px; z-index: 2; box-sizing: border-box; padding: 0 8px;
  border: 1.5px solid #3A6FE0; border-radius: 7px; background: var(--bg); color: var(--ink);
  font: 600 12px "Supreme", system-ui, sans-serif; outline: none;
}
#tl-canvas { width: 100%; height: 100%; display: block; }
#timeline #tl-bar > #tl-key {
  width: auto; display: flex; gap: 5px; padding: 0 12px 0 9px; font-weight: 700; font-size: 13px;
  border: 1px solid var(--edge);
}
#tl-key svg { width: 17px; height: 17px; }
#timeline #tl-bar > #tl-key.pending { background: var(--gold); border-color: var(--gold-edge); }
#tl-unkey[disabled], #tl-paste[disabled] { opacity: .3; cursor: default; }
#tl-auto svg { stroke: #C2353C; }
#timeline #tl-bar > #tl-auto.on { background: var(--danger-bg); }
#tl-auto.on svg { fill: #E0444C; }
#timeline.auto { border-color: #E0444C; box-shadow: 0 0 0 2px rgba(224,68,76,.25), var(--shadow); }
#timeline.rec #tl-auto svg { animation: tl-rec 1s steps(2) infinite; }
@keyframes tl-rec { 50% { opacity: .25; } }
#timeline #tl-bar > #tl-only.on { background: var(--gold); }
#timeline #tl-bar > #tl-scrub.on, #timeline #tl-bar > #tl-wave.on { background: var(--gold); }
#timeline #tl-bar > #tl-wave[hidden] { display: none; }
#tl-len { display: flex; margin: 0 4px 0 2px; align-items: center; gap: 2px; font-size: 13px; color: var(--muted); }
#tl-secs { width: 42px; padding: 4px; border: 1px solid var(--edge); border-radius: 8px; font: inherit; color: var(--ink); background: var(--bg); text-align: right; }
@media (max-width: 640px) {
  #timeline { width: calc(100vw - 150px); }
  #tl-start, #tl-end, #tl-len, #tl-frame { display: none; }
  #timeline #tl-bar > #tl-key span { display: none; }
}

/* ---- curves popover -------------------------------------------------- */
#curves {
  left: 50%; transform: translateX(-50%); bottom: calc(82px + var(--safe-b) + var(--tl-h, 140px));
  width: min(1100px, calc(100vw - 190px)); height: 260px; display: flex; flex-direction: column;
  border-radius: 18px; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow);
  overflow: hidden;
}
#curves[hidden] { display: none; }
#cv-head { display: flex; align-items: center; gap: 10px; padding: 6px 6px 4px 14px; font-size: 13px; }
#cv-title { white-space: nowrap; }
#cv-legend { display: flex; gap: 6px; }
#cv-legend button {
  border: 1px solid var(--edge); background: var(--bg); border-radius: 9px; padding: 3px 9px;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 5px;
}
#cv-legend button i { width: 9px; height: 9px; border-radius: 50%; display: block; }
#cv-legend button.off { opacity: .4; }
#cv-link {
  border: 1px solid var(--edge); background: var(--bg); border-radius: 9px; padding: 3px 9px 3px 6px;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 4px; color: var(--ink);
}
#cv-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#cv-link.on { background: var(--gold); border-color: var(--gold-edge); }
#cv-link[hidden] { display: none; }
.cv-gap { flex: 1; }
#cv-interp { display: flex; border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; }
#cv-interp button { border: 0; background: none; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink); }
#cv-interp button + button { border-left: 1px solid var(--edge); }
#cv-interp button.on { background: #FF9A2E; color: #fff; }
#cv-interp button:disabled { opacity: .35; cursor: default; }
#cv-steps { display: flex; align-items: center; border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; }
#cv-steps[hidden] { display: none; }
#cv-steps span { padding: 0 8px 0 10px; font-size: 12px; font-weight: 600; color: var(--ink); opacity: .6; }
#cv-steps button { border: 0; border-left: 1px solid var(--edge); background: none; padding: 5px 9px; min-width: 30px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink); }
#cv-steps button.on { background: #FF9A2E; color: #fff; }
#cv-steps button.inherit { box-shadow: inset 0 0 0 2px #FF9A2E; }
#cv-steps button:disabled { opacity: .35; cursor: default; }
#cv-close { width: 34px; height: 34px; border: 0; background: none; border-radius: 10px; cursor: pointer; display: grid; place-items: center; }
#cv-close:hover { background: var(--rule); }
#cv-close svg { width: 21px; height: 21px; }
#cv-body { flex: 1; position: relative; touch-action: none; }
#cv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: default; }
#cv-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; pointer-events: none; text-align: center; padding: 0 20px; }
#timeline #tl-bar > #tl-curves.on, #timeline #tl-bar > #tl-loop.on, #timeline #tl-bar > #tl-path.on, #timeline #tl-bar > #tl-path.armed { background: var(--gold); }
#tl-cam.on { background: #3A6FE0; color: #FFFFFF; }   /* through the camera: its blue (the Sound room borrows the button) */
@media (max-width: 640px) { #curves { width: calc(100vw - 150px); } #cv-legend, #cv-link span { display: none; } }

/* Whatever sits on the yellow keeps a dark mark, in either look. */
.key.on, #nibs button.active, #cutmodes button.active, #drawmodes button.active, #inklayers button.active, #inkacross.active, #fillcontig.active, #btn-dropper.on, #mp-dropper.on, .pk-dropper.on, .pk-dice.on, #btn-sheet.matching,
.gz-group button.on, .pull-tab, #lamptab, #btn-glow.glow, #btn-glow.lamp, #btn-lamp-flicker.on, #btn-card-flicker.on, #btn-hose.on, #btn-slide-paper.on,
#btn-pick-more.on, #cardbar.shrunk > .shrink, #lampbar.shrunk > .shrink, #solo-pill, #btn-solo.on, .primary,
.tucked > .tuck, #timeline #tl-bar > #tl-key.pending, #timeline #tl-bar > #tl-only.on, #timeline #tl-bar > #tl-scrub.on, #timeline #tl-bar > #tl-wave.on, #cv-link.on,
#timeline #tl-bar > #tl-curves.on, #timeline #tl-bar > #tl-loop.on, #timeline #tl-bar > #tl-path.on, #timeline #tl-bar > #tl-path.armed { color: var(--on-gold); }
#nibs button.active i { background: var(--on-gold); }
#nibs.erase button.active i { background: none; border-color: var(--on-gold); }
/* A switch that's on: yellow track, charcoal knob. */
.switch.on i, #sheet-menu .toggle .switch.on::after, :is(#draw-menu, #ink-menu, #erase-menu) .toggle .switch.on::after, :is(#box-menu, #cam-menu) .toggle .switch.on::after { background: var(--on-gold); }
/* Every switch lines up at the right edge. */
#sheet-menu .toggle > span, :is(#draw-menu, #ink-menu, #erase-menu) .toggle > span, :is(#box-menu, #cam-menu) .toggle > span { flex: 1; }

/* Docked: the card and lamp bars sit in the bottom-left corner, under the tools
   and flush with their left edge (as the craft bar is with the right), and shrink
   into it. On a short screen the tools reach the bottom: the bars sit beside them. */
body.bar-dock :is(#cardbar, #lampbar, #bonebar:not(.at-pointer)) {
  left: calc(16px + var(--safe-l)); top: auto; bottom: calc(16px + var(--safe-b)); transform: none;
}
@media (max-height: 820px) {
  body.bar-dock :is(#cardbar, #lampbar, #bonebar:not(.at-pointer)) { left: calc(16px + var(--key) + 12px + var(--safe-l)); }
}
body.bar-dock :is(#cardbar, #lampbar, #bonebar:not(.at-pointer)).lift { bottom: calc(72px + var(--safe-b)); left: 50%; transform: translateX(-50%); }
body.dock-lift #timeline { bottom: calc(134px + var(--safe-b)); }
body.dock-lift #curves { bottom: calc(134px + var(--safe-b) + var(--tl-h, 140px)); }
/* Animating: the colours and card bar are tucked, so the timeline comes down. */
body.anim-open #timeline { bottom: calc(58px + var(--safe-b)); }
body.anim-open #curves { bottom: calc(58px + var(--safe-b) + var(--tl-h, 140px)); }
/* The docked bars and the colours: one height along the bottom. */
#palette, body.bar-dock :is(#cardbar, #lampbar, #bonebar:not(.at-pointer)) { height: 48px; padding-top: 0; padding-bottom: 0; }
#leftbar.tucked > .tuck svg, #rail.tucked > .tuck svg, #topright.tucked > .tuck svg, #palette.tucked > .tuck svg,
#cardbar.shrunk > .shrink svg, #lampbar.shrunk > .shrink svg { width: 12px; height: 12px; }
.tucked > .tuck::before, .shrunk > .shrink::before { inset: -10px; }   /* small to see, big enough for a finger */
@media (pointer: coarse) {
  .tucked > .tuck::before, .shrunk > .shrink::before, body.tuck-make-panel .mp-tag::before { inset: -14px; }
}
/* The info bar's buttons sit close: icons, not gaps. */
#cardbar > button:not(#pulltab):not(.shrink):not(#btn-group):not(#btn-join):not(.switch), #lampbar > button:not(#lamptab):not(.shrink):not(.switch) { width: 34px; }
#cardbar .gz-group button:not(.gz-orient) { width: 32px; }

/* ---- rooms ------------------------------------------------------------ */
/* Animate: a small viewer, the curves beside it, and the dope sheet the whole
   width underneath. Everything sits between the tool column and the right
   edge, below the top row. */
body.room-animate {
  --rm-l: calc(16px + var(--key) + 12px + var(--safe-l));
  --rm-r: calc(16px + var(--safe-r));
  --rm-t: calc(14px + var(--key) + 12px + var(--safe-t));
  --rm-b: calc(14px + var(--safe-b));
  --rm-gap: 10px;
  --rm-view-w: 44vw;           /* the viewer's width */
  --rm-top-h: 46vh;            /* the viewer and curves row */
}
body.room-animate #stage {
  inset: auto; left: var(--rm-l); top: var(--rm-t); width: var(--rm-view-w); height: var(--rm-top-h);
  border-radius: 18px; overflow: hidden; border: 1px solid var(--edge); box-shadow: var(--shadow);
}
body.room-animate #curves, body.room-animate #timeline { transform: none; width: auto; transition: none; }
body.room-animate #curves {
  left: calc(var(--rm-l) + var(--rm-view-w) + var(--rm-gap)); right: var(--rm-r);
  top: var(--rm-t); bottom: auto; height: var(--rm-top-h);
}
body.room-animate #timeline {
  left: var(--rm-l); right: var(--rm-r);
  top: calc(var(--rm-t) + var(--rm-top-h) + var(--rm-gap)); bottom: var(--rm-b);
}
body.room-animate #tl-track { flex: 1; height: auto !important; min-height: 0; }
/* Upright: the viewer the whole width, the curves under it, then the dope sheet. */
@media (orientation: portrait) {
  body.room-animate { --rm-view-w: calc(100vw - var(--rm-l) - var(--rm-r)); --rm-top-h: 30vh; --rm-cv-h: 26vh; }
  body.room-animate #curves {
    left: var(--rm-l); top: calc(var(--rm-t) + var(--rm-top-h) + var(--rm-gap)); height: var(--rm-cv-h);
  }
  body.room-animate #timeline { top: calc(var(--rm-t) + var(--rm-top-h) + var(--rm-cv-h) + var(--rm-gap) * 2); }
}
/* The dividers in the gaps: drag to resize, double-click for the usual sizes.
   A: between the viewer and the curves; B: above the dope sheet. */
.rm-split { display: none; position: fixed; z-index: 12; touch-action: none; }
body.room-animate .rm-split { display: block; }
.rm-split::after { content: ''; position: absolute; inset: 0; margin: auto; border-radius: 3px; background: var(--edge); opacity: 0; transition: opacity .15s, background .15s; }
.rm-split:hover::after { opacity: 1; }
.rm-split.dragging::after { opacity: 1; background: var(--gold); }
.rm-split.cols { cursor: col-resize; }
.rm-split.cols::after { width: 4px; height: 48px; }
.rm-split.rows { cursor: row-resize; }
.rm-split.rows::after { height: 4px; width: 48px; }
body.room-animate #rm-split-a {
  left: calc(var(--rm-l) + var(--rm-view-w)); width: var(--rm-gap); top: var(--rm-t); height: var(--rm-top-h);
}
body.room-animate #rm-split-b {
  left: var(--rm-l); right: var(--rm-r); top: calc(var(--rm-t) + var(--rm-top-h)); height: var(--rm-gap);
}
@media (orientation: portrait) {
  body.room-animate #rm-split-a { left: var(--rm-l); right: var(--rm-r); width: auto; top: calc(var(--rm-t) + var(--rm-top-h)); height: var(--rm-gap); }
  body.room-animate #rm-split-b { top: calc(var(--rm-t) + var(--rm-top-h) + var(--rm-gap) + var(--rm-cv-h)); }
}
/* One pane filling the room (Ctrl Space, or the button tucked in its corner) */
.rm-max { display: none; }
body.room-animate .rm-max {
  display: grid; place-items: center; position: absolute; right: 0; bottom: 0; z-index: 5;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 12px 0 17px 0; cursor: pointer;
  background: var(--surface); color: var(--muted); transition: color .15s;
}
body.room-animate .rm-max:hover, body.room-animate .rm-maxed > .rm-max { color: var(--ink); }
.rm-max svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.rm-one :is(#stage, #curves, #timeline):not(.rm-maxed), body.rm-one .rm-split { visibility: hidden; }
body.room-animate.rm-one :is(#stage, #curves, #timeline).rm-maxed { left: var(--rm-l); right: var(--rm-r); top: var(--rm-t); bottom: var(--rm-b); width: auto; height: auto; }
body.room-animate #cv-head { flex-wrap: wrap; row-gap: 6px; }
body.room-animate #brand { display: none; }
/* What's for making, not moving, stays in Make. */
body.room-animate :is(#btn-tool-draw, #btn-tool-ink, #btn-tool-erase, #btn-tool-sculpt, #btn-tool-cut, #btn-tool-light,
  #rail, #palette, #brushbars, #hint, #lampbar, #btn-anim, #btn-play, #tl-curves, #cv-close) { display: none !important; }
/* The card and bone bars, docked, stand up just under the tools, with only
   what poses and rigs: the gizmos, Hose, Bézier, Lock, Solo. */
body.room-animate.bar-dock :is(#cardbar, #bonebar:not(.at-pointer)) {
  left: calc(16px + var(--safe-l)); top: calc(var(--tools-b, 400px) + 12px); bottom: auto; transform: none;
  width: var(--key); height: auto; max-height: calc(100vh - var(--tools-b, 400px) - 12px - var(--rm-b)); overflow-y: auto; scrollbar-width: none;
  flex-direction: column; padding: 4px 0;
}
body.room-animate.bar-dock #cardbar .gz-group { flex-direction: column; margin: 3px 0; padding: 2px 0; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
body.room-animate.bar-dock :is(#cardbar, #bonebar) .gz-orient { padding: 0; width: 34px; font-size: 10.5px; }
body.room-animate :is(#pulltab, #fadetab, #sizetab, #btn-card-clear, #btn-card-core, #btn-card-shadow, #btn-glow, #btn-card-switch,
  #btn-card-flicker, #btn-slide-paper, #btn-join, #btn-asset, #btn-dup, #btn-delete) { display: none !important; }


/* Your own palettes, after Krafty's, a line between. */
:is(#palette-list, #mp-palette-list) .palrow.mine-first { border-top: 1px solid var(--edge); border-radius: 0 0 9px 9px; margin-top: 4px; }





/* ---- Export film (src/film.js) ---------------------------------------- */
/* A panel in the middle, Krafty's own pieces: the switch (.pp-on), buttons (.pp-pill). */
#film-dialog { position: fixed; z-index: 60; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; display: flex; flex-direction: column; gap: 8px; }
#film-dialog[hidden] { display: none; }
.fd-head { display: flex; align-items: center; justify-content: space-between; }
.fd-head b { font: 600 15px var(--font-display); padding-left: 2px; }
.fd-row { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; }
.fd-row > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.fd-row .pp-on { margin: 0; }
.fd-row .pp-on svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; vertical-align: middle; }
.fd-info { margin: 2px 2px 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fd-progress { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.fd-progress[hidden] { display: none; }
.fd-progress i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .15s; }
.fd-acts { display: flex; justify-content: flex-end; gap: 6px; }
.fd-cancel { display: none; }
#film-dialog.busy .fd-cancel { display: inline-flex; }
#film-dialog.busy :is(.fd-go, .fd-row, .fd-close) { opacity: .4; pointer-events: none; }

/* ---- Wiggle (src/wiggle.js): the film dialog's rows, the Assets shelf's sliders ---- */
#wiggle-panel { position: fixed; z-index: 60; width: 286px; display: flex; flex-direction: column; gap: 6px; }
#wiggle-panel[hidden], #wiggle-panel .wg-body[hidden] { display: none; }
#wiggle-panel .wg-body { display: flex; flex-direction: column; gap: 6px; }
#wiggle-panel .wg-what { margin: 0 auto 0 8px; font-size: 12px; color: var(--muted); }
#wiggle-panel .wg-presets { display: flex; flex-wrap: wrap; gap: 4px; }
#wiggle-panel .ap-slider { grid-template-columns: 92px 1fr 3em; }
#wiggle-panel .mp-sub { margin: 4px 2px 0; }
#wiggle-panel .wg-head { display: flex; align-items: center; justify-content: space-between; }
#wiggle-panel .wg-tie { width: 24px; height: 24px; }
#wiggle-panel .wg-tie[hidden] { display: none; }

/* The sky and ground menu: each choice with a swatch of what it gives. */
#world-menu button { display: flex; align-items: center; gap: 10px; }
#world-menu .chip { flex: none; width: 20px; height: 20px; cursor: inherit; }