/* =========================================================================
   LFFO CONSENT — REVISION 8: NO GLOW INSIDE A BUTTON, ONE ACTION ROW OPEN
   -------------------------------------------------------------------------
   Two changes on top of Revision 7, both by request:

   1. Accept no longer carries 04 Inner Glow. A radial fill switching on
      behind the label is still a fill, even at low opacity, and the brief
      was explicit: no glow inside a button on this component. Accept now
      carries 03 Ember Border instead — the border line itself ignites,
      nothing fills the inside. Decline keeps 01 Ledge Glow, which was
      never an inside glow (a hairline under the outer edge).

   2. Collapsed and expanded are no longer the same two button rows twice.
      Collapsed keeps Accept / Decline / Configure exactly as before. The
      moment the panel opens, that row is hidden entirely (CSS :has(), no
      JS touched) rather than left sitting above a second, functionally
      identical Only-essential / Save-my-choice pair a few lines down —
      which was a real duplication, not just visual noise: both "Only
      essential" buttons called the same reject-all action. The expanded
      card is now one action row, not two, and correspondingly shorter.
   -------------------------------------------------------------------------
   LOOK ONLY: markup, IDs, classes and lffo-consent.js are untouched (same
   constraint Revision 6 set for itself).

   WHAT CHANGED FROM REVISION 6, AND WHAT DIDN'T.
   Rev 6 kept the actions flat — no gold, no shadow, no elevation, no glass —
   on the reasoning that gold means the association's own acts (Join & pay,
   the member login) and a cookie choice is neither. That distinction is
   correct and this revision keeps it: nothing here turns gold.

   What Rev 6 didn't have is the site's own answer for how a quiet control
   speaks when it's touched. style.css closes that vocabulary to six marks —
   Ledge Glow, Halo Glow, Ember Border, Inner Glow, Corner Spark, Underline
   Sweep — each a hairline of light, an edge, or one small point, never a
   lift, a scale or a loop. Rev 6 predates that closure and hand-rolled its
   own flat hover instead. This revision borrows the MECHANICS (the exact
   --ease-lux timing, the hairline-under-the-edge geometry, the radial
   behind-the-label glow) and re-keys their colour to this component's own
   blue tokens rather than gold — so the banner now moves the way the rest of
   the site moves, while still never claiming the association's colour for a
   browser-storage prompt.

   Decline -> 01 Ledge Glow (a line waits under the edge, in blue: the quieter
   of two equal answers gets the quieter mark).
   Accept  -> 04 Inner Glow (light behind the label: the closest reading to
   "opening" something, without implying more than a cookie choice does).
   Configure -> 08 Underline Sweep, aligned to the canonical span-based
   implementation in style.css instead of the bespoke pseudo-element Rev 6
   used for the same idea.

   Accept and Decline stay the same size, the same shape, side by side — the
   refuse path is never the quieter-looking one (EDPB / CNPD unchanged).

   DESKTOP AND MOBILE ARE TWO SEPARATE ENTRANCES, NOT ONE RESIZED.
   Desktop keeps the quiet corner-card nudge Rev 6 already had — 14px and a
   fade, because a floating plate arriving from off-screen would upstage
   content it sits beside. Mobile is a real sheet: it starts fully below the
   viewport and travels the whole distance, because a sheet that only nudges
   in reads as a corner card that got wide, not as its own object. Compact
   throughout: tighter padding and leading than Rev 6 carried, since a card
   this close to the reader's thumb doesn't need the breathing room a
   desktop corner does.
   ========================================================================= */
.lffo-cc, .lffo-cc * { box-sizing: border-box; }

.lffo-cc {
  --cc-paper: #ffffff;
  --cc-ink:   var(--navy, #0f2038);
  --cc-soft:  #5a6172;
  --cc-line:  rgba(15,32,56,.16);
  --cc-line-2:rgba(15,32,56,.28);
  --cc-gold:  var(--gold, #c9a34e);

  /* the application blue — unchanged palette, now driving real marks */
  --cc-blue:      #3a6bd6;
  --cc-blue-ink:  #2e537d;
  --cc-blue-line: rgba(46,83,125,.5);
  --cc-blue-fill:   #eaf1fd;
  --cc-blue-fill-2: #dfeafb;
  --cc-blue-hover:  #eef4ff;

  position: fixed; z-index: 2147483000;
  left: 18px; bottom: 18px; width: min(340px, calc(100vw - 36px));
  max-height: calc(100vh - 36px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--cc-paper); color: var(--cc-ink);
  font-family: var(--sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  border: var(--hair, 1px) solid var(--cc-line);
  border-radius: var(--radius-sm, 3px);
  box-shadow: var(--shadow-lg, 0 4px 9px rgba(10,23,40,.08), 0 18px 44px rgba(10,23,40,.15));
  padding: 16px 16px 14px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease-lux, cubic-bezier(.22,1,.36,1)),
              transform .5s var(--ease-lux, cubic-bezier(.22,1,.36,1));
}
.lffo-cc[hidden] { display: none !important; }
.lffo-cc.is-in { opacity: 1; transform: none; }
.lffo-cc:focus, .lffo-cc:focus-visible { outline: none; }

/* No gold accent here by design (see the note at the top of this file):
   gold marks the association's own acts, and a cookie choice isn't one.
   The card's own hairline border is the only edge it needs. */

.lffo-cc h2 {
  margin: 0 0 6px; font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-style: italic; font-weight: 500; font-size: 1.1rem; line-height: 1.16;
  letter-spacing: .005em; color: var(--cc-ink);
}
.lffo-cc p { margin: 0 0 12px; font-size: .81rem; line-height: 1.5; color: var(--cc-soft); }
.lffo-cc a {
  color: var(--cc-blue-ink); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(46,83,125,.45); transition: color .2s, text-decoration-color .2s;
}
.lffo-cc a:hover { color: var(--cc-blue); text-decoration-color: currentColor; }

/* ── Actions: the site's own marks, re-keyed to the utility blue ───────── */
.lffo-cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-items: center; }

.lffo-cc-btn {
  position: relative; overflow: hidden;
  font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .035em; line-height: 1.1;
  padding: .68em 1em; border-radius: 2px; cursor: pointer; text-align: center; white-space: nowrap;
  border: var(--hair, 1px) solid var(--cc-blue-line);
  background: var(--cc-blue-fill); color: var(--cc-blue-ink);
  transition: color .24s, border-color .24s, background-color .24s,
              box-shadow .32s var(--ease-lux, cubic-bezier(.22,1,.36,1));
}
.lffo-cc-accept { background: var(--cc-blue-fill-2); border-color: rgba(46,83,125,.58); color: #26466c; }
.lffo-cc-btn:hover { color: var(--cc-blue); border-color: rgba(58,107,214,.62); background: var(--cc-blue-hover); }

/* 01 Ledge Glow — Decline. A hairline the colour of the blue identity waits
   under the edge and glows in on approach; nothing presses or resizes. */
.lffo-cc-decline:hover, .lffo-cc-decline:focus-visible {
  box-shadow: 0 var(--hair, 1px) 0 var(--cc-blue);
}
.lffo-cc-decline:active {
  box-shadow: 0 var(--hair, 1px) 0 var(--cc-blue), var(--inset-well, inset 0 1px 2px rgba(10,23,40,.09));
}

/* 03 Ember Border — Accept. The border line itself ignites: a tight, hot
   edge, nothing diffuse and nothing filling the inside of the button.
   (Swapped from 04 Inner Glow on request: no glow sits inside a button on
   this component — the lab's own "empty inside" rule, held to more
   strictly here than the radial-fill variant of Inner Glow allows.) */
.lffo-cc-accept:hover, .lffo-cc-accept:focus-visible {
  border-color: var(--cc-blue);
  box-shadow: 0 0 0 var(--hair, 1px) var(--cc-blue);
}
.lffo-cc-accept:active {
  box-shadow: 0 0 0 var(--hair, 1px) var(--cc-blue), var(--inset-well, inset 0 1px 2px rgba(10,23,40,.09));
}

/* 08 Underline Sweep — Configure. Aligned to the canonical span-based
   implementation: a rule fills in under the label, left to right. */
.lffo-cc-config {
  position: relative; grid-column: 1 / -1; justify-self: start; min-width: 0;
  border: 0; background: none; box-shadow: none; padding: 6px 2px 3px;
  color: var(--cc-blue-ink); font-size: .78rem; letter-spacing: .02em; text-decoration: none; cursor: pointer;
}
.lffo-cc-config::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 1px;
  background: var(--cc-blue); opacity: .65;
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-lux, cubic-bezier(.22,1,.36,1));
}
.lffo-cc-config:hover, .lffo-cc-config:focus-visible { color: var(--cc-blue); background: none; }
.lffo-cc-config:hover::after, .lffo-cc-config:focus-visible::after { transform: scaleX(1); opacity: .9; }
.lffo-cc-config:active::after { opacity: 1; }

.lffo-cc-btn:focus-visible,
.lffo-cc a:focus-visible,
.lffo-cc-switch input:focus-visible + .lffo-cc-track { outline: 2px solid var(--cc-blue); outline-offset: 2px; }

/* preferences panel */
.lffo-cc-panel { margin-top: 16px; padding-top: 4px; border-top: var(--hair, 1px) solid var(--cc-line-2); }
.lffo-cc-panel[hidden] { display: none; }

/* Expanded state: the top Accept/Decline/Configure row would just repeat
   the panel's own Only-essential / Save-my-choice pair a few lines below
   it — remove that duplication rather than stack two action rows, which
   also keeps the expanded card noticeably more compact than the collapsed
   one padded out with a second set of buttons. Collapsed state (the panel
   hidden) is untouched: Accept/Decline/Configure stay exactly as they are. */
.lffo-cc:has(.lffo-cc-panel:not([hidden])) .lffo-cc-actions { display: none; }
.lffo-cc:has(.lffo-cc-panel:not([hidden])) .lffo-cc-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.lffo-cc-row { display: flex; gap: 16px; align-items: flex-start; padding: 13px 0; border-top: var(--hair, 1px) solid var(--cc-line); }
.lffo-cc-row:first-child { border-top: 0; }
.lffo-cc-row .lffo-cc-txt { flex: 1 1 auto; }
.lffo-cc-row h3 { margin: 0 0 3px; font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--cc-ink); }
.lffo-cc-row p { margin: 0; font-size: .73rem; line-height: 1.48; color: var(--cc-soft); }

/* toggle — a recessed track (fields sink in, per the site's own edge/inset
   convention) with a blue fill when on; knob is ::after */
.lffo-cc-switch { flex: 0 0 auto; position: relative; width: 40px; height: 23px; margin-top: 2px; }
.lffo-cc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.lffo-cc-track {
  display: block; width: 40px; height: 23px; border-radius: 999px; position: relative;
  border: var(--hair, 1px) solid var(--cc-line-2); background: rgba(15,32,56,.04);
  box-shadow: var(--inset-well, inset 0 1px 2px rgba(10,23,40,.09), inset 0 0 0 1px rgba(10,23,40,.03));
  transition: background-color .24s, border-color .24s;
  /* The track sits after the checkbox in the DOM and is itself position:relative,
     so with no explicit z-index it paints over the input and silently ate every
     click -- all four switches looked interactive and did nothing. The input is
     what must receive the click; the track only draws the result. */
  pointer-events: none;
}
.lffo-cc-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--cc-soft); box-shadow: 0 1px 2px rgba(10,23,40,.18);
  transition: transform .24s var(--ease-lux, cubic-bezier(.22,1,.36,1)), background-color .24s;
}
.lffo-cc-switch input:checked + .lffo-cc-track { background: var(--cc-blue); border-color: var(--cc-blue); box-shadow: none; }
.lffo-cc-switch input:checked + .lffo-cc-track::after { transform: translateX(17px); background: var(--cc-paper); }
.lffo-cc-switch input:disabled { cursor: not-allowed; }
.lffo-cc-switch input:disabled + .lffo-cc-track { opacity: .5; }

.lffo-cc-save { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: var(--hair, 1px) solid var(--cc-line-2); }

/* reopen control (inserted into the footer legal row) */
.lffo-cc-reopen {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; color: inherit;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.34);
  transition: color .2s, text-decoration-color .2s;
}
.lffo-cc-reopen:hover { color: var(--cc-blue); text-decoration-color: currentColor; }

/* ── Tablet: still a corner card, narrower ──────────────────────────────── */
@media (max-width: 1024px) and (min-width: 601px) {
  .lffo-cc { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: 420px; }
}

/* ── Phone: a real sheet, built for the breakpoint rather than resized ──── */
@media (max-width: 600px) {
  .lffo-cc {
    left: 0; right: 0; bottom: 0; width: auto; max-width: none;
    border-radius: var(--radius) var(--radius) 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    padding: 18px 18px calc(16px + env(safe-area-inset-bottom)); max-height: 80vh;
    /* A sheet arrives from its own edge, the whole distance — not a nudge
       that happens to be wide. */
    transform: translateY(100%);
    transition: opacity .38s var(--ease-lux, cubic-bezier(.22,1,.36,1)),
                transform .46s var(--ease-lux, cubic-bezier(.22,1,.36,1));
  }
  .lffo-cc.is-in { transform: none; }
  .lffo-cc h2 { font-size: 1.08rem; }
  .lffo-cc-actions { grid-template-columns: 1fr; gap: 8px; }
  .lffo-cc-btn { padding: .88em 1.1em; }
  .lffo-cc-config { order: 3; justify-self: center; margin-top: 2px; }
  .lffo-cc-config::after { left: 2px; right: 2px; }
  .lffo-cc-save { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lffo-cc { transition: opacity .01s; transform: none !important; }
  .lffo-cc-track::after, .lffo-cc-config::after { transition: none; }
}