/* Reelmute — the skin.
   The accent is the app's own `positive`, #34D380 = hsl(149 64% 52%) — Theme.swift's single
   semantic colour, used for signed-in ticks and on-switches. The rest of the app is
   deliberately monochrome (Jaco, 2026-09-05), so this is the only hue it owns.
   An earlier teal (#21cbb8) was sampled from a build the app has since abandoned.

   Every decision below is a --p-* custom property with its default here, so the tweak
   panel can drive it live. Loaded AFTER the compiled stylesheet. */
:root {
  /* site vocabulary (shadcn) — the whole design system resolves through these */
  --background: 195 21% 7%;
  --foreground: 180 8% 97%;
  --card: 186 24% 11%;
  --card-foreground: 180 8% 97%;
  --popover: 190 22% 9%;
  --popover-foreground: 180 8% 97%;
  --primary: 149 64% 52%;
  --primary-foreground: 150 40% 6%;
  --secondary: 190 20% 10%;
  --secondary-foreground: 180 8% 97%;
  --muted: 190 16% 14%;
  --muted-foreground: 185 12% 66%;
  --accent: 155 30% 15%;
  --accent-foreground: 149 60% 62%;
  --destructive: 149 64% 52%;
  --destructive-foreground: 195 30% 7%;
  --border: 186 16% 19%;
  --input: 186 16% 19%;
  --ring: 149 64% 52%;
  --radius: .875rem;
  --star: 149 64% 52%;

  /* skin knobs */
  --p-glow-alpha: .85;        /* strength of the ambient glow at the fold */
  --p-glow-reach: 70%;        /* how far up the page it climbs */
  --p-glow-hue: 156;          /* the glow's own hue, independent of the accent */
  --p-grain: .05;             /* film grain — kills gradient banding */
  --p-glass-alpha: .55;       /* card fill opacity over the glow */
  --p-blur: 14px;             /* card backdrop blur */
  --p-rim-alpha: .10;         /* 1px hairline rim */
  --p-header-alpha: .72;      /* sticky header ground */
  --p-display-tracking: -.02em;
  --p-section-pad: 0px;       /* added to the cloned section rhythm */
  --p-shot-radius: 1.6rem;    /* the app captures in the hero */
  --p-shot-glow: .30;         /* accent bloom behind them */
}

body {
  background:
    radial-gradient(120% var(--p-glow-reach) at 50% 118%,
      hsl(var(--p-glow-hue) 55% 20% / var(--p-glow-alpha)) 0%,
      hsl(calc(var(--p-glow-hue) + 3) 45% 13% / calc(var(--p-glow-alpha) * .53)) 38%,
      transparent 72%),
    hsl(var(--background));
  background-attachment: fixed;
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 90;
  opacity: var(--p-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Glass surfaces: low-alpha fill + 1px hairline rim, over the glow. */
.bg-card { background-color: hsl(186 30% 16% / var(--p-glass-alpha)) !important; backdrop-filter: blur(var(--p-blur)); }
.border-border { border-color: hsl(180 30% 90% / var(--p-rim-alpha)) !important; }
header.sticky { background-color: hsl(195 24% 7% / var(--p-header-alpha)) !important; backdrop-filter: blur(calc(var(--p-blur) + 2px)); }

h1, h2, .font-sans { letter-spacing: var(--p-display-tracking); }
/* additive, so the default (0) leaves the cloned py-16/md:py-24 rhythm untouched */
main > section + section { margin-top: var(--p-section-pad); }

.hero-shot {
  /* The device body and its rim are baked into the PNG now (tools/device-frame.py),
     so the old border-radius + ring would draw a second frame around the first.
     All this adds is the shadow the device casts. */
  filter:
    drop-shadow(0 30px 60px hsl(180 70% 3% / .75))
    drop-shadow(0 0 90px hsl(var(--primary) / var(--p-shot-glow)));
}

/* "Works with" strip: the marks are brand-coloured PNGs, illegible on the dark
   ground at 20px. Flatten to white — nominative use, still each brand's mark. */
.network-mark { filter: brightness(0) invert(1); opacity: .78; }

/* The framed device is taller than the flat screenshot it replaced, so the hero
   column needs it a size down or it eats the caption and the fold. */
.relative.w-56 { width: 100%; max-width: 15rem; }
@media (min-width: 640px)  { .relative.w-56 { max-width: 16rem; } }
@media (min-width: 768px)  { .relative.w-56 { max-width: 17rem; } }
@media (min-width: 1024px) { .relative.w-56 { max-width: 19rem; } }
@media (min-width: 1280px) { .relative.w-56 { max-width: 21rem; } }