/* ==========================================================================
   The photo editor.

   Full screen on purpose. Cropping a photograph on an iPad wants the whole
   screen, and there is nothing else worth looking at while you do it.

   Every colour here is a token from styles.css, so the dark block over there
   carries this file with it and there is nothing to keep in step by hand. The
   two exceptions are called out where they appear.
   ========================================================================== */

body.pex-open { overflow: hidden; }

/* The printed page is the product. A fixed overlay that somehow survived to a
   print job would land on paper, so say plainly that it never does. */
@media print { .pex { display: none !important; } }

.pex {
  position: fixed; inset: 0; z-index: 150;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--paper);
  overscroll-behavior: contain;
}
.pex[aria-busy="true"] .pex__stage,
.pex[aria-busy="true"] .pex__controls { opacity: .55; pointer-events: none; }

/* ── The bar ───────────────────────────────────────────────────────────── */

.pex__bar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: var(--card); border-bottom: 1px solid var(--rule);
  padding: max(.6rem, env(safe-area-inset-top)) max(.9rem, env(safe-area-inset-right))
           .6rem max(.9rem, env(safe-area-inset-left));
}
.pex__title {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600; margin: 0;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── The stage ─────────────────────────────────────────────────────────── */

.pex__stage {
  display: grid; place-items: center; overflow: hidden; min-height: 0;
  padding: .9rem max(.9rem, env(safe-area-inset-right)) .9rem max(.9rem, env(safe-area-inset-left));
  background-color: var(--paper-deep);
  background-image: var(--gingham-soft);
  background-size: 20px 20px;
}

/* Both children share one grid cell so the guides sit exactly over the photo. */
.pex__canvas, .pex__guides { grid-area: 1 / 1; }

.pex__canvas {
  display: block; max-width: 100%; max-height: 100%;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  /* Letterbox behind the photograph, not a UI surface — it stays black in both
     themes because that is what a photograph sits on. */
  background: #000;
  /* We do the panning and pinching ourselves; without this the browser
     scrolls the page out from under her finger instead. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  cursor: grab;
}
.pex__canvas:active { cursor: grabbing; }

/* Thirds, shown only while she is actually moving the photo. These lines lie
   over a photograph rather than over the app, so they stay white in both
   themes — the thing underneath them has no theme. */
.pex__guides {
  pointer-events: none; opacity: 0; transition: opacity .15s;
  border-radius: var(--radius-sm);
  background-image:
    linear-gradient(to right,  transparent 33.2%, rgba(255,255,255,.55) 33.2% 33.45%,
                    transparent 33.45% 66.5%, rgba(255,255,255,.55) 66.5% 66.75%, transparent 66.75%),
    linear-gradient(to bottom, transparent 33.2%, rgba(255,255,255,.55) 33.2% 33.45%,
                    transparent 33.45% 66.5%, rgba(255,255,255,.55) 66.5% 66.75%, transparent 66.75%);
}
.pex__guides.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pex__guides { transition: none; } }

.pex__loading { display: grid; gap: .8rem; justify-items: center; color: var(--ink-soft); }
.pex__loading p { margin: 0; font-weight: 600; }

.pex__fallback {
  display: grid; gap: 1rem; justify-items: center; text-align: center;
  max-width: 26rem; padding: 1.5rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pex__fallback p { margin: 0; }

/* ── The controls ──────────────────────────────────────────────────────── */

.pex__controls {
  display: grid; gap: .65rem; align-content: start;
  background: var(--card); border-top: 1px solid var(--rule);
  padding: .75rem max(.9rem, env(safe-area-inset-right))
           max(.75rem, env(safe-area-inset-bottom)) max(.9rem, env(safe-area-inset-left));
}
.pex__controls .alert { margin: 0; }

/*
 * styles.css lets .btn--small drop to 38px when there is a mouse about. This
 * screen is a touch surface whatever is plugged in — she is cropping a photo
 * with a fingertip — so nothing in here goes under the 44 floor.
 */
.pex .btn { min-height: 44px; }

.pex__row { display: flex; gap: .4rem; flex-wrap: wrap; }
.pex__pane { display: grid; gap: .65rem; }
.pex__pane .hint { margin: 0; }

.pex__truth {
  margin: 0; text-align: center; line-height: 1.4;
  color: var(--ink-faint); font-size: .8rem;
}
/* Nothing pinches on a trackpad; don't promise it there. */
.pex__touch { display: none; }
@media (any-pointer: coarse) { .pex__touch { display: inline; } }

/* ── Tabs ──────────────────────────────────────────────────────────────── */

.pex__tabs {
  display: flex; gap: .25rem; padding: .25rem;
  background: var(--paper-deep); border-radius: 999px;
}
.pex__tab {
  flex: 1; min-height: 44px; font: inherit; font-weight: 600; font-size: .95rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pex__tab[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.pex__tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── Sliders ───────────────────────────────────────────────────────────── */

.pex__slider {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 .5rem;
}
.pex__slider label { margin: 0; font-size: .9rem; }
.pex__value {
  font-size: .85rem; font-weight: 600; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.pex__sliders { display: grid; gap: .5rem; }

/*
 * The default range thumb is about twelve pixels across. That is a mouse
 * control; a fingertip is nearer forty-four. The thumb below is thirty with a
 * forty-four pixel row around it, which is a real target without looking like
 * a toy. Every rule has to be written twice — WebKit and Gecko each insist on
 * their own pseudo-element and neither will honour a shared selector.
 */
.pex__range {
  grid-column: 1 / -1;
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 44px; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0;
  cursor: pointer;
}
.pex__range:focus { outline: none; }

.pex__range::-webkit-slider-runnable-track {
  height: 12px; border-radius: 999px;
  background: var(--paper-deep);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.pex__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--card); border: 2px solid var(--accent);
  box-shadow: var(--shadow);
  margin-top: -9px;              /* half the track less half the thumb */
}
.pex__range::-moz-range-track {
  height: 12px; border-radius: 999px;
  background: var(--paper-deep); border: 1px solid var(--rule);
}
.pex__range::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--card); border: 2px solid var(--accent);
  box-shadow: var(--shadow);
}
.pex__range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--accent); outline-offset: 2px; }
.pex__range:focus-visible::-moz-range-thumb     { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── Looks ─────────────────────────────────────────────────────────────── */

.pex__looks {
  display: flex; gap: .5rem; overflow-x: auto; padding: .1rem .1rem .4rem;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.pex__look {
  flex: none; display: grid; gap: .3rem; justify-items: center;
  width: 100px; padding: 2px; font: inherit; cursor: pointer;
  background: none; color: var(--ink-soft);
  border: 2px solid transparent; border-radius: var(--radius-sm);
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}
.pex__look canvas {
  display: block; width: 92px; height: auto;
  border-radius: var(--radius-sm); background: var(--paper-deep);
}
.pex__look span { font-size: .78rem; font-weight: 600; line-height: 1.2; text-align: center; }
.pex__look[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-deep); }
.pex__look:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── Landscape on a short screen ───────────────────────────────────────── */

/*
 * An iPhone on its side has about three hundred points of height. Stacking the
 * controls under the photo there leaves a letterbox of a preview, so the
 * controls move to a rail beside it and take their own scrollbar.
 */
@media (orientation: landscape) and (max-height: 620px) {
  .pex {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) min(46vw, 340px);
  }
  .pex__bar      { grid-area: 1 / 1 / 2 / 3; }
  .pex__stage    { grid-area: 2 / 1 / 3 / 2; }
  .pex__controls {
    grid-area: 2 / 2 / 3 / 3;
    border-top: 0; border-left: 1px solid var(--rule);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .pex__look { width: 84px; }
  .pex__look canvas { width: 76px; }
}

/* ── iPad landscape and desktop ────────────────────────────────────────── */

/*
 * With real width the panes stop being a stack: the crop controls sit in a row
 * and the looks get room to breathe, so she can see all six without scrolling.
 */
@media (min-width: 900px) and (min-height: 700px) {
  .pex__controls { padding-inline: max(2rem, env(safe-area-inset-left)) max(2rem, env(safe-area-inset-right)); }
  .pex__tabs { max-width: 420px; margin: 0 auto; }
  .pex__pane[data-pane="crop"] {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: 1rem;
  }
  .pex__pane[data-pane="crop"] .hint,
  .pex__pane[data-pane="crop"] [data-act="reset-crop"] { grid-column: 1 / -1; justify-self: center; }
  .pex__sliders { grid-template-columns: 1fr 1fr; gap: .5rem 2rem; }
  .pex__looks { justify-content: center; }
}

/* ── iPhone ────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .pex__bar .btn { padding: .55rem .75rem; font-size: .92rem; }
  .pex__title { font-size: .95rem; }
  .pex__row .btn { flex: 1 1 auto; }
}