/* The look of a collection picture (VISUALS.md), shared by the site and the app. Every
   colour is a custom property: a host themes it by setting them, never by forking this
   file. A picture is an <svg class="cv" data-medium="…">; its done marks carry data-done. */

.cv {
  --cv-accent: #6a8f00;
  --cv-base-fill: #ecebe7;
  --cv-base-line: #d2d0ca;
  --cv-outline-fill: #e0ded8;
  --cv-outline-line: #9a978f;
  --cv-mark: #cfccc4;
  --cv-mark-line: #ffffff;
  --cv-ring: #77736a;
  --cv-ring-fill: #ffffff;
  --cv-label: #77736a;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;            /* clip to the viewBox: a cropped picture carries scenery past its edges */
}
@media (prefers-color-scheme: dark) {
  .cv {
    --cv-accent: #c6f432;
    --cv-base-fill: #24242b;
    --cv-base-line: #3a3a44;
    --cv-outline-fill: #2e2e37;
    --cv-outline-line: #6a6a78;
    --cv-mark: #3a3a46;
    --cv-mark-line: #0b0b0e;
    --cv-ring: #9a9aa8;
    --cv-ring-fill: #0b0b0e;
    --cv-label: #8a8a96;
  }
}

/* Scenery: never fills in. */
.cv .base, .cv .base path { fill: var(--cv-base-fill); stroke: var(--cv-base-line); stroke-width: .7; vector-effect: non-scaling-stroke; }
.cv .base path.outline { fill: var(--cv-outline-fill); stroke: var(--cv-outline-line); }
.cv path.base, .cv line.base { fill: none; }
.cv .label { fill: var(--cv-label); stroke: none; }
.cv [data-member] { cursor: pointer; }

/* shapes: regions fill, pins are rings that fill. */
.cv[data-medium=shapes] [data-member] { fill: var(--cv-mark); stroke: var(--cv-mark-line); stroke-width: .7; vector-effect: non-scaling-stroke; transition: fill .3s; }
.cv[data-medium=shapes] [data-member][data-done] { fill: var(--cv-accent); }
.cv[data-medium=shapes] circle[data-member] { fill: var(--cv-ring-fill); stroke: var(--cv-ring); stroke-width: 1.5; }
.cv[data-medium=shapes] circle[data-member][data-done] { fill: var(--cv-accent); stroke: var(--cv-accent); }

/* lines: faint strokes; a done stroke is solid accent (marks carry pathLength="1"). */
.cv[data-medium=lines] [data-member] { fill: none; stroke: var(--cv-mark); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.cv[data-medium=lines] [data-member][data-done] { stroke: var(--cv-accent); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* image: the base greyscale, the colour copy clipped to done marks; marks are invisible hit areas. */
.cv .cv-grey { filter: grayscale(1) opacity(.55); }
.cv[data-medium=image] [data-member] { fill: transparent; stroke: none; }

/* tiles: each member's picture, a silhouette until done. */
.cv[data-medium=tiles] image[data-member] { filter: brightness(0) opacity(.35); transition: filter .4s; }
.cv[data-medium=tiles] image[data-member][data-done] { filter: none; }

/* Marks done since the picture was drawn arrive with a little motion. */
@media (prefers-reduced-motion: no-preference) {
  .cv[data-medium=lines] .cv-new { animation: cv-draw 1s ease-out; }
  .cv[data-medium=shapes] .cv-new, .cv[data-medium=tiles] .cv-new { animation: cv-pop .5s ease-out; transform-box: fill-box; transform-origin: center; }
  @keyframes cv-draw { from { stroke-dashoffset: 1; } }
  @keyframes cv-pop { 50% { transform: scale(1.25); } }
}