/* Gallery's clean theme: glass, light and dark (plan section 7, D5).
 *
 * The tokens Kit lacks, per scheme, under Kit's own selectors: light under
 * :root[data-theme="clean"], dark under [data-scheme="dark"], and the dark
 * block repeated byte for byte under prefers-color-scheme: dark for
 * data-scheme="system", as css/kit/clean-tokens.css does (tests/css.test.mjs
 * checks the two dark blocks are identical).
 *
 *   --glass          the frosted surfaces' tint
 *   --glass-strong   the same where backdrop-filter is not supported
 *   --glass-line     the hairline on glass, cards and pills
 *   --glass-blur     the frost's blur radius (the backdrop takes twice it)
 *   --backdrop-dim   the veil over the blurred backdrop photo
 *   --kind-location, --kind-species, --kind-subject, --kind-month
 *                    the four kinds' colours: dots, chips, legend, and G6's
 *                    graph nodes (read at draw time)
 *   --dex-silhouette-filter, --dex-silhouette-opacity, --dex-unseen-figure
 *                    the life list's unseen birds: a pale silhouette on a
 *                    dark figure in every scheme, as the spec's "dark
 *                    tile" asks (FEAT-gallery-4; review RGL4-4)
 *
 * The tint and the veil are set so text clears 4.5:1 over the worst photo,
 * measured from rendered pixels by tests/browser/look.test.mjs over pure
 * white, black, red, green, blue and a fine checker (docs/LOOK.md,
 * "Contrast"): the veil for --text on the backdrop, the tint for
 * --text-muted, --link and the status colours on glass over that veil.
 *
 * Motion is Kit's: duration and easing tokens, transform and opacity only,
 * the hover lift under (hover: hover), nothing moving on its own, and
 * motion.css's reduced-motion rule over all of it. */

:root[data-theme="clean"] {
  --glass: rgba(255, 255, 255, 0.74);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --glass-line: rgba(255, 255, 255, 0.72);
  --glass-blur: 24px;
  --backdrop-dim: rgba(242, 242, 247, 0.62);
  --kind-location: #0a6fd1;
  --kind-species: #1d8a4b;
  --kind-subject: #b8660a;
  --kind-month: #8250df;
  --dex-silhouette-filter: brightness(0) invert(1);
  --dex-silhouette-opacity: 0.45;
  --dex-unseen-figure: #1f2028;
}

/* Dark, chosen. Keep byte-identical to the block under the media query. */
:root[data-theme="clean"][data-scheme="dark"] {
  --glass: rgba(22, 23, 29, 0.64);
  --glass-strong: rgba(22, 23, 29, 0.92);
  --glass-line: rgba(255, 255, 255, 0.14);
  --glass-blur: 24px;
  --backdrop-dim: rgba(12, 13, 18, 0.64);
  --kind-location: #64a9ff;
  --kind-species: #5fd08a;
  --kind-subject: #f0a94a;
  --kind-month: #c297ff;
  --dex-silhouette-filter: brightness(0) invert(1);
  --dex-silhouette-opacity: 0.45;
  --dex-unseen-figure: #1f2028;
}

/* Dark, from the system while the scheme is "system" (or unset). */
@media (prefers-color-scheme: dark) {
:root[data-theme="clean"]:not([data-scheme="light"]) {
  --glass: rgba(22, 23, 29, 0.64);
  --glass-strong: rgba(22, 23, 29, 0.92);
  --glass-line: rgba(255, 255, 255, 0.14);
  --glass-blur: 24px;
  --backdrop-dim: rgba(12, 13, 18, 0.64);
  --kind-location: #64a9ff;
  --kind-species: #5fd08a;
  --kind-subject: #f0a94a;
  --kind-month: #c297ff;
  --dex-silhouette-filter: brightness(0) invert(1);
  --dex-silhouette-opacity: 0.45;
  --dex-unseen-figure: #1f2028;
}
}

/* The backdrop, blurred twice as much as the glass; the crossfade is
 * opacity only. */
[data-theme="clean"] .backdrop {
  filter: blur(calc(var(--glass-blur) * 2)) saturate(1.3);
  transition: opacity var(--duration-slow) var(--ease-standard);
}

/* Glass: the top bar, the sidebar, the info and Connected panels, the graph
 * panel (docs/BUILD.md, "The glass budget": at most four in view). */
[data-theme="clean"] .glass {
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: var(--text);
  box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
}

@supports not (backdrop-filter: blur(1px)) {
  [data-theme="clean"] .glass {
    background: var(--glass-strong);
  }
}

/* The drawer lies over the photos themselves, not the veiled backdrop, so
 * it takes the strong tint whatever the browser. */
[data-theme="clean"] body[data-drawer="open"] .sidebar {
  background: var(--glass-strong);
  box-shadow: var(--shadow-3);
  animation: wp-enter var(--duration) var(--ease-out);
}

[data-theme="clean"] body[data-drawer="open"]::before {
  animation: wp-fade-in var(--duration) var(--ease-out);
}

[data-theme="clean"] .appearance-panel:not([hidden]) {
  transform-origin: top right;
  animation: wp-pop var(--duration-fast) var(--ease-out);
}

/* Cards: rounded, a soft shadow, a hairline over the picture's edge, the
 * frost in the strip; a small lift on hover where there is hover. */
[data-theme="clean"] .card {
  transition: transform var(--duration) var(--ease-standard), box-shadow var(--duration) var(--ease-standard);
}

[data-theme="clean"] .card::after {
  box-shadow: inset 0 0 0 1px var(--glass-line);
}

[data-theme="clean"] .card:not(.card--wide, .card-hero) .caption {
  box-shadow: 0 0 0 1px var(--glass-line);
}

[data-theme="clean"] .card--wide .caption,
[data-theme="clean"] .card-hero .caption {
  border-top: 1px solid var(--glass-line);
}

[data-theme="clean"] .frost {
  opacity: 0.3;
  filter: blur(10px) saturate(1.5);
  transform: scale(1.4);
}

/* The life list's credits carry --link, which the veil does not hold to
 * 4.5:1 over the backdrop (the veil is set for --text alone), so they sit
 * on a solid --surface panel like the tiles above them, not glass (the
 * glass budget is the frame's) (FEAT-gallery-4). */
[data-theme="clean"] .dex-credits {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

@media (hover: hover) {
  [data-theme="clean"] .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-3);
  }

  [data-theme="clean"] .side-link:not([aria-current]):hover,
  [data-theme="clean"] .side-index:not([aria-current]):hover {
    background: var(--surface-alt);
    color: var(--text);
  }

  [data-theme="clean"] .chip:hover,
  [data-theme="clean"] .pager a:hover,
  [data-theme="clean"] .pager-top a:hover,
  [data-theme="clean"] .grid-pager a:hover,
  [data-theme="clean"] .back:hover,
  [data-theme="clean"] .browse-link:not([aria-expanded="true"]):hover,
  [data-theme="clean"] .appearance-toggle:not([aria-expanded="true"]):hover {
    background: var(--surface);
  }
}

[data-theme="clean"] .side-link,
[data-theme="clean"] .side-index,
[data-theme="clean"] .chip,
[data-theme="clean"] .pager a,
[data-theme="clean"] .pager-top a,
[data-theme="clean"] .grid-pager a,
[data-theme="clean"] .back,
[data-theme="clean"] .browse-link,
[data-theme="clean"] .appearance-toggle {
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

[data-theme="clean"] body .content {
  transition: opacity var(--duration) var(--ease-standard);
}