/* The photo adjustments panel (assets/js/pdf-edit/adjust-panel.js), shared
   by the PDF editor and the photo editor. Colours and timing come from
   pdf.css. */

/* An on/off switch, in the panel's lilac. */
.pe-switch {
  position: relative; flex: none; width: 36px; height: 20px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--g-rim-soft); background: rgb(0 0 0 / .4); box-shadow: inset 0 1px 2px rgb(0 0 0 / .5);
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.pe-switch i {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #d6d1e8;
  box-shadow: 0 1px 3px rgb(0 0 0 / .5); transition: transform 260ms cubic-bezier(.34, 1.4, .64, 1), background 200ms var(--ease);
}
.pe-switch[aria-checked="true"] { background: linear-gradient(180deg, #a08fff, #7462e8); border-color: transparent; }
.pe-switch[aria-checked="true"] i { transform: translateX(16px); background: #fff; }
.pe-switch:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 2px; }

/* Dragging a number to change it. */
html.pe-scrubbing, html.pe-scrubbing * { cursor: ew-resize !important; -webkit-user-select: none; user-select: none; }

/* Sliders: a lilac fill up to the thumb. */
.pe-adj input[type="range"] { --f: 1; width: 6.5rem; height: 1.6rem; cursor: pointer; background: none; -webkit-appearance: none; appearance: none; }
.pe-adj input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, #6f5fe4, #b3a6ff) 0 0 / calc(8px + (100% - 16px) * var(--f)) 100% no-repeat, rgb(0 0 0 / .42);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .65);
}
.pe-adj input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: rgb(0 0 0 / .42); }
.pe-adj input[type="range"]::-moz-range-progress { height: 5px; border-radius: 999px; background: linear-gradient(90deg, #6f5fe4, #b3a6ff); }
.pe-adj input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .42);
  background: radial-gradient(circle at 34% 24%, rgb(255 255 255 / .6), transparent 50%), linear-gradient(180deg, #c7bdff, #8b7cf0);
  box-shadow: 0 2px 6px rgb(0 0 0 / .55), 0 0 10px -2px rgb(150 130 255 / .7);
}
.pe-adj input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .42);
  background: linear-gradient(180deg, #c7bdff, #8b7cf0); box-shadow: 0 2px 6px rgb(0 0 0 / .55);
}
.pe-adj input[type="range"]:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 2px; border-radius: 6px; }

/* ---- Photo adjustments: looks along the top, then Light, Colour, Black
   & white, Effects and Detail, each a fold of sliders (label, slider,
   value). Sliders that go both ways fill from their middle. */
.pe-adj { display: grid !important; gap: .55rem; width: 100%; }
.pe-adj[hidden] { display: none !important; }
.pe-adj__head { display: flex; align-items: center; gap: .3rem; }
.pe-adj__head > span { flex: 1 1 auto; font-size: .82rem; font-weight: 600; color: var(--g-ink); letter-spacing: .01em; }
.pe-adj__btn {
  display: inline-flex; align-items: center; gap: .3rem; height: 26px; padding: 0 .55rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--g-rim-soft); background: rgb(0 0 0 / .28); color: var(--g-ink-2, #d9d5ea); font: inherit; font-size: .74rem;
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.pe-adj__btn svg { width: 14px; height: 14px; }
.pe-adj__btn:hover { color: #fff; border-color: rgb(179 166 255 / .35); background: rgb(179 166 255 / .12); }
.pe-adj__btn:disabled { opacity: .4; cursor: default; pointer-events: none; }
.pe-adj__btn.is-on, .pe-adj__btn[aria-pressed="true"] { color: #fff; border-color: rgb(179 166 255 / .55); background: rgb(179 166 255 / .22); }
.pe-adj__btn:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 2px; }
.pe-adj__looks {
  display: grid; grid-auto-flow: column; grid-auto-columns: 3.6rem; gap: .4rem; overflow-x: auto;
  /* Room inside the scroller for the chosen look's ring and glow, which it
     would otherwise clip; the margin keeps the row where it was. */
  padding: 6px 6px .55rem; margin: -6px -6px -.1rem; scroll-padding-inline: 6px;
  scrollbar-width: thin; scrollbar-color: rgb(179 166 255 / .2) transparent; scroll-snap-type: x proximity;
}
.pe-look {
  display: grid; gap: .25rem; justify-items: center; padding: 0; border: 0; background: none; cursor: pointer; scroll-snap-align: start;
  color: var(--g-ink-3); font: inherit; font-size: .66rem; letter-spacing: .01em; white-space: nowrap;
}
.pe-look canvas {
  width: 3.6rem; height: 2.7rem; border-radius: 9px; background: rgb(0 0 0 / .35); box-shadow: 0 0 0 1px var(--g-rim-soft), 0 3px 8px rgb(0 0 0 / .35);
  transition: box-shadow 180ms var(--ease), transform 180ms var(--ease);
}
.pe-look:hover canvas { transform: translateY(-1px); box-shadow: 0 0 0 1px rgb(179 166 255 / .45), 0 5px 12px rgb(0 0 0 / .45); }
.pe-look[aria-pressed="true"] { color: #fff; }
.pe-look[aria-pressed="true"] canvas { box-shadow: 0 0 0 2px var(--g-lilac), 0 0 14px -2px rgb(150 130 255 / .8); }
.pe-look:focus-visible { outline: none; }
.pe-look:focus-visible canvas { box-shadow: 0 0 0 2px #fff; }
.pe-adj__group { border-top: 1px solid rgb(255 255 255 / .06); padding-top: .15rem; }
.pe-adj__btn[hidden] { display: none; }
/* Simple or Advanced: styled presets by kind, or every setting. */
.pe-adj__mode { margin-top: -.1rem; }
.pe-adj__mode button { height: 28px; font-size: .76rem; font-weight: 600; }
.pe-adj__advanced { display: grid; gap: .55rem; }
.pe-adj__advanced[hidden], .pe-adj__simple[hidden] { display: none; }
.pe-adj__simple { display: grid; gap: .7rem; }
.pe-preset-group { display: grid; gap: .4rem; }
.pe-preset-group > h4 {
  margin: 0; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--g-ink-3);
  display: flex; align-items: center; gap: .5rem;
}
.pe-preset-group > h4::after { content: ''; flex: 1; height: 1px; background: rgb(255 255 255 / .06); }
.pe-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem .4rem; }
.pe-preset {
  display: grid; gap: .25rem; padding: 0; border: 0; background: none; cursor: pointer; text-align: center;
  align-content: start; color: var(--g-ink-3); font: inherit; font-size: .66rem; line-height: 1.2; letter-spacing: .01em; overflow-wrap: anywhere;
}
.pe-preset canvas {
  width: 100%; aspect-ratio: 116 / 86; height: auto; border-radius: 9px; background: rgb(0 0 0 / .35);
  box-shadow: 0 0 0 1px var(--g-rim-soft), 0 3px 8px rgb(0 0 0 / .35); transition: box-shadow 180ms var(--ease), transform 180ms var(--ease);
}
.pe-preset:hover { color: var(--g-ink); }
.pe-preset:hover canvas { transform: translateY(-1px); box-shadow: 0 0 0 1px rgb(179 166 255 / .45), 0 5px 12px rgb(0 0 0 / .45); }
.pe-preset[aria-pressed="true"] { color: #fff; }
.pe-preset[aria-pressed="true"] canvas { box-shadow: 0 0 0 2px var(--g-lilac), 0 0 14px -2px rgb(150 130 255 / .8); }
.pe-preset:focus-visible { outline: none; }
.pe-preset:focus-visible canvas { box-shadow: 0 0 0 2px #fff; }
.pe-adj__tweak {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .55rem; border-radius: 10px;
  background: rgb(179 166 255 / .1); box-shadow: inset 0 0 0 1px rgb(179 166 255 / .28); font-size: .72rem; color: var(--g-ink-2, #d9d5ea);
}
.pe-adj__tweak[hidden] { display: none; }
.pe-adj__tweak b { color: #fff; font-weight: 600; }
.pe-adj__fold {
  display: flex; align-items: center; gap: .45rem; width: 100%; height: 30px; padding: 0 .1rem; border: 0; background: none; cursor: pointer;
  color: var(--g-ink); font: inherit; font-size: .8rem; font-weight: 600; text-align: left;
}
.pe-adj__fold svg { width: 13px; height: 13px; color: var(--g-ink-3); transition: transform 200ms var(--ease); }
.pe-adj__fold[aria-expanded="true"] svg { transform: rotate(90deg); }
.pe-adj__fold span { flex: 1 1 auto; }
.pe-adj__fold i { width: 6px; height: 6px; border-radius: 50%; background: var(--g-lilac); box-shadow: 0 0 8px rgb(179 166 255 / .9); opacity: 0; transition: opacity 160ms var(--ease); }
.pe-adj__fold.is-changed i { opacity: 1; }
.pe-adj__fold:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 1px; border-radius: 6px; }
.pe-adj__rows { display: grid; gap: .1rem; padding: .1rem 0 .45rem; }
.pe-adj__rows[hidden] { display: none; }
.pe-adj__row { display: grid; grid-template-columns: 4.3rem minmax(0, 1fr) 2.4rem; align-items: center; gap: .4rem; min-height: 26px; }
.pe-adj__row > label { font-size: .74rem; color: var(--g-ink-2, #cfcbe0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; user-select: none; }
.pe-adj__row.is-changed > label { color: #fff; }
.pe-adj__row input.pe-scrub {
  width: 100%; height: 22px; padding: 0 .2rem; border: 0; border-radius: 6px; background: none; outline: none; box-shadow: none; margin: 0;
  color: var(--g-ink-3); font: inherit; font-size: .72rem; font-variant-numeric: tabular-nums; text-align: right; cursor: ew-resize;
}
.pe-adj__row.is-changed input.pe-scrub { color: var(--g-ink); }
.pe-adj__row input.pe-scrub:hover { background: rgb(0 0 0 / .35); }
.pe-adj__row input.pe-scrub:focus { cursor: text; background: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 1px var(--g-lilac); color: #fff; }
.pe-adj .pe-adj__row input[type="range"] { width: 100%; min-width: 0; height: 1.4rem; }
/* Both ways: filled from the middle to the thumb, a tick there. (The fill
   is colour stops along the whole track: a sized, positioned background
   measures its position from the space left beside it, so it drifted as
   it grew.) */
.pe-adj .pe-adj__row input.is-both::-webkit-slider-runnable-track {
  background:
    linear-gradient(rgb(255 255 255 / .28), rgb(255 255 255 / .28)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, transparent calc(8px + (100% - 16px) * min(var(--f), .5)), #6f5fe4 0, #b3a6ff calc(8px + (100% - 16px) * max(var(--f), .5)), transparent 0),
    rgb(0 0 0 / .42);
}
.pe-adj .pe-adj__row input.is-both::-moz-range-progress { background: transparent; }
.pe-adj .pe-adj__row input.is-both::-moz-range-track {
  background:
    linear-gradient(rgb(255 255 255 / .28), rgb(255 255 255 / .28)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, transparent calc(8px + (100% - 16px) * min(var(--f), .5)), #6f5fe4 0, #b3a6ff calc(8px + (100% - 16px) * max(var(--f), .5)), transparent 0),
    rgb(0 0 0 / .42);
}
/* A slider that shows what it does: warm to cool, green to magenta, the
   hues, grey to colour. The thumb alone marks the value. */
.pe-adj .pe-adj__row input[data-track]::-webkit-slider-runnable-track { background: var(--track); box-shadow: inset 0 1px 2px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(0 0 0 / .25); }
.pe-adj .pe-adj__row input[data-track]::-moz-range-track { background: var(--track); }
.pe-adj .pe-adj__row input[data-track]::-moz-range-progress { background: transparent; }
.pe-adj .pe-adj__row input[data-track="temperature"] { --track: linear-gradient(90deg, #4f8cf0, #c9c6d6 50%, #f0b13d); }
.pe-adj .pe-adj__row input[data-track="bloomWarmth"] { --track: linear-gradient(90deg, #4f8cf0, #c9c6d6 50%, #f0b13d); }
.pe-adj .pe-adj__row input[data-track="tint"] { --track: linear-gradient(90deg, #4cc46a, #c9c6d6 50%, #d65ad6); }
.pe-adj .pe-adj__row input[data-track="hue"], .pe-adj .pe-adj__row input[data-track="keepHue"] { --track: linear-gradient(90deg, #f33, #f93, #ff3, #3f3, #3ff, #33f, #f3f, #f33); }
.pe-adj .pe-adj__row input[data-track="saturation"] { --track: linear-gradient(90deg, #8a8a8a, #c9c6d6 50%, #ff3d6e); }
.pe-adj__switch { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 30px; font-size: .76rem; color: var(--g-ink-2, #cfcbe0); }
.pe-adj__keep { display: grid; gap: .1rem; padding: .25rem 0 .1rem .1rem; }
.pe-adj__keep[hidden] { display: none; }
.pe-adj__pick { display: flex; align-items: center; gap: .4rem; }
.pe-adj__swatch { flex: none; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25), 0 2px 6px rgb(0 0 0 / .4); }
.pe-adj__pick .pe-adj__btn { flex: 1 1 auto; justify-content: center; }
.pe-adj__note { margin: 0; font-size: .7rem; line-height: 1.4; color: var(--g-ink-3); }
/* Levels: the histogram over a track with the black, midtone and white
   handles, then their values. */
.pe-lv { display: grid; gap: .45rem; padding: .2rem 0 .1rem; }
.pe-lv__hist {
  display: block; width: 100%; height: 64px; border-radius: 8px 8px 0 0; background: rgb(0 0 0 / .35);
  box-shadow: inset 0 0 0 1px var(--g-rim-soft);
}
.pe-lv__track {
  position: relative; height: 10px; margin: -.45rem 0 .55rem; border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, #000, #fff); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
}
.pe-lv__handle {
  position: absolute; top: 5px; width: 18px; height: 15px; margin-left: -9px; padding: 0; border: 0; cursor: ew-resize; touch-action: none;
  background: none; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .7)) drop-shadow(0 0 5px rgb(143 128 245 / .45)); transition: filter 160ms var(--ease);
}
.pe-lv__handle::before, .pe-lv__handle::after { content: ''; position: absolute; clip-path: polygon(50% 0, 100% 100%, 0 100%); transition: transform 140ms var(--ease), background 140ms var(--ease); }
.pe-lv__handle::before { inset: 0; background: linear-gradient(180deg, #d3cbff, #8f80f5 60%, #6f5fe4); }
.pe-lv__handle::after { inset: 6px 5px 2px; background: var(--h, #fff); }
.pe-lv__handle.is-black { --h: #0d0c12; }
.pe-lv__handle.is-mid { --h: #8b8794; }
.pe-lv__handle.is-white { --h: #fff; }
.pe-lv__handle:hover, .pe-lv__handle.is-dragging { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .7)) drop-shadow(0 0 8px rgb(179 166 255 / .9)); }
.pe-lv__handle:hover::before, .pe-lv__handle.is-dragging::before { background: linear-gradient(180deg, #ece8ff, #b3a6ff 60%, #8f80f5); }
.pe-lv__handle:focus-visible { outline: none; }
.pe-lv__handle:focus-visible::before { background: #fff; }
.pe-lv__fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.pe-lv__fields label { display: grid; gap: .1rem; font-size: .66rem; color: var(--g-ink-3); text-align: center; }
.pe-lv__fields input.pe-scrub {
  width: 100%; height: 24px; padding: 0 .3rem; border: 1px solid var(--g-rim-soft); border-radius: 7px; background: rgb(0 0 0 / .28); outline: none;
  color: var(--g-ink-2, #d9d5ea); font: inherit; font-size: .74rem; font-variant-numeric: tabular-nums; text-align: center; cursor: ew-resize;
}
.pe-lv.is-changed .pe-lv__fields input.pe-scrub { color: var(--g-ink); }
.pe-lv__fields input.pe-scrub:hover { background: rgb(0 0 0 / .4); }
.pe-lv__fields input.pe-scrub:focus { cursor: text; background: rgb(0 0 0 / .4); border-color: var(--g-lilac); color: #fff; }
.pe-lv__auto { justify-self: start; }
/* Curves: the channel, the graph (square), what's under the pointer, and
   ready-made curves. */
.pe-cv { display: grid; gap: .45rem; padding: .2rem 0 .1rem; }
.pe-cv__chans, .pe-adj__seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px; border-radius: 9px; background: rgb(0 0 0 / .3); box-shadow: inset 0 0 0 1px var(--g-rim-soft); }
:is(.pe-cv__chans, .pe-adj__seg) button {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; height: 24px; padding: 0 .2rem; border: 0; border-radius: 7px; cursor: pointer;
  background: none; color: var(--g-ink-3); font: inherit; font-size: .7rem; transition: background 160ms var(--ease), color 160ms var(--ease);
}
.pe-cv__chans button i { width: 6px; height: 6px; border-radius: 50%; background: var(--chan); opacity: .55; }
.pe-cv__chans button.is-changed i { opacity: 1; box-shadow: 0 0 6px var(--chan); }
:is(.pe-cv__chans, .pe-adj__seg) button:hover { color: var(--g-ink); }
:is(.pe-cv__chans, .pe-adj__seg) button[aria-checked="true"] { color: #fff; background: rgb(179 166 255 / .2); box-shadow: inset 0 0 0 1px rgb(179 166 255 / .4); }
:is(.pe-cv__chans, .pe-adj__seg) button:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 1px; }
.pe-adj__seg { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: .1rem 0 .2rem; }
.pe-cv__box { position: relative; }
/* An effect switched on opens onto its settings, set in under it. */
.pe-adj__fx { display: grid; }
.pe-adj__fxbody { display: grid; gap: .1rem; margin: 0 0 .35rem .15rem; padding: .3rem 0 .1rem .6rem; border-left: 1px solid rgb(179 166 255 / .28); }
.pe-adj__fxbody[hidden] { display: none; }
.pe-adj__fx.is-on > .pe-adj__switch > span { color: #fff; }
.pe-cv__plot {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; cursor: crosshair; touch-action: none;
  background: radial-gradient(120% 120% at 100% 0%, rgb(179 166 255 / .07), transparent 60%), rgb(0 0 0 / .35);
  box-shadow: inset 0 0 0 1px var(--g-rim-soft);
}
.pe-cv__plot:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 2px; }
.pe-cv__read { display: flex; justify-content: space-between; font-size: .68rem; color: var(--g-ink-3); font-variant-numeric: tabular-nums; }
.pe-cv__read b { color: var(--g-ink-2, #d9d5ea); font-weight: 600; margin-left: .25rem; }
.pe-cv__presets { display: flex; flex-wrap: wrap; gap: .3rem; }
.pe-cv__presets .pe-adj__btn { height: 24px; padding: 0 .5rem; font-size: .7rem; }