/* ==========================================================================
   /submit and the owner edit pages, blue tint. Loaded (after events.css, which brings the portfolio frame) on /submit,
   /my-submissions/tracks/:id/edit and /my-submissions/artworks/:id/edit. Tokens, the --th-* theme variables, the .pf-btn link
   buttons and the .xp- dialog kit come from site.css / events.css (do not redefine them here); the track form itself is
   track-form.css.

   The page is the portfolio look of /events and /contact: <body class="page-portfolio page-submit">, the slim header (wordmark in
   the top row, tabs as link buttons), the footer that lies fixed under the content and is uncovered at the very end, ONE flat
   section (.submit-section) and no window chrome at all (no title strip, no bevelled frame, no scrollbar track, no ASCII bands):
   the document scrolls, not a pane.

   On /submit it first holds the picker: two diagonal halves, azure (the accent blue) = track on the left, sage (the green) =
   artwork on the right, and one pale split line between them. A wide band of deep blue, parallel to that line, is the background
   of the whole page (.submit-bg, behind the header, the picker and the footer). Each half has drifting grid paper (46px cells;
   track: down and to the left, artwork: up and to the right, 3.5x faster while hovered, scaling up a little), pixel star flares
   and a hover GIF three times its former size. The two halves are rotated copies of each other (point symmetry). Hovering or
   focusing a half pulls the split across and blurs the other half. The chosen panel then replaces the picker: the track form and
   the artwork form are plain numbered sections on the page (track-form.css).
   ========================================================================== */

.submit-page-wrap {
  display: flex;
  flex-direction: column;
  background: transparent;
}
/* the one section of the page: no min-height / padding of a portfolio section, a gutter at the sides and below */
.event-section.submit-section {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0 var(--yh-g) var(--yh-g);
  overflow: visible;
  background: transparent;
  /* the tone of the dotted screen (portfolio-dots.js reads --pf-bg / --pf-dots of the section): a light dot on the blue, which
     reads as a pale tint on the green half and on the dark band as well */
  --pf-bg: var(--yh-accent-hi);
  --pf-dots: var(--yh-accent-lit);
}
.event-section.submit-section:last-child {
  padding-bottom: var(--yh-g);
}
/* an open form (or an edit page) is a plain document: the paper, which also covers the fixed footer until the very end */
body:not(.submit-picker-bg) .event-section.submit-section {
  background: var(--yh-paper);
  --pf-fg: var(--yh-ink);
  --pf-soft: var(--yh-ink-soft);
}
.submit-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.submit-body > * {
  flex: none;
}
.submit-body > .submit-picker {
  flex: 1 1 auto;
}
body:not(.submit-picker-bg) .submit-section :focus-visible {
  outline: 2px solid var(--th-ink);
  outline-offset: 2px;
}

/* «что такое suncycle?» (the small chip at the lower left, above the footer's left side): the account button of the header, class for
   class (.hud-chip__account and its round mark in site.css: the 1px border, the 28px height, the mono uppercase type, the fill that fills in on
   hover, all read from the --hdr-* colours, which are the band's pale ink on this page), with a «?» in the circle where the account chip has the
   initial. It stands in the strip the picker leaves above the footer: the picker's bottom padding is 52px (it was 32px), the chip is 28px high
   and 12px off the footer line, so it never touches the pane, the cells or the GIFs. Shown with the picker and the closed card (the band),
   not while a form is open (the form is a paper document; the chip is the picker's footnote). submit-frame.js rolls its label on hover. */
.event-section.submit-section {
  position: relative;
}
.submit-about {
  position: absolute;
  left: var(--yh-g);
  bottom: 12px;
  z-index: 6;   /* over the glow canvas (4) and the dotted screen (5), under the header (10) */
  display: none;
}
body.submit-picker-bg .submit-about {
  display: inline-flex;
}
body.submit-picker-bg .event-section.submit-section,
body.submit-picker-bg .event-section.submit-section:last-child {
  padding-bottom: 52px;
}
.submit-about:focus-visible {
  outline: 2px solid var(--pb-ink, var(--hdr-fg));
  outline-offset: 2px;
}

/* the dotted screen belongs to the picker and the closed card: an open form is a clean page (portfolio-dots.js draws nothing while its canvas is hidden) */
body:not(.submit-picker-bg) .pf-dots {
  display: none;
}

/* the picker page does not scroll: the footer sits in the page under the picker (transparent, on the band) instead of lying fixed */
body.submit-picker-bg .site-footer {
  position: relative;
  border-top: 0;
  background: transparent;
}
body.submit-picker-bg .pf-main {
  margin-bottom: 0;
}

/* ---------- closed state: an alert dialog ---------- */

.submit-closed-card {
  width: min(560px, calc(100% - 32px));
  margin: clamp(24px, 8vh, 64px) auto;
}
.submit-closed-body {
  display: flex;
  align-items: center;
  gap: 24px;
}
.submit-closed-body p {
  color: var(--th-ink);
  font-size: 1rem;
  line-height: 1.6;
}
.submit-closed-sign {
  color: var(--yh-accent);
}

/* ---------- the picker: two windows split by ONE diagonal ----------
   Geometry (one source of truth, on .submit-picker): the separator runs from --pk-cut at the top edge to
   100% - --pk-cut at the bottom edge. Left of it: the blue window (track); right of it: the green window (artwork);
   the only other mark is one 2px pale line along the split. The two windows are rotated copies of each other
   (point symmetry about the centre of the pane). The wide dark band that used to sit between them is the page
   background now (.submit-bg, below), parallel to this split by construction. */

.submit-picker,
.submit-bg {
  /* the pixel star of the flares (cells on a 17 x 17 grid, a Bayer halo round the core, spikes thinning out) */
  --pk-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M8 8h1v1h-1zM9 8h1v1h-1zM7 8h1v1h-1zM8 9h1v1h-1zM8 7h1v1h-1zM10 8h1v1h-1zM6 8h1v1h-1zM8 10h1v1h-1zM8 6h1v1h-1z'/%3E%3Cpath fill='%23ffffff' fill-opacity='0.8' d='M11 8h1v1h-1zM5 8h1v1h-1zM8 11h1v1h-1zM8 5h1v1h-1z'/%3E%3Cpath fill='%23cfe0ff' fill-opacity='0.8' d='M12 8h1v1h-1zM4 8h1v1h-1zM8 12h1v1h-1zM8 4h1v1h-1z'/%3E%3Cpath fill='%23cfe0ff' fill-opacity='0.55' d='M13 8h1v1h-1zM3 8h1v1h-1zM8 13h1v1h-1zM8 3h1v1h-1zM14 8h1v1h-1zM2 8h1v1h-1zM8 14h1v1h-1zM8 2h1v1h-1z'/%3E%3Cpath fill='%23cfe0ff' fill-opacity='0.3' d='M15 8h1v1h-1zM1 8h1v1h-1zM8 15h1v1h-1zM8 1h1v1h-1zM16 8h1v1h-1zM0 8h1v1h-1zM8 16h1v1h-1zM8 0h1v1h-1z'/%3E%3Cpath fill='%23cfe0ff' fill-opacity='0.9' d='M9 9h1v1h-1zM7 9h1v1h-1zM9 7h1v1h-1zM7 7h1v1h-1z'/%3E%3Cpath fill='%23cfe0ff' fill-opacity='0.6' d='M10 10h1v1h-1zM6 10h1v1h-1zM10 6h1v1h-1zM6 6h1v1h-1z'/%3E%3Cpath fill='%23cfe0ff' fill-opacity='0.4' d='M11 11h1v1h-1zM5 11h1v1h-1zM11 5h1v1h-1zM5 5h1v1h-1z'/%3E%3Cpath fill='%23cfe0ff' fill-opacity='0.25' d='M12 12h1v1h-1zM4 12h1v1h-1zM12 4h1v1h-1zM4 4h1v1h-1z'/%3E%3Cpath fill='%238cadff' fill-opacity='0.5' d='M7 5h1v1h-1zM9 5h1v1h-1zM7 6h1v1h-1zM9 6h1v1h-1zM11 7h1v1h-1zM5 9h1v1h-1zM11 9h1v1h-1zM7 10h1v1h-1zM9 10h1v1h-1zM7 11h1v1h-1z'/%3E%3C/svg%3E");
}
.submit-picker {
  /* the colours, from the palette: azure (accent blue) = track, sage = artwork */
  --pk-a1: color-mix(in srgb, var(--yh-accent-hi) 30%, var(--yh-accent));
  --pk-a2: var(--yh-accent);
  --pk-a3: var(--yh-accent-ink);
  --pk-g1: color-mix(in srgb, var(--yh-green) 22%, var(--yh-green-deep));
  --pk-g2: var(--yh-green-deep);
  --pk-g3: var(--yh-green-ink);
  --pk-line: color-mix(in srgb, var(--yh-paper-hi) 62%, var(--yh-blue));   /* the split line (and the band's edge lines) */
  --pk-grid: rgba(244, 247, 250, 0.2);                                       /* grid paper: pale, pixel-thin */
  --pk-grid-fine: rgba(244, 247, 250, 0.07);
  --pk-cut: 56%;          /* where the separator meets the top edge (it meets the bottom edge at 100% - this) */
  --pk-pull: 7%;          /* how far a hovered window pulls the split (and its hit area) across */
  --pk-gut: clamp(20px, 2.8vw, 36px);   /* the one inset of the labels from the pane edges (both windows) */
  --pk-gif: 3;            /* the hover GIFs are this many times the size they had before the band */
  --pk-gshift: 2%;        /* how far the GIFs stand off the pulled split (0 on narrow panes) */
  --pk-gover: 14px;       /* how far the cover GIF's bottom edge reaches below the enlarged cover button's top edge */
  --pk-gleft: 4%;         /* the notes stand this much further left (4% of the pane = 7% of the track half), under the cell's left part, off the cursor cloud */
  --pk-scale: 2;          /* the hovered / focused button (label + file types) grows to this many times its size */
  --pk-zoom-t: 0.38s;     /* ... in this long, as a transform */
  --pk-plate-w: min(24vw, 30rem);   /* the button's width at rest: x2 it must still fit its half (the split leans away from it) */
  --pk-fs: clamp(1.05rem, 1.9vw, 2.1rem);   /* the label's size at rest (chips: half of it) */
  --pk-cell: 46px;        /* one cell of the grid paper (was 32px) */
  --pk-rest: 8s;          /* the paper slides one cell per this at rest: 5.75px/s (was 12s per 32px = 2.67px/s); 3.5x while hovered */
  position: relative;
  flex: 1 1 auto;
  min-height: 420px;
  overflow: hidden;
  background: var(--pk-line);   /* shows only as the hairline seam of the split */
  cursor: pointer;
}
.submit-picker[hidden],
.submit-panel[hidden] {
  display: none;
}
.submit-picker-half {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: none;
  padding: var(--pk-gut);
  background: transparent;
  color: var(--th-ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: clip-path var(--yh-t-mid) var(--yh-snap), filter var(--yh-t-mid) var(--yh-snap), opacity var(--yh-t-mid) var(--yh-snap);
}
/* the track window, left: its label plate and file-type plate sit in the top-left corner */
.submit-picker-track {
  align-items: flex-start;
  justify-content: flex-start;
  clip-path: polygon(0 0, var(--pk-cut) 0, calc(100% - var(--pk-cut)) 100%, 0 100%);
}
/* the artwork window is the track window turned half a turn: the label plate sits in the bottom-right corner, the
   file-type plate above it (column-reverse puts the first item at the bottom) */
.submit-picker-artwork {
  flex-direction: column-reverse;
  align-items: flex-end;
  justify-content: flex-start;
  clip-path: polygon(var(--pk-cut) 0, 100% 0, 100% 100%, calc(100% - var(--pk-cut)) 100%);
}
/* layer 1: the colour of the window (the half's own clip-path cuts it to its shape) */
.submit-picker-half::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.submit-picker-track::before {
  background: linear-gradient(170deg, var(--pk-a1) 0%, var(--pk-a2) 40%, var(--pk-a3) 100%);
}
.submit-picker-artwork::before {
  background: linear-gradient(350deg, var(--pk-g1) 0%, var(--pk-g2) 40%, var(--pk-g3) 100%);
}
/* layer 2: grid paper over the whole window. The paper is one cell (--pk-cell, 46px) larger than the window on the
   side it drifts from and slides one cell per loop, so the loop is seamless: the track window's grid down and to the
   left, the artwork window's up and to the right. It is a transform, so it runs on the compositor (animating
   background-position repainted two big layers every frame: 17 fps in software rendering, 144 with this). The hover
   speed is set in submit-picker.js (playbackRate, so the grid does not jump); a hovered / focused window also
   keeps drifting) */
.submit-picker-half::after {
  content: "";
  position: absolute;
  z-index: 1;
  will-change: transform;
  background-image:
    linear-gradient(var(--pk-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pk-grid) 1px, transparent 1px),
    linear-gradient(var(--pk-grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--pk-grid-fine) 1px, transparent 1px);
  background-size: var(--pk-cell) var(--pk-cell), var(--pk-cell) var(--pk-cell), calc(var(--pk-cell) / 2) calc(var(--pk-cell) / 2), calc(var(--pk-cell) / 2) calc(var(--pk-cell) / 2);
  pointer-events: none;
}
.submit-picker-track::after {
  inset: calc(var(--pk-cell) * -1) calc(var(--pk-cell) * -1) 0 0;
  transform-origin: calc(50% - var(--pk-cell) / 2) calc(50% + var(--pk-cell) / 2);   /* the centre of the window */
  animation: pk-drift-a var(--pk-rest) linear infinite;
}
.submit-picker-artwork::after {
  inset: 0 0 calc(var(--pk-cell) * -1) calc(var(--pk-cell) * -1);
  transform-origin: calc(50% + var(--pk-cell) / 2) calc(50% - var(--pk-cell) / 2);
  animation: pk-drift-b var(--pk-rest) linear infinite;
}
@keyframes pk-drift-a {
  from { transform: translate(0, 0); }
  to { transform: translate(calc(var(--pk-cell) * -1), var(--pk-cell)); }
}
@keyframes pk-drift-b {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--pk-cell), calc(var(--pk-cell) * -1)); }
}
/* the split line: a 2px hairline along the separator, drawn on the track window (inside its edge); the artwork window
   has its own copy that only shows while it is pulled across, so there is always exactly one line */
.submit-picker-edge {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--pk-line);
  transition: clip-path var(--yh-t-mid) var(--yh-snap), opacity 0s linear var(--yh-t-mid);
  pointer-events: none;
}
.submit-picker-track .submit-picker-edge {
  clip-path: polygon(calc(var(--pk-cut) - 2px) 0, var(--pk-cut) 0, calc(100% - var(--pk-cut)) 100%, calc(100% - var(--pk-cut) - 2px) 100%);
}
.submit-picker-artwork .submit-picker-edge {
  clip-path: polygon(var(--pk-cut) 0, calc(var(--pk-cut) + 2px) 0, calc(100% - var(--pk-cut) + 2px) 100%, calc(100% - var(--pk-cut)) 100%);
  opacity: 0;
}
/* the flares: a pixel star (cells on a 17 x 17 grid, a Bayer halo round the core, spikes thinning out) like the
   bloom of the home page, small, pale, twinkling in hard steps; one big and one small per window, rotated copies */
.submit-picker-flare {
  position: absolute;
  z-index: 2;
  width: 85px;
  height: 85px;
  background: var(--pk-star) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  animation: pk-twinkle 4.8s steps(1, end) infinite;
}
.submit-picker-flare::after {
  content: "";
  position: absolute;
  width: 42px;
  height: 42px;
  background: inherit;
  image-rendering: pixelated;
  animation: pk-twinkle 4.8s steps(1, end) -2.2s infinite;
}
.submit-picker-track .submit-picker-flare {
  left: 12%;
  top: 70%;
  margin: -42px 0 0 -42px;
}
.submit-picker-track .submit-picker-flare::after {
  left: 330px;
  top: -190px;
}
.submit-picker-artwork .submit-picker-flare {
  right: 12%;
  bottom: 70%;
  margin: 0 -42px -42px 0;
  animation-delay: -2.4s;
}
.submit-picker-artwork .submit-picker-flare::after {
  right: 330px;
  bottom: -190px;
}
@keyframes pk-twinkle {
  0%, 100% { opacity: 0.95; }
  28% { opacity: 0.55; }
  36% { opacity: 0.95; }
  70% { opacity: 0.7; }
}
/* the half under the pointer (or focus) wins the stack and pulls the split across; the other window blurs back */
.submit-picker:hover .submit-picker-half:not(:hover),
.submit-picker:focus-within .submit-picker-half:not(:focus-visible):not(:hover) {
  filter: blur(2px) saturate(0.85);
  opacity: 0.88;
}
.submit-picker-track:hover,
.submit-picker-track:focus-visible {
  z-index: 2;
  clip-path: polygon(0 0, calc(var(--pk-cut) + var(--pk-pull)) 0, calc(100% - var(--pk-cut) + var(--pk-pull)) 100%, 0 100%);
}
.submit-picker-artwork:hover,
.submit-picker-artwork:focus-visible {
  z-index: 2;
  clip-path: polygon(calc(var(--pk-cut) - var(--pk-pull)) 0, 100% 0, 100% 100%, calc(100% - var(--pk-cut) - var(--pk-pull)) 100%);
}
.submit-picker-track:hover .submit-picker-edge,
.submit-picker-track:focus-visible .submit-picker-edge {
  clip-path: polygon(calc(var(--pk-cut) + var(--pk-pull) - 2px) 0, calc(var(--pk-cut) + var(--pk-pull)) 0, calc(100% - var(--pk-cut) + var(--pk-pull)) 100%, calc(100% - var(--pk-cut) + var(--pk-pull) - 2px) 100%);
}
.submit-picker-artwork:hover .submit-picker-edge,
.submit-picker-artwork:focus-visible .submit-picker-edge {
  clip-path: polygon(calc(var(--pk-cut) - var(--pk-pull)) 0, calc(var(--pk-cut) - var(--pk-pull) + 2px) 0, calc(100% - var(--pk-cut) - var(--pk-pull) + 2px) 100%, calc(100% - var(--pk-cut) - var(--pk-pull)) 100%);
  opacity: 1;
  transition: clip-path var(--yh-t-mid) var(--yh-snap), opacity 0s;
}
.submit-picker-half:focus-visible {
  outline: none;
}
/* the keyboard ring follows the shape of the window (an outline would be cut by the clip): a 3px white ring with a
   2px ink ring inside it, drawn as two polygons with a hole; readable on the blue, the green and the dark band */
.submit-picker-ring {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
}
.submit-picker-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--yh-ink);
}
.submit-picker-half:focus-visible .submit-picker-ring {
  opacity: 1;
}
.submit-picker-track .submit-picker-ring {
  clip-path: polygon(evenodd, 0 0, calc(var(--pk-cut) + var(--pk-pull)) 0, calc(100% - var(--pk-cut) + var(--pk-pull)) 100%, 0 100%, 0 0,
    3px 3px, calc(var(--pk-cut) + var(--pk-pull) - 3px) 3px, calc(100% - var(--pk-cut) + var(--pk-pull) - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 3px);
}
.submit-picker-track .submit-picker-ring::before {
  clip-path: polygon(evenodd, 3px 3px, calc(var(--pk-cut) + var(--pk-pull) - 3px) 3px, calc(100% - var(--pk-cut) + var(--pk-pull) - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 3px,
    5px 5px, calc(var(--pk-cut) + var(--pk-pull) - 5px) 5px, calc(100% - var(--pk-cut) + var(--pk-pull) - 5px) calc(100% - 5px), 5px calc(100% - 5px), 5px 5px);
}
.submit-picker-artwork .submit-picker-ring {
  clip-path: polygon(evenodd, calc(var(--pk-cut) - var(--pk-pull)) 0, 100% 0, 100% 100%, calc(100% - var(--pk-cut) - var(--pk-pull)) 100%, calc(var(--pk-cut) - var(--pk-pull)) 0,
    calc(var(--pk-cut) - var(--pk-pull) + 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - var(--pk-cut) - var(--pk-pull) + 3px) calc(100% - 3px), calc(var(--pk-cut) - var(--pk-pull) + 3px) 3px);
}
.submit-picker-artwork .submit-picker-ring::before {
  clip-path: polygon(evenodd, calc(var(--pk-cut) - var(--pk-pull) + 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - var(--pk-cut) - var(--pk-pull) + 3px) calc(100% - 3px), calc(var(--pk-cut) - var(--pk-pull) + 3px) 3px,
    calc(var(--pk-cut) - var(--pk-pull) + 5px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) calc(100% - 5px), calc(100% - var(--pk-cut) - var(--pk-pull) + 5px) calc(100% - 5px), calc(var(--pk-cut) - var(--pk-pull) + 5px) 5px);
}

/* ---------- the buttons: the portfolio link buttons of /events (events.css .pf-btn), big ----------
   One cell per half (.submit-picker-btn): the label ("отправить трек") over the file types (".wav .mp3 .flac"). Each row is the
   pxpush bottom button: a thin ink rule on top, the mono label at the left, the arrow at the right, on a pale flat cell (the cell
   reads on the blue and on the sage alike). Hovered / focused (the whole diagonal half is the real button), a fill in the ink
   rises from the bottom (0.2s), the label and the arrow turn pale and move in a little, submit-frame.js rolls the letters, and
   the whole cell GROWS TO TWICE ITS SIZE: a transform (compositor only, no layout), 0.38s, from the corner it stands in, so the
   enlarged cell stays inside its half whatever the window is (track: top-left corner, it grows right and down; artwork:
   bottom-right corner, it grows left and up; --pk-plate-w is chosen so that x2 is still left of the split, which leans away from
   the cell) and inside the viewport; the hovered half is the top of the stack, so it also lies over everything else.
   Reduced motion and touch: no zoom (the fill alone changes). The cell ignores the pointer: the half is the button. */
.submit-picker-btn {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: var(--pk-plate-w);
  max-width: 100%;
  pointer-events: none;
  transition: transform var(--pk-zoom-t) cubic-bezier(0.2, 0.75, 0.2, 1);
}
.submit-picker-track .submit-picker-btn {
  transform-origin: 0 0;
}
.submit-picker-artwork .submit-picker-btn {
  transform-origin: 100% 100%;
}
.submit-picker-label,
.submit-picker-chip {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  padding: 0.5em 0.8em;
  border-top: 1px solid var(--yh-ink);
  background: var(--yh-paper-hi);
  color: var(--yh-ink);
  font-family: var(--hud-mono);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  transition: color 0.12s ease, padding 0.3s ease;
}
.submit-picker-label {
  font-size: var(--pk-fs);
}
.submit-picker-chip {
  background: var(--yh-paper);
  font-size: max(0.72rem, calc(var(--pk-fs) * 0.5));
  font-weight: 500;
}
/* the fill: the ink, rising from the bottom on hover, retracting upward on leave (the .pf-btn motion) */
.submit-picker-label::before,
.submit-picker-chip::before {
  content: "";
  position: absolute;
  inset: 0 0 -1px;
  z-index: -1;
  background: var(--yh-ink);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.1s ease-in-out;
}
/* the arrow is drawn here, not in the markup (decoration; the label is the name) */
.submit-picker-label::after,
.submit-picker-chip::after {
  content: "\2197\FE0E";
  content: "\2197\FE0E" / "";
  flex: none;
  transition: transform 0.2s ease;
}
.submit-picker-half:hover .submit-picker-btn,
.submit-picker-half:focus-visible .submit-picker-btn {
  transform: scale(var(--pk-scale));
}
.submit-picker-half:hover .submit-picker-label,
.submit-picker-half:focus-visible .submit-picker-label,
.submit-picker-half:hover .submit-picker-chip,
.submit-picker-half:focus-visible .submit-picker-chip {
  padding-left: 1.2em;
  color: var(--yh-paper-hi);
}
.submit-picker-half:hover .submit-picker-label::before,
.submit-picker-half:focus-visible .submit-picker-label::before,
.submit-picker-half:hover .submit-picker-chip::before,
.submit-picker-half:focus-visible .submit-picker-chip::before {
  transform: scaleY(1);
  transform-origin: 50% 100%;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.submit-picker-half:hover .submit-picker-label::after,
.submit-picker-half:focus-visible .submit-picker-label::after,
.submit-picker-half:hover .submit-picker-chip::after,
.submit-picker-half:focus-visible .submit-picker-chip::after {
  transform: translate(2px, -2px);
}
/* a touch screen has no hover: a tap just opens the form, nothing grows (the stuck :hover of a tap would leave it enlarged) */
@media (hover: none) {
  .submit-picker-half:hover .submit-picker-btn,
  .submit-picker-half:focus-visible .submit-picker-btn {
    transform: none;
  }
}

/* ---------- the gasoline-spill glow (submit-glow.js) ----------
   One fixed canvas over the picker: above the halves and their buttons (z-index 4 in the page's stacking context), under the dotted
   screen (5) and the header (10). It is drawn at half the size of the screen and enlarged with hard pixels (the coarse grain is a look),
   click-through and aria-hidden. The colours of the glow (the thin-film interference rainbow of an oil slick) are made by the fragment
   shader at run time and appear in no stylesheet: tests/palette.test.js, which scans the stylesheets for off-palette hues, has nothing to
   find here and is not told otherwise. Not created at all under reduced motion, on touch screens or without WebGL. */
.submit-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}

/* ---------- the hover GIFs: white line art, three times the size they were, in opposite corners ----------
   Before the band they were 200px boxes (the notes 98 x 174 .. 112 x 200 drawn, the sketch 200 x 137); now
   --pk-gif times that, as far as the window is tall (the notes are as tall as the window at the most). The notes
   stand in the lower right of their window (a little to the left of the split's foot: --pk-gleft, so they sit
   under the button's left part, off the cursor cloud). The sketch stands over the cover button: its left edge on
   the enlarged button's left edge and its bottom edge --pk-gover below the enlarged button's top edge, so the
   button covers only a small bottom strip of it when hovered, at any window size. submit-picker.js writes the
   button's resting height (--pk-cell-h) and the pane's height (--pk-pane-h); the sketch is made smaller where
   the room above the enlarged button is short, so it never reaches the header. They are small, low-res source
   art: crisp nearest-neighbour scaling keeps the pixels square. */
.submit-picker-track-icon,
.submit-picker-artwork-icon {
  position: absolute;
  z-index: 4;
  opacity: 0;
  transition: opacity var(--yh-t-mid) var(--yh-snap);
  pointer-events: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.submit-picker-track-icon {
  right: calc(var(--pk-cut) - var(--pk-pull) + var(--pk-gshift) + var(--pk-gleft));
  bottom: 0;
  width: auto;
  height: min(calc(var(--pk-gif) * min(34%, 200px)), 100%);
  aspect-ratio: 270 / 480;
}
.submit-picker-artwork-icon {
  /* the enlarged button (x2, from the bottom-right corner) spans 2 x --pk-plate-w to the left of the gutter; its top edge is 2 x its height up */
  --pk-room: calc(var(--pk-pane-h, 60vh) - var(--pk-gut) - 2 * var(--pk-cell-h, 5.6rem) + var(--pk-gover));
  left: calc(100% - var(--pk-gut) - 2 * var(--pk-plate-w));
  bottom: calc(var(--pk-gut) + 2 * var(--pk-cell-h, 5.6rem) - var(--pk-gover));
  width: min(calc(var(--pk-gif) * 200px), calc(2 * var(--pk-plate-w)), calc(var(--pk-room) * 200 / 137));
  height: auto;
  aspect-ratio: 200 / 137;
}
.submit-picker-track:hover .submit-picker-track-icon,
.submit-picker-track:focus-visible .submit-picker-track-icon,
.submit-picker-artwork:hover .submit-picker-artwork-icon,
.submit-picker-artwork:focus-visible .submit-picker-artwork-icon {
  opacity: 1;
}

/* ---------- the page background: a wide diagonal band of deep blue behind everything ----------
   A fixed layer (.submit-bg, aria-hidden, click-through) under the header, the pane and the footer, shown while
   <body> has .submit-picker-bg (server-rendered for the picker and the closed card; submit-picker.js takes the class
   off while a form panel is open and puts it back with the back button). Its two edges are straight lines at the
   slope of the picker's split line: the split leans k = 0.12 * W / H pixels across per pixel down (W x H = the picker;
   stacked: W / (0.12 * H)), and submit-picker.js writes that measured --pk-k (and the pane's rectangle) onto the layer;
   the default below is the same number for a typical desktop. Both edges are x = x0 - k * y, so they stay parallel
   to the split at every size.
     left edge   leaves the left side of the viewport --band-l-at (0.55) of the way down, but never crosses the pane's
                 top-left corner or the logo (the pale top-left triangle is as big as that allows)
     right edge  enters the right side --band-r-at (0.2) of the way down, but never crosses the pane's bottom-right
                 corner (the pale bottom-right triangle is what is left)
   Everything else is the band: the margins above, left, right and below the pane. Fill: deep blue (between the ink and
   the accent-deep), a faint 4px checker and a very faint static grid; two 1.6px pale hairlines on the edges; three
   sparse pixel flares. Nothing in it moves except the flares' twinkle (hard steps), so it costs one paint. */

.submit-bg {
  --bd-1: color-mix(in srgb, var(--yh-ink) 42%, var(--yh-accent-deep));
  --bd-2: color-mix(in srgb, var(--yh-ink) 72%, var(--yh-accent-deep));
  --bd-line: color-mix(in srgb, var(--yh-paper-hi) 62%, var(--yh-blue));
  --bd-grid: rgba(244, 247, 250, 0.06);
  --bd-cell: 46px;
  --pk-k: 0.25;                 /* the split's lean (written by submit-picker.js from the measured picker) */
  --band-l-at: 0.55;            /* the left edge meets the left side at this share of the viewport height */
  --band-r-at: 0.2;             /* the right edge meets the right side at this share of the viewport height */
  --pk-pl: calc(max(0px, (100vw - 1280px) / 2) + var(--yh-g));   /* the pane: left, right, bottom (viewport px; measured) */
  --pk-pr: calc(100vw - var(--pk-pl));
  --pk-pb: calc(100vh - 62px);
  /* x of the left edge at the top of the viewport / the right edge at the bottom; the other ends follow from the slope */
  --bd-a: min(calc(var(--band-l-at) * var(--pk-k) * 100vh), calc(var(--pk-pl) - 6px + var(--pk-k) * 60px));
  --bd-xb: max(calc(100% - (1 - var(--band-r-at)) * var(--pk-k) * 100vh), calc(var(--pk-pr) + 6px - var(--pk-k) * (100vh - var(--pk-pb))));
  --bd-l1: calc(var(--bd-a) - var(--pk-k) * 100vh);     /* left edge at the bottom */
  --bd-r0: calc(var(--bd-xb) + var(--pk-k) * 100vh);    /* right edge at the top */
  --bd-lw: calc(1.6px * (1 + var(--pk-k)));             /* the hairline's horizontal width: about 1.6px across the line */
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  display: none;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}
body.submit-picker-bg .submit-bg {
  display: block;
}
.submit-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    conic-gradient(rgba(244, 247, 250, 0.04) 25%, transparent 0 50%, rgba(244, 247, 250, 0.04) 0 75%, transparent 0) 0 0 / 4px 4px,
    linear-gradient(var(--bd-grid) 1px, transparent 1px) 0 0 / var(--bd-cell) var(--bd-cell),
    linear-gradient(90deg, var(--bd-grid) 1px, transparent 1px) 0 0 / var(--bd-cell) var(--bd-cell),
    linear-gradient(180deg, var(--bd-1) 0%, var(--bd-2) 100%);
  clip-path: polygon(var(--bd-a) 0, var(--bd-r0) 0, var(--bd-xb) 100%, var(--bd-l1) 100%);
}
.submit-bg-edge {
  position: absolute;
  inset: 0;
  background: var(--bd-line);
}
.submit-bg-edge--l {
  clip-path: polygon(var(--bd-a) 0, calc(var(--bd-a) + var(--bd-lw)) 0, calc(var(--bd-l1) + var(--bd-lw)) 100%, var(--bd-l1) 100%);
}
.submit-bg-edge--r {
  clip-path: polygon(calc(var(--bd-r0) - var(--bd-lw)) 0, var(--bd-r0) 0, var(--bd-xb) 100%, calc(var(--bd-xb) - var(--bd-lw)) 100%);
}
.submit-bg-flare {
  position: absolute;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: var(--pk-star) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  opacity: 0.9;
  animation: pk-twinkle 4.8s steps(1, end) infinite;
}
.submit-bg-flare--a { left: calc(50% + 15vw); top: 114px; }
.submit-bg-flare--b { left: 60%; top: 96%; animation-delay: -2.4s; }
.submit-bg-flare--c { left: 7%; top: 66%; animation-delay: -1.2s; }
@media (max-width: 768px) {
  /* phones: the stacked picker's split is a shallow diagonal (k = W / (0.12 * H), about 6), the band is nearly
     horizontal: the whole page is band except a sliver in the top-left and one in the bottom-right corner */
  .submit-bg {
    --pk-k: 6;
    --bd-a: 70%;
    --bd-xb: 30%;
  }
  .submit-bg-flare--a,
  .submit-bg-flare--c { display: none; }
  .submit-bg-flare--b { left: 30%; top: 95%; }
}

/* ---------- the frame on the band: bright palette colours ----------
   The header paints the band's own top colour (--bd-1 of .submit-bg: the same mix), so the band and the header are one surface
   and the page's pale corners start under it; its text is the pale ink, the rising fill is pale and the label turns ink while it
   covers it, the bright-blue call to action gets a pale hairline (the blue alone would melt into the band). While a form is open
   (submit-picker.js takes .submit-picker-bg off) the header is the paper of every inner page again. The footer line, the social
   icons and the pane lie on the band (or half on a pale corner): dark plates with a pale hairline. :where() keeps the specificity
   of the site's own rules, so their hover / focus states still win. */

/* the forms and the edit pages: the header is the paper of the page (the theme's own), not the yellow events.css gives the portfolio pages */
body.page-submit {
  --hdr-bg: var(--th-bg);
  --hdr-paint: transparent;
  --hdr-fg: var(--th-ink);
  --hdr-soft: var(--th-ink-soft);
  --hdr-line: var(--th-ink);
  --hdr-fill: var(--th-ink);
  --hdr-fill-fg: var(--th-on-accent);
  --hdr-hover: var(--th-accent-ink);
  --hdr-led: var(--yh-accent);
  --hdr-cta-ring: transparent;
}
body.submit-picker-bg {
  --pb-ink: var(--yh-paper-hi);        /* text on the band: #f4f7fa */
  --pb-soft: var(--yh-blue);           /* secondary text, hairlines: #bcd3e6 */
  --pb-mark: var(--yh-accent-lit);     /* accent marks: #8cadff (4.6:1 on the band) */
  --pb-rule: rgba(188, 211, 230, 0.45);
  --hdr-bg: color-mix(in srgb, var(--yh-ink) 42%, var(--yh-accent-deep));   /* = --bd-1 of .submit-bg */
  --hdr-paint: var(--hdr-bg);
  --hdr-fg: var(--pb-ink);
  --hdr-soft: var(--pb-soft);
  --hdr-line: var(--pb-rule);
  --hdr-fill: var(--pb-ink);
  --hdr-fill-fg: var(--yh-ink);
  --hdr-hover: var(--pb-mark);
  --hdr-led: var(--pb-mark);
  --hdr-cta-ring: var(--pb-mark);
  /* the footer lies on the band: it reads --hdr-* through --ftr-* (site.css); its icons sit on dark plates (the rules below) */
  --ftr-edge: var(--pb-soft);
  --ftr-plate: var(--yh-ink);
}
:where(body.submit-picker-bg) .social-links a {
  --yh-base: var(--yh-ink);
  --yh-sw: var(--pb-ink);
  --yh-fg-hover: var(--yh-ink);
  border-color: var(--pb-soft);
  color: var(--pb-ink);
}
:where(body.submit-picker-bg) .site-footer {
  color: var(--pb-ink);
}
:where(body.submit-picker-bg) .hud-status {
  color: var(--pb-soft);
}
:where(body.submit-picker-bg) .hud-status__user {
  color: var(--pb-ink);
}
:where(body.submit-picker-bg) .hud-status__sep {
  color: var(--pb-mark);
}
/* keyboard focus on the band: a white 2px ring over a 4px ink halo (readable on the dark band and on the pale corners) */
:where(body.submit-picker-bg) :focus-visible,
:where(body.submit-picker-bg) .social-links a:focus-visible {
  outline-color: var(--pb-ink);
  box-shadow: 0 0 0 4px var(--yh-ink);
}

/* ---------- panels (track form / artwork form / the edit pages): plain sections of the document ---------- */

.submit-panel {
  position: relative;
  width: 100%;
  padding: clamp(10px, 1.2vw, 18px) 0 clamp(24px, 4vw, 64px);
}
.submit-panel--edit {
  padding-top: clamp(12px, 1.6vw, 24px);
}

/* "← назад": the link button of the portfolio (events.css .pf-btn: a thin rule on top, the label at the left, a fill that rises on
   hover), at the right edge of the title row on desktop, above the title on small screens */
.pf-btn.submit-back-btn {
  width: auto;
  min-width: 8rem;
  min-height: 40px;
  padding: 8px 20px 8px 0;
}
.submit-back-btn:hover,
.submit-back-btn:focus-visible {
  color: var(--yh-paper);
}
@media (min-width: 760px) {
  .pf-btn.submit-back-btn {
    position: absolute;
    top: clamp(16px, 2.4vw, 34px);
    right: 0;
    z-index: 2;
    padding-left: 12px;
  }
}

/* ---------- small screens: the pane stacks and the page scrolls ---------- */

@media (max-width: 1100px) {
  .submit-picker {
    --pk-gshift: 0%;
  }
}
@media (max-width: 899px) {
  .submit-picker {
    min-height: min(70svh, 560px);
  }
}
@media (max-width: 768px) {
  .submit-picker {
    min-height: min(60svh, 440px);
  }
}
@media (max-width: 768px) {
  /* phones: the windows stack (track above, artwork below) and the separator is a shallow diagonal (44% at the right
     edge, 56% at the left). The plates keep their corners (track top-left, artwork bottom-right); the GIFs make way.
     (The page background band follows the same slope, see .submit-bg below.) */
  .submit-picker {
    --pk-gut: 14px;
    --pk-plate-w: min(44vw, 22rem);   /* a window this narrow with a mouse: x2 of it still fits */
    --pk-fs: clamp(0.95rem, 3.4vw, 1.5rem);
  }
  .submit-picker-track {
    clip-path: polygon(0 0, 100% 0, 100% 44%, 0 56%);
  }
  .submit-picker-artwork {
    clip-path: polygon(0 56%, 100% 44%, 100% 100%, 0 100%);
  }
  .submit-picker-track::before {
    background: linear-gradient(180deg, var(--pk-a1) 0%, var(--pk-a2) 55%, var(--pk-a3) 100%);
  }
  .submit-picker-artwork::before {
    background: linear-gradient(0deg, var(--pk-g1) 0%, var(--pk-g2) 55%, var(--pk-g3) 100%);
  }
  .submit-picker-track .submit-picker-edge {
    clip-path: polygon(0 calc(56% - 2px), 100% calc(44% - 2px), 100% 44%, 0 56%);
  }
  .submit-picker-artwork .submit-picker-edge {
    clip-path: polygon(0 56%, 100% 44%, 100% calc(44% + 2px), 0 calc(56% + 2px));
  }
  .submit-picker-track:hover,
  .submit-picker-track:focus-visible {
    clip-path: polygon(0 0, 100% 0, 100% calc(44% + var(--pk-pull)), 0 calc(56% + var(--pk-pull)));
  }
  .submit-picker-artwork:hover,
  .submit-picker-artwork:focus-visible {
    clip-path: polygon(0 calc(56% - var(--pk-pull)), 100% calc(44% - var(--pk-pull)), 100% 100%, 0 100%);
  }
  .submit-picker-track:hover .submit-picker-edge,
  .submit-picker-track:focus-visible .submit-picker-edge {
    clip-path: polygon(0 calc(56% + var(--pk-pull) - 2px), 100% calc(44% + var(--pk-pull) - 2px), 100% calc(44% + var(--pk-pull)), 0 calc(56% + var(--pk-pull)));
  }
  .submit-picker-artwork:hover .submit-picker-edge,
  .submit-picker-artwork:focus-visible .submit-picker-edge {
    clip-path: polygon(0 calc(56% - var(--pk-pull)), 100% calc(44% - var(--pk-pull)), 100% calc(44% - var(--pk-pull) + 2px), 0 calc(56% - var(--pk-pull) + 2px));
  }
  .submit-picker-track .submit-picker-ring {
    clip-path: polygon(evenodd, 0 0, 100% 0, 100% calc(44% + var(--pk-pull)), 0 calc(56% + var(--pk-pull)), 0 0,
      3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(44% + var(--pk-pull) - 3px), 3px calc(56% + var(--pk-pull) - 3px), 3px 3px);
  }
  .submit-picker-track .submit-picker-ring::before {
    clip-path: polygon(evenodd, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(44% + var(--pk-pull) - 3px), 3px calc(56% + var(--pk-pull) - 3px), 3px 3px,
      5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) calc(44% + var(--pk-pull) - 5px), 5px calc(56% + var(--pk-pull) - 5px), 5px 5px);
  }
  .submit-picker-artwork .submit-picker-ring {
    clip-path: polygon(evenodd, 0 calc(56% - var(--pk-pull)), 100% calc(44% - var(--pk-pull)), 100% 100%, 0 100%, 0 calc(56% - var(--pk-pull)),
      3px calc(56% - var(--pk-pull) + 3px), calc(100% - 3px) calc(44% - var(--pk-pull) + 3px), calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px calc(56% - var(--pk-pull) + 3px));
  }
  .submit-picker-artwork .submit-picker-ring::before {
    clip-path: polygon(evenodd, 3px calc(56% - var(--pk-pull) + 3px), calc(100% - 3px) calc(44% - var(--pk-pull) + 3px), calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px calc(56% - var(--pk-pull) + 3px),
      5px calc(56% - var(--pk-pull) + 5px), calc(100% - 5px) calc(44% - var(--pk-pull) + 5px), calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 5px), 5px calc(56% - var(--pk-pull) + 5px));
  }
  .submit-picker-track .submit-picker-flare {
    left: 82%;
    top: 22%;
    margin: -32px 0 0 -32px;
    width: 64px;
    height: 64px;
  }
  .submit-picker-artwork .submit-picker-flare {
    right: 82%;
    bottom: 22%;
    margin: 0 -32px -32px 0;
    width: 64px;
    height: 64px;
  }
  .submit-picker-flare::after {
    display: none;
  }
  .submit-picker-track-icon,
  .submit-picker-artwork-icon {
    display: none;
  }
}
@media (max-width: 768px) and (hover: none) {
  /* a touch screen: no zoom to leave room for, so the button is wide and its text big */
  .submit-picker {
    --pk-plate-w: min(86vw, 22rem);
    --pk-fs: clamp(1.1rem, 5vw, 1.6rem);
  }
}
@media (max-width: 480px) {
  .submit-closed-body {
    flex-direction: column;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .submit-picker-half,
  .submit-picker-half::before,
  .submit-picker-half::after,
  .submit-picker-edge,
  .submit-picker-btn,
  .submit-picker-label,
  .submit-picker-label::before,
  .submit-picker-label::after,
  .submit-picker-chip,
  .submit-picker-chip::before,
  .submit-picker-chip::after,
  .submit-picker-track-icon,
  .submit-picker-artwork-icon,
  .submit-back-btn {
    transition: none;
  }
  /* no zoom, no drifting grid, no twinkle, no moving letters: a hovered or focused button just changes colour (the ink fill) */
  .submit-picker-half::after,
  .submit-picker-flare,
  .submit-picker-flare::after,
  .submit-bg-flare {
    animation: none;
  }
  .submit-picker-half:hover .submit-picker-btn,
  .submit-picker-half:focus-visible .submit-picker-btn {
    transform: none;
  }
  .submit-picker-half:hover .submit-picker-label,
  .submit-picker-half:focus-visible .submit-picker-label,
  .submit-picker-half:hover .submit-picker-chip,
  .submit-picker-half:focus-visible .submit-picker-chip {
    padding-left: 0.8em;
  }
  .submit-picker-half:hover .submit-picker-label::after,
  .submit-picker-half:focus-visible .submit-picker-label::after,
  .submit-picker-half:hover .submit-picker-chip::after,
  .submit-picker-half:focus-visible .submit-picker-chip::after {
    transform: none;
  }
  /* no blurring-back of the other half: the pulled edge alone says which half is chosen */
  .submit-picker:hover .submit-picker-half:not(:hover),
  .submit-picker:focus-within .submit-picker-half:not(:focus-visible):not(:hover) {
    filter: none;
    opacity: 1;
  }
}