/* Written before the design system: kept in the « legacy » layer, below components.css (see tokens.css). */
@layer legacy {
/* ==========================================================================
   MAGGMALIGHT — Light preview ("Allumer la lampe")
   A product photo becomes a night scene: the lamp glows, the rest of the
   scene goes dark. js/light-preview.js sets the variables on .lp-stage and
   places the light elements (beams, halos, bulbs); one stylesheet serves
   every luminaire.
   ========================================================================== */

.lp {
  --lp-ink: #1d1d1b;
  --lp-paper: #f8f7f4;
  --lp-line: #e8e6e0;
  --lp-muted: #6b6862;
  --lp-amber: #f2ad64;
  --lp-bronze: #9a5a12;
  --lp-chip: rgb(22 19 16 / 0.72);
  --lp-chip-fg: #f8f7f4;
  --lp-focus: #f2ad64;
  display: grid;
  gap: 18px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--lp-ink);
}
.lp--stage-only { display: block; }

/* ---- Stage ------------------------------------------------------------- */
.lp-stage {
  /* set by JS — defaults keep the stage readable before the script runs */
  --cx: 50%; --cy: 50%;          /* centre of the lit field */
  --frx: 60%; --fry: 60%;        /* radii of the lit field (dimmer included) */
  --lx: 50%; --ly: 50%;          /* where the light comes from */
  --on: 0;                       /* 0 = off, 1 = on (animated) */
  --L: 0;                        /* effective light = on x intensity */
  --E: 0;                        /* the lamp itself: 0 = off, 1 = on */
  --dark: 0;                     /* darkness far from the lamp */
  --near: 0;                     /* darkness right next to the lamp (dimmed) */
  --gk: 1;                       /* glow scale with the dimmer */
  --glow: 255 168 84;            /* colour of the light (RGB) */
  --night: 22 14 7;              /* colour of the dark room (RGB) */
  --wash: 255 196 128;           /* tint the light gives to lit surfaces */
  --rix: 20%; --riy: 20%; --ray-mid: 160%; --ray-out: 260%;
  --pool: 0; --pool-x: 50%; --pool-y: 92%; --pool-rx: 26%; --pool-ry: 6%;
  --hang-l: 28%; --hang-t: -2%; --hang-w: 44%;

  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(29 29 27 / 0.06),
    0 28px 80px -28px rgb(var(--glow) / calc(var(--L) * 0.55));
  transition: box-shadow 0.4s ease;
}
.lp--stage-only .lp-stage { border-radius: inherit; box-shadow: none; }

.lp-scene {
  position: absolute;
  inset: 0;
  transition: opacity 0.45s ease, visibility 0.45s;
}
.lp[data-view="product"] .lp-scene--room,
.lp[data-view="room"] .lp-scene--product {
  opacity: 0;
  visibility: hidden;
}

.lp-stage .lp-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  transform: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.lp-scene--room svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* a photo shot on grey (not white): the stage takes its colour and the
   photo's edges fade into it, so its frame never shows */
.lp-stage--backdrop .lp-scene--product .lp-photo {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
/* the catalogue photo is shot on white: multiply makes the white disappear
   so the lamp hangs in the drawn room. (Stated with .lp-stage so a page's own
   rules for its gallery images — size, padding — never move it.) */
.lp-stage .lp-scene--room .lp-photo {
  inset: auto;
  left: var(--hang-l);
  top: var(--hang-t);
  width: var(--hang-w);
  height: auto;
  mix-blend-mode: multiply;
  filter: brightness(var(--lp-lift, 1));
}

/* « En situation » in a photo of a real room: the photo fills the stage, the
   lamp (cut out of its studio background by the script) hangs at its place,
   its chain or rod drawn up to the ceiling. */
.lp-stage .lp-scene--photo .lp-room-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  object-fit: cover;
  display: block;
  background: #e9e2d6;
}
.lp-scene--photo .lp-cut {
  position: absolute;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.18));
}
.lp-scene--photo .lp-chain {
  position: absolute;
  width: 0.42%;
  min-width: 2px;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(to bottom,
      rgb(var(--chain, 92 70 40)) 0 3px, rgb(var(--chain, 92 70 40) / 0.55) 3px 4px, rgb(var(--chain, 92 70 40)) 4px 7px);
  border-radius: 1px;
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.25);
  filter: brightness(0.82);
}
.lp-scene--photo .lp-canopy {
  position: absolute;
  width: 3.2%;
  height: 1.3%;
  transform: translate(-50%, -35%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgb(var(--chain, 92 70 40)), rgb(var(--chain, 92 70 40) / 0.85) 70%);
  filter: brightness(0.75);
}
.lp-scene--photo [hidden] { display: none; }

/* « En situation » of a pendant: its own room (the room of its photo « en situation »), the lamp off in
   daylight. Switched on: the evening falls (multiply), and the canvas — the light this lamp gives in this
   room, worked out by js/light-preview.js for the dimmer and the bulb colour — is added with « screen ».
   The drawn-room and product layers are not used there. */
.lp-stage .lp-scene--situ .lp-situ-day {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  object-fit: cover;
  display: block;
  background: #e9e2d6;
}
.lp-situ-dusk {
  position: absolute;
  inset: 0;
  background: var(--situ-dusk, rgb(87 89 97));   /* a room photographed in the evening keeps more of its own light */
  mix-blend-mode: multiply;
  opacity: var(--dk, 0);
  transition: opacity 0.6s ease;
}
.lp-situ-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: screen;
  opacity: var(--on);
  pointer-events: none;
}
.lp--situ[data-view="room"] .lp-fx,
.lp--situ[data-view="room"] .lp-lights,
.lp--situ[data-view="room"] .lp-emit,
.lp--situ[data-view="room"] .lp-offs { display: none; }

/* Brass lanterns (8 Nov 2026): their light is computed beforehand. Product view, switched on: the photo and its
   white backdrop take the night around the lantern (multiply, --bake-dusk), and the canvas adds its own glow and a
   soft light on the wall around it, no pattern, no shadow (screen). « En situation », switched on: the same room at night, the
   lantern in it, fades in over the room by day, and the canvas adds the light it gives there. The light layers
   drawn by the script (lace, glow, beams) are not used. */
.lp-bake-dusk {
  position: absolute;
  inset: 0;
  background: var(--bake-dusk, rgb(64 46 32));
  mix-blend-mode: multiply;
  opacity: var(--dk, 0);
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.lp-bake-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: screen;
  opacity: var(--on);
  pointer-events: none;
}
.lp-stage .lp-scene--photo .lp-situ-night {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  object-fit: cover;
  display: block;
  opacity: var(--dk, 0);
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.lp--bake[data-view="product"] .lp-fx,
.lp--bake[data-view="product"] .lp-lights,
.lp--bake[data-view="product"] .lp-emit,
.lp--lit[data-view="room"] .lp-fx,
.lp--lit[data-view="room"] .lp-lights,
.lp--lit[data-view="room"] .lp-emit { display: none; }

/* Parts of the photo that already look lit (a glowing filament): while the
   lamp is off they are shown desaturated, as clear unlit glass. */
.lp-offs { position: absolute; inset: 0; pointer-events: none; }
.lp-off {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  -webkit-backdrop-filter: saturate(0) brightness(0.8) contrast(1.05);
  backdrop-filter: saturate(0) brightness(0.8) contrast(1.05);
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
  opacity: calc(1 - var(--on));
}

/* ---- Light layers (order matters) --------------------------------------- */
.lp-fx,
.lp-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 1. night: everything darkens, except around the light. The stops follow a
      soft inverse-square falloff so the light fades the way it does in a room. */
.lp-dark {
  mix-blend-mode: multiply;
  background: radial-gradient(
    var(--frx) var(--fry) at var(--cx) var(--cy),
    rgb(var(--night) / var(--near)) 0%,
    rgb(var(--night) / var(--near)) 12%,
    rgb(var(--night) / calc(var(--near) + (var(--dark) - var(--near)) * 0.3)) 30%,
    rgb(var(--night) / calc(var(--near) + (var(--dark) - var(--near)) * 0.62)) 55%,
    rgb(var(--night) / calc(var(--near) + (var(--dark) - var(--near)) * 0.86)) 78%,
    rgb(var(--night) / var(--dark)) 100%
  );
}

/* 2. wash: lit surfaces take the colour of the light (the "warm yellow") */
.lp-wash {
  mix-blend-mode: multiply;
  background: radial-gradient(
    var(--frx) var(--fry) at var(--cx) var(--cy),
    rgb(var(--wash) / calc(var(--on) * 0.95)) 0%,
    rgb(var(--wash) / calc(var(--on) * 0.85)) 30%,
    rgb(var(--wash) / calc(var(--on) * 0.45)) 60%,
    rgb(var(--wash) / 0) 100%
  );
}

/* 3a. slat shadows: oak or cord slats block part of the light, so soft dark
       stripes radiate from the bulb across the lit wall. Two periods overlap
       so the pattern does not look mechanical. */
.lp-rays {
  mix-blend-mode: multiply;
  background:
    repeating-conic-gradient(
      from 2deg at var(--lx) var(--ly),
      rgb(38 24 12 / calc(0.42 * var(--on))) 0deg,
      rgb(38 24 12 / calc(0.42 * var(--on))) 3deg,
      rgb(38 24 12 / 0) 5.5deg,
      rgb(38 24 12 / 0) 9.5deg,
      rgb(38 24 12 / calc(0.42 * var(--on))) 12deg
    ),
    repeating-conic-gradient(
      from 7deg at var(--lx) var(--ly),
      rgb(38 24 12 / calc(0.21 * var(--on))) 0deg,
      rgb(38 24 12 / 0) 4deg,
      rgb(38 24 12 / 0) 13deg,
      rgb(38 24 12 / calc(0.21 * var(--on))) 17deg
    );
  /* the shadows start at the edge of the lamp (--rix/--riy: how far it
     reaches from the bulb) and fade out with the lit field */
  -webkit-mask-image: radial-gradient(
    var(--rix) var(--riy) at var(--lx) var(--ly),
    transparent 88%, #000 104%, rgb(0 0 0 / 0.55) var(--ray-mid), transparent var(--ray-out)
  );
  mask-image: radial-gradient(
    var(--rix) var(--riy) at var(--lx) var(--ly),
    transparent 88%, #000 104%, rgb(0 0 0 / 0.55) var(--ray-mid), transparent var(--ray-out)
  );
  filter: blur(1.4px);
}

/* 3b. lace: light escaping through pierced brass throws the pattern of its
       holes on the walls — the lamp's own holes (painted by the script from
       its light map), magnified from the bulb, softer as they travel. */
.lp-proj {
  mix-blend-mode: screen;
  opacity: var(--L);
  -webkit-mask-image: radial-gradient(
    var(--rix) var(--riy) at var(--lx) var(--ly),
    transparent 92%, #000 108%, rgb(0 0 0 / 0.6) var(--ray-mid), transparent var(--ray-out)
  );
  mask-image: radial-gradient(
    var(--rix) var(--riy) at var(--lx) var(--ly),
    transparent 92%, #000 108%, rgb(0 0 0 / 0.6) var(--ray-mid), transparent var(--ray-out)
  );
}
.lp-proj canvas {
  position: absolute;
  display: block;
  mix-blend-mode: screen;
}
.lp-proj canvas:nth-child(1) { transform: scale(2.1); filter: blur(calc(var(--pb, 1px) * 1.6)); opacity: 0.7; }
.lp-proj canvas:nth-child(2) { transform: scale(3.3); filter: blur(calc(var(--pb, 1px) * 3)); opacity: 0.5; }
.lp-proj canvas:nth-child(3) { transform: scale(5); filter: blur(calc(var(--pb, 1px) * 5)); opacity: 0.34; }
/* in a room photo the walls and the ceiling are farther and not facing the
   lamp: the pattern is fainter there, so it never reads as a ghost of the lamp */
.lp[data-view="room"] .lp-proj { opacity: calc(var(--L) * 0.5); }

/* 4. beams: cones of light (wall up/down lights, spots, tube pendants).
      Each one is a box whose bottom-centre sits on the light, turned to the
      beam's direction; a conic mask cuts the cone with soft edges. */
.lp-beam {
  position: absolute;
  transform-origin: 50% 100%;
  transform: rotate(var(--a, 0deg));
  mix-blend-mode: screen;
  opacity: var(--L);
  background: radial-gradient(
    50% 100% at 50% 100%,
    rgb(255 248 236 / 0.85) 0%,
    rgb(var(--glow) / 0.62) 14%,
    rgb(var(--glow) / 0.3) 45%,
    rgb(var(--glow) / 0.1) 75%,
    rgb(var(--glow) / 0) 100%
  );
  /* the cone, and (--hide) the part still inside the lamp when its source is hidden */
  -webkit-mask-image: conic-gradient(
      from calc(var(--s, 24deg) * -1) at 50% 100%,
      transparent 0deg, #000 calc(var(--s, 24deg) * 0.55), #000 calc(var(--s, 24deg) * 1.45),
      transparent calc(var(--s, 24deg) * 2), transparent 360deg
    ),
    radial-gradient(50% 100% at 50% 100%, transparent var(--hide, 0%), #000 calc(var(--hide, 0%) + var(--hide-soft, 0%)));
  -webkit-mask-composite: source-in;
  mask-image: conic-gradient(
      from calc(var(--s, 24deg) * -1) at 50% 100%,
      transparent 0deg, #000 calc(var(--s, 24deg) * 0.55), #000 calc(var(--s, 24deg) * 1.45),
      transparent calc(var(--s, 24deg) * 2), transparent 360deg
    ),
    radial-gradient(50% 100% at 50% 100%, transparent var(--hide, 0%), #000 calc(var(--hide, 0%) + var(--hide-soft, 0%)));
  mask-composite: intersect;
}

/* 5. pool: the light that lands on the table / floor under a pendant */
.lp-pool {
  mix-blend-mode: screen;
  background: radial-gradient(
    var(--pool-rx) var(--pool-ry) at var(--pool-x) var(--pool-y),
    rgb(var(--glow) / calc(var(--pool) * var(--L))) 0%,
    rgb(var(--glow) / calc(var(--pool) * var(--L) * 0.4)) 55%,
    rgb(var(--glow) / 0) 100%
  );
}

/* 6. the light itself: the light map painted by js/light-preview.js — the
      source burning near white with coloured edges, then its halo in two
      sizes. Each canvas is black where there is no light, and « screen »
      makes black disappear. */
.lp-emit {
  position: absolute;
  pointer-events: none;
}
.lp-emit canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: screen;
}
.lp-glow { opacity: var(--E); }
.lp-bloom--near {
  opacity: calc(var(--E) * 0.8);
  filter: blur(var(--bloom-near, 6px));
}
.lp-bloom--wide {
  opacity: calc(var(--E) * 0.6);
  filter: blur(var(--bloom-wide, 24px));
}

/* ---- Controls on the stage ---------------------------------------------- */
.lp-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 14px;
}
.lp-ui > * { pointer-events: auto; }

.lp-tag {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--lp-chip);
  color: var(--lp-chip-fg);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.lp-views {
  position: absolute;
  right: 14px;
  top: 14px;
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--lp-chip);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lp-view-btn {
  appearance: none;
  border: 0;
  margin: 0;
  min-height: 32px;
  padding: 7px 13px;
  border-radius: 999px;
  background: transparent;
  color: rgb(248 247 244 / 0.82);
  font: 500 0.74rem/1 'Poppins', system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.lp-view-btn[aria-pressed="true"] {
  background: #f8f7f4;
  color: #1d1d1b;
}

/* the wall switch */
.lp-switch {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 18px 7px 7px;
  border: 0;
  border-radius: 16px;
  background: var(--lp-chip);
  color: var(--lp-chip-fg);
  font: 600 0.86rem/1 'Poppins', system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lp-plate {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: linear-gradient(145deg, #f4f2ee, #d9d5ce);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6), 0 2px 6px rgb(0 0 0 / 0.35);
  display: grid;
  place-items: center;
  perspective: 80px;
}
.lp-rocker {
  width: 26px;
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fbfaf8 0%, #e6e2db 100%);
  box-shadow: 0 3px 0 #c9c3b9, 0 4px 6px rgb(0 0 0 / 0.25);
  transform: rotateX(16deg);
  transform-origin: 50% 50%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lp-led {
  position: absolute;
  bottom: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b9b3aa;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.lp-switch[aria-pressed="true"] .lp-rocker {
  transform: rotateX(-16deg);
  box-shadow: 0 -3px 0 #c9c3b9, 0 -1px 6px rgb(0 0 0 / 0.2);
}
.lp-switch[aria-pressed="true"] .lp-led {
  background: var(--lp-amber);
  box-shadow: 0 0 6px 1px rgb(242 173 100 / 0.9);
}

.lp-view-btn:focus-visible,
.lp-switch:focus-visible,
.lp-controls input:focus-visible + label,
.lp-range:focus-visible {
  outline: 2px solid var(--lp-focus);
  outline-offset: 3px;
}
.lp-controls input:focus-visible + label { outline-color: var(--lp-ink); }

/* ---- Dimmer and colour ---------------------------------------------------- */
.lp-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 18px 28px;
  align-items: start;
}
.lp-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.lp-field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.lp-label,
.lp-field legend {
  margin: 0;
  padding: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-muted);
}
.lp-field legend,
.lp-field > .lp-label { margin-bottom: 10px; }
.lp-out {
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lp-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --fill: 85%;
}
.lp-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3a2d20 0%, rgb(var(--lp-track, 242 173 100)) var(--fill), var(--lp-line) var(--fill));
}
.lp-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3a2d20 0%, rgb(var(--lp-track, 242 173 100)) var(--fill), var(--lp-line) var(--fill));
}
.lp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--lp-ink);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
}
.lp-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--lp-ink);
}
.lp-hint {
  margin: 8px 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--lp-muted);
}
.lp-hint a { color: var(--lp-bronze); font-weight: 600; }

.lp-cct {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 8px;
}
/* five bulb colours (2700 → 6000 K): the chooser takes the full width,
   under the dimmer */
.lp-controls--stack { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lp-field--wide .lp-cct { gap: 6px; }
.lp-field--wide .lp-cct label { padding: 10px 8px 9px; }
.lp-field--wide .lp-cct label span { line-height: 1.25; text-wrap: balance; }
.lp-cct input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lp-cct label {
  display: grid;
  gap: 3px;
  min-height: 44px;
  padding: 10px 10px 9px;
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.lp-cct label b,
.lp-fixed {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lp-fixed { margin: 0; }
.lp-cct label b::before,
.lp-fixed i {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(var(--sw));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
.lp-cct label span {
  font-size: 0.72rem;
  color: var(--lp-muted);
}
.lp-cct input:checked + label {
  border-color: var(--lp-ink);
  box-shadow: inset 0 0 0 1px var(--lp-ink);
}
.lp-mood {
  margin: 10px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--lp-muted);
  min-height: 2.4em;
}
.lp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .lp-controls { grid-template-columns: minmax(0, 1fr); }
  /* on a phone the five colours stay on one row: dot above the value */
  .lp-field--wide .lp-cct label { justify-items: center; text-align: center; padding: 9px 2px 8px; min-height: 52px; }
  .lp-field--wide .lp-cct label b { flex-direction: column; gap: 5px; font-size: 0.76rem; }
  .lp-field--wide .lp-cct label span { display: none; }
  .lp-switch { padding-right: 14px; font-size: 0.8rem; }
  .lp-plate { width: 40px; height: 40px; }
  .lp-rocker { width: 22px; height: 26px; }
  .lp-view-btn { padding: 7px 10px; }
  .lp-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-scene, .lp-rocker, .lp-led, .lp-stage, .lp-cct label, .lp-situ-dusk, .lp-bake-dusk, .lp-situ-night { transition: none; }
}
}