/* RELUMA Studio: same five type styles and the same corner logic as the site.
   Screen 1 is the editor (source left, image centre, light right),
   screen 2 is the export. */

.nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---------- editor ---------- */
.studio {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  gap: 40px;
  padding: var(--top) var(--pad-r) var(--bottom) var(--pad-l);
}
.s-left { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.s-left .display { margin-top: auto; }
.s-right { width: 280px; justify-self: end; align-self: start; }
.s-center { display: grid; align-content: center; justify-items: center; gap: 14px; }

.s-frame {
  --fh: min(640px, calc(100svh - 230px));
  position: relative;
  height: var(--fh);
  aspect-ratio: var(--ar, 4 / 5);
  max-width: min(46vw, 760px);
  background: var(--panel);
}
.s-frame reluma-light { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.s-frame .frame-tags { z-index: 2; }
.s-busy {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  background: rgba(8, 8, 8, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--light);
}
.s-busy[hidden] { display: none; }
.s-busy span { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

.s-under { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.views { display: flex; gap: 6px; }
.views .chip[aria-checked="true"] { background: var(--white); color: var(--bg); border-color: var(--white); }
.hint-inline { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; line-height: 12px; white-space: nowrap; }
.hint-inline img { width: 22px; height: 22px; margin: -7px; }

/* drop zone */
.drop {
  display: grid; justify-items: start; gap: 10px;
  padding: 18px 18px 20px;
  border: 1px dashed var(--line-2);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
  max-width: 300px;
}
.drop:hover, .drop.is-over { border-color: var(--fg); background: rgba(255, 241, 222, 0.03); }
.drop img { width: 22px; height: 22px; margin: -7px -7px -3px; }
.drop-title { font-family: var(--mono); font-size: 12px; line-height: 16.5px; text-transform: uppercase; color: var(--white); }

.steps { list-style: none; margin: 0; padding: 0; max-width: 300px; font-family: var(--mono); }
.steps li { display: grid; gap: 4px; padding: 11px 0 13px; border-top: 1px solid var(--line-2); }
.steps .val { color: var(--fg); }
.steps li.is-active .val { color: var(--light); }
.steps li.is-error .val { color: #ff9a8a; }
.bar { display: block; height: 1px; background: var(--line-2); overflow: hidden; }
.bar[hidden] { display: none; }
.bar i { display: block; height: 100%; width: 0; background: var(--light); box-shadow: 0 0 6px 1px rgba(255, 244, 228, 0.8); transition: width 0.25s; }

.swatch--custom {
  position: relative; overflow: hidden;
  background: conic-gradient(#ff6fd2, #ffb36b, #fff1de, #5fdcff, #e4ecff, #ff6fd2);
}
.swatch--custom input { position: absolute; inset: -6px; width: 30px; height: 30px; opacity: 0; cursor: pointer; }

/* ---------- export ---------- */
.export {
  position: relative;
  padding: 150px var(--pad-r) 80px var(--pad-l);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2.4fr);
  gap: 40px;
  border-top: 1px solid var(--line);
}
.x-head { display: flex; flex-direction: column; justify-content: space-between; gap: 60px; }
.x-body { display: grid; gap: 24px; align-content: start; min-width: 0; }
.x-tabs .chip { font-size: 11px; padding: 6px 12px; }
.x-panel { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 32px; align-items: start; }
.x-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--fg); }
.x-steps li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; padding: 11px 0 13px; border-top: 1px solid var(--line-2); }
.x-steps li::before { content: counter(s, decimal-leading-zero); color: var(--muted); }
.x-steps code { color: var(--light); font-family: inherit; }

.code { border: 1px solid var(--line-2); background: var(--panel); min-width: 0; }
.code-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line-2); color: var(--muted); }
.code-bar .cta { padding: 5px 10px; font-size: 11px; }
.code pre { margin: 0; padding: 18px 16px 20px; overflow: auto; max-height: 440px; }
.code code { font-family: var(--mono); font-size: 12px; line-height: 1.65; color: var(--fg); white-space: pre; tab-size: 2; }
.code .t-k { color: #9fb6ff; }
.code .t-s { color: var(--light); }
.code .t-c { color: var(--dim); }

.x-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.x-actions .cta { cursor: pointer; }
.x-actions .cta:disabled { opacity: 0.4; cursor: default; }
.x-actions .caption { flex: 1 1 260px; margin-left: 12px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .studio { grid-template-columns: 1fr; padding-top: 110px; gap: 28px; }
  .s-left { order: 0; }
  .s-left .display { display: none; }
  .s-center { order: 1; }
  .s-frame { --fh: auto; width: min(100%, 560px); max-width: none; height: auto; }
  .s-right { order: 2; width: 100%; max-width: 560px; justify-self: center; display: grid !important; }
  .drop, .steps { max-width: none; }
  .export { grid-template-columns: 1fr; padding-top: 96px; }
  .x-panel { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .studio { padding-top: 84px; }
  .s-under { flex-wrap: wrap; }
  .hint-inline { display: none; }
}

/* display lines sit in narrow columns here */
.studio-page .display { font-size: clamp(44px, 4.6vw, 66px); }
button.cta { background: transparent; cursor: pointer; }
button.cta.cta--solid { background: var(--white); }
button.cta.cta--solid:hover { background: var(--fg); }

/* ---------- editor fits one screen (1440 × 810 and up) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.studio { height: 100svh; min-height: 720px; padding-top: 112px; }
.s-right { width: 300px; }
.s-right .row:first-child { border-top: 0; padding-top: 0; }
.s-right .row { padding: 9px 0 11px; gap: 8px 12px; }
/* sliders on one line: name · track · value */
.s-right .row.slider { grid-template-columns: 108px 1fr 34px; grid-template-areas: "term input val"; gap: 0 12px; }
.s-right .row.slider .term { grid-area: term; }
.s-right.controls .row.slider > input { grid-area: input; grid-column: auto; }
.s-right .row.slider .val { grid-area: val; text-align: right; }

/* help tooltip */
.term-help { display: inline-flex; align-items: center; gap: 6px; }
.help { position: relative; display: inline-flex; }
.help-btn {
  width: 14px; height: 14px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-2); background: transparent; color: var(--muted);
  font-family: var(--mono); font-size: 9px; line-height: 12px; cursor: help;
  transition: color 0.25s, border-color 0.25s;
}
.help-btn:hover, .help-btn:focus-visible { color: var(--fg); border-color: var(--fg); }
.help-tip {
  position: absolute; left: -8px; bottom: calc(100% + 10px); z-index: 20;
  width: 240px; padding: 10px 12px 11px;
  background: #151515; border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 10px; line-height: 15px; text-transform: none; letter-spacing: 0; color: var(--fg);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s;
  pointer-events: none;
}
.help:hover .help-tip, .help-btn:focus-visible + .help-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

@media (max-width: 1100px) {
  .studio { height: auto; min-height: 0; padding-top: 110px; }
  .s-right { width: 100%; }
}

/* actions share the panel grid: buttons under the steps, note under the code frame */
.x-actions { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 32px; align-items: start; }
.x-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.x-actions .caption { margin-left: 0; max-width: 420px; padding-top: 2px; }
@media (max-width: 1100px) { .x-actions { grid-template-columns: 1fr; gap: 16px; } }

/* drop zone: bright by default; on hover the dashed line itself glows */
.drop { position: relative; border: 0; background: transparent; }
.drop::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px dashed var(--white);
  transition: filter 0.35s var(--ease);
}
.drop:hover, .drop.is-over, .drop:focus-within { background: rgba(255, 241, 222, 0.042); }
.drop:hover::before, .drop.is-over::before, .drop:focus-within::before {
  filter: drop-shadow(0 0 1.5px rgba(255, 248, 236, 1)) drop-shadow(0 0 1.5px rgba(255, 248, 236, 1)) drop-shadow(0 0 5px rgba(255, 241, 222, 0.9)) drop-shadow(0 0 5px rgba(255, 241, 222, 0.6));
}

/* before the intro runs nothing in the editor shows (removed by script, timed fallback) */
.intro .site-header, .intro .s-frame, .intro .s-left .label, .intro .s-left .note, .intro .drop,
.intro .steps li, .intro .s-right .row, .intro .s-under { visibility: hidden; }

/* image tags step back, as in the hero */
.s-frame .frame-tags span { opacity: 0.5; }