/*
 * Image Studio — layout for the combined resize / crop / compress workspace.
 * Shared surface language lives in media-tools.css; this file only owns the
 * stage, the crop overlay, and the tabbed sidebar.
 */

.studio-panel { padding: 18px; }
.studio-drop { min-height: 320px; }

.studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 18px;
}

.studio-stage,
.studio-sidebar-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--media-line);
  border-radius: 17px;
  background: rgba(255, 253, 248, .72);
}

.studio-sidebar { min-width: 0; }

.stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.stage-title { min-width: 0; }
.stage-title p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.stage-name { font-size: .82rem; font-weight: 750; letter-spacing: -.015em; }
.stage-meta { margin-top: 3px !important; color: #8b867d; font-family: "DM Mono", ui-monospace, monospace; font-size: .62rem; }

.stage-frame {
  position: relative;
  display: grid;
  height: clamp(330px, 50vh, 540px);
  place-items: center;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--media-line);
  border-radius: 14px;
  background-color: #eae5dc;
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, .045) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0, 0, 0, .045) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, .045) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, .045) 75%);
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  background-size: 22px 22px;
}

.canvas-wrap {
  position: relative;
  line-height: 0;
  box-shadow: 0 10px 30px rgba(41, 36, 27, .17);
}

.canvas-wrap canvas { display: block; }
/* Only a crop needs every finger movement on the picture; on the other tabs a
   swipe that starts on the image still scrolls the page. */
.canvas-wrap.is-cropping { cursor: crosshair; touch-action: none; }
.canvas-wrap.is-picking { cursor: crosshair; }

.crop-box {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 9999px rgba(24, 22, 19, .52);
  cursor: move;
}

/* A box that covers the whole picture cannot move; dragging in it draws a crop. */
.crop-box.is-whole { cursor: crosshair; }

.crop-box::before,
.crop-box::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.crop-box::before {
  border-top: 1px solid rgba(255, 255, 255, .35);
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  inset: 33.333% 0;
}

.crop-box::after {
  border-right: 1px solid rgba(255, 255, 255, .35);
  border-left: 1px solid rgba(255, 255, 255, .35);
  inset: 0 33.333%;
}

.crop-handle {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(24, 22, 19, .35);
  border-radius: 3px;
  background: #fffdf8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.crop-handle[data-dir="nw"] { top: -7px; left: -7px; cursor: nwse-resize; }
.crop-handle[data-dir="ne"] { top: -7px; right: -7px; cursor: nesw-resize; }
.crop-handle[data-dir="sw"] { bottom: -7px; left: -7px; cursor: nesw-resize; }
.crop-handle[data-dir="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.crop-handle[data-dir="n"] { top: -7px; left: 50%; cursor: ns-resize; transform: translateX(-50%); }
.crop-handle[data-dir="s"] { bottom: -7px; left: 50%; cursor: ns-resize; transform: translateX(-50%); }
.crop-handle[data-dir="w"] { top: 50%; left: -7px; cursor: ew-resize; transform: translateY(-50%); }
.crop-handle[data-dir="e"] { top: 50%; right: -7px; cursor: ew-resize; transform: translateY(-50%); }

@media (pointer: coarse) {
  /* A 13px square is a precise target for a mouse and a miss for a finger. The
     handle looks the same, but it catches touches 44px across, and the corners
     sit above the edges where the two overlap on a small crop. */
  .crop-handle::after { position: absolute; inset: -16px; content: ""; }
  .crop-handle[data-dir="nw"],
  .crop-handle[data-dir="ne"],
  .crop-handle[data-dir="sw"],
  .crop-handle[data-dir="se"] { z-index: 1; }
}

.crop-size {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 0;
  padding: 4px 7px;
  border-radius: 7px;
  color: #fff;
  background: rgba(24, 22, 19, .78);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .58rem;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.stage-empty { color: #8b867d; font-size: .78rem; }

.stage-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 11px;
}

.pipeline-note,
.estimate-note {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-note { color: #868177; }
.estimate-note { flex: 0 0 auto; color: var(--media-accent-dark); font-weight: 500; }

.studio-tabs { grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; }

.tab-panel[hidden] { display: none !important; }
.panel-scope {
  display: inline-flex;
  margin: 0 0 14px;
  padding: 4px 8px;
  border-radius: 7px;
  color: #6f6b62;
  background: #ede8df;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .57rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.dim-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}

.dim-link {
  display: grid;
  width: 38px;
  height: 43px;
  place-items: center;
  border: 1px solid var(--media-line);
  border-radius: 10px;
  color: #8b867d;
  background: #fffdf8;
  cursor: pointer;
}

.dim-link svg { width: 16px; height: 16px; }
.dim-link[aria-pressed="true"] { border-color: var(--media-accent); color: var(--media-accent); background: color-mix(in srgb, var(--media-soft) 55%, white); }

.quad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--media-line);
  border-radius: 8px;
  color: #5e5b54;
  background: #fffdf8;
  cursor: pointer;
  font-size: .64rem;
  font-weight: 650;
}

.chip:hover { border-color: #aca397; transform: translateY(-1px); }
.chip[aria-pressed="true"] { border-color: var(--media-accent); color: var(--media-accent-dark); background: color-mix(in srgb, var(--media-soft) 55%, white); }

.transform-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

.transform-row .chip {
  display: grid;
  height: 40px;
  place-items: center;
  padding: 0;
}

.transform-row .chip svg { width: 17px; height: 17px; }

.swatch-preview {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--media-line);
  border-radius: 12px;
  background: #fffdf8;
}

.swatch-chip {
  width: 62px;
  height: 62px;
  border: 1px solid rgba(24, 22, 19, .12);
  border-radius: 10px;
  background: #d9d3c8;
}

.swatch-values { min-width: 0; display: grid; gap: 5px; }

.swatch-value {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .64rem;
}

.swatch-value span:first-child { color: #9c968b; font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; }
.swatch-value output { overflow: hidden; color: var(--media-ink); text-overflow: ellipsis; white-space: nowrap; }

.copy-btn {
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--media-line);
  border-radius: 6px;
  color: #7d786f;
  background: #fffdf8;
  cursor: pointer;
  font-family: inherit;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.copy-btn:hover { border-color: #aca397; color: var(--media-ink); }

.recent-swatches { display: flex; flex-wrap: wrap; gap: 6px; }

.recent-swatch {
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid rgba(24, 22, 19, .13);
  border-radius: 7px;
  cursor: pointer;
}

.recent-swatch:hover { transform: translateY(-1px); }

/* The tab panels sit between this block and the last control section, so the
   shared adjacent-sibling divider in media-tools.css never reaches it. */
.export-section {
  margin-top: 23px;
  padding-top: 22px;
  border-top: 1px solid var(--media-line);
}

.export-note { margin: 10px 0 0; color: #878278; font-size: .66rem; line-height: 1.5; }

@media (max-width: 980px) {
  .studio { grid-template-columns: 1fr; }
}

@media (max-width: 840px) {
  .studio-panel { padding: 12px; }
  .stage-frame { height: clamp(280px, 44vh, 420px); padding: 11px; }
}

@media (max-width: 540px) {
  .stage-head { align-items: stretch; flex-direction: column; }
  .studio-stage, .studio-sidebar-card { padding: 14px; }
  .quad-grid { grid-template-columns: 1fr; }
  .stage-foot { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* A finger leaves :hover behind on whatever it last tapped. */
@media (hover: none) {
  .chip:hover,
  .recent-swatch:hover { transform: none; }
  .chip:hover:not([aria-pressed="true"]) { border-color: var(--media-line); }
  .copy-btn:hover { border-color: var(--media-line); color: #7d786f; }
}