/* Strip Studio — ALIVE v2 workspace chrome.
   Canvas behavior and exported strip rendering remain in studio.js. */

.studio-body {
  min-height: 100svh;
  display: block;
}

.studio-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(42px, 7vh, 68px) max(28px, 5vw) 88px;
}

.studio-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 36px;
}

.studio-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 20px;
  font: 600 10px/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 180ms ease;
}

.studio-eyebrow {
  margin: 0;
  font: 700 11px/1.8 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.studio-title {
  margin: 10px 0 0;
  font: 500 clamp(40px, 5vw, 58px)/1.02 var(--serif);
  letter-spacing: -.015em;
}

.studio-title .kr {
  font-family: var(--serif-kr);
  font-size: .85em;
}

.studio-title .dot { color: var(--brass-text); }

.studio-sub {
  max-width: 58ch;
  margin: 18px 0 0;
  font: 400 15px/1.65 var(--serif);
  color: var(--ink-soft);
}

.studio-export {
  min-height: 48px;
  padding: 0 30px;
  border: 1px solid var(--brass-deep);
  border-radius: 999px;
  background: var(--brass-deep);
  color: #fff;
  font: 600 11px/1 var(--sans);
  letter-spacing: .25em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(138, 98, 39, .22), inset 0 1px 0 var(--brass-light);
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1), box-shadow 180ms ease;
}

.studio-export:active { transform: scale(.97); }

.studio-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: clamp(32px, 5vw, 58px);
  align-items: start;
  margin-top: clamp(42px, 6vh, 64px);
}

.stage-wrap,
.panel {
  min-width: 0;
}

.studio-sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 31px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.studio-sec-head .num {
  flex: none;
  font: italic 500 17px/1 var(--serif);
  color: var(--brass-text);
}

.studio-sec-head h2 {
  margin: 0;
  font: 600 12px/1 var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
}

.cell-tabs {
  display: flex;
  gap: 10px;
  margin: 18px 0 14px;
}

.cell-tab {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: 600 11px/1 var(--sans);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(78, 52, 21, .06);
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
}

.cell-tab:active { transform: scale(.96); }

.cell-tab.active {
  border-color: var(--brass-deep);
  background: var(--brass-deep);
  color: #fff;
}

.cell-tab.filled::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brass-deep);
}

.cell-tab.active.filled::after { background: #fff; }

.stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background:
    repeating-conic-gradient(rgba(132, 104, 66, .09) 0 25%, rgba(255, 255, 255, .26) 0 50%) 50% / 24px 24px,
    var(--surface);
  box-shadow: 0 20px 46px rgba(78, 52, 21, .12);
}

#cell-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.drop-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: 600 10px/1.5 var(--sans);
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease;
}

/* The authored flex display outranks the UA [hidden] rule. */
.drop-hint[hidden] { display: none; }

.stage.dragover {
  outline: 2px dashed var(--brass);
  outline-offset: -9px;
}

.stage-note {
  margin: 13px 2px 0;
  font: 500 10px/1.6 var(--sans);
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel .studio-sec-head { margin-bottom: 4px; }

.tool-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 17px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(251, 247, 239, .82);
  box-shadow: 0 12px 28px rgba(78, 52, 21, .07);
}

.tool-group[hidden] { display: none; }

.tool-label {
  margin: 0;
  font: 600 10px/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-row .studio-btn { flex: 1 1 auto; }
.layer-row { margin-top: 2px; }

.studio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: 600 10px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
}

.studio-btn:active { transform: scale(.97); }
.studio-btn.wide { width: 100%; }

.studio-btn[aria-pressed="true"] {
  border-color: var(--brass-deep);
  background: var(--brass-deep);
  color: #fff;
}

.studio-btn.danger { color: #9a3e32; }

.studio-btn[disabled] {
  opacity: .48;
  cursor: progress;
}

.ctl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  color: var(--ink-soft);
  font: 500 11px/1.3 var(--sans);
}

.ctl-row input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--brass);
}

.ctl-row input[type="color"] {
  width: 44px;
  height: 32px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}

#text-input {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  resize: vertical;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: 500 13px/1.5 var(--sans);
}

#text-controls,
#image-controls,
#brush-controls {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

#text-controls[hidden],
#image-controls[hidden],
#brush-controls[hidden] {
  display: none;
}

.seg {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
}

.seg-btn {
  flex: 1;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: 600 10px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}

.seg-btn.active {
  background: var(--brass-deep);
  color: #fff;
}

.hint {
  margin: -2px 0 2px;
  color: var(--ink-soft);
  font: 400 11px/1.55 var(--sans);
}

.history-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.studio-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  max-width: min(90vw, 460px);
  padding: 12px 18px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 12px 30px rgba(36, 29, 21, .24);
  font: 600 10px/1.5 var(--sans);
  letter-spacing: .1em;
  text-align: center;
}

.studio-back:focus-visible,
.studio-export:focus-visible,
.cell-tab:focus-visible,
.studio-btn:focus-visible,
.seg-btn:focus-visible,
.ctl-row input:focus-visible,
#text-input:focus-visible,
.drop-hint:focus-visible {
  outline: 2px solid var(--brass-deep);
  outline-offset: 3px;
}

#cell-canvas:focus-visible {
  outline: 2px solid var(--brass-deep);
  outline-offset: -4px;
}

@media (hover: hover) and (pointer: fine) {
  .studio-back:hover { color: var(--brass-deep); }

  .studio-export:hover {
    transform: translateY(-1px);
    box-shadow: 0 17px 34px rgba(138, 98, 39, .28), inset 0 1px 0 var(--brass-light);
  }

  .cell-tab:hover {
    color: var(--brass-deep);
    border-color: var(--brass);
  }

  .drop-hint:hover { color: var(--brass-deep); }

  .studio-btn:hover {
    border-color: var(--brass);
    color: var(--brass-deep);
  }
}

@media (max-width: 900px) {
  .studio-shell { max-width: 780px; }

  .studio-main {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .panel > * { width: 100%; }

  .panel .studio-sec-head {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .panel #el-controls { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .studio-shell {
    padding: 34px 20px 64px;
  }

  .studio-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
  }

  .studio-back { margin-bottom: 14px; }

  .studio-export {
    width: 100%;
    max-width: none;
  }

  .studio-main {
    margin-top: 40px;
    gap: 38px;
  }

  .panel { grid-template-columns: 1fr; }
  .panel .studio-sec-head,
  .panel #el-controls { grid-column: auto; }

  .cell-tabs {
    justify-content: space-between;
    max-width: 250px;
  }

  .drop-hint {
    font-size: 9px;
    letter-spacing: .16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-back,
  .studio-export,
  .cell-tab,
  .drop-hint,
  .studio-btn,
  .seg-btn {
    transition: none;
    transform: none;
  }

  .studio-export:hover,
  .studio-export:active,
  .cell-tab:active,
  .studio-btn:active {
    transform: none;
  }
}