/* ============================================================
   TUMMI — Parity atoms (v5.1 · Zeegloed)  ·  components-ui.css
   SPEC-DELTA §5 items marked U + §7 work order. Loads AFTER
   components.css / components-data.css — extends, never restyles
   their classes. Same materials as the rest of Zeegloed: wells,
   raised chips, hairlines, warm shadows, pill actions, r-sm/md.
   Motion law (inherited): compositor props only; hover/press
   crossfade a pre-rendered ::before/::after layer — never a
   box-shadow or background transition; transform carries the lift.
   Every interactive atom has hover / focus-visible / active; the
   global :focus-visible ring + reduced-motion gate live in
   tokens.css. Warm attention only, never alarm-red.
   NOTE: .sheet already exists in components.css (bottom sheet w/
   .grip). The mobile grab-handle variant here is .sheet-mobile
   with .grab, to avoid overriding the existing overlay atom.
   ============================================================ */

/* ===================== DROPDOWN MENU (.dd) ===================== */
/* glass panel, raised active row */
.dd {
  position: absolute; z-index: 60; min-width: 200px;
  padding: var(--s-2);
  border-radius: var(--r-md);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.6);
  opacity: 0; transform: translateY(calc(var(--rise-1) * -1));
  pointer-events: none;
  transition: opacity var(--d-swap) var(--ease-settle),
              transform var(--d-swap) var(--ease-settle);
}
[data-theme="dark"] .dd { box-shadow: var(--shadow-lg); }
.dd.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dd-item {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; padding: var(--s-2) var(--s-3);
  border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: var(--t-sm);
  color: var(--ink-soft);
  transition: color var(--d-state) var(--ease-across),
              transform var(--d-state) var(--ease-settle);
}
.dd-item::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; background: var(--sink);
  opacity: 0; transition: opacity var(--d-state) var(--ease-settle);
}
.dd-item > * { position: relative; z-index: 1; }
.dd-item:hover { color: var(--ink); }
.dd-item:hover::before { opacity: 1; }
.dd-item:active { transform: translateY(1px); }
.dd-item[aria-selected="true"], .dd-item.is-active {
  color: var(--ink); background: var(--raise); box-shadow: var(--raise-shadow);
}
.dd-sep { height: 1px; margin: var(--s-2) var(--s-1); background: var(--hairline); }

/* ===================== BREADCRUMBS (.crumbs) ===================== */
/* mono, chevrons, current in ink */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-caption);
  letter-spacing: .02em; color: var(--ink-muted);
}
.crumbs > * + *::before {
  content: "\203A"; margin-right: var(--s-2);
  color: var(--ink-faint); font-weight: 500;
}
.crumbs a {
  color: var(--ink-muted); text-decoration: none;
  transition: color var(--d-state) var(--ease-across);
}
.crumbs a:hover, .crumbs a:focus-visible { color: var(--ink-soft); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ===================== PAGINATION (.pgn) ===================== */
/* pill group, active raised */
.pgn { display: inline-flex; align-items: center; gap: var(--s-1); }
.pgn-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 var(--s-2);
  border: 0; border-radius: var(--r-pill);
  background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--t-sm);
  color: var(--ink-soft);
  transition: color var(--d-state) var(--ease-across),
              transform var(--d-state) var(--ease-settle);
}
.pgn-btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; background: var(--sink);
  opacity: 0; transition: opacity var(--d-state) var(--ease-settle);
}
.pgn-btn > * { position: relative; z-index: 1; }
.pgn-btn:hover { color: var(--ink); }
.pgn-btn:hover::before { opacity: 1; }
.pgn-btn:active { transform: translateY(1px) scale(.97); }
.pgn-btn[aria-current="page"], .pgn-btn.is-active {
  color: var(--ink); background: var(--raise); box-shadow: var(--raise-shadow);
}
.pgn-btn[disabled] { opacity: .4; pointer-events: none; }

/* ===================== INLINE BANNERS (.banner) ===================== */
/* base = gold-wash attention · --note = sage-wash note. NEVER alarm-red.
   Icon tile left, NO side-borders. */
.banner {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--gold-wash);
  color: var(--ink);
  font-size: var(--t-sm); line-height: 1.5;
}
.banner-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--card); color: var(--gold-deep);
}
.banner-ic svg { width: 16px; height: 16px; }
.banner-body { flex: 1; min-width: 0; }
.banner-title { font-weight: 600; color: var(--ink); }
.banner--note { background: var(--sage-wash); }
.banner--note .banner-ic { color: var(--sage-deep); }

/* ===================== AVATAR GROUP (.avgrp) ===================== */
/* overlapping circles, hairline rims, +N chip */
.avgrp { display: inline-flex; align-items: center; }
.avgrp .av, .avgrp .avgrp-more {
  width: 34px; height: 34px; border-radius: 50%;
  margin-left: -10px; flex: none;
  box-shadow: 0 0 0 2px var(--card), var(--shadow-xs);
  background: var(--sink); overflow: hidden;
}
.avgrp .av:first-child, .avgrp .avgrp-more:first-child { margin-left: 0; }
.avgrp .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avgrp-more {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--raise); box-shadow: 0 0 0 2px var(--card), var(--raise-shadow);
  font-family: var(--font-mono); font-size: var(--t-caption); color: var(--ink-soft);
}

/* ===================== BOTTOM SHEET (.sheet-mobile) ===================== */
/* grab-handle variant — see NOTE in header; distinct from components.css .sheet */
.sheet-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
  padding: var(--s-3) var(--s-5) var(--s-7);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--card);
  border-top: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform var(--d-reveal) var(--ease-settle);
}
.sheet-mobile.is-open { transform: translateY(0); }
.grab {
  display: block; width: 44px; height: 5px;
  margin: 0 auto var(--s-4);
  border-radius: var(--r-pill); background: var(--hairline-strong);
  cursor: grab;
}

/* ===================== FILE DROPZONE (.dropzone) ===================== */
/* dashed hairline-strong well, hover gold catch, .is-drag state */
.dropzone {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-7) var(--s-5); text-align: center;
  border: 2px dashed var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--sink);
  color: var(--ink-muted); font-size: var(--t-sm); cursor: pointer;
  transition: color var(--d-state) var(--ease-across),
              transform var(--d-state) var(--ease-settle);
}
.dropzone::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; background: var(--gold-wash);
  opacity: 0; transition: opacity var(--d-state) var(--ease-settle);
}
.dropzone > * { position: relative; z-index: 1; }
.dropzone:hover, .dropzone:focus-visible { color: var(--ink-soft); }
.dropzone:hover::before { opacity: .6; }
.dropzone.is-drag {
  color: var(--gold-deep); border-color: var(--gold-mark);
  transform: scale(1.005);
}
.dropzone.is-drag::before { opacity: 1; }
.dropzone-ic { width: 26px; height: 26px; color: var(--gold-deep); }

/* ===================== LANGUAGE DROPDOWN (.langdrop) ===================== */
/* NL/EN rows, sage check on active */
.langdrop {
  position: absolute; z-index: 60; min-width: 148px;
  padding: var(--s-2);
  border-radius: var(--r-md);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.6);
}
[data-theme="dark"] .langdrop { box-shadow: var(--shadow-lg); }
.langdrop-row {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; padding: var(--s-2) var(--s-3);
  border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--t-sm); color: var(--ink-soft);
  transition: color var(--d-state) var(--ease-across);
}
.langdrop-row::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; background: var(--sink);
  opacity: 0; transition: opacity var(--d-state) var(--ease-settle);
}
.langdrop-row > * { position: relative; z-index: 1; }
.langdrop-row:hover { color: var(--ink); }
.langdrop-row:hover::before { opacity: 1; }
.lang-check {
  width: 14px; height: 14px; flex: none;
  color: var(--sage-mark); opacity: 0;
  transition: opacity var(--d-state) var(--ease-settle);
}
.langdrop-row[aria-selected="true"] { color: var(--ink); }
.langdrop-row[aria-selected="true"] .lang-check { opacity: 1; }

/* ===================== TOAST VARIANTS ===================== */
/* extend the existing .toast (components.css). sage note / coral attention.
   Dutch, non-judgment: "even opgeslagen" · "één ding om te bekijken". */
.toast-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
}
.toast-ic svg { width: 15px; height: 15px; }
.toast--note .toast-ic     { background: var(--sage-wash); color: var(--sage-deep); }
.toast--aandacht .toast-ic { background: var(--coral-wash); color: var(--coral-deep); }

/* ===================== TOOLTIP (.tip) ===================== */
/* ink plate, cream text, 6px rise on show */
.tip {
  position: absolute; z-index: 70;
  max-width: 220px; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  background: var(--ink); color: var(--ink-inverse);
  font-size: var(--t-caption); line-height: 1.4;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--d-state) var(--ease-settle),
              transform var(--d-state) var(--ease-settle);
}
.tip.is-open { opacity: 1; transform: translateY(0); }

/* ===================== MINI HISTOGRAM (.histo) ===================== */
/* single-hue bars via --histo-fill, well track */
.histo {
  display: flex; align-items: flex-end; gap: 3px;
  height: 64px; padding: var(--s-2);
  border-radius: var(--r-sm);
  background: var(--sink); box-shadow: var(--well-inset);
}
.histo-bar {
  flex: 1; min-width: 3px; align-self: flex-end;
  height: var(--h, 40%);
  border-radius: var(--r-xs) var(--r-xs) 2px 2px;
  background: var(--histo-fill, var(--fill-default));
}

/* ===================== SCATTER (.scatter) ===================== */
/* neutral decorative dot field, ink-faint dots, one coral-mark accent dot */
.scatter {
  position: relative; height: 120px;
  border-radius: var(--r-sm);
  background:
    radial-gradient(var(--ink-faint) 1.4px, transparent 1.6px) 0 0 / 22px 22px,
    radial-gradient(var(--ink-faint) 1.1px, transparent 1.3px) 11px 11px / 22px 22px,
    var(--sink);
  opacity: .9;
}
.scatter-mark {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral-mark); box-shadow: 0 0 0 4px var(--coral-wash);
}

/* ===================== AUDIENCE CARDS (.audcard) ===================== */
/* plate, hover lift, selected raised + sage dot */
.audcard {
  position: relative; isolation: isolate;
  display: block; width: 100%; text-align: left;
  padding: var(--s-5);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--card); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform var(--d-state) var(--ease-settle);
}
.audcard::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; background: var(--sage-wash);
  opacity: 0; transition: opacity var(--d-state) var(--ease-settle);
}
.audcard > * { position: relative; z-index: 1; }
.audcard:hover { transform: translateY(-2px); }
.audcard:hover::before { opacity: .5; }
.audcard:active { transform: translateY(0); }
.audcard-title { font-family: var(--font-display); font-size: var(--t-h4); color: var(--ink); }
.audcard-dot {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sage-mark); opacity: 0;
  transition: opacity var(--d-state) var(--ease-settle);
}
.audcard.is-selected {
  border-color: transparent; background: var(--raise); box-shadow: var(--raise-shadow);
}
.audcard.is-selected::before { opacity: 1; }
.audcard.is-selected .audcard-dot { opacity: 1; }

/* ===================== COMPARISON TABLE (.cmp) ===================== */
/* two-column, check/dash glyphs, zebra */
.cmp { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.cmp th, .cmp td {
  padding: var(--s-3) var(--s-4); text-align: left;
  border-bottom: 1px solid var(--hairline);
}
.cmp thead th {
  font-family: var(--font-mono); font-size: var(--t-caption);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
}
.cmp tbody tr:nth-child(even) { background: var(--paper-alt); }
.cmp td:not(:first-child) { text-align: center; }
.cmp-yes { color: var(--sage-mark); }
.cmp-no  { color: var(--ink-faint); }
.cmp-yes svg, .cmp-no svg { width: 16px; height: 16px; }

/* ===================== PRICING CARDS (.price) ===================== */
/* --feat = the one dark plate: cream text + gold hairline-warm accent */
.price {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--shadow-sm);
}
.price-plan { font-family: var(--font-mono); font-size: var(--t-caption);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.price-amt { font-family: var(--font-display); font-size: var(--t-h1); color: var(--ink); }
.price-amt .u { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-muted); }
.price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.price li { display: flex; gap: var(--s-2); color: var(--ink-soft); font-size: var(--t-sm); }
.price li svg { width: 15px; height: 15px; color: var(--sage-mark); flex: none; }
.price--feat {
  background: var(--bloom-nachtzee); color: var(--ink-inverse);
  border: 1px solid var(--hairline-warm);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
}
.price--feat .price-plan { color: var(--hairline-warm); }
.price--feat .price-amt, .price--feat .price-amt .u { color: var(--ink-inverse); }
.price--feat li { color: var(--ink-inverse); }
.price--feat li svg { color: var(--sage-tint); }

/* ===================== LOGO WALL (.logowall) ===================== */
/* desaturated + dimmed, hover full */
.logowall {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6);
}
.logowall img, .logowall svg {
  height: 26px; width: auto;
  filter: saturate(0); opacity: .5;
  transition: opacity var(--d-state) var(--ease-across),
              filter var(--d-state) var(--ease-across);
}
.logowall a:hover img, .logowall a:hover svg,
.logowall img:hover, .logowall svg:hover { filter: saturate(1); opacity: 1; }

/* ===================== ACCORDION (.acc) ===================== */
/* hairline rows, chevron rotates 180deg; panel toggles (no height anim) */
.acc { border-top: 1px solid var(--hairline); }
.acc-item { border-bottom: 1px solid var(--hairline); }
.acc-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; padding: var(--s-4) 0;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: var(--t-h4); color: var(--ink);
  transition: color var(--d-state) var(--ease-across);
}
.acc-head:hover { color: var(--ink-soft); }
.acc-ic {
  flex: none; width: 18px; height: 18px; color: var(--ink-muted);
  transition: transform var(--d-control) var(--ease-settle);
}
.acc-item.is-open .acc-ic { transform: rotate(180deg); }
.acc-panel { display: none; padding: 0 0 var(--s-4); color: var(--ink-soft); font-size: var(--t-sm); }
.acc-item.is-open .acc-panel { display: block; }

/* ===================== ONBOARDING PHASE BAR (.phasebar) ===================== */
/* segments fill via --fill-sage, mono labels */
.phasebar { display: flex; gap: var(--s-2); }
.phase-seg { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); }
.phase-track {
  height: 6px; border-radius: var(--r-pill);
  background: var(--sink); box-shadow: var(--well-inset);
  overflow: hidden;
}
.phase-track::before {
  content: ""; display: block; height: 100%; width: 0;
  background: var(--fill-sage);
  transition: width var(--d-reveal) var(--ease-settle);
}
.phase-seg.is-active .phase-track::before,
.phase-seg.is-done .phase-track::before { width: 100%; }
.phase-label {
  font-family: var(--font-mono); font-size: var(--t-caption);
  letter-spacing: .04em; color: var(--ink-muted);
}
.phase-seg.is-active .phase-label { color: var(--ink); }

/* ===================== FOOTER + COMPLIANCE (.foot) ===================== */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted); font-size: var(--t-sm);
}
.compliance { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.compliance-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--card);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
}
.compliance-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage-mark); flex: none;
}

/* ===================== CONSENT STRIP (.consent-strip) ===================== */
/* paper-alt band, ink text, two pill actions */
.consent-strip {
  position: fixed; left: 50%; bottom: var(--s-5); z-index: 80;
  transform: translateX(-50%);
  width: min(680px, calc(100vw - var(--s-6)));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--paper-alt); box-shadow: var(--shadow-lg);
  color: var(--ink); font-size: var(--t-sm);
}
.consent-strip p { flex: 1; min-width: 220px; margin: 0; }
.consent-actions { display: flex; gap: var(--s-2); flex: none; }

/* ===================== MOBILE HEADER (.navdemo) ===================== */
/* glass bar, hamburger 3-line icon button */
.navdemo {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6);
}
[data-theme="dark"] .navdemo { box-shadow: var(--shadow-sm); }
.navdemo-brand { font-family: var(--font-display); font-size: var(--t-h4); color: var(--ink); }
.navdemo-burger {
  position: relative; isolation: isolate;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px; padding: 0 9px;
  border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer;
  transition: transform var(--d-state) var(--ease-settle);
}
.navdemo-burger::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; background: var(--sink);
  opacity: 0; transition: opacity var(--d-state) var(--ease-settle);
}
.navdemo-burger:hover::before { opacity: 1; }
.navdemo-burger:active { transform: scale(.94); }
.navdemo-burger span {
  position: relative; z-index: 1;
  display: block; height: 2px; border-radius: var(--r-pill);
  background: var(--ink);
}

/* ===================== MOBILE MENU (.mmenu) ===================== */
/* full glass panel, big Fraunces links */
.mmenu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-8) var(--s-6);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  opacity: 0; transform: translateY(var(--rise-3)); pointer-events: none;
  transition: opacity var(--d-enter) var(--ease-settle),
              transform var(--d-enter) var(--ease-settle);
}
.mmenu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mmenu a {
  font-family: var(--font-display); font-size: var(--t-h2); font-weight: 400;
  color: var(--ink); text-decoration: none;
  transition: color var(--d-state) var(--ease-across);
}
.mmenu a:hover, .mmenu a:focus-visible { color: var(--coral-deep); }

/* ===================== REDUCED MOTION ===================== */
/* The global gate in tokens.css already neutralizes animations and limits
   transitions to opacity/box-shadow. Here we make the transform-carried
   reveals explicitly instant/opacity-only so nothing slides for users who
   asked it not to. */
@media (prefers-reduced-motion: reduce) {
  .dd, .langdrop, .tip, .mmenu, .sheet-mobile { transform: none !important; }
  .acc-ic { transition: none !important; }
  .phase-track::before { transition: none !important; }
}