/* freedom15-bar.v1.css — Independence FREEDOM15 sticky offer element
   Spec: FREEDOM15_STICKY_OFFER_ELEMENT_SPEC_2026-08-01.md
   Left-anchored; expanded card <-> collapsed "15%" dot. Mirrors the site's right
   scroll-top FAB (#akh-home-v2__back-to-top: right:18/bottom:20, 63x44, z80) on the LEFT.
   Namespaced #f15-* / .f15-* so it cannot collide with page styles. Do not overwrite this
   file on the CDN — publish v2 and bump ?v= (immutable-cache trap). */

:root{
  --f15-z: 90;              /* peer to FAB band (70-80); below toolbar 10010 / menu 100000 / modals */
  --f15-inset-x: 18px;      /* mirror scroll-top right:18px, on the LEFT */
  --f15-inset-y: 20px;      /* mirror scroll-top bottom:20px */
  --f15-dot: 56px;          /* desktop dot; 52px on <=640 (below) */
  --f15-tap: 44px;          /* primary tap-target floor */
  --f15-bottom-inset: 0px;  /* set to sticky Book-CTA height on recorded LPs */
  --f15-scrolltop-w: 63px;  /* measured FAB width, for the mobile clear-zone */
  --f15-paper:#FBF7F2;
  --f15-ink:#2A2320;
  --f15-sub:#4A3F3A;
  --f15-fine:#7A6F68;
  --f15-wine:#7A1E2B;
  --f15-on-wine:#FFFFFF;
  --f15-shadow:0 6px 22px rgba(42,35,32,.22);
  --f15-radius:14px;
}

#f15-root{
  position:fixed;
  left:calc(env(safe-area-inset-left,0px) + var(--f15-inset-x));
  bottom:calc(env(safe-area-inset-bottom,0px) + var(--f15-inset-y) + var(--f15-bottom-inset));
  z-index:var(--f15-z);
  font-family:inherit;
  -webkit-font-smoothing:antialiased;
}
#f15-root[hidden]{ display:none !important; }

/* ---------- expanded card ---------- */
.f15-card{
  box-sizing:border-box;
  width:min(340px, calc(100vw - (var(--f15-inset-x) * 2) - var(--f15-scrolltop-w) - 12px));
  max-height:40dvh; overflow:auto;
  background:var(--f15-paper);
  color:var(--f15-ink);
  border:1px solid rgba(122,30,43,.22);
  border-left:4px solid var(--f15-wine);
  border-radius:var(--f15-radius);
  box-shadow:var(--f15-shadow);
  padding:12px 12px 12px 14px;
  display:grid; grid-template-columns:1fr auto; gap:4px 6px; align-items:start;
  transform-origin:left bottom;
}
@media (min-width:641px){ .f15-card{ width:min(380px, 60vw); } }
@media (min-width:1024px){ .f15-card{ width:clamp(320px,24vw,400px); } }

.f15-card__body{ grid-column:1; min-width:0; }
.f15-card__title{ margin:0 0 2px; font-weight:700; font-size:clamp(14px,3.6vw,15px); line-height:1.3; }
.f15-card__title .f15-pct{ color:var(--f15-wine); white-space:nowrap; }
.f15-card__sub{ margin:0; font-size:clamp(12px,3.2vw,13px); line-height:1.35; color:var(--f15-sub); }
.f15-card__sub .f15-code{ font-weight:700; color:var(--f15-wine); letter-spacing:.3px; }

/* copy-code control */
.f15-codewrap{ position:relative; display:inline-flex; align-items:center; white-space:nowrap; }
.f15-copy{
  -webkit-appearance:none; appearance:none; border:0; background:transparent; cursor:pointer;
  color:var(--f15-wine); margin-left:3px; padding:2px; border-radius:6px;
  min-width:24px; min-height:24px; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
}
.f15-copy:hover{ background:rgba(122,30,43,.12); }
.f15-copy:focus-visible{ outline:2px solid var(--f15-wine); outline-offset:1px; }
.f15-copy svg{ width:15px; height:15px; display:block; }
.f15-copy .f15-ico-check{ display:none; }
.f15-copy.is-copied{ color:#2E7D32; }
.f15-copy.is-copied .f15-ico-copy{ display:none; }
.f15-copy.is-copied .f15-ico-check{ display:inline-flex; }
.f15-copied-flag{
  position:absolute; left:50%; top:-19px; transform:translateX(-50%);
  background:#2E7D32; color:#fff; font-size:10px; font-weight:600; line-height:1;
  padding:3px 6px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.f15-copied-flag.show{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .f15-copied-flag{ transition:none; } }
.f15-card__fine{ margin:3px 0 0; font-size:11px; line-height:1.3; color:var(--f15-fine); }
.f15-card__controls{ grid-column:2; grid-row:1; display:flex; gap:2px; align-items:center; }

.f15-btn{
  -webkit-appearance:none; appearance:none; border:0; background:transparent; cursor:pointer;
  color:#6B5F58; border-radius:10px;
  min-width:var(--f15-tap); min-height:var(--f15-tap);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; padding:0;
}
.f15-btn:hover{ background:rgba(122,30,43,.08); color:var(--f15-wine); }
.f15-btn:focus-visible{ outline:2px solid var(--f15-wine); outline-offset:2px; }

/* ---------- collapsed dot ---------- */
.f15-dot{
  position:relative;
  width:var(--f15-dot); height:var(--f15-dot); border-radius:50%;
  background:var(--f15-wine); color:var(--f15-on-wine);
  box-shadow:var(--f15-shadow); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; letter-spacing:.2px;
}
.f15-dot:hover{ filter:brightness(1.06); }
.f15-dot:focus-visible{ outline:2px solid var(--f15-wine); outline-offset:3px; }
.f15-dot__x{
  position:absolute; top:-7px; right:-7px;
  width:24px; height:24px; border-radius:50%;   /* WCAG 2.5.8 min target; primary actions are 44px */
  background:var(--f15-paper); color:var(--f15-wine);
  border:1px solid rgba(122,30,43,.35);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1; cursor:pointer;
}
.f15-dot__x:focus-visible{ outline:2px solid var(--f15-wine); outline-offset:2px; }
@media (max-width:640px){ :root{ --f15-dot:52px; } }

/* ---------- state visibility ---------- */
#f15-root:not(.is-expanded) .f15-card{ display:none; }
#f15-root.is-expanded .f15-dot{ display:none; }

/* ---------- motion ---------- */
#f15-root .f15-card, #f15-root .f15-dot{ animation:f15-in .18s ease both; }
@keyframes f15-in{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion:reduce){ #f15-root .f15-card, #f15-root .f15-dot{ animation:none; } }