/* ============================================================================
   Consent — cookie banner, cookie settings dialog, legal row in the footer,
   consent checkboxes and the legal pages.

   Tokens only (system.css / DESIGN-SYSTEM.md). The banner and the dialog are
   floating chrome, which is the one place glass is allowed; everything else
   here is a hairline on a surface. Accent appears on exactly three things: the
   dialog's Save button (its one filled action), a switch that is ON (the
   active state of a control), and focus rings. Accept and Reject are the same
   control at the same size and weight — neither is nudged.
   ========================================================================== */

/* ------------------------------------------------------------ primitives -- */

.mfx-sr{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.mfx-btn,
.mfx-btn-bare{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; margin:0; font:inherit; font-size:14px; font-weight:500; line-height:1.2;
  cursor:pointer; text-align:center; white-space:nowrap;
  transition:background var(--t-quick) var(--ease),
             border-color var(--t-quick) var(--ease),
             color var(--t-quick) var(--ease);
}
.mfx-btn{
  padding:0 20px; border-radius:var(--r-pill);
  background:var(--glass-2); color:var(--text);
  border:1px solid var(--hairline);
  box-shadow:var(--glass-edge);
}
.mfx-btn:hover{ background:var(--glass-3); border-color:var(--hairline-2) }
.mfx-btn-save{
  background:var(--accent); color:var(--accent-ink); border-color:transparent;
  font-weight:700; box-shadow:none;
}
.mfx-btn-save:hover{ background:#DDFF52; border-color:transparent }

.mfx-btn-bare{
  padding:0 6px; background:none; border:0; border-radius:var(--r-chip);
  color:var(--muted); text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--faint);
}
.mfx-btn-bare:hover{ color:var(--text); text-decoration-color:currentColor }

/* -------------------------------------------------------------- banner -- */
/* Fixed, so showing or hiding it never moves anything else on the page. The
   head script sets html.mfx-cc-open before first paint when no choice exists;
   that class — not JS timing — is what makes the bar visible, so it is in the
   first frame rather than popping in after the bundle. */

.mfx-cc{
  position:fixed; z-index:950;
  left:0; right:0; bottom:max(16px, env(safe-area-inset-bottom));
  width:min(1120px, calc(100% - 32px)); margin-inline:auto;
  display:flex; align-items:center; gap:14px 28px;
  padding:16px 16px 16px 24px;
  color:var(--text);
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  box-shadow:var(--glass-edge), var(--glass-lift);
  font-family:var(--font);
}
.mfx-cc[hidden]{ display:none }
html.mfx-cc-open .mfx-cc[hidden]{ display:flex }      /* first paint, before JS */
html.mfx-cc-open .mfx-cc{ animation:mfx-rise var(--t-base) var(--ease) both }

@keyframes mfx-rise{
  from{ opacity:0; transform:translateY(12px) }
  to  { opacity:1; transform:none }
}

.mfx-cc-copy{ flex:1 1 auto; min-width:0 }
.mfx-cc-title{ margin:0 0 2px; font-size:14px; font-weight:500; line-height:1.4; color:var(--text) }
.mfx-cc-text{ margin:0; font-size:14px; line-height:1.55; color:var(--muted); max-width:68ch }
.mfx-cc-text a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--faint) }
.mfx-cc-text a:hover{ text-decoration-color:currentColor }

.mfx-cc-acts{ flex:none; display:flex; align-items:center; gap:8px }
.mfx-cc-acts .mfx-btn{ min-width:168px }

/* Room to scroll the foot of the page out from under the bar while it shows.
   Added below the content, so nothing above it moves. */
html.mfx-cc-open body{ padding-bottom:120px }

@media (max-width: 900px){
  .mfx-cc{ flex-direction:column; align-items:stretch; padding:16px }
  .mfx-cc-acts{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
  .mfx-cc-acts .mfx-btn{ min-width:0; white-space:normal }
  .mfx-cc-acts .mfx-btn-bare{ grid-column:1 / -1; justify-self:center }
  html.mfx-cc-open body{ padding-bottom:240px }
}

/* -------------------------------------------------------------- dialog -- */

.mfx-cd{
  width:min(600px, calc(100% - 32px));
  max-height:min(760px, calc(100dvh - 32px));
  margin:auto; padding:0; overflow:auto; overscroll-behavior:contain;
  color:var(--text); font-family:var(--font);
  background:color-mix(in srgb, var(--surface-1) 88%, transparent);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  box-shadow:var(--glass-edge), var(--glass-lift);
}
.mfx-cd:not([open]){ display:none }
.mfx-cd[open]{ animation:mfx-in var(--t-base) var(--ease) both }
.mfx-cd::backdrop{
  background:color-mix(in srgb, var(--bg) 64%, transparent);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
}
@keyframes mfx-in{
  from{ opacity:0; transform:translateY(8px) }
  to  { opacity:1; transform:none }
}

.mfx-cd-in{ padding:24px }
.mfx-cd-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px }
.mfx-cd-title{ margin:0; font-size:20px; line-height:1.25; letter-spacing:-.02em; font-weight:500; color:var(--text) }
.mfx-cd-x{
  appearance:none; flex:none; display:grid; place-items:center;
  width:44px; height:44px; margin:-8px -8px -8px 0; padding:0;
  background:none; border:1px solid transparent; border-radius:var(--r-pill);
  color:var(--muted); cursor:pointer;
  transition:background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.mfx-cd-x:hover{ background:var(--glass-2); color:var(--text) }
.mfx-cd-desc{ margin:0 0 20px; font-size:14px; line-height:1.6; color:var(--muted) }
.mfx-cd-desc a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--faint) }

.mfx-cd-cats{ list-style:none; margin:0; padding:0 0 8px; border-top:1px solid var(--hairline) }
.mfx-cd-cat{ padding:16px 0; border-bottom:1px solid var(--hairline) }
.mfx-cd-cat:last-child{ border-bottom:0 }
.mfx-cd-cat-head{ display:flex; align-items:center; gap:12px; min-height:44px }
.mfx-cd-cat-name{ flex:1 1 auto; font-size:15px; font-weight:500; color:var(--text); cursor:pointer }
.mfx-cd-always{ font-size:13px; color:var(--faint) }
.mfx-cd-cat-text{ margin:4px 0 0; font-size:14px; line-height:1.6; color:var(--muted); max-width:56ch }

.mfx-cd-list{ margin-top:10px }
.mfx-cd-list summary{
  display:inline-flex; align-items:center; gap:6px; min-height:32px;
  font-size:13px; color:var(--muted); cursor:pointer;
  border-radius:var(--r-chip);
}
.mfx-cd-list summary:hover{ color:var(--text) }
.mfx-cd-list summary::-webkit-details-marker{ display:none }
.mfx-cd-list summary::after{ content:"+"; font-family:var(--mono); font-size:13px; color:var(--faint) }
.mfx-cd-list[open] > summary::after{ content:"\2212" }
.mfx-cd-list dl{ margin:8px 0 0; display:grid; gap:10px }
.mfx-cd-list dt{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--text);
  overflow-wrap:anywhere;
}
.mfx-cd-list dd{ margin:2px 0 0; font-size:13px; line-height:1.55; color:var(--muted) }
.mfx-cd-life{ font-family:var(--mono); font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums }
.mfx-cd-life::before{ content:"· " }

/* The three decisions stay in reach while the categories scroll under them. */
.mfx-cd-acts{
  position:sticky; bottom:0; z-index:1;
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px;
  margin:0 -24px -24px; padding:14px 24px 24px;
  background:var(--surface-1); border-top:1px solid var(--hairline);
}

@media (max-width: 560px){
  .mfx-cd-in{ padding:20px 16px }
  .mfx-cd-acts{ display:grid; grid-template-columns:1fr 1fr; margin:0 -16px -20px; padding:12px 16px 16px }
  .mfx-cd-acts .mfx-btn{ white-space:normal }
  .mfx-cd-acts .mfx-btn-save{ grid-column:1 / -1 }
}

/* "Reject non-essential" needs ~175px on one line. Two to a row on a phone
   under ~440px squeezed it into a two-line pill on both the banner and the
   dialog. Below that width the two equal choices stack, still equal: same
   control, same size, same weight, one per line. */
@media (max-width: 440px){
  .mfx-cc-acts,
  .mfx-cd-acts{ grid-template-columns:minmax(0, 1fr) }
  .mfx-cc-acts .mfx-btn,
  .mfx-cd-acts .mfx-btn{ white-space:nowrap }
  html.mfx-cc-open body{ padding-bottom:300px }
}

/* --------------------------------------------------------------- switch -- */
/* A real checkbox with role="switch": native keyboard, label and state. */

.mfx-sw{
  appearance:none; -webkit-appearance:none; flex:none; position:relative;
  width:44px; height:26px; margin:0; cursor:pointer;
  background:var(--surface-3); border:1px solid var(--hairline); border-radius:var(--r-pill);
  transition:background var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.mfx-sw::after{
  content:""; position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:var(--r-pill);
  background:var(--muted);
  transition:transform var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
.mfx-sw:checked{ background:var(--accent); border-color:transparent }
.mfx-sw:checked::after{ transform:translateX(18px); background:var(--accent-ink) }
.mfx-sw:disabled{ cursor:not-allowed; opacity:.55 }
.mfx-sw:disabled:checked{ background:var(--surface-3); border-color:var(--hairline) }
.mfx-sw:disabled:checked::after{ background:var(--muted) }
.mfx-sw:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

/* --------------------------------------------------------- footer legal -- */

.s3-ft .s3-ft-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 28px;
}
.s3-ft-legal ul{
  display:flex; flex-wrap:wrap; gap:4px 20px;
  margin:0; padding:0; list-style:none;
}
.s3-ft-legal a{
  display:inline-flex; align-items:center; min-height:32px;
  font-size:13px; font-weight:400; line-height:1.4; color:var(--muted);
  transition:color var(--t-quick) var(--ease);
}
.s3-ft-legal a:hover{ color:var(--text) }

@media (max-width: 760px){
  .s3-ft .s3-ft-bottom{ flex-direction:column-reverse; align-items:flex-start }
  .s3-ft-legal ul{ gap:0 20px }
  .s3-ft-legal a{ min-height:44px }
}

/* ---------------------------------------------------- consent checkboxes -- */

.s3-consent-field{ margin:4px 0 18px }
.s3-consent-field .s3-check-inline{ font-size:13.5px; line-height:1.55 }
.s3-consent-field a,
.s3-waiver a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--faint) }
.s3-consent-field a:hover,
.s3-waiver a:hover{ text-decoration-color:currentColor }
.s3-consent-field .s3-field-err{ margin-left:27px }

.s3-waiver{ margin:12px 0 0 }
.s3-waiver label{ font-size:13px; line-height:1.55 }
.woocommerce-checkout .s3-terms .woocommerce-privacy-policy-text p{ margin:0 0 12px }

/* ----------------------------------------------------------- legal pages -- */
/* page.php renders these as plain prose on --w-narrow. main.css still paints
   every prose link lime; on a legal page links are references, not actions. */

.s3-legal .s3-prose a:not(.s3-btn){
  color:var(--text); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--faint);
}
.s3-legal .s3-prose a:not(.s3-btn):hover{ text-decoration-color:currentColor }
.s3-legal .s3-prose h2{
  margin:56px 0 14px; font-size:28px; line-height:1.2; letter-spacing:-.02em; font-weight:500; color:var(--text);
}
.s3-legal .s3-prose h3{ margin:32px 0 10px; font-size:20px; line-height:1.25; letter-spacing:-.02em; font-weight:500; color:var(--text) }
.s3-legal .s3-prose strong{ color:var(--text); font-weight:500 }

.s3-legal-meta{
  margin:0 0 28px; font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  font-variant-numeric:tabular-nums; color:var(--faint);
}
.s3-legal .s3-prose .s3-legal-lede{ font-size:19px; line-height:1.6; color:var(--text) }

.s3-legal-toc{
  margin:0 0 40px; padding:18px 22px;
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
}
.s3-legal .s3-prose .s3-legal-toc ol{ margin:0; padding-left:20px; columns:2 220px; column-gap:32px }
.s3-legal .s3-prose .s3-legal-toc li{ margin:0 0 6px; break-inside:avoid; font-size:15px }

.s3-legal-table{ margin:0 0 24px; overflow-x:auto; border:1px solid var(--hairline); border-radius:var(--r-chip) }
.s3-legal-table table{ width:100%; border-collapse:collapse; font-size:14px; line-height:1.55 }
.s3-legal-table th,
.s3-legal-table td{ padding:11px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--hairline) }
.s3-legal-table tr:last-child td{ border-bottom:0 }
.s3-legal-table th{ font-weight:500; color:var(--text); background:var(--surface-1) }
.s3-legal-table td{ color:var(--muted) }
.s3-legal-table code{ font-family:var(--mono); font-size:12px; color:var(--text); overflow-wrap:anywhere }

/* On a phone each row becomes a short labelled block instead of four
   squeezed columns; the column names come from data-label on every cell. */
@media (max-width: 640px){
  .s3-legal-table thead{ display:none }
  .s3-legal-table table,
  .s3-legal-table tbody,
  .s3-legal-table tr,
  .s3-legal-table td{ display:block; width:100% }
  .s3-legal-table tr{ padding:12px 14px; border-bottom:1px solid var(--hairline) }
  .s3-legal-table tr:last-child{ border-bottom:0 }
  .s3-legal-table td{ padding:3px 0; border:0 }
  .s3-legal-table td:first-child{ color:var(--text) }
  .s3-legal-table td[data-label]::before{
    content:attr(data-label); display:block; margin-top:6px;
    font-size:12px; line-height:1.4; color:var(--faint);
  }
  .s3-legal-table td:first-child::before{ margin-top:0 }
}

/* Text the site owner has to supply. Deliberately conspicuous on the page
   until it is replaced — never accent, which would read as an action. */
.s3-ph{
  padding:1px 6px; border-radius:var(--r-chip);
  background:var(--surface-3); color:var(--text);
  outline:1px dashed var(--hairline); outline-offset:-1px;
  font-family:var(--mono); font-size:.86em; font-style:normal;
}

.s3-legal-form{
  margin:0 0 24px; padding:20px 22px;
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
  font-size:15px;
}
.s3-legal .s3-prose .s3-legal-form p:last-child{ margin-bottom:0 }

.s3-legal-settings{ margin:8px 0 28px }
.s3-legal .s3-prose a.s3-legal-settings-btn{
  display:inline-flex; align-items:center; min-height:44px; padding:0 20px;
  border-radius:var(--r-pill); background:var(--glass-2); color:var(--text);
  border:1px solid var(--hairline); text-decoration:none; font-size:15px; font-weight:500;
  transition:background var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.s3-legal .s3-prose a.s3-legal-settings-btn:hover{ background:var(--glass-3); border-color:var(--hairline-2) }

/* ---------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce){
  html.mfx-cc-open .mfx-cc,
  .mfx-cd[open]{ animation:none }
  .mfx-sw,
  .mfx-sw::after{ transition:none }
}

/* Contact form consent: the Privacy Policy link reads as a reference. */
.s3-pg-contact-consent-text a{
  color:var(--text); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--faint);
}
.s3-pg-contact-consent-text a:hover{ text-decoration-color:currentColor }