/*
  component: maker-bubble (doc 10 Part 7.1, doc 11 work-order item 1)

  Deliberately NOT part of the demo's design system. This is the one element on
  the page that belongs to Lionsworth rather than to the business being shown,
  and it has to read that way: an overlay sitting ON the proposal, not a
  component OF it. So it uses the system UI stack (every site here self-hosts a
  display face, so system-ui alone already separates it), a 12px radius (three
  of the six sites are radius-0 by contract), and a mint accent no site uses.

  Every token below is namespaced --lw-* and every class is .lw-*, because it is
  pasted verbatim into six stylesheets it does not control. Nothing here may
  inherit from or leak into the host site.

  Contrast, measured (not estimated), against --lw-panel #12161b:
    #ffffff text ............ 18.16:1  AAA
    #b9c2cc muted text ...... 10.08:1  AAA
    #00e0a4 accent .......... 10.55:1  AAA
    #12161b on #00e0a4 ...... 10.55:1  AAA  (dark label on the accent button)
  doc 05: a token is only cleared once it is measured against EVERY ground it
  can land on. --lw-line is the case that rule exists for. It is the border of
  a form field, so WCAG 1.4.11 wants 3:1, and it has two grounds: the panel
  behind it and the field fill inside it. #313a46 looked right and failed both
  (1.58:1 and 1.42:1); #586574 cleared the panel at 3.05:1 and still failed the
  fill at 2.72:1, which is exactly the shape of the bug that shipped in
  garage-wantij. #606d7a clears both: 3.43:1 on #12161b, 3.06:1 on #1b212a.
*/

.lw-maker {
  --lw-panel: #12161b;
  --lw-panel-2: #1b212a;
  --lw-ink: #ffffff;
  --lw-muted: #b9c2cc;
  --lw-accent: #00e0a4;
  --lw-line: #606d7a;

  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--lw-ink);
}

/* The panel is a <details>, so it opens and closes with no script at all.
   js/maker.js only upgrades the SUBMIT to stay on the page. */
.lw-maker > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 12px !important;
  background: var(--lw-panel);
  color: var(--lw-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  list-style: none;
  user-select: none;
}
.lw-maker > summary::-webkit-details-marker { display: none; }
.lw-maker > summary::marker { content: ""; }
.lw-maker > summary:hover { background: var(--lw-panel-2); }
/* HANDOFF-4: the bubble is the only Lionsworth affordance on a prospect's page,
   so it gets one degree more life than the host site's controls. Transform
   origin bottom-right keeps it pinned to its corner while it grows. */
@media (prefers-reduced-motion: no-preference) {
  .lw-maker > summary {
    transform-origin: 100% 100%;
    transition: background-color 200ms ease, transform 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .lw-maker > summary:hover { transform: scale(1.035); }
  .lw-maker > summary:active { transform: scale(0.99); }
}
.lw-maker > summary:focus-visible {
  outline: 3px solid var(--lw-accent);
  outline-offset: 3px;
}
.lw-maker__dot {
  width: 10px;
  height: 10px;
  border-radius: 50% !important;
  background: var(--lw-accent);
  flex: none;
}
.lw-maker[open] > summary .lw-maker__open { display: none; }
.lw-maker__sluit { display: none; }
.lw-maker[open] > summary .lw-maker__sluit { display: inline; }

/* Height is the whole design problem here. The panel opens upward from a pill
   60px off the bottom, and everything below the send button (the address, the
   takedown link, the privacy line) is the part an owner who does NOT want to
   type still needs. At 20px padding and a 96px textarea it ran about 640px and
   those three sat below an internal scroll on a 390x760 phone, which is to say
   they were invisible on every phone. Tightened until the whole panel fits
   without scrolling on a normal handset; it still scrolls on a very short one,
   which is the right failure. */
.lw-maker__paneel {
  position: absolute;
  right: 0;
  bottom: 60px;
  width: min(23rem, calc(100vw - 32px));
  max-height: min(36rem, calc(100vh - 84px));
  /* On iOS Safari 100vh is the LARGE viewport, i.e. chrome hidden. With the
     address bar showing, a bottom-anchored panel sized in vh is taller than the
     visible area and grows off the TOP, taking its heading and first field with
     it and offering no scroll to reach them. Same shape as the CTA-under-the-
     address-bar defect of 2026-07-26. check.mjs cannot see it: its phone
     viewports already have the chrome subtracted, so there 100vh IS the visible
     height. dvh is the dynamic viewport; the vh line above stays as the
     fallback for browsers without it. */
  max-height: min(36rem, calc(100dvh - 84px));
  overflow-y: auto;
  padding: 16px;
  border-radius: 12px !important;
  background: var(--lw-panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.lw-maker__kop {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
}
.lw-maker__uitleg {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--lw-muted);
}

.lw-maker__veld { display: block; margin-bottom: 8px; }
.lw-maker__veld > span {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lw-muted);
}
.lw-maker__veld input,
.lw-maker__veld textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--lw-line);
  border-radius: 8px !important;
  background: var(--lw-panel-2);
  color: var(--lw-ink);
  font: inherit;
  font-size: 16px; /* below 16px iOS zooms the whole page on focus */
}
.lw-maker__veld textarea { min-height: 72px; resize: vertical; }
.lw-maker__veld input:focus-visible,
.lw-maker__veld textarea:focus-visible {
  outline: 2px solid var(--lw-accent);
  outline-offset: 1px;
}

.lw-maker__verstuur {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px !important;
  background: var(--lw-accent);
  color: var(--lw-panel);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.lw-maker__verstuur:hover { filter: brightness(1.08); }
.lw-maker__verstuur:focus-visible {
  outline: 3px solid var(--lw-ink);
  outline-offset: 2px;
}

.lw-maker__melding {
  margin: 12px 0 0;
  padding: 12px;
  border-radius: 8px !important;
  background: var(--lw-panel-2);
  font-size: 15px;
}
.lw-maker__melding[hidden] { display: none; }

.lw-maker__links {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--lw-line);
  list-style: none;
}
.lw-maker__links li + li { margin-top: 2px; }
.lw-maker__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--lw-accent);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lw-maker__links a:focus-visible {
  outline: 2px solid var(--lw-accent);
  outline-offset: 2px;
}

.lw-maker__klein {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--lw-muted);
}
.lw-maker__klein a { color: var(--lw-muted); }

/* Same trick the host sites use: off-screen, never display:none, so the label
   stays in the accessibility tree while the field stays out of the way. */
.lw-maker__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .lw-maker[open] > .lw-maker__paneel { animation: lw-maker-in 180ms ease-out both; }
}
@keyframes lw-maker-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  /* `left` makes the <details> box span the viewport so the panel can use the
     full width. The box is transparent but still eats every tap across a 48px
     band pinned to the bottom of the screen, which on roj-bouw covered the
     lower half of the hero's phone CTA. Only the two things you can actually
     see take pointer events. */
  .lw-maker { right: 12px; bottom: 12px; left: 12px; pointer-events: none; }
  .lw-maker > summary { width: max-content; margin-left: auto; pointer-events: auto; }
  .lw-maker__paneel { width: auto; left: 0; right: 0; pointer-events: auto; }
  /* The full label made the closed pill 248px of a 390px screen, 64%, riding
     over body copy at every scroll position and colliding with the primary CTA
     on three sites. "Lionsworth" plus the dot still says who made it. */
  .lw-maker__voor { display: none; }
}

@media print {
  .lw-maker { display: none; }
}

/* The one rule in this file that touches the host page, and it is deliberate.
   The control is fixed to the bottom-right, so at maximum scroll it sits on
   whatever ends the document: on every one of these sites that is the footer's
   mandated disclosure banner, the line carrying the takedown promise and the
   Lionsworth address. Four independent reviews found this on 2026-07-28. The
   padding goes inside the footer, so it is the footer's own background that
   grows and nothing shifts. */
body > footer { padding-bottom: 76px; }

/* The address in the mandated footer banner, made tappable. `inherit` is the
   point: six host palettes, six banner grounds, and this link is by
   construction the same colour as the sentence it sits in, so it can never be
   the thing that fails a contrast audit. */
/* !important for the same reason the radii carry it: this rule is pasted into
   six stylesheets it does not control, and it loses to any host `.voet a` or
   `.site-footer a` on specificity. garage-wantij's is `.voet a { color: rgb(244
   241 234 / 0.88); text-decoration: none }` (0,1,1) against .lw-mail's (0,1,0),
   which stripped the underline and set a colour a hair off the surrounding
   text: a link identifiable by neither. Lighthouse flagged link-in-text-block
   on five pages. `inherit` guarantees the contrast; the underline is what
   makes it findable, and both have to survive the host. */
.lw-mail {
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}