/* uvxarc stylesheet: what only the archive pages need. The pages link the look of the site first
   (/fonts.css and /top.css, written by sitegen/gen_top.py: the header with the site's name, the frame in
   the middle, the buttons, the filled footer band and the moving background, in the dark look), then
   this file. Two looks, chosen by the class of the html element (uvxarc/web/pages.py):
   .dark  the verification page, the home page and the error pages: the top page's look as it is (its
          variables are the defaults of top.css), with the rose main button.
   .pink  the archive and its panels: the same moving lines in white, brighter, with a soft glow on the
          running lights (pink-*.svg of the top page's folder), on a candy pink ground that is a touch
          richer in the middle and fades into a pale pink fog at the edges; the list on one faint white
          sheet. The header keeps its place, with the site's name in berry and Log out on the right.
   The background is a layer of the screen's largest size, fixed and drawn on its own (top.css), so
   scrolling, and the bars of a phone's browser coming and going, never move or redraw it.
   Mobile first: one column of thumbnails, a grid on wider screens, and a popup panel. No JavaScript
   anywhere: the preview plays while a mouse is over the thumbnail, or after a tap on it (a hidden
   checkbox), and the browser loads it only then. No text below a 4.5:1 contrast on its ground.
   Every colour comes from the variables of the two looks, so another palette only changes those. */
.dark { color-scheme: dark; }
.pink {
  color-scheme: light;
  --base: #ffd3e5;
  /* candy pink, a touch richer in the middle */
  --ground: radial-gradient(52% 50% at 50% 45%, rgba(255, 100, 165, 0.16) 0%, rgba(255, 100, 165, 0.067) 55%, rgba(255, 100, 165, 0) 100%),
            linear-gradient(180deg, #ffb9d4 0%, #ff97c0 100%);
  /* the lines dissolve into a pale pink fog toward the edges */
  --veil: radial-gradient(76% 74% at 50% 46%, rgba(255, 211, 229, 0) 36%, rgba(255, 211, 229, 0.5) 58%, rgba(255, 211, 229, 0.88) 80%, #ffd3e5 100%);
  /* the shared header and footer, in the archive's colours */
  --ink: #430a25;
  --strong: #430a25;
  --muted: #5e1336;
  --brand-ink: #430a25;
  --link-bg: rgba(255, 255, 255, 0.5);
  --link-ink: #7b1d4c;
  --focus: #b8286c;
  --foot-bg: rgba(255, 255, 255, 0.42);
  --foot-line: rgba(255, 255, 255, 0.65);
  --foot-ink: #7b1d4c;
  /* text of the archive */
  --title: #8a2257;
  --label: #7b1d4c;
  --vtitle: #6e1a44;
  --link: #9a1e5a;
  /* the sheet, the pictures, and the pills over them */
  --sheet: rgba(255, 255, 255, 0.22);
  --sheet-line: rgba(255, 255, 255, 0.45);
  --rule: rgba(255, 255, 255, 0.6);
  --rule-end: rgba(255, 255, 255, 0.1);
  --thumb-bg: rgba(255, 255, 255, 0.35);
  --stripe: rgba(255, 255, 255, 0.3);
  --ring: rgba(255, 255, 255, 0.95);
  --pill: rgba(255, 255, 255, 0.8);
  --pill-on: rgba(255, 232, 242, 0.9);
  --on-media: #7b1d4c;
  /* the panel */
  --overlay: rgba(255, 170, 205, 0.72);
  --panel: rgb(255 255 255);
  --shadow-rgb: 196 16 90;
  --spin-track: rgba(123, 29, 76, 0.15);
  /* the quiet line above Close: a paler wine than the panel's other text, still over 7:1 on white */
  --fine: #7e425e;
  /* the panel's buttons: thin rose outlines */
  --btn-bg: rgba(255, 255, 255, 0.86);
  --btn-line: rgba(123, 29, 76, 0.3);
  --btn-line-hover: rgba(123, 29, 76, 0.5);
  --btn-ink: #7b1d4c;
  --main-bg: transparent;
  --main-bg-hover: rgb(184 40 108 / 0.08);
  --main-line: #b8286c;
  --main-line-hover: #9a1e5a;
  --main-ink: #9a1e5a;
}
.wrap { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 4px 16px 24px; }
@media (min-width: 720px) { .wrap { padding: 4px 40px 32px; } }
form { margin: 0; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-f { fill: currentColor; }

/* ---- the archive: its title and the months on one faint white sheet ---- */
.sheet {
  background: var(--sheet);
  border-radius: 14px;
  padding: 14px 14px 6px;
  box-shadow: inset 0 0 0 1px var(--sheet-line);
}
@media (min-width: 720px) { .sheet { border-radius: 18px; padding: 20px 24px 10px; } }
.atitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 2px;
  font: 700 18px/1.2 var(--display);
  font-stretch: 112%;
  letter-spacing: -0.01em;
  color: var(--title);
}
@media (min-width: 720px) { .atitle { font-size: 21px; } }
.atitle small { font: 400 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
/* the month: its label, then a thin white rule that fades out to the right */
.month h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 0.14em;
  color: var(--label);
  margin: 16px 2px 12px;
}
.month h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rule), var(--rule-end) 60%, transparent);
}
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px; } }
.vcard { margin: 0; min-width: 0; }
.media { position: relative; }
.pvt { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--thumb-bg);
  cursor: pointer;
}
@supports not (aspect-ratio: 1) { .thumb, .pthumb { height: 0; padding-top: 56.25%; } }
/* no thumbnail yet: faint diagonal stripes */
.thumb.none {
  cursor: default;
  background: repeating-linear-gradient(135deg, var(--stripe) 0 10px, transparent 10px 20px), var(--thumb-bg);
}
.thumb img, .pthumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .anim { display: none; }
.pvt:checked + .thumb { box-shadow: 0 0 0 1.5px var(--ring); }
.pvt:checked + .thumb .anim { display: block; }
.pvt:focus-visible + .thumb { outline: 2px solid var(--focus); outline-offset: 2px; }
/* a small round play mark on the picture (for touch; with a mouse the preview plays on hover) */
.chip {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--pill);
  color: var(--on-media);
}
.pvt:checked + .thumb .chip { background: var(--pill-on); color: var(--link); }
/* a mouse plays the preview while it is over the thumbnail; a click does not keep it playing */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .media:hover .thumb { box-shadow: 0 0 0 1.5px var(--ring); }
  .media:hover .anim { display: block; }
  .thumb { pointer-events: none; }
  .chip { display: none; }
}
.badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pill);
  color: var(--on-media);
  font: 400 10.5px/1.6 var(--mono);
}
/* the title, and Download at its right */
.vrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 2px 0; }
.vt { font: 500 14px/1.35 var(--sans); margin: 0; color: var(--vtitle); min-width: 0; word-break: break-word; }
.dlf { flex: none; margin: 0; }
.dlt {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--link);
  font: 400 11.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dlt .ic { width: 14px; height: 14px; }
/* with a mouse the button can be smaller (fingers need 44 px) */
@media (hover: hover) and (pointer: fine) {
  .dlt { min-height: 32px; }
  .dlt:hover { color: var(--ink); }
}
.empty { margin: 18px 0 16px; text-align: center; color: var(--label); font: 400 14px/1.5 var(--sans); }

/* ---- the panel over the archive ---- */
/* no backdrop blur: under a moving background it would be drawn again on every frame */
.overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10;
}
.panel {
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  margin: 0;
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 0 0 1px rgb(var(--shadow-rgb) / 0.12), 0 24px 60px rgb(var(--shadow-rgb) / 0.28);
}
.pthumb { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; margin: 0 0 14px; background: var(--thumb-bg); }
.panel h2 { font: 500 18px/1.3 var(--sans); margin: 0 0 6px; color: var(--label); }
.panel .sub { color: var(--muted); margin: 0 0 14px; word-break: break-word; }
.panel .info { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.panel .info + .btn, .panel .fine + .btn { margin-top: 14px; }
/* the quiet line about watermarks in a ready download, just above its Close button: a size smaller and
   paler than the lines above it */
.panel .fine { font-size: 11px; line-height: 1.5; color: var(--fine); margin: 12px 0 0; }
.btn {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--btn-line);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font: 400 13px/1.6 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* the main button: a thin rose outline */
.btn.primary { background: var(--main-bg); border: 1.5px solid var(--main-line); color: var(--main-ink); font-weight: 500; }
@media (hover: hover) {
  .btn:hover { border-color: var(--btn-line-hover); }
  .btn.primary:hover { background: var(--main-bg-hover); border-color: var(--main-line-hover); }
}
.btn + .btn, form + .btn, .btn + form { margin-top: 10px; }
.err { color: var(--muted); font: 400 11px/1.5 var(--mono); margin: 16px 0 0; word-break: break-all; }
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--spin-track);
  border-top-color: var(--focus);
  border-radius: 50%;
  margin: 4px auto 14px;
  animation: uvx-spin 1s linear infinite;
}
@keyframes uvx-spin { to { transform: rotate(360deg); } }
/* nothing moves for "reduce motion": the backgrounds are still copies, and the spinner stands */
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ---- the popup over the dark home page: the agreement after a member's first login ----
   the frame's look (square, a thin light line, the heading in the mono type) and the light button of the
   dark pages (the rose one leads into the archive), on the page dimmed behind it. The text of the About
   page sits in a box of its own that scrolls; the popup is a column as tall as the screen allows, so the
   box takes the room left and the one button, Continue, stays in view */
.dark {
  --overlay: rgba(0, 0, 0, 0.66);
  --panel: #0b0b0a;
  --panel-shadow: rgba(0, 0, 0, 0.5);
  --legal-bg: rgba(255, 255, 255, 0.03);
}
.dark .panel {
  display: flex;
  flex-direction: column;
  max-width: 580px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 24px;
  border-radius: 0;
  border: 1px solid var(--frame-line);
  box-shadow: 0 24px 60px var(--panel-shadow);
}
.dark .panel h2 { flex: none; margin: 0 0 10px; color: var(--strong); font: 500 13.6px/1.35 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.dark .panel .info { flex: none; margin: 0 0 14px; color: var(--ink); font: 400 15px/1.6 var(--sans); }
.dark .panel form { flex: none; }
.dark .panel .cta { display: flex; width: 100%; min-height: 48px; }
.legal {
  flex: 1 1 auto;
  min-height: 140px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 0 18px;
  padding: 2px 18px 16px;
  border: 1px solid var(--frame-line);
  background: var(--legal-bg);
  color: var(--ink);
  font: 400 13.5px/1.62 var(--sans);
}
.legal h3 { margin: 16px 0 2px; color: var(--strong); font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.legal h4 { margin: 14px 0 0; color: var(--strong); font: 500 13.5px/1.4 var(--sans); }
.legal p, .legal ul { margin: 6px 0 0; }
.legal ul { padding-left: 20px; }
.legal li + li { margin-top: 4px; }
.legal strong { color: var(--strong); font-weight: 500; }
.legal a { color: var(--strong); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--link-line); }
.legal:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }