/* ============================================================
   Create-a-workspace studio (/accounts/new).
   Two-column composition: an editorial form on the left, a live
   product-chrome preview on the right that re-tints in real time
   as you pick an accent. Reuses design.css tokens and the .swatch
   picker from settings.css; --accent-h is scoped to .ws-stage by
   the accent-picker controller (target "scope").
   ============================================================ */

.ws-stage{
  position:relative;
  min-height:calc(100vh - 48px);
  display:flex; align-items:center; justify-content:center;
  padding:56px 32px 72px;
  overflow:hidden; isolation:isolate;

  /* Re-derive the accent tokens here so they resolve against the scoped
     --accent-h (set inline by the accent-picker controller) rather than the
     :root value. Without this, only direct var(--accent-h) uses would repaint;
     --accent/--accent-soft/etc. are computed once at :root and inherit frozen.
     With no JS / no override these equal the :root tokens, so nothing shifts
     for the surrounding chrome. */
  --accent:      oklch(0.55 0.13 var(--accent-h));
  --accent-soft: oklch(0.95 0.025 var(--accent-h));
  --accent-edge: oklch(0.85 0.06 var(--accent-h));
  --accent-ink:  oklch(0.38 0.14 var(--accent-h));
}

/* Soft accent-tinted atmosphere — two diffuse light sources bleeding
   from opposite corners over the warm paper base. */
.ws-stage::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(118% 78% at 86% 4%, oklch(0.95 0.05 var(--accent-h) / 0.95), transparent 58%),
    radial-gradient(94% 70% at 4% 102%, oklch(0.96 0.035 calc(var(--accent-h) + 46) / 0.7), transparent 55%),
    linear-gradient(176deg, var(--bg), var(--surface-2));
}
/* Fine grain so the gradients read as paper, not a CSS blur. */
.ws-stage__grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0.4;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ws-create{
  position:relative; width:100%; max-width:1060px;
  display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1fr);
  gap:72px; align-items:center;
}

/* ---------- Left: the form ---------- */
.ws-create__panel{ min-width:0; }

.ws-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.14em;
  color:var(--accent-ink); margin:0 0 16px;
}
.ws-eyebrow::before{
  content:""; width:22px; height:1px; background:var(--accent-edge);
}

.ws-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(32px, 4.4vw, 44px); line-height:1.04; letter-spacing:-0.02em;
  margin:0 0 14px; color:var(--ink); text-wrap:balance;
}
.ws-lede{
  font-size:14.5px; line-height:1.58; color:var(--ink-3);
  max-width:44ch; margin:0 0 30px; text-wrap:pretty;
}
.ws-create .hint{ text-wrap:pretty; }

.ws-form .field{ margin-bottom:22px; }
.ws-name-input{
  height:48px; font-size:16px; padding:0 14px; border-radius:9px;
  border-color:var(--rule-3);
}
.ws-name-input::placeholder{ color:var(--ink-5); }

.ws-errors{
  background:var(--bad-soft); color:var(--bad-ink); border:1px solid var(--bad);
  border-radius:8px; padding:10px 13px; font-size:12.5px; margin-bottom:20px;
}

.ws-form__actions{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:30px;
}
.ws-cta{
  height:40px; padding:0 20px; font-size:13.5px; border-radius:8px;
}
.ws-form__note{
  margin-left:auto; font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-4);
}
@media (max-width:480px){ .ws-form__note{ margin-left:0; width:100%; } }

/* ---- Accent picker: full-bleed colour chips + live readout ---- */
.ws-accent__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.ws-accent__head label{ margin-bottom:0; }
.ws-accent__readout{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:500; color:var(--ink-2); letter-spacing:-0.005em;
}
.ws-accent__dot{
  width:11px; height:11px; border-radius:50%;
  background:linear-gradient(140deg, var(--accent), oklch(0.63 0.13 calc(var(--accent-h) + 28)));
  box-shadow:0 0 0 3px var(--accent-soft);
  transition:background .28s ease, box-shadow .28s ease;
}

.ws-accent .accent-row{ gap:10px; margin-top:12px; }
.ws-create .swatch{
  width:38px; height:38px; border-radius:11px;
  border:none; padding:0; box-shadow:none;
  transition:transform .14s cubic-bezier(0.2,0.7,0.2,1), box-shadow .16s ease;
}
.ws-create .swatch .swatch-dot{
  width:100%; height:100%; border-radius:inherit;
  background:linear-gradient(145deg, oklch(0.73 0.13 var(--sw-h)), oklch(0.5 0.145 calc(var(--sw-h) + 26)));
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.42), inset 0 0 0 1px rgba(21,36,47,0.12);
}
.ws-create .swatch .swatch-check{ width:17px; height:17px; }
.ws-create .swatch:hover{ transform:translateY(-3px); }
.ws-create .swatch:hover .swatch-dot{
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.46), inset 0 0 0 1px rgba(21,36,47,0.14),
    0 7px 14px -5px oklch(0.5 0.14 var(--sw-h) / 0.6);
}
.ws-create .swatch.on{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px oklch(0.56 0.14 var(--sw-h)),
    0 10px 18px -6px oklch(0.52 0.14 var(--sw-h) / 0.6);
}
.ws-create .swatch:focus-within{
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px oklch(0.56 0.14 var(--sw-h));
}
@media (prefers-reduced-motion: reduce){
  .ws-create .swatch,
  .ws-create .swatch.on,
  .ws-create .swatch:hover{ transition:none; transform:none; }
}

/* ---- Workspace mark: optional logo upload ---- */
.ws-markfield__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.ws-markfield__head label{ margin-bottom:0; }
.ws-markfield__note{
  font-size:12.5px; font-weight:500; color:var(--ink-4); letter-spacing:-0.005em;
}
.ws-markfield__note.is-error{ color:var(--bad-ink); }

/* Hidden but present, so the label + JS can drive the native picker. */
.ws-markfield__file{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

.ws-markpick{ display:flex; align-items:center; gap:13px; margin-top:12px; }

/* The tile reuses .ws-mark scaled up; it's the primary click / drop-to-replace
   target and the keyboard entry point (role=button). The .ws-create prefix lifts
   specificity above the base .ws-mark rule defined further down. */
.ws-markpick__tile{
  position:relative; width:64px; height:64px; flex-shrink:0;
  border-radius:16px; cursor:pointer; outline:none;
  -webkit-tap-highlight-color:transparent;
}
.ws-markpick__tile:focus-visible{
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}
.ws-create .ws-markpick__preview{
  width:64px; height:64px; border-radius:16px; font-size:26px;
}
/* Shared by the form tile and the aside live mark once an image is chosen. */
.ws-mark.has-img{
  background-size:cover; background-position:center; color:transparent;
  /* Principle 11: hairline keeps a white logo's edge from dissolving into the
     card; the accent lift turns neutral since an uploaded mark isn't accent-hued. */
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.10), 0 8px 18px -8px rgba(21,36,47,0.28);
}
/* Shuffle-a-fun-mark button (replaces the redundant camera badge). */
.ws-markpick__shuffle{
  position:absolute; right:-5px; bottom:-5px;
  width:24px; height:24px; padding:0; border:none; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--surface); color:var(--accent);
  box-shadow:0 2px 5px rgba(21,36,47,0.16), 0 0 0 1px var(--rule-2);
}
.ws-markpick__shuffle svg{ width:14px; height:14px; }
.ws-markpick__shuffle:hover{
  color:var(--accent-ink);
  box-shadow:0 2px 6px rgba(21,36,47,0.22), 0 0 0 1px var(--accent-edge);
}
/* Principle 16: lift the 24px control toward the 40px floor, extending down/right
   into empty space so it doesn't fight the tile or the remove button. */
.ws-markpick__shuffle::before{ content:""; position:absolute; inset:-2px -12px -12px -2px; }
.ws-markpick__remove{
  position:absolute; right:-7px; top:-7px;
  width:22px; height:22px; padding:0; border:none; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--surface); color:var(--ink-3);
  box-shadow:0 2px 5px rgba(21,36,47,0.18), 0 0 0 1px var(--rule-2);
}
.ws-markpick__remove svg{ width:12px; height:12px; }
.ws-markpick__remove:hover{ color:var(--bad-ink); }
/* Principle 16: a 22px control is under the 40px min hit area. Extend it
   outward (up/right, into empty space) so it grows to ~36px without swallowing
   the tile's own click target underneath. */
.ws-markpick__remove::before{ content:""; position:absolute; inset:-12px -12px -2px -2px; }

/* Dashed drop zone */
.ws-dropzone{
  flex:1; min-width:0; height:64px;
  display:flex; align-items:center; justify-content:center;
  padding:0 16px; border-radius:13px; cursor:pointer;
  border:1.5px dashed var(--accent-edge);
  background:oklch(0.98 0.013 var(--accent-h));
  transition:border-color .16s ease, background .16s ease;
}
.ws-dropzone:hover{ border-color:var(--accent); background:var(--accent-soft); }
.ws-dropzone.is-dragover{
  border-color:var(--accent); border-style:solid; background:var(--accent-soft);
}
.ws-dropzone.is-set{
  border-style:solid; border-color:var(--rule); background:var(--surface);
  justify-content:flex-start;
}
.ws-dropzone.is-error{ border-color:var(--bad); background:var(--bad-soft); }

.ws-dropzone__prompt,
.ws-dropzone__chosen{ display:flex; align-items:center; gap:12px; min-width:0; }

.ws-dropzone__icon,
.ws-dropzone__check{
  width:36px; height:36px; flex-shrink:0; border-radius:10px;
  display:grid; place-items:center;
}
.ws-dropzone__icon{ background:var(--accent-soft); color:var(--accent); }
.ws-dropzone__icon svg{ width:18px; height:18px; }
.ws-dropzone__check{ background:var(--ok-soft); color:var(--ok); }
.ws-dropzone__check svg{ width:16px; height:16px; }

.ws-dropzone__copy{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ws-dropzone__title{
  font-size:13.5px; font-weight:500; color:var(--ink-2); line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ws-dropzone__browse{ color:var(--accent); font-weight:600; }
.ws-dropzone__hint{ font-size:11.5px; color:var(--ink-4); line-height:1.35; }

@media (prefers-reduced-motion:reduce){
  .ws-dropzone{ transition:none; }
}

/* Tactile press (principle 12) + a soft reveal when a mark lands (principles
   4/7). All motion-gated so reduced-motion users get none of it. */
@media (prefers-reduced-motion:no-preference){
  .ws-markpick__tile,
  .ws-markpick__remove{ transition:transform .12s cubic-bezier(0.2,0,0,1); }
  .ws-markpick__tile:active{ transform:scale(0.96); }   /* never below 0.95 */
  .ws-markpick__remove:active{ transform:scale(0.96); }
  .ws-markpick__shuffle{ transition:transform .12s cubic-bezier(0.2,0,0,1), box-shadow .16s ease; }
  .ws-markpick__shuffle:active{ transform:scale(0.96); }
  .ws-markpick__shuffle svg{ transition:transform .42s cubic-bezier(0.2,0,0,1); }  /* spins on each shuffle */

  .ws-mark.has-img{ animation:ws-mark-pop .28s cubic-bezier(0.2,0,0,1) both; }
  .ws-dropzone__chosen{ animation:ws-fade-in .2s ease both; }

  @keyframes ws-mark-pop{
    from{ opacity:0; transform:scale(0.94); filter:blur(4px); }
    to{ opacity:1; transform:scale(1); filter:blur(0); }
  }
  @keyframes ws-fade-in{
    from{ opacity:0; transform:translateY(2px); }
    to{ opacity:1; transform:none; }
  }
}

/* ---------- Right: the live preview ---------- */
.ws-preview{ position:relative; min-width:0; }
.ws-preview__label{
  display:flex; align-items:center; gap:7px; margin:0 0 12px 2px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-4);
}
.ws-preview__label::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft);
  animation:ws-pulse 2.4s ease-in-out infinite;
}

.ws-window{
  border-radius:16px; background:var(--surface);
  border:1px solid var(--rule-2); overflow:hidden;
  box-shadow:
    var(--shadow-pop),
    0 44px 90px -44px oklch(0.52 0.13 var(--accent-h) / 0.42);
}

.ws-window__bar{
  display:flex; align-items:center; gap:7px;
  height:42px; padding:0 14px;
  border-bottom:1px solid var(--rule);
  background:rgba(255,255,255,0.80); backdrop-filter:blur(8px);
}
.ws-dot{ width:9px; height:9px; border-radius:50%; background:var(--rule-3); }
.ws-window__url{
  display:flex; align-items:center; gap:5px;
  margin-left:8px; padding:3px 10px; border-radius:20px;
  background:var(--surface-2); border:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.ws-window__url .ws-lock{ color:var(--ink-4); flex-shrink:0; }
.ws-window__url span{ color:var(--accent-ink); }

.ws-window__body{ padding:22px 22px 20px; }

.ws-identity{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.ws-mark{
  width:48px; height:48px; border-radius:13px; flex-shrink:0;
  display:grid; place-items:center;
  color:#fff; font-family:var(--mono); font-weight:500; font-size:21px;
  background:linear-gradient(135deg, var(--accent), oklch(0.63 0.13 calc(var(--accent-h) + 30)));
  box-shadow:0 8px 18px -8px oklch(0.55 0.14 var(--accent-h) / 0.7);
  transition:background .25s ease;
}
.ws-identity__name{
  font-size:18px; font-weight:500; letter-spacing:-0.015em; color:var(--ink);
  line-height:1.2; word-break:break-word;
}
.ws--ghost .ws-identity__name{ color:var(--ink-4); }
.ws-identity__meta{
  display:flex; align-items:center; gap:7px; margin-top:5px;
  font-size:12px; color:var(--ink-3);
}
.ws-identity__meta .pill{ height:20px; font-size:11px; }
.ws-sep{ color:var(--ink-5); }

.ws-nav{ display:flex; flex-direction:column; gap:2px; margin-bottom:6px; }
.ws-nav__item{
  display:flex; align-items:center; gap:10px;
  padding:8px 11px; border-radius:7px;
  font-size:13px; color:var(--ink-2); font-weight:450;
}
.ws-nav__ic{
  width:13px; height:13px; border-radius:4px;
  background:var(--ink-5); flex-shrink:0;
}
.ws-nav__item.is-active{
  background:var(--accent-soft); color:var(--accent-ink); font-weight:500;
}
.ws-nav__item.is-active .ws-nav__ic{ background:var(--accent); }

.ws-window__foot{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--rule);
}
.ws-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color:var(--accent);
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .ws-stage{ align-items:flex-start; padding-top:40px; }
  .ws-create{
    grid-template-columns:1fr; gap:40px; max-width:460px;
  }
}
@media (max-width:560px){
  .ws-preview{ display:none; }
}

/* ---------- Entrance: one orchestrated staggered reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .ws-eyebrow, .ws-title, .ws-lede, .ws-form{
    animation:ws-rise 0.62s cubic-bezier(0.22,0.72,0.2,1) both;
  }
  .ws-eyebrow{ animation-delay:0.04s; }
  .ws-title{ animation-delay:0.11s; }
  .ws-lede{ animation-delay:0.18s; }
  .ws-form{ animation-delay:0.25s; }
  .ws-preview{ animation:ws-rise-preview 0.8s cubic-bezier(0.22,0.72,0.2,1) 0.32s both; }

  @keyframes ws-rise{
    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:none; }
  }
  @keyframes ws-rise-preview{
    from{ opacity:0; transform:translateY(20px) scale(0.97); }
    to{ opacity:1; transform:none; }
  }
  @keyframes ws-pulse{
    0%,100%{ opacity:1; } 50%{ opacity:0.35; }
  }
}