/* The colour studio (ADR-0019) and the advanced settings drawer that holds it.
   Alice's sites only, so the sizes follow her --tap of 56px. */

/* ---- the drawer -------------------------------------------------------------
   One button opens everything that is not painting. Closed by default: the
   page a kid lands on is a canvas, a pen and a row of colours. */
.drawer { margin-top: var(--space-8); }
.drawer > .btn { width: min(100%, 22rem); margin-inline: auto; display: flex; }
.drawer-body { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.drawer-body > .setting { padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.drawer-body > .setting:last-child { border-bottom: 0; padding-bottom: 0; }

.studio { display: grid; gap: var(--space-4); }
.studio .row, .setting .row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.studio .setting, .drawer-body .setting { display: grid; gap: var(--space-3); justify-items: center; }
.studio .label, .drawer-body .label { font-weight: 700; color: var(--ink-soft); }
.studio .hint { margin: 0; text-align: center; color: var(--ink-soft); font-size: var(--step--1); }

.swatch--edit {
  position: relative; width: var(--tap); height: var(--tap); padding: 0; border: 0;
  border-radius: var(--radius-full); box-shadow: var(--shadow), inset 0 0 0 2px rgb(255 255 255 / .5);
  cursor: pointer; touch-action: manipulation;
}
/* A pencil corner, so it reads as "tap me to change this one" rather than as
   another colour to paint with. */
.swatch--edit::after {
  content: "✎"; position: absolute; right: -2px; bottom: -2px;
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: var(--radius-full); background: var(--surface); color: var(--ink);
  font-size: 13px; line-height: 1; box-shadow: var(--shadow);
}
.swatch--big { width: calc(var(--tap) * 1.8); height: calc(var(--tap) * 1.8); border-radius: var(--radius-full); box-shadow: var(--shadow); }

.pk-keep-row { display: flex; gap: var(--space-2); width: min(100%, 26rem); }
.pk-keep { flex: 1 1 auto; min-width: 0; justify-content: flex-start; gap: var(--space-3); }
.pk-keep:disabled { opacity: .5; }
.pk-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.pk-dots i { display: block; width: 16px; height: 16px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.pk-status { min-height: 1.6em; margin: 0; text-align: center; color: var(--accent); overflow-wrap: anywhere; }
.pk-paste, .pk-hex {
  min-height: var(--tap); padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line);
}
.pk-paste { flex: 1 1 12rem; min-width: 0; }
.pk-hex { flex: 1 1 8rem; min-width: 0; font-family: var(--font-mono); text-align: center; }

/* ---- the picker -------------------------------------------------------------
   A sheet rather than a popover: on a phone in one hand, the controls have to
   be at the bottom of the screen and big enough to hit without looking. */
.pk-sheet {
  position: fixed; inset: 0; z-index: 90;
  display: grid; align-items: end; justify-items: center;
  background: rgb(0 0 0 / .45);
  padding: var(--space-3);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  overflow: auto;
}
@media (min-height: 40rem) { .pk-sheet { align-items: center; } }
.pk {
  width: min(100%, 30rem);
  display: grid; gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 -8px 40px rgb(0 0 0 / .3);
}
.pk-title { margin: 0; text-align: center; font-size: var(--step-1); }
.pk-body { display: grid; gap: var(--space-4); justify-items: center; }

/* Old on the left, new on the right, touching — the whole point is comparing
   two tones of nearly the same colour, which needs no gap between them. */
.pk-compare { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 0 0 2px var(--line); }
.pk-half { display: grid; place-items: center; min-height: 5rem; font: 600 var(--step--1)/1 var(--font-ui); }

.pk-row { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-3); align-items: center; }
.pk-row > span { font-size: var(--step--1); color: var(--ink-soft); }
.pk-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: var(--tap); background: transparent; touch-action: pan-y;
}
.pk-range::-webkit-slider-runnable-track { height: 22px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2); }
.pk-range::-moz-range-track { height: 22px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2); }
.pk-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -4px; border-radius: var(--radius-full);
  background: #fff; box-shadow: 0 0 0 3px var(--ink), 0 2px 6px rgb(0 0 0 / .4);
}
.pk-range::-moz-range-thumb {
  width: 30px; height: 30px; border: 0; border-radius: var(--radius-full);
  background: #fff; box-shadow: 0 0 0 3px var(--ink), 0 2px 6px rgb(0 0 0 / .4);
}
.pk-hue::-webkit-slider-runnable-track { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.pk-hue::-moz-range-track { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.pk-flat::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--from), var(--mid, var(--to)), var(--to)); }
.pk-flat::-moz-range-track { background: linear-gradient(90deg, var(--from), var(--mid, var(--to)), var(--to)); }

.pk-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.pk-buttons .btn { flex: 1 1 8rem; }