/* Plugin UI "finish" — rounded corners, a touch more saturation, and a lit
   edge: a long soft cast shadow on light, a faint warm glow on dark. Lab bar (?lab=1) groups: Shot (soft / bleed / flat) and Shot sat.
   `flat` restores the previous hairline-radius look; nothing is deleted from
   tokens.css, this layer only overrides it.

   The reference look (limoseries.com): a wide, low-contrast shadow that falls
   down and slightly left (light from the top right) in two long layers over a
   tight contact shadow, with the panel running off the edge of the screen so
   it reads as an object bigger than the page. `bleed` does the second part.

   Static: no motion added. */
:root {
  --fin-r: var(--r-card);
  --fin-sat: 1.2;
  /* Strength knobs, driven by the lab bar sliders (Dark glow / Light shadow).
     glow: 0 = none, 1 = the first (too strong) version; cast: .5 = the first more-pronounced
     light shadow, 1 = twice that. */
  --fin-glow: .5;
  --fin-cast: .3;
  /* reach: how far the shadow/glow travels (offset, blur and spread together).
     .5 = the first distances, 1 = twice as far, 0 = hugging the panel. */
  --fin-dist: .75;
  --fin-k: calc(var(--fin-dist) * 2);
  /* dark: glow in a faint warm tone with a trace of the plugin's colour (falls
     back to the accent where a surface doesn't define --p, e.g. the dashboard) */
  --fin-c: var(--p, var(--accent, #fff));
  /* 2026-10-16 refinement pass: no glow, no cast shadow; a hairline edge only */
  --fin-shadow: 0 0 0 1px var(--rule);
}
[data-theme="light"] {
  --fin-shadow: 0 0 0 1px var(--rule);
}
html[data-shotsat="100"] { --fin-sat: 1; }
html[data-shotsat="110"] { --fin-sat: 1.1; }
html[data-shotsat="120"] { --fin-sat: 1.2; }
html[data-shotsat="135"] { --fin-sat: 1.35; }

html:not([data-shot="flat"]) :is(.p-hero-shot, .pv-f-media .p-shot, .pv-f-lead .p-shot, .pv-f-item .p-shot, .dash-card-shot) {
  border-radius: var(--fin-r);
  box-shadow: var(--fin-shadow);
  filter: saturate(var(--fin-sat));
}
/* small thumbnails: radius only, a shadow would be noise at that size */
html:not([data-shot="flat"]) .bundle-shot { border-radius: calc(var(--fin-r) / 3); filter: saturate(var(--fin-sat)); }

/* bleed — product hero only, desktop: the panel runs past the right edge of
   the sheet and is cropped by it, so only part of the UI shows. */
@media (min-width: 64em) {
  html[data-shot="bleed"] .p-hero { overflow-x: clip; overflow-y: visible; padding-right: 0; grid-template-columns: .8fr 1.6fr; }
  html[data-shot="bleed"] .p-hero-media { border-bottom: 0; padding-bottom: 0; }
  html[data-shot="bleed"] .p-hero-shot { width: 118%; max-width: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
}