/* Forest backdrop + global polish layer (Step 11) */

body {
  background-color: var(--sidebar-bg);
  /* 15 Sep 2026 — the style builder sets --backdrop-image per project (a blob url of the
     project's own photo, or none for a plain colour); the forest stays the default. */
  background-image: var(--backdrop-image, url("assets/forest-bg.png"));
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ---- where a PROJECT'S backdrop photo sits (moved here from themes.css, 16 Sep 2026) --------
   Hugo: "The image is now there but it doesnt seem to well placed."
   The rule above anchors the body photo `center bottom`, which was chosen for the forest
   picture. A project's own backdrop is a different shape, and with `cover` on a wide viewport
   the bottom anchor throws away the top of the image - so the panel was sitting over the dark
   FLOOR of the photo while the lit city was cropped off the top. A project photo is anchored at
   the centre; the forest keeps its bottom anchor. App.jsx sets the class. ---- */
/* 18 Sep 2026 - the anchor is a token (tokens.css --sk-photo-position, default center center, the
   value this rule always had): a skin may set where its photo sits (Athenian Marble: the top, so its
   temple stands behind the title). Position only - the picture itself is never changed. */
body.has-backdrop-image { background-position: var(--sk-photo-position); background-size: var(--sk-photo-size); }
/* 24 Sep 2026 - the phone has no rail, so a skin's size that leaves room for the rail (the night-blue slate skin:
   calc(100% - var(--sidebar-w)) auto) would leave a gap there: phones always fill the screen (cover, the value every
   other skin already has, so they repaint nothing). */
body.has-backdrop-image[data-ui-tier="s"] { background-size: cover; }
/* 24 Sep 2026 - Hugo, rail collapsed: "Look now when it's collapsed how it look". A photo sized to leave room for the
   OPEN rail left a dark slab beside the COLLAPSED rail. --rail-now is the rail's width right now (open or collapsed); a
   skin that sizes its photo around the rail reads it, so the photo always starts at the rail's edge. Paint only. */
body { --rail-now: var(--sidebar-w); }
body.sb-collapsed { --rail-now: var(--sidebar-w-collapsed); }

/* v05t — Hugo: restored the green-tint veil over the forest backdrop,
   but DROPPED the `backdrop-filter: blur(2px)`. Keeps the unifying
   green tone on top of the photo without softening the photo itself,
   so the forest detail stays crisp. The dark-rectangle-behind-the-
   right-column issue this veil used to cause was a side-effect of
   `.glass` shadow compounding on the stacked cards, fixed separately
   in styles/right-column.css. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--shade-5) 55%, transparent) 0%, color-mix(in srgb, var(--sidebar-bg) 30%, transparent) 28%, color-mix(in srgb, var(--sidebar-bg) 30%, transparent) 100%),
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--cream-10) 8%, transparent), color-mix(in srgb, var(--sidebar-bg) 50%, transparent) 75%),
    color-mix(in srgb, var(--sidebar-bg) 30%, transparent);
}

/* Per-project photo fade. A paint layer between the background photo and the app; it never filters or softens the
   source image. 0% leaves the photo untouched.
   24 Sep 2026 - Hugo: "the fade setting slider looks like it's darkening the image instead of having the colour fade on
   top of it ... it's garbage". It WAS one flat layer of the page colour over the whole photo, so every step just dimmed
   the picture. It is now a colour FADE: the top of the photo (the scene behind the title) stays clear, and the skin's
   page colour fades in going down the page, reaching the slider's strength by the middle and holding it to the bottom. */
body.has-backdrop-image::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--bg) calc(var(--backdrop-fade-pct, 0%) * 0.25), transparent) 14%,
    color-mix(in srgb, var(--bg) calc(var(--backdrop-fade-pct, 0%) * 0.7), transparent) 32%,
    color-mix(in srgb, var(--bg) var(--backdrop-fade-pct, 0%), transparent) 55%,
    color-mix(in srgb, var(--bg) var(--backdrop-fade-pct, 0%), transparent) 100%);
}

/* lift app above the veil */
#app { position: relative; z-index: 1; }

/* Glass card — promoted from hero.css to a global treatment */
.glass {
  position: relative;
  background: color-mix(in srgb, var(--card-bg-solid) 92%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: none;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
  color: var(--ink);
  overflow: hidden;
}

.glass-dark {
  position: relative;
  background: color-mix(in srgb, var(--shade-2) 10%, transparent);
  backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(1.20);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(1.20);
  border: none;
  border-radius: var(--r-lg);
  box-shadow:
    /* clean top-edge translucent highlight — the catch-light strip */
    inset 0 1.5px 0 color-mix(in srgb, var(--hi) 34%, transparent),
    /* subtle left-edge highlight */
    inset 1.5px 0 0 color-mix(in srgb, var(--hi-2) 16%, transparent),
    /* gentle bottom + right shadows */
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    inset -1px 0 0 rgba(0, 0, 0, 0.10),
    /* outer drop shadows for depth */
    0 2px 6px rgba(0, 0, 0, 0.18),
    0 14px 28px rgba(0, 0, 0, 0.22),
    0 24px 56px rgba(0, 0, 0, 0.34);
  color: var(--ink-on-dark);
  overflow: hidden;
  text-shadow: 0 1px 1px var(--panel-text-shadow-color);
}
.glass-dark > * { z-index: 1; position: relative; }

/* gold-foil ring overlay — bright on top-left edge, fades into transparency
   on the bottom-right so the panel "blends" into glass instead of being
   outlined. Single hairline ring (1px). */
.glass::before,
.glass-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hi-3) 85%, transparent) 0%,
    color-mix(in srgb, var(--foil) 42%, transparent) 22%,
    color-mix(in srgb, var(--foil) 10%, transparent) 45%,
    transparent 65%,
    transparent 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.95;
}
.glass-dark::before {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hi-3) 70%, transparent) 0%,
    color-mix(in srgb, var(--foil) 32%, transparent) 22%,
    color-mix(in srgb, var(--foil) 8%, transparent) 45%,
    transparent 65%,
    transparent 100%);
}
.glass > *,
.glass-dark > * { position: relative; z-index: 1; }

/* 15 Sep 2026 — the style builder's own veil over the backdrop (a flat tint at the strength
   chosen). Only while the project has one: the class is set by App.jsx, so a preset's own veil
   (themes.css) stays in charge otherwise. Specific enough to beat body[data-theme="…"]::before. */
html body.has-style-veil::before { background: var(--backdrop-veil); }