/* ============================================================
   Custom Crop Image Tool — editor.css
   Step 2 "Crop" editor shell (same pattern as the Bulk Watermark
   editor, so every ImgTry tool feels like one product):

     • PHONES  (< 900px)  full-screen editor:
                          [ top bar: Back · size · Continue ]
                          [ image strip + PREVIEW ]   ← never scrolls away
                          [ tool panel (hideable)   ]
                          [ icon-only tool dock     ]
     • DESKTOP (≥ 900px)  two columns: preview left; icon + label
                          dock and the open tool's panel on the right.

   Uses the tool's own tokens (--xc-brand, --xc-ink, --xc-line…)
   and Inter (var(--font-primary)). No new colors are introduced.
   ============================================================ */


/* ══════════════════════════════════════════
   0. SHARED BITS
   ══════════════════════════════════════════ */
.xc-editor [hidden] { display: none !important; }

.xc-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* ══════════════════════════════════════════
   1. TOP BAR  (Back · live crop size · Continue)
   ══════════════════════════════════════════ */
.xc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.xc-topbar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 40px;
  min-width: 40px;
  padding: 0 8px;
  border-radius: 9999px;
  border: 1.5px solid var(--xc-line);
  background: #fff;
  color: var(--xc-ink);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.xc-topbar__back svg { width: 20px; height: 20px; }
.xc-topbar__back span { display: none; }
.xc-topbar__back:active { background: var(--xc-bg); }

.xc-topbar .xc-crop-dims {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xc-topbar__next {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 24px;
  font-size: 14px;
}


/* ══════════════════════════════════════════
   2. PREVIEW COLUMN  (image strip + stage)
   ══════════════════════════════════════════ */
.xc-editor__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.xc-editor .xc-crop-thumbs__item,
.xc-editor .xc-crop-thumbs__add {
  width: 56px;
  height: 56px;
}

.xc-editor .xc-crop-thumbs__track { gap: 8px; }

/* "Apply to all images" switch */
.xc-crop-linktoggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  cursor: pointer;
  touch-action: manipulation;
}

.xc-crop-linktoggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.xc-crop-linktoggle__text {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--xc-ink);
  line-height: 1.2;
}

.xc-crop-linktoggle__switch {
  flex: 0 0 auto;
  width: 40px;
  height: 24px;
  border-radius: 9999px;
  background: var(--xc-line-strong);
  position: relative;
  transition: background 0.18s ease;
}

.xc-crop-linktoggle__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.18s ease;
}

.xc-crop-linktoggle input:checked + .xc-crop-linktoggle__switch { background: var(--xc-brand); }
.xc-crop-linktoggle input:checked + .xc-crop-linktoggle__switch::after { transform: translateX(16px); }
.xc-crop-linktoggle input:focus-visible + .xc-crop-linktoggle__switch { box-shadow: 0 0 0 3px var(--xc-brand-soft); }

/* The stage area fills whatever room the layout gives it; the image is fitted inside it by JS. */
.xc-stagearea {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
  background: var(--xc-line);
}

.xc-editor .xc-crop-thumbs__hint {
  margin: 0;
  text-align: center;
  white-space: normal;
}


/* ══════════════════════════════════════════
   3. TOOL DOCK  (icon-only on phones, icon + label on desktop)
   ══════════════════════════════════════════ */
.xc-editor__side {
  display: flex;
  flex-direction: column-reverse;     /* phones: the panel sits ABOVE the dock */
  background: #fff;
  border-top: 1px solid var(--xc-line);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 24px rgba(26,26,34,0.06);
  min-width: 0;
}

.xc-dock {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: none;
}

.xc-dock::-webkit-scrollbar { display: none; }

.xc-dock__btn {
  position: relative;
  flex: 1 0 44px;
  min-width: 44px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--xc-ink-soft);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease;
}

.xc-dock__btn svg { width: 24px; height: 24px; flex-shrink: 0; }

/* Phones: icons only — the name stays for screen readers (aria-label). */
.xc-dock__label {
  display: none;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}

.xc-dock__btn:active { background: var(--xc-bg); }
.xc-dock__btn:focus-visible { outline: 2px solid var(--xc-brand); outline-offset: -2px; }

.xc-dock__btn[aria-pressed="true"] {
  background: var(--xc-brand-soft);
  color: var(--xc-brand-dark);
}

.xc-dock__sep {
  flex: 0 0 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--xc-line);
}


/* ══════════════════════════════════════════
   4. TOOL SHEET  (the open tool's controls)
   ══════════════════════════════════════════ */
.xc-sheet {
  position: relative;
  border-bottom: 1px solid var(--xc-line);
  min-height: 0;
}

.xc-sheet__grip {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 9999px;
  background: var(--xc-line-strong);
}

.xc-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px 0 18px;
}

.xc-sheet__title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--xc-ink);
}

.xc-sheet__close {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--xc-ink-soft);
  cursor: pointer;
  touch-action: manipulation;
}

.xc-sheet__close svg { width: 22px; height: 22px; }
.xc-sheet__close:active { background: var(--xc-bg); }

.xc-sheet__body {
  max-height: 280px;
  max-height: min(38dvh, 330px);
  overflow-y: auto;
  padding: 6px 18px 16px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

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

.xc-pane__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}

.xc-pane__hint {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--xc-ink-soft);
}

.xc-pane__value {
  margin: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--xc-brand-dark);
  font-variant-numeric: tabular-nums;
}

.xc-linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 2px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--xc-brand-dark);
  cursor: pointer;
  touch-action: manipulation;
}

.xc-linkbtn svg { width: 16px; height: 16px; flex-shrink: 0; }
.xc-linkbtn:disabled { opacity: 0.45; cursor: not-allowed; }
.xc-linkbtn:focus-visible { outline: 2px solid var(--xc-brand); outline-offset: 2px; border-radius: 6px; }

/* Crop shapes */
.xc-aspects {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.xc-aspect {
  flex: 0 0 auto;
  min-width: 58px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 12px;
  border: 1.5px solid var(--xc-line);
  background: #fff;
  color: var(--xc-ink);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.xc-aspect__shape {
  display: block;
  height: 20px;
  width: calc(20px * var(--r, 1));
  border: 1.5px solid currentColor;
  border-radius: 3px;
  color: var(--xc-ink-soft);
}

.xc-aspect__shape--free   { width: 20px; border-style: dashed; }
.xc-aspect__shape--orig   { width: 28px; height: 20px; }
.xc-aspect__shape--custom { width: 24px; height: 20px; border-style: dotted; }

.xc-aspect.is-active {
  border-color: var(--xc-brand);
  background: var(--xc-brand-soft);
  color: var(--xc-brand-dark);
}

.xc-aspect.is-active .xc-aspect__shape { color: var(--xc-brand-dark); }
.xc-aspect:focus-visible { outline: 2px solid var(--xc-brand); outline-offset: 2px; }

/* Custom W : H */
.xc-custom {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.xc-custom__field {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  color: #7a7a86;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.xc-custom__field input {
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--xc-line);
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  color: var(--xc-ink);
  width: 100%;
  min-width: 0;
}

.xc-custom__field input:focus-visible { outline: 2px solid var(--xc-brand); outline-offset: 1px; border-color: var(--xc-brand); }

.xc-custom__colon {
  height: 44px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--xc-ink-soft);
}

/* Rotate & flip: four big touch targets */
.xc-actgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.xc-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 68px;
  padding: 8px 4px;
  border-radius: 12px;
  border: 1.5px solid var(--xc-line);
  background: #fff;
  color: var(--xc-ink);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}

.xc-act svg { width: 22px; height: 22px; color: var(--xc-ink-soft); }
.xc-act:active { border-color: var(--xc-brand); background: var(--xc-brand-soft); }
.xc-act:active svg { color: var(--xc-brand-dark); }
.xc-act:focus-visible { outline: 2px solid var(--xc-brand); outline-offset: 2px; }

/* Zoom */
.xc-zoom {
  display: flex;
  align-items: center;
  gap: 10px;
}

.xc-slider {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  accent-color: var(--xc-brand);
  touch-action: manipulation;
}

.xc-round {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--xc-line);
  background: #fff;
  color: var(--xc-ink);
  cursor: pointer;
  touch-action: manipulation;
}

.xc-round svg { width: 18px; height: 18px; }
.xc-round:active { border-color: var(--xc-brand); background: var(--xc-brand-soft); }
.xc-round:focus-visible { outline: 2px solid var(--xc-brand); outline-offset: 2px; }


/* ══════════════════════════════════════════
   5. PHONES + SMALL TABLETS  (< 900px) — full-screen editor
   ══════════════════════════════════════════ */
@media (max-width: 899.98px) {
  html.xc-editing,
  html.xc-editing body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .xc-crop-wrap.is-editing {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--xc-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* On-screen keyboard (iOS keeps the layout tall): main.js sets --xc-vh + .has-kb so the tools stay above it. */
  .xc-crop-wrap.is-editing.has-kb {
    bottom: auto;
    height: var(--xc-vh);
  }

  .xc-crop-wrap.is-editing .xc-crop-header,
  .xc-crop-wrap.is-editing .xc-crop-stepper,
  .xc-crop-wrap.is-editing .xc-crop-more {
    display: none;
  }

  .xc-crop-wrap.is-editing .xc-crop-panel[data-panel="2"].is-active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    animation: none;
  }

  .xc-editor {
    flex: 1 1 auto;
    min-height: 0;
    gap: 8px;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
  }

  .xc-topbar,
  .xc-editor__main {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .xc-editor__main { flex: 1 1 auto; min-height: 0; }

  .xc-editor .xc-crop-thumbs__hint { display: none; }

  /* Keyboard up (custom ratio fields) → free the room for the preview. */
  .xc-editor.is-typing .xc-dock,
  .xc-editor.is-typing .xc-crop-thumbs { display: none; }

  .xc-sheet input[type="number"] { font-size: 16px; }   /* stops iOS zooming the page on focus */

  /* Toast at the top so it never covers the tools. */
  html.xc-editing .xc-crop-toast {
    bottom: auto;
    top: calc(env(safe-area-inset-top, 0px) + 62px);
    z-index: 1000;
  }
}

/* Short phones: while a panel is open and every image shares one crop (the default), the
   thumbnails aren't needed — give their room to the photo. The count + switch stay visible. */
@media (max-width: 899.98px) and (max-height: 700px) {
  .xc-editor[data-linked="true"]:not([data-tool=""]) .xc-crop-thumbs__track { display: none; }
}

/* Landscape phones: too short for a stacked layout — put the tools beside the photo. */
@media (max-width: 899.98px) and (orientation: landscape) and (max-height: 520px) {
  .xc-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 40%);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "top top" "main side";
    column-gap: 10px;
    row-gap: 6px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  .xc-topbar { grid-area: top; }
  .xc-editor__main { grid-area: main; padding-right: 0; }

  .xc-editor__side {
    grid-area: side;
    flex-direction: column;
    min-height: 0;
    margin-right: max(0px, env(safe-area-inset-right, 0px));
    border-radius: 16px 0 0 0;
  }

  .xc-dock { padding-bottom: 8px; flex: 0 0 auto; }
  .xc-sheet__grip { display: none; }
  .xc-sheet { display: flex; flex-direction: column; flex: 1 1 auto; border-bottom: none; }
  .xc-sheet__body { flex: 1 1 auto; max-height: none; min-height: 0; }
  .xc-editor[data-linked="true"]:not([data-tool=""]) .xc-crop-thumbs__track { display: flex !important; }
}


/* ══════════════════════════════════════════
   6. DESKTOP  (≥ 900px) — preview left, tools right
   ══════════════════════════════════════════ */
@media (min-width: 900px) {
  .xc-crop-wrap.is-editing {
    max-width: 1120px;
    padding-top: 24px;
    padding-bottom: 32px;
  }

  .xc-crop-wrap.is-editing .xc-crop-header { margin-bottom: 10px; }
  .xc-crop-wrap.is-editing .xc-crop-header__title { font-size: 1.5rem; margin: 0; }
  .xc-crop-wrap.is-editing .xc-crop-header__subtitle { display: none; }
  .xc-crop-wrap.is-editing .xc-crop-stepper { margin-bottom: 14px; }

  .xc-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-areas: "top top" "main side";
    column-gap: 24px;
    row-gap: 14px;
    align-items: start;
  }

  .xc-topbar { grid-area: top; }
  .xc-topbar__back { padding: 0 14px 0 8px; }
  .xc-topbar__back span { display: inline; padding-left: 2px; }
  .xc-topbar .xc-crop-dims { text-align: center; }

  .xc-editor__main {
    grid-area: main;
    position: sticky;
    top: 16px;
  }

  .xc-editor .xc-crop-thumbs__item,
  .xc-editor .xc-crop-thumbs__add {
    width: 68px;
    height: 68px;
  }

  .xc-stagearea {
    flex: none;
    height: 420px;
    height: clamp(360px, calc(100dvh - 350px), 700px);
  }

  .xc-editor__side {
    grid-area: side;
    position: sticky;
    top: 16px;
    flex-direction: column;
    border: 1px solid var(--xc-line);
    border-radius: 16px;
    box-shadow: none;
    /* never taller than what's left of the screen below the page header, so the PAGE never has to scroll */
    max-height: 560px;
    max-height: max(380px, calc(100dvh - 190px));
    overflow: hidden;
  }

  .xc-dock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 10px;
    overflow: visible;
    border-bottom: 1px solid var(--xc-line);
  }

  .xc-dock__btn {
    min-width: 0;
    height: 60px;
  }

  .xc-dock__btn svg { width: 22px; height: 22px; }
  .xc-dock__label { display: block; }
  .xc-dock__sep { display: none; }

  .xc-dock__btn:not([aria-pressed="true"]):hover {
    background: var(--xc-bg);
    color: var(--xc-ink);
  }

  .xc-sheet {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    border-bottom: none;
  }

  .xc-sheet__head { padding: 14px 18px 0; }
  .xc-sheet__grip,
  .xc-sheet__close { display: none; }

  .xc-sheet__body {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    padding: 12px 18px 22px;
  }

  /* room on desktop: crop shapes wrap instead of scrolling sideways */
  .xc-aspects { flex-wrap: wrap; overflow: visible; }

  .xc-topbar__back:hover { border-color: var(--xc-ink); }
  .xc-act:hover,
  .xc-round:hover,
  .xc-aspect:not(.is-active):hover { border-color: var(--xc-brand); }
  .xc-linkbtn:not(:disabled):hover { text-decoration: underline; }
}