/* Laserglow site: the cookie banner. consent.js builds it; this is how it looks (Google tag check
   T6, 2026-10-20; fix round 1 the same day).

   ONE FILE FOR EVERY KIND OF PAGE
   -------------------------------
   It loads on the shell pages (their LG:HEAD), on the carried-over pages (their LG:HEAD, refilled
   from the shell) and on the two tools that are not shell pages, the PULSE Project Builder and the
   Safety Island Self-Assessment (build_devwww.py stamps it in). The tools do not load base.css,
   and the carried-over pages also load the old /assets/css/site.css (which sets p, a and h2), so
   this file carries its own tokens, scoped to #lg-consent and the tools' foot strip, and sets
   every property it relies on.

   WHERE THE VALUES COME FROM (fix round 1: the Signal System wins, constraint 27)
   --------------------------------------------------------------------------------
   Every value is the Signal System's (design/laserglow-signal-system.html, Reference > Tokens and
   the components), its name beside it. The card is the Signal System's card: --r-lg, --shadow. The
   buttons are its outlined button: --field-h 46px, --r-md 12px, --field-border 1.5px, Display 700
   .93rem, 0 21px. The switch is its .switch: a 46 x 26 track, a 20px knob. The focus ring is its
   :focus-visible: --field-ring 3px, offset 2px. The site shell's own values (base.css .btn-line and
   :focus-visible, jordan.css's panel radius and shadow) differ, and the PM flags them to Gui.

   CONTRAST (CLAUDE.md 29), where a colour departs from the component's default
   ---------------------------------------------------------------------------
   The card is off-white (--s-100) edged in --rule, 3.26:1 against a white page. Inside the card a
   control edge takes --c-mid, 5.27:1, because --rule on --s-100 is only 2.86:1 (the same rule the
   Self-Assessment's app.css states). In the dark theme a control edge takes --c-lo, 3.32:1 (--rule
   there is 2.94:1). The focus ring takes --accent-ink in the light theme, 4.61:1 on the card, because
   the ring's --accent measures 3.10:1 there, a borderline value; the dark theme keeps --accent,
   4.66:1. Body text is --c-mid, 5.27:1 light and 6.28:1 dark. No button is filled, so "Accept all"
   never outweighs "Reject all". */

#lg-consent,
.lgc-foot {
  /* light: :root[data-theme="light"] */
  --lgc-card: #eff0f2;       /* --s-100: the card, off-white on the white page */
  --lgc-field: #ffffff;      /* --s-0: a button's face */
  --lgc-hover: #eff0f2;      /* --s-100: .btn.out:hover */
  --lgc-track: #e3e5e8;      /* --s-200: a switch that is off */
  --lgc-hi: #0c0d0f;         /* --c-hi */
  --lgc-mid: #5f636d;        /* --c-mid */
  --lgc-frame: #858fa0;      /* --rule: the card's own edge */
  --lgc-edge: #5f636d;       /* --c-mid: a control edge inside the card */
  --lgc-seam: #e3e5e8;       /* --border: the hairline between two rows, decorative */
  --lgc-fill: #e02a32;       /* --red-600 (base.css calls it --accent-fill): a switch that is on; white on it is 4.62:1 */
  --lgc-knob: #ffffff;       /* the white the Signal System sets on a filled accent (.btn color:#fff) */
  --lgc-ring: #cc2d34;       /* --accent-ink: the focus ring, light */
  --lgc-cue: rgba(0, 0, 0, .16);   /* the scroll cue's shadow */
  --lgc-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 30px -16px rgba(0, 0, 0, .15);   /* --shadow */
  --lgc-display: "Wix Madefor Display", system-ui, sans-serif;
  --lgc-text: "Wix Madefor Text", system-ui, sans-serif;
  --lgc-ease: cubic-bezier(.2, .6, .2, 1);
  --lgc-pad-x: 28px;
  --lgc-pad-b: 28px
}

html[data-theme="dark"] #lg-consent,
html[data-theme="dark"] .lgc-foot,
html[data-lgc-scheme="dark"] #lg-consent,
html[data-lgc-scheme="dark"] .lgc-foot {
  /* dark: :root[data-theme="dark"]; data-lgc-scheme is a tool that is dark by its own CSS */
  --lgc-card: #1d1f25;       /* --s-100 */
  --lgc-field: #16171c;      /* --s-0 */
  --lgc-hover: #1d1f25;      /* --s-100 */
  --lgc-track: #292c34;      /* --s-200 */
  --lgc-hi: #f2f3f6;         /* --c-hi */
  --lgc-mid: #9aa0ad;        /* --c-mid */
  --lgc-frame: #616877;      /* --rule */
  --lgc-edge: #6a7080;       /* --c-lo: 3.32:1 on the card */
  --lgc-seam: #262931;       /* --border */
  --lgc-ring: #ff3a42;       /* --accent: the focus ring, dark, 4.66:1 on the card */
  --lgc-cue: rgba(0, 0, 0, .6);
  --lgc-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 38px -18px rgba(0, 0, 0, .72)   /* --shadow, dark */
}

/* the card: fixed at the foot, over the page and blocking nothing (no overlay). Under the header
   (90), the mobile drawer (89) and Jordan (88, 89): each of those is opened on purpose. */
#lg-consent {
  position: fixed;
  z-index: 87;
  left: 24px;
  bottom: 24px;
  width: min(600px, calc(100vw - 48px));
  /* never taller than the window below the header (base.css --hdr-h; the tools' bars are lower),
     so at 200 % text the title is not hidden under it: the card scrolls instead */
  max-height: calc(100vh - var(--hdr-h, 72px) - 48px);
  max-height: calc(100dvh - var(--hdr-h, 72px) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 26px var(--lgc-pad-x) var(--lgc-pad-b);
  background: var(--lgc-card);
  color: var(--lgc-hi);
  border: 1px solid var(--lgc-frame);
  border-radius: 16px;       /* --r-lg: cards and panels */
  box-shadow: var(--lgc-shadow);
  font-family: var(--lgc-text);
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  /* it rises into place each time it opens. Never an opacity fade: a tab in the background, or a
     paused animation clock, would hold a fade at its first frame and leave an invisible banner.
     A held slide is still a readable banner, 16px low. */
  animation: lgc-rise .28s var(--lgc-ease)
}

@keyframes lgc-rise {
  from {
    transform: translateY(16px)
  }
}

#lg-consent[hidden],
#lg-consent [hidden] {
  display: none !important
}

#lg-consent *,
#lg-consent *::before,
#lg-consent *::after {
  box-sizing: border-box
}

/* WHEN THE CARD HAS TO SCROLL (large text on a small screen; fix round 1, beta B02, and the
   production port's beta B02, 2026-10-23). The row of buttons stays in view at the card's foot,
   so the three choices are always on screen together, at equal weight, and the words scroll above
   them. A card that fits never scrolls, so nothing moves there. consent.js sets lgc-more while
   there is more below the visible part: then a shadow above the row says the words go on, and the
   row's card-coloured face, carried down over the card's bottom padding, keeps scrolled words from
   showing beneath the buttons. Both go once the end is reached. (Before 2026-10-23 the cue sat on
   the card's bottom edge and the last button could sit half under it.) */
#lg-consent .lgc-acts {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--lgc-card)
}

#lg-consent.lgc-more .lgc-acts {
  box-shadow: 0 var(--lgc-pad-b) 0 var(--lgc-card)
}

#lg-consent.lgc-more .lgc-acts::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--lgc-pad-x));
  right: calc(-1 * var(--lgc-pad-x));
  bottom: 100%;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--lgc-cue));
  pointer-events: none
}

/* ------------------------------------------------------------ the words */
#lg-consent .lgc-h {
  display: block;
  margin: 0;
  padding: 0;
  max-width: none;
  font-family: var(--lgc-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--lgc-hi);
  text-transform: none;
  text-wrap: balance
}

/* a heading takes focus only so a screen reader announces the view; it is not a control */
#lg-consent .lgc-h:focus {
  outline: 0
}

#lg-consent .lgc-p {
  margin: 10px 0 0;
  padding: 0;
  max-width: none;
  font-family: var(--lgc-text);
  font-weight: 400;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--lgc-mid)
}

/* the text link, the way the footer sets one: the ink colour, a red underline. Below the buttons
   since fix round 1 (beta B01). */
#lg-consent .lgc-link {
  display: inline-block;
  margin: 16px 0 0;
  padding: 0 0 2px;
  font-family: var(--lgc-display);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.3;
  color: var(--lgc-hi);
  text-decoration: none;
  border-bottom: 2px solid var(--lgc-fill);
  background: none
}

#lg-consent .lgc-link:hover {
  border-bottom-color: var(--lgc-hi)
}

/* ----------------------------------------------------------- the buttons */
/* A row of buttons is either all side by side, at equal widths, or all stacked at full width;
   never two and one. The switch-over is measured in em, so it follows the text size: the three of
   either view stack once the card is narrower than 30em of button type (every phone, and any width
   with large text). */
#lg-consent .lgc-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0
}

#lg-consent .lgc-acts > .lgc-btn {
  flex: 1 1 calc((30em - 100%) * 999);
  min-width: 0
}

/* The Signal System's outlined button (.btn.out). min-height rather than height, so large text
   grows the button instead of clipping it. */
#lg-consent .lgc-btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;          /* --field-h */
  height: auto;
  margin: 0;
  padding: 4px 21px;
  border: 1.5px solid var(--lgc-edge);   /* --field-border */
  border-radius: 12px;       /* --r-md */
  background: var(--lgc-field);
  color: var(--lgc-hi);
  font-family: var(--lgc-display);
  font-weight: 700;
  font-size: .93rem;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  white-space: normal;
  box-shadow: none;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s
}

#lg-consent .lgc-btn:hover {
  background: var(--lgc-hover);
  color: var(--lgc-hi)
}

/* the Signal System's :focus-visible: --field-ring, offset 2px */
#lg-consent .lgc-btn:focus-visible,
#lg-consent .lgc-link:focus-visible,
.lgc-foot .lgc-foot-btn:focus-visible {
  outline: 3px solid var(--lgc-ring);
  outline-offset: 2px
}

/* ------------------------------------------------------------- the rows */
#lg-consent .lgc-rows {
  list-style: none;
  margin: 12px 0 0;
  padding: 0
}

#lg-consent .lgc-row {
  display: block;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lgc-seam)
}

#lg-consent .lgc-row:first-child {
  border-top: 0
}

/* name and words on the left, the switch or its state on the right; the whole row is the
   switch's label, so a tap anywhere on it toggles */
#lg-consent .lgc-lab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  min-width: 0;
  margin: 0;
  padding: 14px 0;
  font: inherit;
  color: inherit;
  cursor: pointer
}

#lg-consent .lgc-lab.lgc-fixed {
  cursor: default
}

/* 14em of text before the switch or its state moves under it: that only happens with large
   text, where a narrow column would leave a word alone on the last line */
#lg-consent .lgc-rt {
  display: block;
  flex: 1 1 14em;
  min-width: 0
}

#lg-consent .lgc-name {
  display: block;
  font-family: var(--lgc-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--lgc-hi)
}

#lg-consent .lgc-desc {
  display: block;
  margin: 3px 0 0;
  font-family: var(--lgc-text);
  font-weight: 400;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--lgc-mid)
}

#lg-consent .lgc-who {
  display: block;
  margin: 4px 0 0;
  font-family: var(--lgc-text);
  font-weight: 400;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--lgc-mid)
}

#lg-consent .lgc-state {
  flex: none;
  font-family: var(--lgc-display);
  font-weight: 700;
  font-size: .86rem;
  line-height: 1.3;
  color: var(--lgc-hi);
  white-space: nowrap
}

/* the switch: the Signal System's .switch, with the control edge it needs on an off-white card */
#lg-consent .lgc-sw {
  position: relative;
  display: block;
  flex: none;
  width: 46px;
  height: 26px
}

#lg-consent .lgc-sw input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer
}

#lg-consent .lgc-tr {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 999px;      /* --r-full */
  background: var(--lgc-track);
  box-shadow: inset 0 0 0 1.5px var(--lgc-edge);
  transition: background .2s, box-shadow .2s
}

#lg-consent .lgc-tr::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lgc-knob);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .2s var(--lgc-ease)
}

#lg-consent .lgc-sw input:checked + .lgc-tr {
  background: var(--lgc-fill);
  box-shadow: inset 0 0 0 1.5px var(--lgc-fill)
}

#lg-consent .lgc-sw input:checked + .lgc-tr::after {
  transform: translateX(20px)
}

/* the same ring as every other control (the Signal System's :focus-visible); its .switch draws a
   wash ring instead, which does not clear 3:1 */
#lg-consent .lgc-sw input:focus-visible + .lgc-tr {
  outline: 3px solid var(--lgc-ring);
  outline-offset: 2px
}

/* ----------------------------------------------------------- the widths */
/* A phone: a sheet across the foot of the screen, the three buttons stacked full width. */
@media (max-width: 760px) {
  #lg-consent {
    --lgc-pad-x: 20px;
    --lgc-pad-b: calc(20px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: calc(100vh - var(--hdr-h, 72px) - 16px);
    max-height: calc(100dvh - var(--hdr-h, 72px) - 16px);
    padding: 20px var(--lgc-pad-x) var(--lgc-pad-b);
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0
  }
}

@media (max-width: 560px) {
  #lg-consent .lgc-acts {
    gap: 8px;
    margin-top: 16px
  }
}

@media (prefers-reduced-motion: reduce) {
  #lg-consent,
  #lg-consent *,
  #lg-consent *::after {
    transition: none !important
  }

  #lg-consent {
    animation: none
  }
}

@media print {
  #lg-consent,
  .lgc-foot {
    display: none !important
  }
}

/* Jordan's launcher rises above the card where the two would meet (consent.js sets the class and
   the height). On a phone the launcher is not shown, so nothing moves there. */
html.lgc-lift .jb-launch {
  bottom: calc(var(--lgc-h, 0px) + 20px)
}

/* "Cookie Settings" in the footer: a button set like the links beside it. It ships hidden and
   consent.js shows it, so with JavaScript off it is not there to do nothing. */
.ft-legal [data-lg-consent-open] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer
}

[data-lg-consent-open][hidden],
.lgc-foot[hidden] {
  display: none !important
}

/* ------------------------------------------------- the tools' foot strip (fix round 1, C02) */
/* The PULSE Project Builder and the Self-Assessment fill the window and have no site footer. A
   slim strip at the foot holds "Cookie Settings", and the tool's #app ends where the strip
   begins, so the strip covers none of the tool's own controls. consent.js shows it and sets
   lgc-has-foot; with JavaScript off neither happens. The tools' loaders, tips, toasts and dialogs
   sit above it. */
html.lgc-has-foot {
  --lgc-foot-h: 38px
}

html.lgc-has-foot #app {
  bottom: calc(var(--lgc-foot-h) + env(safe-area-inset-bottom, 0px))
}

html.lgc-has-foot .lgc-foot {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  height: calc(var(--lgc-foot-h) + env(safe-area-inset-bottom, 0px));
  margin: 0;
  padding: 0 clamp(16px, 4vw, 40px) env(safe-area-inset-bottom, 0px);
  background: var(--lgc-card);
  border-top: 1px solid var(--lgc-seam);
  box-sizing: border-box
}

.lgc-foot .lgc-foot-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  height: 28px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 9px;        /* --r-sm, as the Signal System rounds a focus ring */
  background: none;
  font-family: var(--lgc-display);
  font-weight: 600;
  font-size: .82rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  color: var(--lgc-mid);
  cursor: pointer
}

.lgc-foot .lgc-foot-btn:hover {
  color: var(--lgc-hi)
}

/* on a desk the card sits above the strip; on a phone the sheet covers it while it is open */
@media (min-width: 761px) {
  html.lgc-has-foot #lg-consent {
    bottom: calc(var(--lgc-foot-h) + 24px);
    max-height: calc(100vh - var(--hdr-h, 72px) - 48px - var(--lgc-foot-h));
    max-height: calc(100dvh - var(--hdr-h, 72px) - 48px - var(--lgc-foot-h))
  }
}