/* Get Less Chaos: A Place for Everything. Consent, team B: the strip cut from the board.
   Art director's layer: the material, type and layout of the strip AT REST (light, dark, every size). Motion and the
   consent rules live elsewhere (consent.js); every moving part reads the custom properties below, so the motion
   only ever animates transforms, opacity and clip, never layout.

   Anatomy, bottom of the screen upward:
     .consent__floor   the pocket's green floor. Only its bottom 3px (--thread) shows, because the strip is lifted.
     .consent__piece   the strip: board lifted into a piece (--piece), full width, no gutters, no corners.
       .consent__kerf  the cut: a 2px line of cut-edge ink across the full width, the cut's light lip under it.
       .consent__inner the site's wrap (1240px + gutters): words left, two identical buttons right.
         .consent__now the reopened state's routed channel (a neutral gray cut), words in its floor.
   The upward lift shadow is on the piece. Nothing here uses a color that isn't a token. */

.consent {
  --thread: 4px;                       /* the floor showing under the lifted strip: its top pixel is the strip's shade,
                                          so 3px of green show (creative director: was 2px of green) */
  --bleed: 12px;                       /* the piece runs this far past both screen edges, so the lift's tilt never
                                          shows a sliver of the page at a side edge (creative director) */
  --kerf: var(--space-kerf);           /* 2px */
  --lift: var(--thread);               /* how far the strip sits above the floor (motion: 0 = flush) */
  --pad-y: 20px;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 45;                         /* above the page, below the sticky header (50) and so below its phone menu sheet,
                                          the letter flight (70), the hand tape (90) and the skip link (100) */
  pointer-events: none;                /* only the strip itself takes input */
  color: var(--ink);
  font-family: var(--font-text);
}

/* the pocket's floor: tall enough that any lift or tilt shows only floor; darker where the strip shades it */
.consent__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
  background: linear-gradient(to top, var(--floor-bot) 0, var(--floor-top) calc(var(--thread) + 1px), var(--floor-top));
}

/* the strip */
.consent__piece {
  position: relative; pointer-events: auto;
  margin-inline: calc(-1 * var(--bleed)); padding-inline: var(--bleed);   /* off-screen bleed; layout is unchanged */
  background: var(--piece);
  transform: translateY(calc(-1 * var(--lift)));
  transform-origin: 100% 100%;
  box-shadow:
    0 -16px 26px -20px var(--lift-a),           /* the lift, facing up: soft, so busy content above stays calm */
    0 -3px 7px -5px var(--lift-a-2),
    0 1px 0 0 var(--pocket-edge-a);             /* the strip's own shade on the floor: the thread's top pixel */
}

/* the cut: full width, a transform away from any motion (scaleX from the left edge) */
.consent__kerf {
  position: absolute; left: 0; right: 0; top: 0; height: var(--kerf); z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--cut-edge) calc(var(--cut-edge-op) * 100% + 8%), transparent);
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--lip) calc(var(--lip-op) * 100%), transparent);  /* the lip */
  transform-origin: 0 50%;
}

/* the words and the buttons, on the site's wrap so they line up with the page above */
.consent__inner {
  width: min(100% - 2 * var(--space-gutter), var(--space-wrap)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: clamp(var(--space-5), 5vw, var(--space-8)); row-gap: var(--space-4);
  padding-block: calc(var(--pad-y) + var(--kerf)) calc(var(--pad-y) + env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - var(--thread) - 12px);
  max-height: calc(100dvh - var(--thread) - 12px);   /* capped to the screen; scrolling inside only as a last resort */
  overflow-y: auto; overscroll-behavior: contain;
}

.consent__words { min-width: 0; display: grid; justify-items: start; gap: 2px; }
.consent__h {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: var(--text-lg); line-height: 1.2; letter-spacing: var(--tracking-heading);
  color: var(--ink); text-wrap: nowrap;
}
.consent__line {
  max-width: 60ch; margin: 0;
  font-size: var(--text-md); line-height: var(--leading-body); color: var(--ink-2);
  text-wrap: pretty;
}
.consent__line .link { white-space: nowrap; color: var(--ink); }

/* reopened: a shallow channel routed into the strip under the line, the same gray cut as the site's empty pockets.
   Both choices get the same channel; green never means "accepted". */
.consent__now {
  display: inline-flex; align-items: center; margin: var(--space-3) 0 0;
  padding: .52em .9em .48em; max-width: 100%;
  border-radius: calc(var(--radius-sm) + var(--space-kerf));
  background: var(--board-2); box-shadow: var(--z-cut-1);
  font-size: var(--text-sm); line-height: 1.3; font-weight: var(--weight-regular); color: var(--ink-2);
}
.consent__now[hidden] { display: none; }

/* the two buttons: the site's ink button, the same variant, width and type for both, side by side, never preselected.
   Each sits in its own milled pocket, exactly like the first screen's buttons: a neutral cut a kerf wider than the
   piece, visible at rest (the green slot under the piece only shows when it lifts) */
.consent__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 5px; }
.consent__btn { display: flex; width: 100%; min-width: 8.5rem; }
.consent__btn .btn__piece { width: 100%; }
.consent__btn::after {
  content: ""; position: absolute; inset: -5px; z-index: -2; border-radius: var(--radius-pill);
  background: var(--cut-floor); box-shadow: var(--z-cut-1);
}

/* tablet: still one row, a little tighter */
@media (max-width: 900px) {
  .consent { --pad-y: 18px; }
  .consent__line { font-size: var(--text-sm); }
  .consent__btn { min-width: 7.25rem; }
}

/* phone: words first, then the two buttons in two equal columns across the width */
@media (max-width: 640px) {
  .consent { --pad-y: 16px; }
  .consent__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
  .consent__buttons { gap: var(--space-3); }
  .consent__btn { min-width: 0; }
  .consent__now { margin-top: var(--space-2); }
}

/* short screens and a phone on its side: one compact row, heading run in with the line, never a third of the screen */
@media (max-height: 520px) and (min-width: 561px) {
  .consent { --pad-y: 11px; }
  .consent__inner { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); }
  .consent__words { display: block; }
  .consent__h { display: inline; font-size: var(--text-md); margin-right: .45em; }
  .consent__line { display: inline; font-size: var(--text-sm); line-height: 1.45; }
  .consent__now { display: flex; width: fit-content; margin-top: var(--space-2); padding-block: .4em .36em; }
  .consent__btn .btn__piece { min-height: 44px; padding-block: .8em .75em; }
  .consent__btn { min-width: 6.75rem; }
}
/* creative technologist: short AND fairly narrow (200% zoom on a 1280x720 screen is 640x360): the buttons give the
   words a little more width so the strip stays about a third of the screen (129px -> about 105px); still identical */
@media (max-height: 520px) and (min-width: 561px) and (max-width: 760px) {
  .consent__inner { column-gap: var(--space-4); }
  .consent__buttons { gap: 10px; }
  .consent__btn { min-width: 0; }
  .consent__btn .btn__piece { padding-inline: 1.2em; }
}
/* very short and narrow (a small phone on its side, or 200% zoom): the same compact strip, buttons under the words */
@media (max-height: 520px) and (max-width: 560px) {
  .consent { --pad-y: 10px; }
  .consent__h { display: inline; font-size: var(--text-md); margin-right: .45em; }
  .consent__words { display: block; }
  .consent__line { display: inline; font-size: var(--text-sm); line-height: 1.45; }
  .consent__btn .btn__piece { min-height: 44px; padding-block: .8em .75em; }
}

/* the page keeps room for the strip while it is open, so it never covers the footer's last row
   (consent.js keeps --consent-room equal to the strip's real height) */
html.consent-open { scroll-padding-bottom: calc(var(--consent-room, 0px) + var(--space-4)); }
html.consent-open body { padding-bottom: var(--consent-room, 0px); }

/* "Cookie settings" in every footer: with scripts it is a button, dressed exactly like its neighbors */
.site-footer__links .consent-open-link {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; line-height: inherit; color: var(--ink-2); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.site-footer__links a.consent-open-link { text-decoration: none; }
/* hover only, like its neighbors; open or not, it never wears the current-page underline */
.site-footer__links .consent-open-link:hover { color: var(--ink); text-decoration: underline 2px var(--foam); text-underline-offset: .3em; }

/* ================================================================ motion layer (motion and interaction designer)
   consent.js drives these with GSAP; at rest every one of them sits at its resting value, so without scripts or
   motion the strip is exactly the art director's.
     --patch   0..1  plain board laid over the piece: 1 = the strip reads as the page (the patch, before the lift and
                     after the press), 0 = the lifted piece. Under the words and the kerf.
     --shade   0..1  how much of the upward lift shadow shows (0 while flush, 1 lifted)
   .consent__tip     the blade's leading end: a darker point riding the front of the cut, gone when the cut stops dead */
.consent__piece {
  overflow: clip;                       /* the blade starts off-screen left; nothing may stick out sideways */
  box-shadow:                           /* the art director's lift shadow, the same values, scaled by --shade */
    0 -16px 26px -20px color-mix(in srgb, var(--lift-a) calc(var(--shade, 1) * 100%), transparent),
    0 -3px 7px -5px color-mix(in srgb, var(--lift-a-2) calc(var(--shade, 1) * 100%), transparent),
    0 1px 0 0 var(--pocket-edge-a);
}
.consent__piece::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--board); opacity: var(--patch, 0);
}
.consent__inner { position: relative; z-index: 1; }
.consent__tip {
  position: absolute; left: 0; right: 0; top: 0; height: var(--kerf); z-index: 2; pointer-events: none;
  opacity: 0;                           /* only seen while the cut runs */
}
.consent__tip::after {
  content: ""; position: absolute; right: 0; top: -.5px; width: 26px; height: calc(var(--kerf) + 1px);
  border-radius: 0 1px 1px 0;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--cut-edge) calc(var(--cut-edge-op) * 100% + 42%), transparent));
}

/* while GSAP moves a button's piece, the CSS hover transition must not chase it */
.consent.is-moving .btn__piece { transition: none !important; }
/* the homepage CTA's rule: until its piece comes over it, a slot is a NEUTRAL cut (an empty green pill would read as
   a button); both turn green at the same instant as the two pieces drop */
.consent.is-moving .consent__btn:not(.is-in)::before { background: linear-gradient(var(--cut-floor-top), var(--cut-floor-bot)); box-shadow: var(--z-cut-1); }

/* hover OR keyboard focus: the piece lifts out of its slot and its green shows, the same for both buttons.
   (The site's focus thunk animation is replaced here: a keyboard user gets the same lift a mouse user gets.) */
.consent .consent__btn:focus-visible .btn__piece {
  animation: none;
  transform: translate(-1px, var(--lift-1-y)) rotate(var(--lift-1-r)); box-shadow: var(--z-lift-1);
}
/* once answered, nothing lifts again while the strip presses flush (GSAP's press thunk still plays inline) */
html .consent.is-leaving .consent__btn .btn__piece { transform: none; box-shadow: var(--z-flush); }

/* reduced motion: hover and focus change the shadow only; a press changes nothing but the shadow */
@media (prefers-reduced-motion: reduce) {
  html .consent .consent__btn:hover .btn__piece,
  html .consent .consent__btn:focus-visible .btn__piece { transform: none; box-shadow: var(--z-lift-1); animation: none; }
  html .consent .consent__btn:active .btn__piece { transform: none; box-shadow: var(--z-flush); }
}

@media (forced-colors: active) {
  .consent__piece { border-top: 2px solid CanvasText; }
  .consent__now { border: 1px solid CanvasText; }
}
/* creative technologist: reopened from "Cookie settings", focus lands on the heading (so a screen reader starts at
   "Cookies"); it is a place to start reading from, not a control, so it wears no ring */
.consent__h:focus, .consent__h:focus-visible { outline: none; }
/* reduced motion: the site's rule gives everything an opacity transition, which would chase consent.js's crossfade
   (the strip flashed in at full strength, dipped, then came back, and was hidden before it had faded out) */
@media (prefers-reduced-motion: reduce) { .consent .consent__piece { transition: none !important; } }
@media print { .consent { display: none !important; } }