/* ===============================================================
   TOOLDUCK — Social Media Studio (the editor)
   ===============================================================
   The canvas is the largest thing on this screen at every width,
   because it is the only part of the page that is the work. The
   panels exist to change it.

   Reuses the tokens in main.css. No colours of its own, so the studio
   follows the theme toggle like everything else.
   =============================================================== */

/* ---------------------------------------------------------------
   Compact the page header
   --------------------------------------------------------------
   A tool must not sit below decorative content, and it did: the
   breadcrumb, the eyebrow, a large heading, the lede, four chips and a
   96px decorative tile put the toolbar about 400px down the page, so
   the canvas — the only part of this screen that is the work — started
   below the fold on a laptop.

   The copy is all kept; only the scale drops. Deliberately the same
   treatment the App Screenshot Maker's studio gets, so the two design
   tools have the same proportions rather than merely similar ones.
   -------------------------------------------------------------- */

.tool-page--social-editor .band--first.band--tight {
    padding-block: .3rem .6rem;
}

.tool-page--social-editor .tool-page__head h1 {
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    margin-bottom: .3rem;
}

.tool-page--social-editor .tool-page__head .lede {
    margin-bottom: .5rem;
    font-size: .92rem;
    max-width: 84ch;
}

/* Purely decorative, and it cost a 96px column beside the heading. */
.tool-page--social-editor .tool-page__badge { display: none; }

/* The chips state the promises that matter here — free, no signup, no
   uploads — so they stay. They do not need their own block of margin. */
.tool-page--social-editor .feature-chips { margin-bottom: 0; }

/* The library is a working surface too, but it loads social.css rather
   than this file — its compaction rules live there. */

.sostudio {
  display: grid;
  gap: .9rem;
  min-width: 0;
}

/* ---------------------------------------------------------------
   Top bar
   -------------------------------------------------------------- */
.sostudio__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .7rem;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}

.sostudio__barGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem;
  min-width: 0;
}

.sostudio__barGroup--end { justify-content: flex-end; }

.sostudio__field {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.sostudio__field > span {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.sostudio__field select {
  font: inherit;
  font-size: .85rem;
  padding: .4rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  max-width: 22rem;
  min-width: 0;
}

.sostudio__field select:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--brand); }

/* ---------------------------------------------------------------
   Body: panel + stage
   -------------------------------------------------------------- */
.sostudio__body {
  display: grid;
  grid-template-columns: 21rem minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  min-width: 0;
}

.sostudio__panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  min-width: 0;
}

.sostudio__tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}

.sostudio__tab {
  flex: 1;
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: .82rem;
  font-weight: 650;
  padding: .6rem .3rem;
  cursor: pointer;
}

.sostudio__tab:hover { color: var(--ink); }

.sostudio__tab.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  background: var(--surface);
}

.sostudio__tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.sostudio__pane {
  padding: .85rem;
  display: grid;
  gap: .7rem;
}

.sostudio__group {
  display: grid;
  gap: .7rem;
  padding-top: .2rem;
  border-top: 1px dashed var(--border);
}

.sostudio__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}

.sostudio__row--buttons { grid-template-columns: 1fr 1fr; }
.sostudio__row--buttons .sobtn { width: 100%; }

.sostudio__hint,
.sostudio__note {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-4);
}

.sostudio__selected {
  margin: 0;
  font-size: .78rem;
  color: var(--ink-3);
}

.sostudio__selected strong { color: var(--ink); }

.sostudio__note[data-so-warning] {
  color: var(--warn);
  background: var(--warn-bg);
  border-radius: var(--radius-sm);
  padding: .5rem .6rem;
}

.sostudio__drop {
  display: grid;
  gap: .15rem;
  place-items: center;
  text-align: center;
  padding: 1.1rem .8rem;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  cursor: pointer;
}

.sostudio__drop:hover { border-color: var(--brand); color: var(--brand); }

.sostudio__drop span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 650;
  font-size: .88rem;
  color: var(--ink);
}

.sostudio__drop small { font-size: .74rem; color: var(--ink-4); }

.sostudio__exportDims {
  margin: 0;
  font-size: .82rem;
  color: var(--ink-3);
}

.sostudio__exportDims strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   Stage
   -------------------------------------------------------------- */
.sostudio__stage {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  padding: 1rem;
  display: grid;
  gap: .6rem;
  min-height: 460px;
  min-width: 0;
  /* A soft ambient ground, so the canvas reads as a page on a desk
     rather than a rectangle floating in the dark. */
  background-image: radial-gradient(90% 70% at 50% 0%, var(--brand-soft) 0%, transparent 70%);
}

.sostudio__canvasWrap {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  /* Without this a drag on a touch screen scrolls the page instead of
     moving the element. */
  touch-action: none;
}

.sostudio__canvas {
  display: block;
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  background: var(--surface);
  cursor: grab;
}

.sostudio__canvasWrap.is-dragover .sostudio__canvas {
  outline: 2px dashed var(--brand);
  outline-offset: 3px;
}

.sostudio__selection {
  position: absolute;
  pointer-events: none;
  border: 1.5px solid var(--brand);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55) inset;
}

.sostudio__handle {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1.5px solid var(--brand);
  background: var(--surface);
  pointer-events: auto;
  cursor: nwse-resize;
}

.sostudio__handle[data-so-handle="nw"] { left: -6px; top: -6px; }
.sostudio__handle[data-so-handle="ne"] { right: -6px; top: -6px; }
.sostudio__handle[data-so-handle="sw"] { left: -6px; bottom: -6px; }
.sostudio__handle[data-so-handle="se"] { right: -6px; bottom: -6px; }

.sostudio__editor {
  position: absolute;
  background: var(--surface);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 0;
}

.sostudio__editor textarea {
  border: 0;
  background: transparent;
  resize: none;
  font: inherit;
  font-weight: 650;
  line-height: 1.15;
  color: var(--ink);
  padding: .3rem;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

.sostudio__editor textarea:focus { outline: none; }

.sostudio__status {
  margin: 0;
  font-size: .78rem;
  color: var(--ink-4);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sostudio__error {
  margin: 0;
  padding: .6rem .75rem;
  border-radius: var(--radius);
  background: var(--err-bg);
  color: var(--err);
  font-size: .84rem;
}

/* Range inputs sit inside a grid cell and otherwise stretch oddly. */
.sostudio input[type="range"] { width: 100%; }
.sostudio input[type="color"] { width: 100%; height: 34px; padding: 2px; }

/* ---------------------------------------------------------------
   Responsive
   -------------------------------------------------------------- */
@media (max-width: 1000px) {
  .sostudio__body { grid-template-columns: minmax(0, 1fr); }
  /* The canvas stays above the panels: the controls are for changing
     the design, so the design is what should be visible first. */
  .sostudio__stage { order: -1; min-height: 0; padding: .7rem; }
}

@media (max-width: 620px) {
  .sostudio__barGroup { width: 100%; }
  .sostudio__field { flex: 1 1 100%; }
  .sostudio__field select { max-width: none; width: 100%; }
  .sostudio__barGroup--end .sobtn { flex: 1; }
  .sostudio__row { grid-template-columns: 1fr; }
}