/* =============================================================================
   Resize & Adjust — application shell (Direction B)
   -----------------------------------------------------------------------------
   Cinematic near-black, generous space, light-weight display type, soft depth.
   Montserrat is self-hosted: it is the brand face and the canvas renderer in
   core.js sets it directly, so it must be present locally, not fetched.
   ========================================================================== */

@font-face { font-family: Montserrat; font-weight: 300; font-style: normal; font-display: swap; src: url('../assets/fonts/montserrat-300.woff2') format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 400; font-style: normal; font-display: swap; src: url('../assets/fonts/montserrat-400.woff2') format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 500; font-style: normal; font-display: swap; src: url('../assets/fonts/montserrat-500.woff2') format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 600; font-style: normal; font-display: swap; src: url('../assets/fonts/montserrat-600.woff2') format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 700; font-style: normal; font-display: swap; src: url('../assets/fonts/montserrat-700.woff2') format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 800; font-style: normal; font-display: swap; src: url('../assets/fonts/montserrat-800.woff2') format('woff2'); }

* { box-sizing: border-box; }
/* Any element given `display` would otherwise ignore the hidden attribute —
   the overlays (composer, pop-over, drop layer) rely on it, so make it win. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: Montserrat, var(--ui);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; }

/* The <defs> carrier for the mark symbol — present, but occupies nothing. */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- The mark ---------- */
.mark { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.mark-glyph { width: 24px; height: 24px; flex-shrink: 0; }
.mark--btn { background: none; border: none; padding: 6px; cursor: pointer; }
/* The hero's own mark, only: bigger, and the flat-white glyph (see #markWhite
   in index.html) so it holds up against the aurora instead of the gradient
   version everywhere else, which reads as a smear on top of it. */
.mark--hero { gap: 11px; font-size: 17px; }
.mark-glyph--lg { width: 32px; height: 32px; }

/* ---------- The weave ----------
   The background pattern is the logo's own geometry — a rounded frame split by
   a cross — tiled into what is effectively a contact sheet. Masked to a soft
   pool at the top so it never competes with the type. */
.weave {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='18' y='18' width='92' height='92' rx='25'/%3E%3Cpath d='M18 47h92M47 18v92'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: 0.055;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(90% 70% at 50% 0%, #000 0%, transparent 72%);
}

/* ---------- Aurora, grain, cursor light ----------
   The living backdrop, in three layers over the weave. All of it is decorative:
   pointer-events none everywhere, and the global prefers-reduced-motion rule at
   the end of this file stops the drift (the JS light guards itself in main.js).
   Spectrum colours are correct here — tokens.css reserves the spectrum for
   "eyebrow text & the hero glow", and this is the hero glow. */
.aurora {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  -webkit-mask-image: radial-gradient(120% 95% at 50% 0%, #000 0%, transparent 85%);
          mask-image: radial-gradient(120% 95% at 50% 0%, #000 0%, transparent 85%);
}
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(58px); will-change: transform;
}
.aurora i:nth-child(1) { width: 52%; height: 78%; left: -2%; top: -24%; background: #6366f1; opacity: .72; animation: au-a 21s var(--ease) infinite alternate; }
.aurora i:nth-child(2) { width: 46%; height: 70%; left: 30%; top: -32%; background: #a855f7; opacity: .60; animation: au-b 26s var(--ease) infinite alternate; }
.aurora i:nth-child(3) { width: 44%; height: 64%; right: -2%; top: -20%; background: #e0559f; opacity: .46; animation: au-c 31s var(--ease) infinite alternate; }
.aurora i:nth-child(4) { width: 34%; height: 54%; left: 50%; top: -12%; background: #ff8a5b; opacity: .30; animation: au-d 24s var(--ease) infinite alternate; }
@keyframes au-a { from { transform: translate(-8%,  4%) scale(1);    } to { transform: translate(14%, 14%) scale(1.18); } }
@keyframes au-b { from { transform: translate(6%,  10%) scale(1.1);  } to { transform: translate(-14%, 0%) scale(.92);  } }
@keyframes au-c { from { transform: translate(4%,   0%) scale(.95);  } to { transform: translate(-12%,16%) scale(1.15); } }
@keyframes au-d { from { transform: translate(0%,   6%) scale(1.05); } to { transform: translate(-18%,-4%) scale(.9);   } }

/* One static SVG turbulence tile. Its whole job is killing the banding the big
   blurs would otherwise show on near-black; `screen` only ever adds light, so
   it survives on a dark ground (overlay math collapses to ~0 there). */
.grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .10; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A pool of light that eases toward the cursor — the lag is what makes it read
   as light rather than as a cursor. main.js writes --mx/--my. */
.cursorlight {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%),
              rgba(139,123,255,.18), transparent 70%);
}

/* The workspace variant: dimmer, and sized for a short strip — the blobs are
   percentages of their box, so inside the bar they need to be far taller than
   it to blur into a wash rather than read as dots. */
.aurora--wash { opacity: .35; -webkit-mask-image: none; mask-image: none; }
/* Doubled class to outweigh the .aurora i:nth-child() sizing rules above —
   those carry two class-level selectors, so one class alone loses to them. */
.aurora.aurora--wash i { height: 700%; top: -300%; }

/* ---------- Buttons ---------- */
.btn {
  font: inherit; font-weight: 500; font-size: 13px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 9px 16px; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast) var(--ease-out), opacity var(--t-fast);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn--white { background: var(--text); color: #000; font-weight: 600; }
.btn--white:not(:disabled):hover { background: #fff; }
.btn--quiet { background: transparent; color: var(--text-2); border-color: var(--line-2); }
.btn--quiet:hover { color: var(--text); border-color: var(--muted); }
.btn--ghost { background: rgba(255,255,255,.06); color: var(--text); border-color: var(--line-2); }
.btn--lg { padding: 13px 24px; font-size: 15px; }

.chip {
  font: inherit; font-size: 12px; font-weight: 500;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 12px; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover { background: var(--surface-3); color: var(--text); border-color: var(--line-2); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100%;
  display: flex; flex-direction: column;
  background: radial-gradient(120% 90% at 50% -10%, #1a1c26, var(--ink) 60%);
  position: relative; overflow: hidden;
}
.hero-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px; position: relative; z-index: 2;
}
.hero-body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px 64px; position: relative; z-index: 2; }
.hero-title { margin: 14px 0 0; font-weight: 600; font-size: clamp(38px, 6.5vw, 78px); line-height: 1.04; letter-spacing: -0.035em; }
.hero-title .dim { color: var(--accent-warm); }
.hero-sub { margin: 20px 0 0; color: var(--accent-warm); font-size: clamp(15px, 1.8vw, 18px); max-width: 52ch; line-height: 1.5; font-weight: 300; }

/* ---------- The stage: the hero image *is* the dropzone ---------- */
.stage {
  margin: 42px auto 0; width: min(900px, 94%); max-height: 42vh; position: relative;
  border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  border: 1px solid var(--line-2); box-shadow: var(--shadow-xl), var(--rim);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out), box-shadow var(--t);
}
.stage:hover { border-color: var(--line-2); transform: translateY(-2px); }
.stage img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 16 / 7; max-height: 42vh; }

/* Short viewports (a laptop window that isn't maximized, dev tools open, a
   browser toolbar eating vertical space) are common enough that the drop
   zone and its fallback links must never depend on scrolling to reach —
   scrolling wasn't broken, but nothing on screen hinted it was needed, and a
   primary action that silently requires it reads as the app being stuck. */
@media (max-height: 820px) {
  .hero-nav { padding: 12px 24px; }
  .hero-body { padding: 20px 24px 24px; }
  .hero-title { margin-top: 8px; font-size: clamp(28px, 5vw, 52px); }
  .hero-sub { margin-top: 10px; font-size: clamp(13px, 1.6vw, 16px); }
  .stage { margin-top: 22px; max-height: 30vh; }
  .stage img { max-height: 30vh; }
  .hero-trust { margin-top: 16px; }
}
/* Mute the picture so the invitation stays legible over any photo — muted,
   not smothered: the picture is still the thing you are looking at. */
.stage-veil {
  position: absolute; inset: 0;
  background: radial-gradient(75% 80% at 50% 50%, rgba(5,5,7,.5), rgba(5,5,7,.74));
  backdrop-filter: saturate(0.7);
  transition: background var(--t) var(--ease);
}
.stage:hover .stage-veil { background: radial-gradient(75% 80% at 50% 50%, rgba(5,5,7,.38), rgba(5,5,7,.66)); }
.stage-face {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  pointer-events: none;
}
.stage-icon {
  width: 40px; height: 40px; margin-bottom: 8px;
  fill: none; stroke: var(--text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  opacity: .9; transition: transform var(--t) var(--spring);
}
.stage:hover .stage-icon { transform: translateY(-3px); }
.stage-lead { margin: 0; font-size: clamp(17px, 2.2vw, 22px); font-weight: 600; letter-spacing: -0.02em; }
.stage-sub { margin: 0; font-size: 13px; color: var(--text-2); }
.stage-link { color: var(--iris-hi); text-decoration: underline; text-underline-offset: 3px; }
.stage-sample {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--text);
  background: rgba(255,255,255,.1); border: 1px solid var(--line-2);
  border-radius: var(--r-pill); padding: 7px 14px; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--t-fast);
}
.stage-sample:hover { background: rgba(255,255,255,.2); }
/* Dragging a file over the page */
.stage.hot { border-color: var(--iris); box-shadow: var(--shadow-xl), 0 0 0 4px var(--iris-ring); }
.stage.hot .stage-veil { background: radial-gradient(75% 80% at 50% 50%, rgba(5,5,7,.2), rgba(5,5,7,.5)); }
.stage-glow { position: absolute; left: 50%; bottom: -18%; width: 70%; height: 60%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, var(--iris-glow), transparent 70%); filter: blur(30px); pointer-events: none; }

.hero-trust {
  display: inline-flex; align-items: center; gap: 8px; margin: 30px auto 0;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent-warm) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-warm) 28%, transparent);
  color: color-mix(in srgb, var(--accent-warm) 80%, var(--text));
  font-size: 12px; font-weight: 500;
}
.hero-trust svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Naming ----------
   One question, nothing else on screen. Grey label, a line to write on. */
.naming {
  height: 100%; position: relative; overflow: hidden;
  display: grid; place-items: center; padding: 24px;
  background: radial-gradient(110% 80% at 50% 0%, #15171f, var(--ink) 65%);
}
.naming-in {
  position: relative; z-index: 2; width: min(680px, 100%);
  display: flex; flex-direction: column; align-items: flex-start;
  animation: rise var(--t-slow) var(--ease-out);
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.naming-mark { width: 30px; height: 30px; margin-bottom: 28px; opacity: .9; }
.naming-eyebrow { margin: 0 0 10px; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; }
.naming-line {
  width: 100%; font: inherit;
  font-size: clamp(30px, 5.4vw, 54px); font-weight: 200; letter-spacing: -0.03em;
  color: var(--text); background: transparent;
  border: none; border-bottom: 1px solid var(--line-2);
  padding: 6px 2px 16px; outline: none;
  transition: border-color var(--t) var(--ease);
}
.naming-line::placeholder { color: var(--muted-2); }
.naming-line:focus { border-bottom-color: var(--iris); }
.naming-foot { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.naming-hint { color: var(--muted); font-size: 12px; }

/* ---------- Workspace ---------- */
.ws { height: 100%; display: flex; flex-direction: column; }
.ws-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface); flex-shrink: 0; flex-wrap: wrap;
  /* The wash and grain live inside the bar; clipping here is what guarantees
     the glow can never reach the card grid below. */
  position: relative; overflow: hidden;
}
/* Controls ride above the wash, so type stays crisp under the coloured light. */
.ws-bar > :not(.aurora):not(.grain) { position: relative; z-index: 1; }
.bar-sp { flex: 1; }
.name-inline {
  font: inherit; font-weight: 600; font-size: 14px; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 7px 10px; min-width: 180px; outline: none;
}
.name-inline:hover { border-color: var(--line); }
.name-inline:focus { border-color: var(--iris); background: var(--surface-2); }
.name-inline::placeholder { color: var(--muted-2); }

.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; }
.seg button {
  font: inherit; font-size: 12px; font-weight: 500; color: var(--muted);
  background: none; border: none; border-radius: var(--r-pill); padding: 5px 12px; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.seg button.on { background: var(--text); color: #000; font-weight: 600; }

/* ---------- The grid: every size at once ---------- */
.ws-body { flex: 1; overflow-y: auto; min-height: 0; background: var(--ink-2); }
/* Packed, not ruled. The sizes have wildly different aspects — a row grid pads
   every row to its tallest card and leaves holes. Columns let the tiles bunch
   up against each other, so more of the set is on screen at once. */
.grid {
  padding: 18px;
  columns: 300px;
  column-gap: 16px;
}

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-md), var(--rim);
  transition: border-color var(--t), transform var(--t) var(--ease-out), opacity var(--t);
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 16px; width: 100%;
}
.card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.card.off { opacity: 0.4; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.card-title { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-dims { font-size: 11px; color: var(--muted); }
.card-tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--r-pill); }
.card-tag.composed { background: var(--iris-weak); color: var(--iris-hi); }
.card-tag.reframe { background: rgba(255,255,255,.06); color: var(--muted); }
.card canvas { display: block; width: 100%; height: auto; background: var(--ink-2); }

/* Direct manipulation: drag the picture inside its frame, wheel to scale. */
.card-canvas { position: relative; cursor: grab; touch-action: none; }
.card-canvas:active { cursor: grabbing; }
.card-canvas::after {
  content: "Drag to reposition · scroll to scale";
  position: absolute; left: 8px; bottom: 8px;
  font-size: 10px; font-weight: 500; color: var(--text);
  background: rgba(5,5,7,.72); border: 1px solid var(--line-2);
  border-radius: var(--r-pill); padding: 4px 9px;
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast);
}
.card-canvas:hover::after { opacity: 1; }

.card-tools { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-top: 1px solid var(--line); }
.card-tools .zoom-ico { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.zoom {
  flex: 1; -webkit-appearance: none; appearance: none; height: 3px; border-radius: 999px;
  background: var(--surface-3); outline: none; cursor: pointer; margin: 0;
}
.zoom::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--text); cursor: pointer; border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.zoom::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--text); border: none; cursor: pointer; }
.zoom-val { font-size: 10.5px; color: var(--muted); min-width: 30px; text-align: right; }
/* The editor's sliders (Margin, Grid spacing, corner radius, opacity, …) all
   pair with one of these — the value typed here is a real alternative to
   dragging, not just a readout. */
.zoom-val-input {
  width: 54px; flex-shrink: 0; text-align: right;
  font: inherit; font-size: 11px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 5px 7px; outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.zoom-val-input:focus { border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-ring); }
.card-tools .linkbtn { font-size: 11px; }

.card-foot { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); }
.ck { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--text-2); }
.ck input { width: 15px; height: 15px; accent-color: var(--iris); cursor: pointer; }
.card-foot .btn { padding: 5px 11px; font-size: 11.5px; }
.warn { font-size: 11px; color: var(--amber, #ffb454); }

/* ---------- The auto-focus card ----------
   It leads the grid and sweeps a shine left-to-right, because it is the one
   control that moves every other tile. */
.card--focus { border-color: var(--line-2); }
.card--focus .focus-shot { position: relative; overflow: hidden; line-height: 0; cursor: grab; touch-action: none; }
.card--focus .focus-shot:active { cursor: grabbing; }
.focus-pan { position: relative; transform-origin: 0 0; will-change: transform; }
.card--focus .focus-shot img { width: 100%; display: block; filter: saturate(.75) brightness(.62); }
.card--focus .focus-shot::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16) 45%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.16) 55%, transparent);
  transform: skewX(-16deg);
  animation: shine 3.6s var(--ease) infinite;
  pointer-events: none;
}
@keyframes shine {
  0%   { left: -60%; }
  55%  { left: 125%; }
  100% { left: 125%; }
}
/* The draggable focal point, directly on the grid card — grab it and drop it
   on the subject. --rz counter-scales it so it stays the same size on screen
   however far the picture underneath is magnified. */
.focus-dot {
  position: absolute; width: 18px; height: 18px; z-index: 2; padding: 0;
  border-radius: 50%; border: 2px solid #fff; background: rgba(255,255,255,.2);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.6);
  cursor: grab;
  transform: translate(-50%, -50%) scale(var(--rz, 1));
  transition: transform var(--t-fast) var(--ease-out);
}
.focus-dot:hover { transform: translate(-50%, -50%) scale(calc(var(--rz, 1) * 1.18)); }
.focus-dot:active { cursor: grabbing; transform: translate(-50%, -50%) scale(calc(var(--rz, 1) * 0.94)); }
.focus-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; font-size: 11.5px; color: var(--text-2);
  background: linear-gradient(transparent, rgba(5,5,7,.85));
  pointer-events: none;
}
.focus-cap b { color: var(--text); font-weight: 600; }

/* ---------- Editor ----------
   One canvas, big, with the inspector beside it. */
.ed { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.ed-scrim { position: absolute; inset: 0; background: rgba(4,4,7,.78); backdrop-filter: blur(6px); }
.ed-box {
  position: relative; width: min(1320px, 100%); height: min(880px, 100%);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: hidden;
  animation: pop var(--t-slow) var(--ease-out);
}
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.ed-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; }

/* The switcher: which single size you are looking at. */
.ed-sizes { display: flex; gap: 6px; flex-wrap: wrap; }
.ed-size {
  font: inherit; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 7px 12px; color: var(--text);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.ed-size b { display: block; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
.ed-size span { font-size: 10px; opacity: .8; }
.ed-size:hover { border-color: var(--line-2); color: var(--text); }
.ed-size.on { background: var(--iris-weak); border-color: var(--iris); color: var(--iris-hi); }

.ed-link { display: inline-flex; align-items: center; gap: 8px; }
.ed-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); }
.ed-tag.linked { background: rgba(255,255,255,.06); color: var(--text); }
.ed-tag.free { background: var(--iris-weak); color: var(--iris-hi); }

/* ---------- The tool rail (Generic) ----------
   Tools on one row, above the canvas, reachable without leaving the artwork. */
.ed-rail {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); flex-shrink: 0;
}
.tool-group { display: flex; align-items: center; gap: 4px; }
.tool-group + .tool-group { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--line); }
.ed-overlay-group { margin-left: auto; min-width: 210px; }
.tool {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 9px 14px; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.tool svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool svg.caret { width: 12px; height: 12px; margin-left: -2px; opacity: .7; }
.tool:hover { background: var(--surface-2); color: var(--text); border-color: var(--muted); }
.tool:active { transform: translateY(1px); }
.tool--toggle.active { background: var(--iris-weak); border-color: var(--iris); color: var(--iris-hi); }

/* Grid/Margins: one button both activates the guide and opens its settings. */
.guide-ctrl { display: inline-flex; align-items: center; gap: 3px; }
.guide-menu { min-width: 200px; padding: 10px 12px; }
.guide-menu .grp-label { margin-bottom: 2px; }

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
  display: none; flex-direction: column; min-width: 176px; padding: 5px;
  background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.dropdown.open .dropdown-menu { display: flex; }
.dropdown-menu button {
  display: flex; align-items: center; gap: 8px; text-align: left;
  font: inherit; font-size: 12px; color: var(--text);
  background: none; border: none; border-radius: var(--r-sm); padding: 7px 9px; cursor: pointer;
}
.dropdown-menu button:hover { background: var(--iris-weak); color: var(--text); }

.snap-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; padding: 0 4px; }
.snap-toggle input { width: 14px; height: 14px; accent-color: var(--iris); cursor: pointer; }
.ed-overlay-label { font-size: 11px; color: var(--text); white-space: nowrap; }
.ed-overlay-group .zoom { flex: 1; min-width: 70px; }

/* Overlay colour: a swatch that opens the brand palette in place. */
.ed-overlay-sw { position: relative; display: inline-flex; }
.sw--cue { width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--line-2); cursor: pointer; padding: 0; }
.sw-pop {
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); z-index: 6;
  display: none; gap: 5px; padding: 7px;
  background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.ed-overlay-sw.open .sw-pop { display: flex; }
.sw--xs { width: 20px; height: 20px; border-radius: 5px; }

.ed-kinds { flex-shrink: 0; }

.ed-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; flex: 1; }
.ed-stage { position: relative; display: grid; place-items: center; padding: 24px; min-height: 0; overflow: hidden; background: var(--ink-2); }

/* Double-click editing: a real input laid exactly over the layer, so typing
   feels direct instead of routed through the sidebar. */
.ed-inline-edit {
  position: absolute; box-sizing: border-box; z-index: 6;
  background: rgba(8, 9, 13, .82); border: 1.5px solid var(--iris);
  border-radius: 3px; padding: 0 2px; margin: 0; outline: none; resize: none;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 0 0 3px var(--iris-ring);
}
textarea.ed-inline-edit { overflow: hidden; }
#edCanvas {
  display: block; cursor: crosshair; touch-action: none;
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg); background: var(--ink);
}
.ed-side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); }
.ed-tabs { display: flex; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.ed-tabs button {
  flex: 1; font: inherit; font-size: 12px; font-weight: 500; color: var(--text);
  background: none; border: none; border-radius: var(--r-sm); padding: 7px 10px; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.ed-tabs button:hover { color: var(--text); background: var(--surface-2); }
.ed-tabs button.on { background: var(--surface-3); color: var(--text); font-weight: 600; }
.ed-pane { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.ed-note { margin: 0; font-size: 11px; color: var(--text); line-height: 1.45; }
.ed-note--warn { color: var(--amber, #ffb454); }
.ck--prop { font-size: 12px; color: var(--text); user-select: none; }
.ed-empty { margin: 0; font-size: 12px; color: var(--text); padding: 10px 0; }

.ed-props { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.ed-prop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ed-prop-head > span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.ed-prop-acts { display: flex; gap: 4px; }
.ed-prop-acts .chip { padding: 4px 8px; font-size: 11px; line-height: 1; }

/* The layer list collapses once you're deep in one layer's properties. */
.ed-details > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.ed-details > summary::-webkit-details-marker { display: none; }
.ed-details > summary::before {
  content: ""; width: 0; height: 0; flex-shrink: 0;
  border-left: 4px solid var(--text); border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  transition: transform var(--t-fast) var(--ease);
}
.ed-details[open] > summary::before { transform: rotate(90deg); }

.ed-list { display: flex; flex-direction: column; gap: 3px; }
.ed-item {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 9px; border-radius: var(--r-sm); border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.ed-item:hover { background: var(--surface-2); }
.ed-item.on { background: var(--iris-weak); border-color: var(--iris); }
.ed-item-name { flex: 1; min-width: 0; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-item.on .ed-item-name { color: var(--text); }
.ed-item-tag { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }

.sw--none {
  background: repeating-linear-gradient(45deg, #2a2f3a, #2a2f3a 4px, #171a22 4px, #171a22 8px);
  position: relative;
}

.grp { display: flex; flex-direction: column; gap: 8px; }
.grp > label > span, .grp-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
}
.ifield { display: flex; flex-direction: column; gap: 5px; }
.ifield > span { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.ifield input, .ifield textarea, .ifield select {
  font: inherit; font-size: 13px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 9px 10px; outline: none; width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ifield textarea { resize: vertical; min-height: 58px; line-height: 1.4; }
.ifield input:focus, .ifield textarea:focus, .ifield select:focus { border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-ring); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.slider-row { display: flex; align-items: center; gap: 10px; }
.swatches { display: flex; gap: 8px; }
.sw { width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.sw.on { border-color: var(--text); }

.opts { display: flex; gap: 6px; flex-wrap: wrap; }
.opt {
  font: inherit; font-size: 11.5px; font-weight: 500; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 11px; cursor: pointer;
}
.opt.on { background: var(--iris-weak); border-color: var(--iris); color: var(--iris-hi); }

/* .chip is shared with the workspace toolbar (Deselect all, + Add size), whose
   own colour stays as-is — this scopes the brighter text to the editor only. */
#editor .chip { color: var(--text); }

.spk { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.spk-top { display: flex; gap: 10px; align-items: center; }
.spk-top img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--surface-3); }
.spk-rm { margin-left: auto; }
.linkbtn { background: none; border: none; color: var(--iris-hi); font: inherit; font-size: 12px; cursor: pointer; padding: 0; text-align: left; }

/* ---------- Dialogs, toast, drop layer ---------- */
.sheet-dlg { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow-xl); width: min(420px, calc(100vw - 32px)); }
.sheet-dlg::backdrop { background: rgba(4,4,7,.6); backdrop-filter: blur(3px); }
.sheet-form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.sheet-form h2 { margin: 0; font-size: 16px; font-weight: 600; }
.sheet-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.sheet-row .x { color: var(--muted); padding-bottom: 10px; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.status { display: flex; justify-content: space-between; align-items: center; padding: 7px 16px; border-top: 1px solid var(--line); background: var(--surface); font-size: 11px; color: var(--muted); flex-shrink: 0; }
.status-priv { display: inline-flex; align-items: center; gap: 7px; color: var(--ok); }
.status-priv i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: var(--surface-3); border: 1px solid var(--line-2); color: var(--text);
  padding: 10px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; z-index: 90;
  transition: opacity var(--t), transform var(--t) var(--spring);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.droplayer { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(4,4,7,.7); backdrop-filter: blur(4px); }
.droplayer-in { border: 2px dashed var(--iris); border-radius: var(--r-xl); padding: 60px 90px; color: var(--text); font-size: 16px; font-weight: 600; background: var(--iris-weak); }

@media (max-width: 900px) {
  .composer-body { grid-template-columns: 1fr; }
  .composer-form { border-right: none; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}