/* The context menu that pours from the pointer: a photo whose menu comes out of the tip of the pointer as if through
   a funnel, and goes back into it. The script draws the outline of the menu and moves its rows; the colours are here. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #17161d;           /* the file name */
  --muted: #7a7684;         /* the hint under it */
  --sheet: #1e1f2a;         /* the menu */
  --sheet-top: #2a2b38;     /* the top of the menu, a touch lighter */
  --edge: rgba(255, 255, 255, 0.1);
  --text: #f5f2ec;          /* the items */
  --icon: #c9c4d6;
  --keys: #8a8698;          /* the shortcuts */
  --band: #ffb47e;          /* the highlight */
  --on-band: #2b1508;       /* an item under the highlight */
  --danger: #ff8675;        /* Delete */
  --danger-band: #ff5641;   /* the highlight on Delete */
  --on-danger: #ffffff;
  --rule: rgba(255, 255, 255, 0.09);
  --shot: 248px;            /* the photo */
  --row: 42px;              /* the height of an item */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Funnel Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* in cima alla pagina: in fondo al body, col suo margine, la allungherebbe */
.sr {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 48px 16px;
}

/* ---------------------------------------------------------------- the photo */
.shot {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin: 0;
}

.shot__frame {
  position: relative;
  width: var(--shot);
  height: var(--shot);
}

.shot__photo {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: none;
  cursor: context-menu;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}

.shot__photo:active {
  transform: scale(0.985);
}

.shot__photo:focus-visible {
  outline: none;
}

/* the long press squeezes this one; the next one turns */
.shot__lift,
.shot__turn {
  display: block;
  width: 100%;
  height: 100%;
}

.shot__turn {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(23, 18, 48, 0.12), 0 18px 36px -16px rgba(40, 26, 80, 0.45);
  transition: box-shadow 0.3s ease;
}

.shot__photo:focus-visible .shot__turn,
.shot__photo[aria-expanded='true'] .shot__turn {
  box-shadow: 0 0 0 3px var(--page), 0 0 0 5px var(--sheet), 0 18px 36px -16px rgba(40, 26, 80, 0.45);
}

.shot__img {
  display: block;
  width: 100%;
  height: 100%;
  transition: filter 0.6s ease;
}

/* the filters of the submenu: on the photo, and on the little swatches */
[data-look='vivid'] .shot__img,
[data-filter='vivid'] .ctx__swatch {
  filter: saturate(1.55) contrast(1.08);
}

[data-look='mono'] .shot__img,
[data-filter='mono'] .ctx__swatch {
  filter: grayscale(1) contrast(1.12);
}

[data-look='faded'] .shot__img,
[data-filter='faded'] .ctx__swatch {
  filter: sepia(0.4) saturate(0.7) brightness(1.08) contrast(0.82);
}

.shot__flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
}

.shot__star {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 26px;
  height: 26px;
  fill: #ffd27a;
  stroke: #3a2208;
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgba(20, 10, 40, 0.45));
  visibility: hidden;
  pointer-events: none;
}

.shot__gone {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  border: 1.5px dashed #cfcbd8;
  border-radius: 18px;
  color: var(--muted);
  font-size: 14px;
}

.shot__gone[hidden] {
  display: none;
}

.shot__undo {
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--sheet);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.2s ease;
}

.shot__undo:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .shot__undo:hover {
    background: #2e2f3d;
  }
}

.shot__undo:focus-visible {
  outline: 2px solid var(--sheet);
  outline-offset: 3px;
}

.shot__cap {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.shot__name {
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.shot__hint {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
}

.shot__hintword {
  display: inline-block;
}

/* ---------------------------------------------------------------- the menu */
.ctx {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: max-content;
  min-width: 228px;
  visibility: hidden;
  pointer-events: none;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  --lit: 0;                 /* set by the script: how visible the highlight is */
}

.ctx.is-shown {
  visibility: visible;
}

.ctx.is-live {
  pointer-events: auto;
}

.ctx--sub {
  z-index: 21;
  min-width: 184px;
}

/* the outline, drawn by the script at every frame */
.ctx__sheet {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 22px 26px rgba(24, 16, 52, 0.26)) drop-shadow(0 4px 8px rgba(24, 16, 52, 0.2));
}

.ctx__sheet path {
  stroke: var(--edge);
  stroke-width: 1;
}

/* the menu is a touch lighter at the top */
.ctx__top {
  stop-color: var(--sheet-top);
}

.ctx__body {
  stop-color: var(--sheet);
}

.ctx__list {
  position: relative;
  padding: 6px;
  transition: opacity 0.25s ease;
}

/* a submenu opened over the menu (on a narrow screen): the menu behind steps back */
.ctx.is-under .ctx__list {
  opacity: 0.32;
}

.ctx__item {
  position: relative;
  height: var(--row);
  outline: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

.ctx__face {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0 12px 0 11px;
  border-radius: 10px;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 520;
  letter-spacing: -0.003em;
  white-space: nowrap;
}

/* the coloured copy of the row, uncovered by the highlight (the script moves its clip-path) */
.ctx__face--ink {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: var(--band);
  color: var(--on-band);
  opacity: var(--lit);
  clip-path: inset(0 0 100% 0);
}

.ctx__item--danger .ctx__face {
  color: var(--danger);
}

.ctx__item--danger .ctx__face--ink {
  background: var(--danger-band);
  color: var(--on-danger);
}

.ctx__icon {
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke: var(--icon);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ctx__item--danger .ctx__icon {
  stroke: currentColor;
}

.ctx__face--ink .ctx__icon {
  stroke: currentColor;
}

.ctx__knob {
  fill: var(--sheet);
}

.ctx__face--ink .ctx__knob {
  fill: var(--band);
}

.ctx__keys {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 16px;
  margin-left: 18px;
  color: var(--keys);
  font-size: 13px;
  font-weight: 480;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.ctx__face--ink .ctx__keys {
  color: inherit;
  opacity: 0.7;
}

.ctx__chevron,
.ctx__check {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ctx__chevron {
  color: var(--icon);
}

.ctx__face--ink .ctx__chevron {
  color: inherit;
}

.ctx__check {
  opacity: 0;
  color: var(--text);
}

.ctx__face--ink .ctx__check {
  color: inherit;
}

[aria-checked='true'] .ctx__check {
  opacity: 1;
}

/* a little picture of the photo in each filter */
.ctx__swatch {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(#2a2c5e 0%, #8d5791 34%, #f09a7c 52%, #ffd09c 58%, #4d4f8e 62%, #1b2149 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.ctx__sep {
  position: relative;
  height: 11px;
}

.ctx__sep::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 5px;
  height: 1px;
  background: var(--rule);
}

/* ---------------------------------------------------------------- phone */
@media (pointer: coarse) {
  :root {
    --row: 44px;
  }

  .ctx__keys[data-keys] {
    display: none;
  }

  .ctx__face {
    font-size: 15.5px;
  }
}

@media (max-width: 480px) {
  :root {
    --shot: 216px;
  }

  .ctx {
    min-width: 214px;
  }

  .ctx--sub {
    min-width: 176px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shot__photo,
  .shot__turn,
  .shot__undo {
    transition: none;
  }

  .shot__photo:active {
    transform: none;
  }
}