/* ww-consent banner in the site design (brand/BRAND.md: white card, 16px corners, Söhne, pill buttons).
   Deny and Allow all are the same component at identical weight; the third action is outlined.
   The page behind is dimmed but stays usable: no cookie wall. Layout: text left, Deny and Allow all stacked right,
   Customize opens the categories below.
   The card carries a soft signal-blue glow; the pixel wombat peeks over its top edge with a mono speech
   bubble, and the page's own wombat steps aside meanwhile (one wombat per view). */

#wwc{
  --ink:#141619;--ink2:#54585D;--line:rgba(20,22,25,.13);--hair:rgba(20,22,25,.08);--accent:#2E5F8A;--paper:#F6F4EE;--off:#DEDBD2;
  --card:#fff;--btn:#141619;--btn-ink:#fff;--btn-hover:#2E5F8A;--o-line:rgba(20,22,25,.2);--o-hover:#F6F4EE;--knob:#fff;
  --sig:142,197,240;--edge:rgba(var(--sig),.75);--halo:.42;--bubble-line:#0E151C;
  position:relative;z-index:2147483640;font-family:'Soehne',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:15px;line-height:1.55;color:var(--ink);letter-spacing:0
}
#wwc[data-theme="dark"]{
  --ink:#fff;--ink2:#C3C9CF;--line:rgba(246,244,238,.12);--hair:rgba(246,244,238,.08);--accent:#8EC5F0;--paper:#0E151C;--off:#3A4652;
  --card:#16212B;--btn:#8EC5F0;--btn-ink:#0E151C;--btn-hover:#CFE6F8;--o-line:rgba(246,244,238,.3);--o-hover:#0E151C;--knob:#0E151C;
  --edge:rgba(var(--sig),.9);--halo:.55;--bubble-line:#8EC5F0;--knob:#F6F4EE;--off:#4A5866
}
#wwc *,#wwc *::before,#wwc *::after{box-sizing:border-box}
#wwc:not(.wwc-on){display:none}
body:has(#wwc.wwc-on .wwc-wb) .wombat{visibility:hidden}

/* soft dim, never blocks the page */
#wwc .wwc-dim{position:fixed;inset:0;background:rgba(14,21,28,.22);pointer-events:none}

/* shell: centred, carries the wombat; the card inside scrolls when the screen is short */
#wwc .wwc-shell{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(800px,calc(100% - 48px));animation:wwc-in .28s ease-out}
@keyframes wwc-in{from{opacity:0;transform:translate(-50%,calc(-50% + 12px))}to{opacity:1;transform:translate(-50%,-50%)}}
#wwc .wwc-card{
  position:relative;z-index:1;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);overflow:auto;overscroll-behavior:contain;
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:32px 32px 28px;outline:none;
  box-shadow:0 24px 64px -24px rgba(14,21,28,.35),0 2px 6px rgba(14,21,28,.05)
}

/* the wombat peeks over the top edge, feet behind the card, bubble to its left */
#wwc .wwc-wb{position:absolute;z-index:0;right:44px;bottom:calc(100% - 20px);width:72px;height:72px;animation:wwc-peek .5s .25s ease-out both}
#wwc .wwc-wb img{display:block;width:72px;height:72px;image-rendering:pixelated}
@keyframes wwc-peek{from{transform:translateY(26px)}to{transform:none}}
#wwc .wwc-bubble{
  position:absolute;right:calc(100% + 12px);top:4px;white-space:nowrap;padding:7px 11px;font-family:'Soehne Mono',ui-monospace,Consolas,monospace;
  font-size:12px;line-height:1.3;color:#0E151C;background:#F6F4EE;border:2px solid var(--bubble-line);box-shadow:3px 3px 0 var(--bubble-line)
}
#wwc .wwc-bubble::after{content:"";position:absolute;top:50%;left:100%;margin-top:-6px;border:6px solid transparent;border-left-color:var(--bubble-line)}

#wwc h2{margin:0 36px 10px 0;font-size:20px;font-weight:500;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
#wwc p{margin:0 0 10px;color:var(--ink2)}
#wwc a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
#wwc .wwc-links{margin-bottom:18px;font-size:14px}
#wwc .wwc-badge{position:absolute;z-index:2;left:24px;top:-13px;margin:0;padding:3px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--edge);color:var(--ink2);font-size:12px;font-weight:500}

#wwc .wwc-x{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border:0;border-radius:999px;background:transparent;color:var(--ink2);font:inherit;font-size:22px;line-height:1;cursor:pointer}
#wwc .wwc-x:hover{background:var(--paper);color:var(--ink)}
#wwc .wwc-x[hidden]{display:none}

/* card layer 2: hairline rows, no boxes */
#wwc .wwc-l2{border-top:1px solid var(--line);margin:0 0 18px;padding-top:14px}
#wwc .wwc-l2[hidden]{display:none}
#wwc .wwc-intro{font-size:14px}
#wwc .wwc-gpc{font-size:14px;padding:10px 12px;border-radius:10px;background:var(--paper)}
#wwc .wwc-cat{border-bottom:1px solid var(--hair);padding:12px 0}
#wwc .wwc-cat:last-child{border-bottom:0}
#wwc .wwc-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
#wwc h3{margin:0;font-size:15px;font-weight:500;color:var(--ink)}
#wwc .wwc-cat p{margin:4px 0 6px;font-size:14px}
#wwc .wwc-fixed{font-size:13px;color:var(--ink2);white-space:nowrap}
#wwc details{font-size:13px}
#wwc summary{cursor:pointer;color:var(--accent);width:max-content}
#wwc .wwc-tw{overflow-x:auto;margin-top:2px}
#wwc table{border-collapse:collapse;width:100%;min-width:420px;table-layout:fixed}
#wwc th:nth-child(1),#wwc td:nth-child(1){width:24%}
#wwc th:nth-child(2),#wwc td:nth-child(2){width:20%}
#wwc .wwc-vend{margin-top:12px}
#wwc .wwc-vn{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:0 0 4px;font-size:13px}
#wwc .wwc-vn span{font-weight:500;color:var(--ink)}
#wwc .wwc-vn a{color:var(--ink2);text-decoration:none}
#wwc .wwc-vn a:hover{text-decoration:underline}
#wwc th,#wwc td{text-align:left;vertical-align:top;padding:6px 8px;border-bottom:1px solid var(--hair);color:var(--ink2)}
#wwc th{font-weight:500;color:var(--ink)}
#wwc td:first-child{font-family:'Soehne Mono',ui-monospace,Consolas,monospace;color:var(--ink);white-space:nowrap}

/* switch: off light grey, on accent; locked ones are dimmed */
#wwc .wwc-sw{position:relative;flex:none;width:52px;height:30px;border:0;border-radius:999px;background:var(--off);cursor:pointer;padding:0;transition:background-color .15s}
#wwc .wwc-sw span{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:999px;background:var(--knob);box-shadow:0 1px 3px rgba(14,21,28,.25);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
#wwc .wwc-sw[aria-checked="true"]{background:var(--accent)}
#wwc .wwc-sw[aria-checked="true"] span{transform:translateX(22px)}
#wwc .wwc-sw[disabled]{cursor:not-allowed;opacity:.5}
#wwc .wwc-sw[disabled][aria-checked="true"]{opacity:.55}

/* buttons: Deny and Allow all identical, the third outlined; they stay in view while the card scrolls */
#wwc .wwc-btns{display:flex;flex-wrap:wrap;gap:10px;position:sticky;z-index:2;bottom:-28px;margin:0 -32px -28px;padding:16px 32px 28px;background:var(--card)}
.wwc-b{
  flex:1 1 0;min-width:140px;min-height:52px;padding:12px 20px;border-radius:999px;border:1px solid var(--btn,#141619);
  background:var(--btn,#141619);color:var(--btn-ink,#fff);font:inherit;font-size:15px;font-weight:500;line-height:1.2;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s,transform .15s
}
.wwc-b:hover{background:var(--btn-hover,#2E5F8A);border-color:var(--btn-hover,#2E5F8A);transform:translateY(-1px)}
.wwc-b:active{transform:translateY(1px)}
.wwc-b.wwc-o{background:transparent;color:var(--ink,#141619);border-color:var(--o-line,rgba(20,22,25,.2))}
.wwc-b.wwc-o:hover{background:var(--o-hover,#F6F4EE);border-color:var(--ink,#141619)}
#wwc :focus-visible,.wwc-b:focus-visible,[data-wwc-state] :focus-visible{outline:2px solid var(--accent,#2E5F8A);outline-offset:2px}
#wwc .wwc-card:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* simple: Thermomix-like split, text left, two equal buttons stacked right, settings as a text link */
#wwc .wwc-simple{display:grid;grid-template-columns:1fr 240px;column-gap:48px;align-items:end}
#wwc .wwc-simple>*{min-width:0}
#wwc .wwc-simple .wwc-btns{position:static;margin:0;padding:0;background:none;display:flex;flex-direction:column;gap:12px}
#wwc .wwc-simple .wwc-b{flex:none;width:100%}
/* in the banner: Deny and Allow all are the same quiet outlined pill (conservative, nothing shouts) */
#wwc .wwc-b,#wwc .wwc-b.wwc-o{min-height:44px;padding:10px 18px;background:transparent;color:var(--ink);border:1px solid var(--ink);font-size:14px;transform:none}
#wwc .wwc-b:hover,#wwc .wwc-b.wwc-o:hover{background:var(--ink);border-color:var(--ink);color:var(--card);transform:none}
#wwc .wwc-simple .wwc-btns{gap:10px}
#wwc .wwc-link{font-size:14px}
#wwc .wwc-left p:last-child,#wwc #wwc-b p:last-child{margin-bottom:0}
#wwc .wwc-links{margin:10px 0 0}
#wwc .wwc-link{align-self:center;margin-top:2px;padding:6px 8px;border:0;background:none;color:var(--accent);font:inherit;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#wwc .wwc-link:hover{color:var(--ink)}
#wwc .wwc-left .wwc-l2{margin:6px 0 0}
/* expanded (Customize): one column, the categories use the full width, the three actions sit in one row
   at the bottom and stay in view while the card scrolls */
@media (min-width:561px){
  #wwc .wwc-simple:has(.wwc-l2:not([hidden])){grid-template-columns:1fr;row-gap:0}
  #wwc .wwc-simple:has(.wwc-l2:not([hidden])) .wwc-btns{flex-direction:row;position:sticky;bottom:-28px;z-index:2;margin:18px -32px -28px;padding:16px 32px 24px;background:var(--card);border-top:1px solid var(--hair)}
  #wwc .wwc-simple:has(.wwc-l2:not([hidden])) .wwc-b{flex:1 1 0;width:auto}
}

/* privacy page: state block and declaration table */
[data-wwc-state] .wwc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
[data-wwc-state] .wwc-b{flex:0 1 auto}
.wwc-decl table{border-collapse:collapse;width:100%;font-size:14px}
.wwc-decl th,.wwc-decl td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid rgba(20,22,25,.08)}
.wwc-decl th{font-weight:500}
.wwc-decl td:first-child{white-space:nowrap}
.wwc-decl .wwc-tw{overflow-x:auto}
.wwc-decl h3{margin:28px 0 6px}

@media (max-width:560px){
  #wwc .wwc-shell{top:auto;bottom:12px;transform:translateX(-50%);width:calc(100% - 24px);animation-name:wwc-in-m}
  #wwc .wwc-card{max-height:calc(100dvh - 150px);padding:22px 18px 18px}
  #wwc .wwc-btns{display:grid;grid-template-columns:1fr 1fr;bottom:-18px;margin:0 -18px -18px;padding:12px 18px 18px;box-shadow:0 -1px 0 var(--hair)}
  #wwc .wwc-btns [data-a="deny"]{order:1}#wwc .wwc-btns [data-a="all"]{order:2}#wwc .wwc-btns [data-a="save"],#wwc .wwc-btns [data-a="custom"]{order:3;grid-column:1/-1}
  #wwc .wwc-b{min-width:0}
  #wwc h2{font-size:18px}
  #wwc .wwc-bubble{font-size:11px;padding:5px 8px}
  #wwc .wwc-b,#wwc .wwc-b.wwc-o{min-height:48px}
  #wwc .wwc-wb{right:22px;width:56px;height:56px;bottom:calc(100% - 16px)}
  #wwc .wwc-wb img{width:56px;height:56px}
  #wwc .wwc-simple{grid-template-columns:1fr;row-gap:12px}
  #wwc .wwc-simple .wwc-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:sticky;bottom:-18px;margin:0 -18px -18px;padding:12px 18px 18px;background:var(--card);box-shadow:0 -1px 0 var(--hair)}
  #wwc .wwc-simple .wwc-link{grid-column:1/-1}
}
@keyframes wwc-in-m{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){
  #wwc .wwc-shell,#wwc .wwc-card,#wwc .wwc-wb{animation:none}
  #wwc .wwc-sw,#wwc .wwc-sw span,.wwc-b{transition:none}
}

/* UTM Registry skin: a calm work tool, not the playful WW site. No wombat, no glow; the card is the white link
   card of the login page (hairline, soft shadow), the title is the app's Fraunces light ("Which workspace?"),
   text in Inter. Deny and Allow all are the same outlined pill; Customize stays the accent link. Loaded after
   the base styles; the fonts come from the app (next/font variables on <html>). */
#wwc#wwc{
  --ink:#181B1E;--ink2:#4E5257;--line:rgba(24,27,30,.16);--hair:rgba(24,27,30,.08);--accent:#2E5F8A;--paper:#F4F2EA;--off:#D9D6CC;
  --card:#fff;--knob:#fff;--edge:rgba(24,27,30,.16);
  font-family:var(--font-inter),Arial,sans-serif;font-size:15px;line-height:1.55;color:var(--ink)
}
#wwc .wwc-dim{background:rgba(24,27,30,.18)}
#wwc .wwc-shell{width:min(760px,calc(100% - 48px))}
#wwc .wwc-card{
  border:1px solid rgba(24,27,30,.16);border-radius:16px;padding:32px 32px 28px;animation:none;background:#fff;
  box-shadow:0 24px 64px -24px rgba(14,21,28,.35),0 2px 6px rgba(14,21,28,.05)
}
#wwc h2{margin:0 36px 12px 0;font-family:var(--font-fraunces),Georgia,serif;font-weight:300;font-size:28px;line-height:1.15;letter-spacing:-.01em;color:#181B1E}
#wwc p{color:#4E5257}
#wwc a{color:#2E5F8A;text-underline-offset:3px}
#wwc .wwc-links{font-size:14px;margin-bottom:0}

#wwc .wwc-simple{grid-template-columns:1fr 220px;column-gap:40px}
#wwc .wwc-simple .wwc-btns{gap:10px}
#wwc .wwc-b,#wwc .wwc-b.wwc-o{
  min-height:44px;padding:10px 18px;border:1px solid #181B1E;background:transparent;color:#181B1E;font-size:14px;font-weight:500;transform:none
}
#wwc .wwc-b:hover,#wwc .wwc-b.wwc-o:hover{background:#181B1E;border-color:#181B1E;color:#F4F2EA;transform:none}
#wwc .wwc-link{font-size:14px;color:#2E5F8A}
#wwc .wwc-sw[aria-checked="true"]{background:#2E5F8A}
#wwc .wwc-badge{background:#F4F2EA;border-color:rgba(24,27,30,.16)}

@media (max-width:560px){
  #wwc .wwc-card{padding:24px 20px 20px}
  #wwc h2{font-size:24px}
  #wwc .wwc-simple{grid-template-columns:1fr;row-gap:14px}
  #wwc .wwc-simple .wwc-btns{bottom:-20px;margin:0 -20px -20px;padding:12px 20px 20px;background:#fff;box-shadow:0 -1px 0 rgba(24,27,30,.08)}
}
