/* ==========================================================================
   Split Image — the workspace.

   Loaded by every page that actually cuts something: the stage on the left,
   the control rail on the right, and the contact sheet of finished tiles
   underneath. Layout collapses to one column at 1020px, where the rail stops
   being sticky and simply follows the stage.
   ========================================================================== */

.workspace {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 18px;
  align-items: start; padding-bottom: 26px; scroll-margin-top: 20px;
}
@media (max-width: 1020px) { .workspace { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Stage — the dark cutting mat
   -------------------------------------------------------------------------- */

.stage {
  position: relative; background: var(--mat); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); min-height: 430px; display: grid; place-items: center;
}
.stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--mat-line) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, var(--mat-line) 1px, transparent 1px) 0 0 / 28px 100%,
    radial-gradient(120% 90% at 50% 0%, var(--mat-2), var(--mat) 70%);
}
.stage__canvas { position: relative; display: block; max-width: 100%; touch-action: none; cursor: grab; }
.stage__canvas:active { cursor: grabbing; }
.stage[data-empty="true"] .stage__canvas { display: none; }
.stage[data-drag="true"] { outline: 2px dashed var(--accent); outline-offset: -8px; }

.dropzone {
  position: relative; display: grid; place-items: center; text-align: center; gap: 2px;
  padding: 64px 26px; width: 100%; color: #cfe6de; cursor: pointer;
}
.stage[data-empty="false"] .dropzone { display: none; }
.dropzone h2 { color: #fff; font-size: 1.34rem; }
.dropzone p { color: #9fc4b9; font-size: 0.9rem; max-width: 42ch; margin-bottom: 4px; }
.dropzone__ring { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: rgba(126, 231, 206, 0.1); margin-bottom: 8px; }
.dropzone__ring svg { width: 28px; height: 28px; color: #7ee7ce; }
.fakebtn { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: var(--radius-sm); background: #2ad0af; color: #05231c; font-weight: 600; font-size: 0.9rem; margin: 6px 0 10px; }
.dropzone:hover .fakebtn { background: #57e0c3; }

.stage__toolbar {
  position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px;
  align-items: center; justify-content: space-between; pointer-events: none; flex-wrap: wrap;
}
.stage__toolbar > * { pointer-events: auto; }
.chip-dark {
  font: 500 0.74rem var(--font-mono); color: #cfe6de; background: rgba(10, 25, 22, 0.72);
  border: 1px solid rgba(126, 231, 206, 0.22); border-radius: 100px; padding: 5px 11px;
  backdrop-filter: blur(6px);
}
.zoomer {
  display: flex; align-items: center; gap: 8px; background: rgba(10, 25, 22, 0.72);
  border: 1px solid rgba(126, 231, 206, 0.22); border-radius: 100px; padding: 4px 11px; backdrop-filter: blur(6px);
}
.zoomer label { font: 500 0.72rem var(--font-mono); color: #9fc4b9; }
.zoomer input[type="range"] { width: 104px; accent-color: #2ad0af; }
.linkish { background: none; border: 0; color: #9fc4b9; font: 500 0.72rem var(--font-mono); cursor: pointer; padding: 2px; }
.linkish:hover { color: #fff; }
.stage[data-empty="true"] .stage__toolbar { display: none; }

/* --------------------------------------------------------------------------
   Control rail
   -------------------------------------------------------------------------- */

.rail { position: sticky; top: 16px; display: grid; gap: 14px; }
@media (max-width: 1020px) { .rail { position: static; } }

.rail__section { padding: 14px; border-bottom: 1px solid var(--line); }
.rail__section:last-child { border-bottom: 0; }
.rail__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.rail__head h2 { font-size: 0.82rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.val { font: 500 0.76rem var(--font-mono); color: var(--ink-3); }

/* segmented control */
.seg { display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.seg button { flex: 1; font: 500 0.85rem var(--font-body); padding: 8px 6px; border: 0; border-radius: 5px; cursor: pointer; background: none; color: var(--ink-2); transition: background 0.15s, color 0.15s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.seg--big button { padding: 12px 6px; font-size: 0.95rem; font-weight: 600; }

/* template cards */
.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tpl {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 6px 8px; cursor: pointer; display: grid; justify-items: center; gap: 6px;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}
.tpl:hover { border-color: var(--accent); background: var(--surface); box-shadow: var(--shadow-sm); }
.tpl__preview { display: grid; place-content: center; gap: 2.5px; height: 46px; }
.tpl__cell { background: var(--accent); border-radius: 2px; opacity: 0.55; transition: opacity 0.14s; }
.tpl:hover .tpl__cell { opacity: 0.85; }
.tpl__label { font: 600 0.8rem var(--font-mono); color: var(--ink); }
.tpl__sub { font: 500 0.66rem var(--font-mono); color: var(--ink-3); margin-top: -4px; }
.tpl[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.tpl[aria-pressed="true"] .tpl__cell { background: var(--on-accent); opacity: 1; }
.tpl[aria-pressed="true"] .tpl__label { color: var(--on-accent); }
.tpl[aria-pressed="true"] .tpl__sub { color: color-mix(in srgb, var(--on-accent) 70%, transparent); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 500 0.78rem var(--font-mono); padding: 7px 12px; border-radius: 100px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* fields */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: grid; gap: 6px; align-content: start; margin-top: 10px; }
.field > label { font: 500 0.78rem var(--font-body); color: var(--ink-2); display: flex; justify-content: space-between; gap: 8px; }
.grid-2 .field { margin-top: 0; }

.stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.stepper button { width: 36px; height: 38px; border: 0; background: var(--surface-2); color: var(--ink-2); font-size: 1.1rem; cursor: pointer; }
.stepper button:hover { background: var(--accent-soft); color: var(--accent); }
.stepper input { flex: 1; width: 100%; min-width: 0; border: 0; text-align: center; font: 600 0.98rem var(--font-mono); background: none; color: var(--ink); padding: 0; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type="number"] { -moz-appearance: textfield; }

select, input[type="text"], input[type="number"].plain {
  width: 100%; font: 500 0.86rem var(--font-body); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 10px;
}
input[type="range"] { width: 100%; accent-color: var(--accent); }
input[type="color"] { width: 100%; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }

.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 0.88rem; color: var(--ink-2); cursor: pointer; }
.switch--lead { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.switch--lead > span { display: grid; color: var(--ink); font-weight: 600; }
.switch--lead em { font-style: normal; font-weight: 400; font-size: 0.78rem; color: var(--ink-3); }
.switch input { appearance: none; width: 42px; height: 24px; border-radius: 100px; background: var(--line-strong); position: relative; cursor: pointer; flex: none; transition: background 0.18s; }
/* The knob moves on `left`, not a translate. */
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left 0.18s; }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { left: 21px; }

/* --------------------------------------------------------------------------
   Contact sheet
   -------------------------------------------------------------------------- */

.sheet { padding-bottom: 34px; }
.sheet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.sheet__head h2 { font-size: 1.32rem; }
.sheet__meta { font: 500 0.8rem var(--font-mono); color: var(--ink-3); }
.tiles { display: grid; gap: 10px; }
.tile {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; padding: 0; cursor: pointer; display: block; aspect-ratio: var(--tile-ar, 1);
  animation: pop 0.28s ease both;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile:hover { border-color: var(--accent); }
.tile__order {
  position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 5px; background: rgba(10, 25, 22, 0.78);
  color: #fff; font: 600 0.72rem var(--font-mono);
}
.tile__dl {
  position: absolute; inset: auto 0 0 0; background: rgba(10, 25, 22, 0.78); color: #fff;
  font: 500 0.72rem var(--font-mono); padding: 5px; text-align: center; opacity: 0; transition: opacity 0.15s;
}
.tile:hover .tile__dl, .tile:focus-visible .tile__dl { opacity: 1; }
@keyframes pop { from { opacity: 0; } }

.order-note {
  display: flex; gap: 10px; align-items: flex-start; background: var(--accent-soft);
  border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 14px;
  font-size: 0.86rem; color: var(--ink-2);
}
.order-note svg { width: 16px; height: 16px; flex: none; color: var(--accent); margin-top: 2px; }

/* --------------------------------------------------------------------------
   Mock-ups: an Instagram profile, and an X timeline card
   -------------------------------------------------------------------------- */

.mock { max-width: 340px; margin: 22px auto 0; }
.mock__cap { text-align: center; font: 500 0.76rem var(--font-mono); color: var(--ink-3); margin: 10px 0 0; }

.phone { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.phone__bar { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.phone__avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--mark)); flex: none; }
.phone__name { font: 600 0.82rem var(--font-body); }
.phone__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; }
.phone__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.phone__grid .empty { aspect-ratio: 1; background: var(--surface-2); }

/* X lays a post's attachments out as a mosaic: two side by side, one large
   with two stacked beside it, or a 2x2. The whole card is clipped to 16:9. */
.xcard { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.xcard__bar { display: flex; align-items: center; gap: 10px; padding: 12px; }
.xcard__avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #1d9bf0, var(--accent)); flex: none; }
.xcard__name { font: 600 0.82rem var(--font-body); }
.xcard__handle { font: 400 0.78rem var(--font-body); color: var(--ink-3); }
.xcard__media {
  display: grid; gap: 2px; margin: 0 12px 12px; border-radius: 14px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--surface-2);
}
.xcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xcard__media[data-n="1"] { grid-template-columns: 1fr; }
.xcard__media[data-n="2"] { grid-template-columns: 1fr 1fr; }
.xcard__media[data-n="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.xcard__media[data-n="3"] img:first-child { grid-row: span 2; }
.xcard__media[data-n="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* --------------------------------------------------------------------------
   Busy state — canvas work blocks the main thread, so say so
   -------------------------------------------------------------------------- */

.btn[data-busy="true"] { opacity: 0.65; pointer-events: none; }