/* ==========================================================================
   Wopara Group floating nav pill — shared across all Wopara sites.
   Config via window.WoparaPill (see woparapill.js). Self-contained styling so
   it looks consistent regardless of each page's own theme.
   ========================================================================== */
/* Offset in-page anchor jumps so sections clear the fixed pill */
html{ scroll-padding-top:74px; }

/* Only real typing surfaces are selectable. Everything else (labels, buttons,
   headings, avatars, cards, panel chrome) is not, so dragging never leaves a
   stray blue text highlight across the UI. Opt back in with .wp-allow-select. */
html, body{ -webkit-user-select:none; -moz-user-select:none; user-select:none; }
input, textarea, select, [contenteditable], [contenteditable="true"],
.wp-allow-select, .wp-allow-select *{
  -webkit-user-select:text; -moz-user-select:text; user-select:text;
}

.wp-pill{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:6000;
  display:inline-flex; flex-direction:column; align-items:stretch;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  max-width:calc(100vw - 20px);
  /* Held at the panel radius (not 999px) so the corners never balloon: a 999px
     radius on a box growing taller clamps to half-height every frame, so mid-
     expansion the corners swell then settle late. 24px reads as fully-round ends
     on the 46px resting row yet stays crisp as the rectangle grows. */
  border-radius:24px; overflow:hidden;
  transition:border-radius .42s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}
.wp-pill.panel-open{ border-radius:24px; }
.wp-pill.search-open{ border-radius:18px; }
/* hide when running as an iframe app */
html.in-iframe .wp-pill, html.in-iframe .wp-topleft, html.in-iframe .wp-topright { display:none !important; }
/* dimmed header while scrolling down */
.wp-dim{ opacity:.32; }
/* the always-visible top row (logo + nav + avatar) that stays atop the rectangle */
.wp-top{ display:flex; align-items:center; gap:9px; }
.wp-pill.open .wp-top{ gap:0; }
.wp-pill.panel-open .wp-top{ gap:0; }
/* the small avatar is redundant once the big profile orb is in the panel */
/* In the rectangle the avatar slot stays put and reads as a hamburger (filling
   what used to be a blank gap); clicking it collapses the rectangle. */
.wp-pill.panel-open .wp-avatar{ display:flex; margin-left:8px; margin-right:auto; }
.wp-avatar.wp-av-ham > img, .wp-avatar.wp-av-ham > svg{ display:none; }
.wp-avatar.wp-av-ham::before{
  content:''; width:18px; height:13px; opacity:.8; transition:opacity .2s ease;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='%23eef2f7' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='3' y1='3' x2='21' y2='3'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3C/svg%3E");
}
.wp-avatar.wp-av-ham:hover::before{ opacity:1; }
/* never inherit a host page's underline-on-hover for links */
.wp-pill a, .wp-pill a:hover, .wp-pill a:focus{ text-decoration:none; }

/* the unified glass that fades in when the pieces join (hover / open) */
/* ===== Shared hero banner (top ~70vh, blurred background, curved bottom) ===== */
.wp-hero{ position:relative; width:100%; height:74vh; min-height:480px; max-height:820px; overflow:hidden; border-bottom-left-radius:42px; border-bottom-right-radius:42px; background:#0a0c12; z-index:0; }
.wp-hero-bg{ position:absolute; inset:-50px; background-size:cover; background-position:center; filter:blur(30px) saturate(1.08); transform:scale(1.14); }
.wp-hero-veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,10,16,.35) 0%, rgba(8,10,16,.12) 42%, rgba(8,10,16,.55) 78%, rgba(8,10,16,.9) 100%); }
/* huge, partly-out-of-frame decorative scenes that glow ("light up") the hero */
.wp-hero-decor{ position:absolute; z-index:1; pointer-events:none; width:min(46vw,560px); color:#cfe0ff; opacity:.16; filter:drop-shadow(0 0 16px rgba(120,170,255,.35)); }
.wp-hero-decor svg{ width:100%; height:auto; display:block; }
.wp-decor-l{ left:-7%; bottom:-13%; transform-origin:bottom left; animation:wp-decor-b 11s ease-in-out infinite, wp-decor-glow 6s ease-in-out infinite; }
.wp-decor-r{ right:-7%; bottom:-13%; transform-origin:bottom right; animation:wp-decor-a 9s ease-in-out infinite, wp-decor-glow 6s ease-in-out infinite .6s; }
@keyframes wp-decor-a{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-16px) rotate(-2deg); } }
@keyframes wp-decor-b{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-20px) rotate(2deg); } }
@keyframes wp-decor-glow{ 0%,100%{ opacity:.12; filter:drop-shadow(0 0 12px rgba(120,170,255,.25)); } 50%{ opacity:.26; filter:drop-shadow(0 0 26px rgba(150,190,255,.6)); } }
@media (prefers-reduced-motion:reduce){ .wp-decor-l, .wp-decor-r{ animation:none; } }
@media (max-width:600px){ .wp-hero-decor{ width:62vw; opacity:.13; } }
.wp-hero-copy{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:2; margin:0 auto; max-width:840px; padding:0 22px; text-align:center; font-family:'Inter',system-ui,-apple-system,sans-serif; }
.wp-hero-title{ margin:0 0 14px; font-size:clamp(2rem,6vw,3.6rem); font-weight:800; line-height:1.12; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.55); }
.wp-hero-sub{ margin:0 auto; max-width:680px; color:#eef2f7; font-size:clamp(1rem,2.2vw,1.4rem); font-weight:600; line-height:1.5; text-shadow:0 2px 24px rgba(0,0,0,.5); }
/* big centred action pills at the bottom of the hero (shown when the rectangle is dismissed there) */
/* Pills stay on ONE centred row and NEVER scroll horizontally. When many sections
   would overflow the row, JS shrinks every pill together (via --wp-hero-scale) until
   they all fit, so the whole set is always visible in the hero. Only if they still
   don't fit at the minimum size do they wrap onto extra rows (.wrap), still no scroll. */
/* padding-top gives the hover lift + drop shadow room; pills stay bottom-anchored
   (align-items:flex-end) so they don't move. pointer-events are off on the padded
   strip and on only for the pills, so the extra top space never swallows clicks on
   hero content behind it. */
.wp-hero-actions{ position:absolute; left:0; right:0; bottom:56px; z-index:2; display:none; flex-wrap:nowrap; justify-content:center; align-items:flex-end; gap:calc(12px * var(--wp-hero-scale,1)); padding:26px 20px 14px; overflow:hidden; pointer-events:none; }
.wp-hero-actions.show{ display:flex; }
.wp-hero-actions.show.wrap{ flex-wrap:wrap; }
/* while JS is deciding the shrink scale it left-aligns so scrollWidth is exact */
.wp-hero-actions.measuring{ justify-content:flex-start; }
/* On phones the row hugs the screen edges (less side padding + tighter gap) so the
   pills have more room and the shrink-to-fit keeps them bigger, closer to edge-to-edge. */
/* On a phone the circles carry captions, so the block is taller; anchored at the old
   bottom:56px it floated too high. Drop it toward the hero's bottom edge and trim the
   bottom padding so the labels sit close to the curve. */
@media (max-width:640px){ .wp-hero-actions{ padding-left:8px; padding-right:8px; padding-bottom:6px; gap:calc(8px * var(--wp-hero-scale,1)); bottom:22px; } }
.wp-hero-actions.dim{ opacity:.22; pointer-events:none; }
.wp-hero-actions{ transition:opacity .3s ease; }
.wp-hero-actions a{ pointer-events:auto; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; padding:calc(13px * var(--wp-hero-scale,1)) calc(19px * var(--wp-hero-scale,1)); border-radius:999px; font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:calc(1rem * var(--wp-hero-scale,1)); font-weight:700; color:#fff; text-decoration:none; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(0,0,0,.32); transition:background .15s ease, transform .15s ease; }
.wp-hero-actions a:hover{ background:rgba(255,255,255,.2); transform:translateY(-1px); }
/* the pill you're "in" (current tab/section) is painted in the accent */
.wp-hero-actions a.is-active{ background:var(--wp-accent,#0a84ff); border-color:transparent; color:var(--wp-on-accent,#fff); box-shadow:0 10px 30px rgba(0,0,0,.32), 0 0 0 1px var(--wp-accent,#0a84ff); }
.wp-hero-actions a.is-active:hover{ background:var(--wp-accent,#0a84ff); filter:brightness(1.06); }
.wp-actions-list a.is-active, .wp-act.is-active{ color:var(--wp-on-accent,#fff); background:var(--wp-accent,#0a84ff); border-radius:999px; }

/* Hero pill icons (heroIcons pages). The icon rides beside the word on a desktop
   width, which is where you learn what it means; on a phone the word drops and the
   pill collapses to a circle around the icon, so a long row of sections stays big
   and legible instead of squeezing every word thin. The icon markup is always in
   the DOM but stays hidden outside an opted-in hero (the profile rectangle keeps
   its word-only list). */
.wp-act-ico{ display:none; }
.wp-hero-actions.wp-icons a{ gap:calc(10px * var(--wp-hero-scale,1)); }
.wp-hero-actions.wp-icons .wp-act-ico{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:calc(22px * var(--wp-hero-scale,1)); height:calc(22px * var(--wp-hero-scale,1)); }
.wp-hero-actions.wp-icons .wp-act-ico svg{ width:100%; height:100%; display:block; }
/* the Servant's face fills its circle rather than sitting in it as a small glyph */
.wp-hero-actions.wp-icons .wp-act-ico img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
/* A face is a portrait, not a glyph, so it runs a touch larger than the stroke icons
   and eats a little of the pill's leading padding. It stays in the same optical band
   as its neighbours: outgrow them and the row loses its rhythm. */
.wp-hero-actions.wp-icons .wp-act-ico-face{ width:calc(28px * var(--wp-hero-scale,1)); height:calc(28px * var(--wp-hero-scale,1)); margin:calc(-3px * var(--wp-hero-scale,1)) 0 calc(-3px * var(--wp-hero-scale,1)) calc(-4px * var(--wp-hero-scale,1)); }
.wp-act-ltr{ font-size:calc(1rem * var(--wp-hero-scale,1)); font-weight:800; line-height:1; }
/* Circles (.wp-circles is applied by fitHeroActions). Always on a phone, where there
   is never room for the words; on a desktop only once the words won't fit two rows
   (the Dictionary's 19 categories) -- a second row of readable pills beats one row of
   slivers, so circles are the last resort, not the first.

   Word-less circles free up the whole width, so the row spends it: each circle takes
   exactly its column's share of the line (capped) and they spread edge to edge instead
   of huddling in the middle. --wp-hero-cols is the per-line count, chosen so wrapped
   rows come out even. 46px / 9px must match WP_ICON_MIN / WP_ICON_GAPS in woparapill.js. */
/* space-evenly, not space-between: the leftover once every circle hits its 78px cap
   must fall EQUALLY at the two edges and between the circles, or a short row (4 icons
   on a wide hero) pins the outer two flush to the edge and piles all the air in the
   middle. gap and side padding both go to 0 so nothing skews that even distribution;
   the flex-basis still reserves --wp-icon-gap of slack per column, which space-evenly
   then redistributes across every slot (edges included) so even a full row breathes. */
.wp-hero-actions.wp-icons.wp-circles{ align-items:flex-start; justify-content:space-evenly; padding-left:0; padding-right:0; --wp-icon-gap:calc(9px * var(--wp-hero-scale,1)); gap:0; }
/* Wordless circles get their WORD back as a small caption UNDER the circle: the row
   stays a clean line of eggs, but each carries a quiet label so a first-time phone
   visitor still learns what each one is. To hang the label outside the round, the
   glass/shape moves off the <a> (now a plain column) and onto the icon wrapper. */
.wp-hero-actions.wp-icons.wp-circles a{ box-sizing:border-box; flex-direction:column; gap:calc(6px * var(--wp-hero-scale,1)); flex:0 0 calc((100% - (var(--wp-hero-cols,6) - 1) * var(--wp-icon-gap)) / var(--wp-hero-cols,6)); min-width:46px; max-width:calc(78px * var(--wp-hero-scale,1)); height:auto; padding:0; background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0; }
.wp-hero-actions.wp-icons.wp-circles a:hover{ background:transparent; transform:none; }
.wp-hero-actions.wp-icons.wp-circles .wp-act-ico{ width:100%; height:auto; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(0,0,0,.32); transition:background .15s ease, transform .15s ease; }
.wp-hero-actions.wp-icons.wp-circles a:hover .wp-act-ico{ background:rgba(255,255,255,.2); transform:translateY(-1px); }
.wp-hero-actions.wp-icons.wp-circles .wp-act-ico svg{ width:56%; height:56%; }
.wp-hero-actions.wp-icons.wp-circles .wp-act-ico-face{ margin:0; }
/* active section: the accent fills the circle, not the whole column */
.wp-hero-actions.wp-icons.wp-circles a.is-active{ background:transparent; box-shadow:none; }
.wp-hero-actions.wp-icons.wp-circles a.is-active .wp-act-ico{ background:var(--wp-accent,#0a84ff); border-color:transparent; box-shadow:0 10px 30px rgba(0,0,0,.32), 0 0 0 1px var(--wp-accent,#0a84ff); }
/* the caption: small enough that neighbours never touch, one line, centred */
.wp-hero-actions.wp-icons.wp-circles .wp-act-lbl{ display:block; max-width:100%; margin:0; font-size:calc(.62rem * var(--wp-hero-scale,1)); font-weight:600; line-height:1.15; text-align:center; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 6px rgba(0,0,0,.6); }
/* the green fill already says "done"; the tick has no room in a circle */
.wp-hero-actions.wp-icons.wp-circles .wp-act-check{ display:none; }
.wp-hero-actions.wp-icons.wp-circles .wp-act-ltr{ font-size:1.25rem; }
/* a wrapped row (many sections) centres its last line rather than stretching it */
.wp-hero-actions.wp-icons.wp-circles.wrap{ justify-content:center; }

/* When an Appearance theme is active the floating pieces (nav pill, crumbs, pins,
   splash) pick up the account's colour. We tint the dark glass TOWARD the accent
   rather than swapping in the light themed surface, so the pieces stay dark and
   their white text stays readable in every theme (including the White one). These
   vars only exist while a theme is on; everything else falls back to the original
   neutral glass, so the Default appearance is unchanged. */
html.wp-theme-on{
  --wp-pill-surface: color-mix(in srgb, var(--wp-accent,#4f8fff) 18%, rgba(14,16,24,.78));
  --wp-pill-surface-strong: color-mix(in srgb, var(--wp-accent,#4f8fff) 20%, rgba(12,14,22,.86));
  --wp-pill-border: color-mix(in srgb, var(--wp-accent,#4f8fff) 34%, rgba(255,255,255,.14));
}

.wp-pill::before{
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:var(--wp-pill-surface, rgba(16,18,26,.55)); border:1px solid var(--wp-pill-border, rgba(255,255,255,.12));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .42s ease, box-shadow .6s ease, border-radius .42s cubic-bezier(.22,.61,.36,1);
}
.wp-pill > .wp-top, .wp-pill > .wp-panel, .wp-pill > .wp-search, .wp-pill > .wp-settings-view{ position:relative; z-index:1; }

/* idle: separate floating glass pieces */
.wp-core, .wp-avatar{
  background:var(--wp-pill-surface, rgba(16,18,26,.55)); border:1px solid var(--wp-pill-border, rgba(255,255,255,.12));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.4);
  transition:background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.wp-core{
  display:inline-flex; align-items:center; justify-content:flex-start;
  height:46px; padding:0 14px; border-radius:999px;
}
/* push the search + avatar to the right end of the row */
.wp-search-trigger{ margin-left:auto; }

/* joined state: pieces go transparent and the unified glass shows through */
.wp-pill.open::before, .wp-pill.panel-open::before, .wp-pill.search-open::before, .wp-pill.settings-open::before{ opacity:1; }
.wp-pill.open .wp-core, .wp-pill.open .wp-avatar,
.wp-pill.panel-open .wp-core, .wp-pill.panel-open .wp-avatar{ background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.wp-pill.is-gold .wp-core{ box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 26px rgba(245,158,11,.18), 0 10px 30px rgba(0,0,0,.4); }

/* hamburger (current-site menu trigger) */
.wp-burger{
  flex:0 0 auto; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:rgba(238,242,247,.66); cursor:pointer;
  transition:color .2s ease, background .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}
.wp-burger:hover{ color:#fff; }
.wp-burger svg{ width:17px; height:17px; display:block; }

/* logo + morphing brand */
.wp-logo{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:800; font-size:1rem; color:#eef2f7; text-decoration:none;
  transition:gap .42s ease;
}
.wp-mark{
  position:relative; width:30px; height:30px; flex:0 0 auto; display:inline-flex;
  transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease;
}
.wp-mark img{
  position:absolute; inset:0; width:30px; height:30px; object-fit:contain; border-radius:8px;
  transition:opacity .55s ease;
}
.wp-mark .wp-gold-img{ opacity:0; }
.wp-type{
  display:inline-block; min-width:.3ch; white-space:nowrap; overflow:hidden; text-align:left;
  transition:max-width .42s ease, opacity .3s ease, margin-left .42s ease;
}
.wp-type::after{
  content:''; display:inline-block; width:2px; height:1em; margin-left:3px;
  background:currentColor; vertical-align:-.15em; animation:wp-caret .85s steps(1) infinite;
}
.wp-promo{
  display:inline-block; max-width:0; opacity:0; overflow:hidden; white-space:nowrap; text-align:left;
  font-weight:800; color:#f7cf6b; text-shadow:0 0 12px rgba(245,158,11,.35);
  transition:max-width .5s ease, opacity .4s ease, margin-left .5s ease;
}
@keyframes wp-caret{ 0%,48%{opacity:1} 49%,100%{opacity:0} }

/* gold promo state */
.wp-pill.is-gold .wp-logo{ gap:0; }
.wp-pill.is-gold .wp-mark{ transform:scale(1.16); filter:drop-shadow(0 0 16px rgba(255,245,190,.9)) drop-shadow(0 0 28px rgba(245,158,11,.45)); }
.wp-pill.is-gold .wp-mark .wp-normal-img{ opacity:0; }
.wp-pill.is-gold .wp-mark .wp-gold-img{ opacity:1; }

/* Themed logo tint: when an Appearance theme is active, wash the Wopara brand
   mark in the theme accent. A mask of the logo paints the accent only over the
   mark's shape, and mix-blend-mode:color keeps the logo's shading while shifting
   its hue, so it reads as the same logo, themed. Off in the gold promo state. */
html.wp-theme-on .wp-pill:not(.is-gold) .wp-mark::after{
  content:''; position:absolute; inset:0; width:30px; height:30px; border-radius:8px;
  background:var(--wp-accent); opacity:.8; pointer-events:none; mix-blend-mode:color;
  -webkit-mask:url(/images/newlogo.png) center/contain no-repeat; mask:url(/images/newlogo.png) center/contain no-repeat;
}
.wp-pill.is-gold .wp-type{ max-width:0; opacity:0; margin-left:-10px; }
.wp-pill.is-gold .wp-type::after{ display:none; }
.wp-pill.is-gold .wp-promo{ max-width:30ch; opacity:1; margin-left:9px; }

/* group-section reveal (both sides) */
.wp-group{
  display:flex; align-items:center; gap:2px;
  max-width:0; opacity:0; overflow:hidden;
  transition:max-width .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.wp-group::-webkit-scrollbar{ display:none; }
.wp-link{
  display:inline-block; padding:6px 11px; border-radius:999px;
  font-size:.8rem; font-weight:700; color:rgba(238,242,247,.6);
  white-space:nowrap; text-decoration:none;
  transition:color .2s ease, background .2s ease;
}
.wp-link:hover{ color:#fff; background:rgba(255,255,255,.08); }
.wp-link.is-current{ color:#fff; }
/* Open state (JS-driven via mouseenter / tap — never CSS :hover, which flickered
   as the centred pill resized out from under the cursor). */
.wp-pill.open .wp-group, .wp-pill.panel-open .wp-group{ max-width:min(480px, 80vw); opacity:1; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.wp-pill.open .wp-type, .wp-pill.open .wp-promo,
.wp-pill.panel-open .wp-type, .wp-pill.panel-open .wp-promo{ max-width:0; opacity:0; margin-left:0; }
.wp-pill.open .wp-logo, .wp-pill.panel-open .wp-logo{ gap:0; }
/* Even, consistent spacing in the open directory view: a steady gap between the
   logo, the nav, the search icon and the avatar instead of the old auto-gap. */
.wp-pill.open .wp-group, .wp-pill.panel-open .wp-group{ margin-left:8px; }
.wp-pill.open .wp-search-trigger, .wp-pill.panel-open .wp-search-trigger{ margin-left:0; width:auto; padding:0 2px; }
.wp-pill.open .wp-core{ padding-right:10px; }

/* hamburger dropdown (current-site nav) */
.wp-menu{
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:210px; max-width:92vw;
  display:flex; flex-direction:column; gap:2px;
  padding:8px; border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(16,18,26,.94);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.wp-pill.menu-open .wp-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.wp-menu-title{ font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(238,242,247,.4); padding:6px 12px 4px; }
.wp-menu a{ display:block; padding:9px 12px; border-radius:10px; font-size:.88rem; font-weight:600; color:#eef2f7; text-decoration:none; transition:background .15s ease; }
.wp-menu a:hover{ background:rgba(255,255,255,.08); }

/* account avatar (right end of the pill) */
.wp-avatar{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:rgba(238,242,247,.72); cursor:pointer; padding:0;
  font-weight:800; font-size:.8rem;
  transition:color .2s ease, background .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}
.wp-avatar:hover{ color:#fff; }
.wp-avatar svg{ width:16px; height:16px; display:block; }
/* In the open directory view, give the avatar the same inset from the pill's
   right edge that the logo has from the left edge, so the pill reads symmetrical. */
.wp-pill.open .wp-avatar{ margin-right:14px; }
/* mobile-only toggles (hidden on desktop) */
.wp-menu-btn, .wp-pins-btn, .wp-crumbs-btn{ display:none; }
.wp-mscrim{ display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:5998; background:rgba(6,8,14,.5); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
/* body-level mobile directory menu (vertical list of sections + products) */
/* Stretch from below the nav row to just above the bottom (was capped at 80dvh, which
   cut it off ~80% down). bottom positioning + overflow:auto = full-height scroll, no
   extra bottom padding. */
.wp-mnav{ display:none; position:fixed; z-index:6005; top:64px; bottom:calc(env(safe-area-inset-bottom, 0px) + 12px); left:14px; right:14px; width:auto; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; flex-direction:column; gap:10px; padding-bottom:0; font-family:'Inter',system-ui,-apple-system,sans-serif; }
.wp-mnav.show{ display:flex; }
.wp-mnav::-webkit-scrollbar{ width:0; height:0; display:none; }
.wp-mnav-group{ display:flex; flex-direction:column; gap:10px; }
.wp-mnav-head{ font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(238,242,247,.6); padding:6px 4px 2px; text-decoration:none; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.wp-mnav-item{ display:flex; align-items:center; gap:12px; padding:6px 4px; color:#fff; text-decoration:none; font-size:1rem; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.wp-mnav-item:hover, .wp-mnav-item:active{ background:rgba(255,255,255,.08); }
.wp-mnav-item img{ width:24px; height:24px; border-radius:7px; object-fit:contain; flex:0 0 auto; background:rgba(255,255,255,.06); }
.wp-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.wp-avatar.is-in{ border-color:rgba(255,255,255,.18); }
/* quick pulse when the intro swaps the avatar glyph */
.wp-avatar.wp-av-swap{ animation:wp-av-swap .34s ease; }
@keyframes wp-av-swap{ 0%{ transform:scale(.6) rotate(-12deg); opacity:.25; } 60%{ transform:scale(1.12) rotate(3deg); opacity:1; } 100%{ transform:scale(1) rotate(0); } }

/* account popover (anchored to the avatar) */
.wp-account{
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:232px; max-width:92vw;
  padding:8px; border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(16,18,26,.96);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.wp-account, .wp-menu{ z-index:5; }
.wp-pill.acct-open .wp-account{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.wp-acct-id{ display:flex; align-items:center; gap:11px; padding:8px 10px 10px; }
.wp-acct-id .av{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:rgba(247,207,107,.18); color:#f7cf6b; font-weight:800; font-size:1rem;
}
.wp-acct-id .av img{ width:100%; height:100%; object-fit:cover; }
.wp-acct-id .meta{ min-width:0; display:flex; flex-direction:column; }
.wp-acct-id .nm{ font-size:.9rem; font-weight:700; color:#eef2f7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wp-acct-id .em{ font-size:.74rem; color:rgba(238,242,247,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wp-acct-sub{ font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(238,242,247,.4); padding:6px 12px 4px; }
.wp-acct-divide{ height:1px; background:rgba(255,255,255,.1); margin:6px 4px; }
.wp-acct-btn{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:11px 12px; border-radius:11px; font-family:inherit;
  font-size:.85rem; font-weight:700; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#eef2f7;
  transition:background .15s ease, border-color .15s ease, filter .15s ease;
}
.wp-acct-btn:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); }
.wp-acct-btn:disabled{ opacity:.5; cursor:default; }
.wp-acct-btn.signin{ background:#fff; color:#1a1a1a; border:none; }
.wp-acct-btn.signin:hover{ filter:brightness(.95); }
.wp-acct-note{ font-size:.72rem; color:rgba(238,242,247,.5); padding:6px 10px 4px; line-height:1.45; }
.wp-acct-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 11px; }
.wp-acct-row .lbl{ font-size:.8rem; font-weight:600; color:rgba(238,242,247,.62); }
.wp-resv{ display:inline-flex; align-items:center; gap:7px; font-size:.92rem; font-weight:800; color:#f7cf6b; }
.wp-resv svg{ width:14px; height:14px; }
.wp-resv a{ color:#f7cf6b; font-weight:700; font-size:.82rem; }
.wp-acct-stack{ display:flex; flex-direction:column; gap:6px; padding:2px 2px 2px; }
.wp-acct-btn.ghost{ background:transparent; }
.wp-acct-btn.ghost:hover{ background:rgba(255,255,255,.08); }

/* ===== Account + site-actions panel (the morphed rectangle) ===== */
/* body that unfolds below the top row (clipped by the pill while it stretches) */
.wp-panel{ display:none; gap:14px; padding:12px 14px 14px; min-width:430px; max-width:calc(100vw - 20px); }
.wp-pill.panel-open .wp-panel{ display:flex; align-items:stretch; }

/* left: glowing, morphing profile orb (Apple Image Playground style) */
.wp-panel-profile{ flex:0 0 172px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:180px; }
.wp-prof-cta{ border:none; background:none; font-family:inherit; cursor:pointer; font-size:.9rem; font-weight:800; color:#fff; text-align:center; letter-spacing:.01em; }
.wp-prof-cta:hover{ color:#cfe0ff; }
.wp-prof-label{ display:block; margin:0 auto; border:0; background:none; font-family:inherit; font-size:.82rem; font-weight:700; color:rgba(255,255,255,.7); text-align:center; letter-spacing:.02em; cursor:pointer; user-select:none; -webkit-user-select:none; transition:color .15s ease; }
.wp-prof-label:hover{ color:#fff; }
/* The left side of the rectangle is just the big morphing photo (a button).
   Hovering blurs the photo, stops the colour ring, and reveals a settings glyph;
   clicking opens settings. */
.wp-prof-orb{ position:relative; width:150px; height:150px; flex:0 0 auto; border:none; background:none; padding:0; cursor:pointer; }
.wp-prof-orb::before{
  content:''; position:absolute; inset:-11px; border-radius:50%; z-index:0;
  background:conic-gradient(from 0deg, #f59e0b, #ec4899, #8b5cf6, #38bdf8, #34d399, #f59e0b);
  filter:blur(13px); opacity:.85; animation:wp-orb-spin 6s linear infinite;
  transition:opacity .3s ease;
}
.wp-prof-pic{
  position:relative; z-index:1; width:100%; height:100%; overflow:hidden;
  background:#11131c; box-shadow:inset 0 0 0 2px rgba(255,255,255,.14);
  border-radius:60% 40% 55% 45% / 58% 52% 48% 42%;
  animation:wp-orb-morph 6s ease-in-out infinite;
}
.wp-prof-pic img{ width:100%; height:100%; object-fit:cover; display:block; transition:filter .25s ease; }
.wp-prof-pic .ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#f7cf6b; background:rgba(247,207,107,.16); font-weight:800; font-size:2.6rem; }
.wp-prof-pic .ph svg{ width:48px; height:48px; }
/* the cover inherits the pic's blob clip; no backdrop-filter (it samples a
   square box, breaking the round shape) — we blur the photo itself instead */
.wp-prof-cover{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(10,12,18,.5); opacity:0; transition:opacity .22s ease; }
.wp-prof-cover svg{ width:38px; height:38px; }
.wp-prof-orb:hover .wp-prof-cover, .wp-prof-orb:focus-visible .wp-prof-cover, .wp-prof-orb.wp-prof-hint .wp-prof-cover{ opacity:1; }
.wp-prof-orb:hover .wp-prof-pic img, .wp-prof-orb.wp-prof-hint .wp-prof-pic img{ filter:blur(5px); transform:scale(1.08); }
.wp-prof-orb:hover::before, .wp-prof-orb.wp-prof-hint::before{ opacity:0; animation-play-state:paused; } /* stop the colours on hover/hint */
@keyframes wp-orb-spin{ to{ transform:rotate(360deg); } }
@keyframes wp-orb-morph{
  0%,100%{ border-radius:62% 38% 55% 45% / 58% 52% 48% 42%; }
  25%{ border-radius:42% 58% 62% 38% / 45% 48% 52% 55%; }
  50%{ border-radius:50% 50% 38% 62% / 55% 42% 58% 45%; }
  75%{ border-radius:58% 42% 50% 50% / 42% 58% 42% 58%; }
}
.wp-icon-btn{ display:flex; align-items:center; justify-content:center; }
.wp-icon-btn svg{ width:18px; height:18px; display:block; }

/* right: site actions as small pills */
.wp-panel-actions{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:flex-start; min-height:var(--wp-rect-minh, auto); }
.wp-actions-title{ font-size:.62rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:rgba(238,242,247,.42); padding:2px 6px 8px; }
/* Header | Dock tabs that replaced the rectangle title. */
.wp-acts-tabs{ display:flex; gap:6px; padding:0 2px 10px; }
.wp-acts-tab{ flex:1; padding:7px 10px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.05); color:rgba(238,242,247,.62); font-family:inherit; font-size:.78rem; font-weight:700; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.wp-acts-tab:hover{ color:#fff; background:rgba(255,255,255,.1); }
.wp-acts-tab.on{ color:var(--wp-on-accent,#fff); background:var(--wp-accent,#0a84ff); border-color:transparent; }
/* The list grows to fit its content (no scroll) unless a custom height is dragged. */
.wp-actions-list{ display:flex; flex-direction:column; gap:8px; overflow:auto; max-height:calc(100vh - 150px); scrollbar-width:none; -ms-overflow-style:none; }
.wp-actions-list::-webkit-scrollbar{ display:none; }
.wp-actions-list a{
  display:flex; align-items:center; padding:11px 16px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
  font-size:.86rem; font-weight:600; color:#eef2f7; text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.wp-actions-list a:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); }
/* The rectangle list carries the same icon markup as the hero, shown here as a
   leading glyph so the profile menu reads like the nav it mirrors. Product rows wear
   their logo; settings rows their glyph; an unknown label its letter mark. */
.wp-actions-list a .wp-act-ico{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:22px; height:22px; margin-right:11px; color:rgba(238,242,247,.82); }
.wp-actions-list a .wp-act-ico svg{ width:100%; height:100%; display:block; }
.wp-actions-list a .wp-act-ico img{ width:100%; height:100%; border-radius:6px; object-fit:cover; display:block; }
.wp-actions-list a .wp-act-ico-face img{ border-radius:50%; }
.wp-actions-list a .wp-act-ltr{ display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:6px; background:rgba(255,255,255,.09); font-size:.72rem; font-weight:800; }
.wp-actions-list a .wp-act-lbl{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* a step whose section is marked done — green with a check */
.wp-actions-list a.wp-act-done{ color:#34d399; border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.10); }
.wp-hero-actions a.wp-act-done{ color:#c7f5e1; background:rgba(52,211,153,.18); border-color:rgba(52,211,153,.5); }
.wp-act-check{ color:#34d399; font-weight:800; margin-right:7px; }
.wp-hero-actions a.wp-act-done .wp-act-check{ color:#34d399; }

/* (mobile styles moved to the end of the file so they override base rules) */

/* ===== Search: a standalone bar that sits below the account rectangle ===== */
/* While searching, hide the account card entirely (the search bar floats up to
   take its place, set in JS) so the search experience is uncluttered. */
.wp-pill.wp-searching{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
.wp-undersearch{ position:fixed; z-index:6002; display:flex; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .3s ease, transform .3s ease, visibility .3s; font-family:'Inter',system-ui,-apple-system,sans-serif; }
.wp-undersearch.show{ opacity:1; visibility:visible; transform:translateY(0); }
.wp-us-bar{ display:flex; align-items:center; gap:8px; width:100%; height:48px; padding:0 8px 0 14px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(16,18,26,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 40px rgba(0,0,0,.4); }
.wp-us-ic{ flex:0 0 auto; width:18px; height:18px; color:rgba(238,242,247,.55); display:inline-flex; }
.wp-us-ic svg{ width:100%; height:100%; display:block; }
.wp-us-input{ flex:1 1 auto; min-width:0; background:transparent; border:none; outline:none; color:#eef2f7; font-family:inherit; font-size:.95rem; font-weight:600; }
.wp-us-input::placeholder{ color:rgba(238,242,247,.4); }
/* radar: scope toggle — a circle that expands on hover to label the click action */
.wp-us-radar{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0; border:none; border-radius:999px; background:rgba(255,255,255,.06); color:rgba(238,242,247,.72); cursor:pointer; transition:background .15s ease, color .2s ease, box-shadow .25s ease; }
.wp-us-radar:hover{ background:rgba(255,255,255,.12); }
.wp-radar-ic{ flex:0 0 auto; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.wp-radar-ic svg{ width:16px; height:16px; display:block; }
.wp-radar-label{ max-width:0; opacity:0; overflow:hidden; white-space:nowrap; font-size:.78rem; font-weight:700; transition:max-width .35s cubic-bezier(.22,.61,.36,1), opacity .25s ease, padding .35s ease; }
.wp-us-radar:hover .wp-radar-label{ max-width:240px; opacity:1; padding-right:14px; }
/* after a tap, the radar label collapses (overrides the sticky :hover on touch) */
.wp-us-radar.wp-collapsed .wp-radar-label{ max-width:0 !important; opacity:0 !important; padding-right:0 !important; }
/* on = searching all of Wopara Group: the radar ICON turns white and softly pulses */
.wp-undersearch.radar-on .wp-us-radar{ color:#fff; animation:wp-radar-blink 1.9s ease-in-out infinite; }
@keyframes wp-radar-blink{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } 50%{ box-shadow:0 0 12px 1px rgba(255,255,255,.45); } }
@media (prefers-reduced-motion:reduce){ .wp-undersearch.radar-on .wp-us-radar{ animation:none; box-shadow:0 0 10px rgba(255,255,255,.4); } }

/* ===== Per-section product flyout (quick nav) ===== */
.wp-flyout{
  position:fixed; z-index:6010;
  display:flex; flex-direction:column; gap:6px;
  min-width:190px; max-width:250px; padding:8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(20,24,36,.45);
  backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:0 16px 44px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}
.wp-flyout.show{ opacity:1; visibility:visible; transform:translateY(0); }
.wp-fly-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; text-decoration:none; color:#eef2f7; transition:background .15s ease; }
.wp-fly-item:hover{ background:rgba(255,255,255,.09); }
.wp-fly-item img{ width:26px; height:26px; border-radius:7px; object-fit:contain; background:rgba(255,255,255,.06); flex:0 0 auto; }
.wp-fly-ico{ width:26px; height:26px; border-radius:7px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:#eef2f7; }
.wp-fly-ico svg{ width:16px; height:16px; display:block; }
.wp-fly-item span{ font-size:.86rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wp-fly-name{ flex:1; min-width:0; }
.wp-fly-pin{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; color:rgba(238,242,247,.55); opacity:0; cursor:pointer; transition:opacity .15s ease, color .15s ease, background .15s ease; }
.wp-fly-pin svg{ width:14px; height:14px; }
.wp-fly-item:hover .wp-fly-pin{ opacity:.8; }
.wp-fly-item.here .wp-fly-pin{ opacity:.8; }   /* current product: pin hint always visible */
.wp-fly-pin:hover{ background:rgba(255,255,255,.12); color:#fff; }
.wp-fly-pin.on{ opacity:1; color:#f7cf6b; }

/* ===== Top-left of page: breadcrumb directories + pinned shortcuts ===== */
.wp-topleft{ position:fixed; top:14px; left:16px; z-index:6000; display:flex; align-items:center; gap:8px; flex-wrap:wrap; max-width:calc(100vw - 32px); font-family:'Inter',system-ui,-apple-system,sans-serif; transition:left .25s cubic-bezier(.22,.61,.36,1), opacity .35s ease; }
/* Notes blob docked top-left: it occupies left:16px, so slide the folder/breadcrumb
   pill right to make room instead of sitting under it. */
html.wp-blob-tl .wp-topleft{ left:72px; max-width:calc(100vw - 88px); }

/* ===== Widgets, reachable from every page: a dropdown on desktop, a fullscreen
   sheet on mobile. The button sits next to the folder/location icon. ===== */
.wp-widgets-btn{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:rgba(16,18,26,.55); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); color:rgba(238,242,247,.72); cursor:pointer; padding:0; flex:0 0 auto; transition:color .18s ease, background .18s ease; }
.wp-widgets-btn:hover{ color:#fff; }
.wp-widgets-btn svg{ width:18px; height:18px; display:block; }
html.wp-widgets-open .wp-widgets-btn{ color:#fff; background:rgba(255,255,255,.16); }
.wp-widgets{ display:flex; position:fixed; z-index:6020; top:64px; left:16px; width:min(360px,92vw); max-height:min(72vh,660px); flex-direction:column; background:var(--wp-pill-surface-strong, rgba(16,18,26,.92)); border:1px solid rgba(255,255,255,.12); border-radius:24px; box-shadow:0 26px 70px rgba(0,0,0,.6); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.98); transform-origin:top left;
  transition:opacity .25s ease, transform .3s cubic-bezier(.22,.61,.36,1), visibility .25s; }
html.wp-blob-tl .wp-widgets{ left:72px; }
html.wp-widgets-open .wp-widgets{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.wp-widgets-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px; color:#fff; font-weight:700; font-size:1.02rem; font-family:'Inter',system-ui,-apple-system,sans-serif; flex:0 0 auto; }
.wp-widgets-x{ background:none; border:none; color:rgba(255,255,255,.6); font-size:1.5rem; line-height:1; cursor:pointer; padding:0 4px; }
.wp-widgets-x:hover{ color:#fff; }
.wp-widgets-body{ display:flex; flex-direction:column; gap:12px; padding:4px 16px 18px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
html.wp-signed-out .wp-widgets-btn{ display:none !important; }
html.in-iframe .wp-widgets-btn, html.in-iframe .wp-widgets{ display:none !important; }
/* hide the header widgets button while the home hero's own widget cards are on
   screen (they already show there — the button would be redundant) */
html.wp-widgets-onhero .wp-widgets-btn{ display:none !important; }
@media (max-width:768px){
  .wp-widgets{ top:0; left:0; right:0; bottom:0; width:auto; height:auto; max-height:none; border-radius:0; border:none; }
  /* Keep the site header (nav pill + corner controls) floating ABOVE the fullscreen
     widgets panel so it stays visible and usable on the widgets page. */
  html.wp-widgets-open .wp-pill, html.wp-widgets-open .wp-topleft, html.wp-widgets-open .wp-topright{ z-index:6030; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
  /* Drop the panel heading below that header row (and clear the device status bar
     on pages without viewport-fit=cover, where env(safe-area-inset-top) is 0). */
  .wp-widgets-head{ padding:calc(max(env(safe-area-inset-top,0px), 56px) + 20px) 22px 14px; font-size:1.25rem; }
  /* No close X on mobile: you dismiss by tapping another header control. */
  .wp-widgets-x{ display:none; }
  .wp-widgets-body{ padding:6px 20px calc(env(safe-area-inset-bottom,0px) + 34px); gap:14px; }
}
/* ---- Widgets panel: the "blob" treatment (blur backdrop, drag, resize) ---- */
.wp-widgets-scrim{ position:fixed; inset:0; z-index:5998; opacity:0; visibility:hidden; pointer-events:none; background:rgba(6,8,14,.28); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); transition:opacity .2s ease, visibility .2s ease; }
html.wp-widgets-open .wp-widgets-scrim{ opacity:1; visibility:visible; pointer-events:auto; }
.wp-widgets-grip{ display:none; }
@media (min-width:769px){
  html.wp-widgets-open, html.wp-widgets-open body{ overflow:hidden; }
  html.wp-widgets-open body > :not([class^="wp-"]):not([class*=" wp-"]){ filter:blur(9px) saturate(1.04); pointer-events:none; }
  .wp-widgets-head{ cursor:grab; }
  .wp-widgets-head.dragging{ cursor:grabbing; }
  .wp-widgets.resizing, .wp-widgets.resizing *{ user-select:none; }
  /* Same corner-bracket resize hint as the blob (notes) window — a low-opacity
     L at the bottom-right corner that brightens on hover, not a hatch pattern. */
  .wp-widgets-grip{ display:block; position:absolute; right:0; bottom:0; width:20px; height:20px; z-index:2; cursor:nwse-resize; background:none; }
  .wp-widgets-grip::after{ content:''; position:absolute; right:5px; bottom:5px; width:8px; height:8px;
    border-right:2px solid rgba(255,255,255,.26); border-bottom:2px solid rgba(255,255,255,.26); border-bottom-right-radius:3px;
    transition:border-color .15s ease; }
  .wp-widgets-grip:hover::after{ border-color:rgba(255,255,255,.6); }
}
/* Merge: fold widgets into the blob as a tab, hide the standalone panel + button. */
html.wp-merge-widgets .wp-widgets-btn,
html.wp-merge-widgets .wp-widgets,
html.wp-merge-widgets .wp-widgets-scrim{ display:none !important; }
.wp-nt-tab-widgets{ display:none; }
html.wp-merge-widgets .wp-nt-tab-widgets{ display:block; }
.wp-nt-widgets{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:12px; }
.wp-widgets-body{ flex:1 1 auto; min-height:0; }

.wp-crumbs{ display:flex; align-items:center; gap:6px; }
.wp-crumbs:empty{ display:none; }
/* At the root (Wopara Group home) the trail is empty, so hide the folder button
   that opens it — nothing to navigate up to. Desktop already hides this button. */
.wp-topleft.wp-crumbs-empty .wp-crumbs-btn{ display:none !important; }
.wp-crumb{ display:inline-flex; align-items:center; padding:8px 13px; border-radius:999px; border:1px solid var(--wp-pill-border, rgba(255,255,255,.12)); background:var(--wp-pill-surface, rgba(16,18,26,.55)); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); color:#eef2f7; text-decoration:none; font-size:.85rem; font-weight:700; white-space:nowrap; }
a.wp-crumb:hover{ background:rgba(30,34,46,.7); color:#fff; }
.wp-crumb.here{ color:#fff; gap:7px; }
.wp-crumb.here.pinnable, .wp-crumb.here.totop{ cursor:pointer; }
.wp-crumb.here.pinnable:hover, .wp-crumb.here.totop:hover{ background:rgba(30,34,46,.7); }
.wp-crumb-pin{ width:13px; height:13px; opacity:.4; transition:opacity .15s ease; }
.wp-crumb-pin svg{ width:100%; height:100%; display:block; }
.wp-crumb.here.pinnable:hover .wp-crumb-pin{ opacity:.75; }
.wp-crumb.here.pinned .wp-crumb-pin{ opacity:1; }
/* The group-root crumb is a Home glyph, not a word. */
.wp-crumb-home{ padding:8px 15px; }
.wp-crumb-home svg{ width:19px; height:19px; display:block; }
.wp-crumb.here.wp-crumb-home{ gap:0; }
/* the "Home" text rides only in the mobile location dropdown (see .crumbs-open) */
.wp-crumb-home-label{ display:none; }
/* Top-anchored and grows DOWNWARD only. (align-items:center used to let the
   pins panel expand upward and clip off the top of the screen when the
   "Unpinned / max pins" note appeared.) */
.wp-topright{ position:fixed; top:14px; right:16px; z-index:6000; display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; justify-content:flex-end; max-width:calc(100vw - 32px); transition:opacity .35s ease; }
.wp-pins-wrap{ display:flex; flex-direction:column; align-items:flex-end; overflow:visible; transition:background .25s ease, border-color .25s ease, padding .25s ease; border:1px solid transparent; border-radius:18px; }
.wp-pins-wrap.has-note{ background:var(--wp-pill-surface-strong, rgba(16,18,26,.78)); border-color:var(--wp-pill-border, rgba(255,255,255,.12)); padding:8px 10px 10px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 16px 44px rgba(0,0,0,.5); }
.wp-pins{ display:flex; align-items:center; gap:6px; }
.wp-pins:empty{ display:none; }
.wp-pin-note{ display:none; }
.wp-pins-wrap.has-note .wp-pin-note{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.1); }
.wp-pin-removed{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); white-space:nowrap; }
.wp-pin-removed-tag{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:rgba(238,242,247,.5); }
.wp-pin-removed img{ width:18px; height:18px; border-radius:5px; object-fit:contain; flex:0 0 auto; }
.wp-pin-removed .wp-pin-label{ font-size:.78rem; font-weight:700; color:#fff; max-width:140px; overflow:hidden; text-overflow:ellipsis; }
.wp-pin-undo{ flex:0 0 auto; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.09); color:#fff; border-radius:50%; cursor:pointer; transition:background .15s ease; }
.wp-pin-undo svg{ width:16px; height:16px; display:block; }
.wp-pin-undo:hover{ background:rgba(255,255,255,.18); }
/* Notes lives at the top-right of the page */
.wp-notes-corner{ position:relative; flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--wp-pill-border, rgba(255,255,255,.1)); background:var(--wp-pill-surface, rgba(255,255,255,.07)); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); color:rgba(238,242,247,.72); cursor:pointer; padding:0; transition:transform .2s ease, background .2s ease, border-color .2s ease; }
.wp-notes-corner:hover{ color:#fff; background:rgba(255,255,255,.13); }
.wp-notes-corner svg{ width:20px; height:20px; display:block; }
/* Notes icon = images/blob.png masked + filled with the theme accent (tinted
   logo), sitting in a pinned-pill style glass bubble. */
.wp-nt-blob{ width:19px; height:19px; display:block; opacity:.62; background:var(--wp-accent, #4f8fff);
  -webkit-mask:url('/images/blob.png') center/contain no-repeat; mask:url('/images/blob.png') center/contain no-repeat;
  transition:background .25s ease, transform .2s ease, opacity .2s ease; }
.wp-notes-corner:hover .wp-nt-blob{ transform:scale(1.06); opacity:.85; }
.wp-notes-corner{ transition:color .2s ease, transform .2s ease, opacity .35s ease, box-shadow .3s ease, border-color .3s ease; }

/* ---- Servant mouse share ------------------------------------------------ */
/* The Servant's own on-screen cursor: a named arrow that glides to a control
   and "clicks" while the real action runs. pointer-events:none, so the user's
   real mouse is never touched. Reuses the Coplay cursor name-badge look. */
.wp-servant-cursor{ position:fixed; left:0; top:0; z-index:2147483601; pointer-events:none; transform:translate(-1px,-1px);
  will-change:left,top; filter:drop-shadow(0 3px 7px rgba(0,0,0,.45)); }
.wp-servant-cursor .wp-cc-dot{ width:23px; height:23px; display:block; color:var(--wp-accent,#4f8fff); transition:transform .12s ease; }
.wp-servant-cursor.down .wp-cc-dot{ transform:scale(.82); }
.wp-servant-cursor .wp-cc-name{ position:absolute; left:19px; top:15px; font:600 11px/1 'Inter',system-ui,-apple-system,sans-serif;
  color:#fff; background:var(--wp-accent,#4f8fff); padding:3px 8px; border-radius:9px; white-space:nowrap; box-shadow:0 5px 14px rgba(0,0,0,.4); }
.wp-servant-cursor.leaving{ opacity:0; transition:opacity .36s ease; }
/* click ripple where the Servant "presses" */
.wp-servant-click{ position:fixed; z-index:2147483601; pointer-events:none; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  border:2px solid var(--wp-accent,#4f8fff); animation:wp-sv-click .52s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes wp-sv-click{ 0%{ opacity:.85; transform:scale(.45); } 100%{ opacity:0; transform:scale(2.5); } }

/* While the Servant works, the always-visible notes blob glows so you know to
   open the chat (where End mouse share lives). */
html.wp-sv-busy .wp-notes-corner{ border-color:color-mix(in srgb, var(--wp-accent,#5e5ce6) 55%, transparent);
  animation:wp-sv-busy-ring 1.4s ease-in-out infinite; }
@keyframes wp-sv-busy-ring{ 0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 0 transparent; }
  50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 16px 3px color-mix(in srgb, var(--wp-accent,#5e5ce6) 70%, transparent); } }
html.wp-sv-busy .wp-notes-corner .wp-nt-blob{ opacity:1; animation:wp-sv-busy-blob 1.4s ease-in-out infinite; }
@keyframes wp-sv-busy-blob{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.16); opacity:1; } }

/* The Servant's step bubble: it says the numbered step BEFORE it moves, so the
   walkthrough is guided. Bottom-left, clear of the pill, the glowing blob and the
   notification stack. Non-interactive, so it never eats a click. */
.wp-sv-step{ position:fixed; left:18px; bottom:18px; z-index:2147483610; pointer-events:none;
  display:flex; align-items:center; gap:11px; max-width:min(420px, calc(100vw - 36px));
  padding:11px 15px 11px 11px; border-radius:18px 18px 18px 6px;
  background:rgba(18,26,44,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb, var(--wp-accent,#5e5ce6) 40%, rgba(255,255,255,.12));
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  opacity:0; transform:translateY(10px) scale(.97); transition:opacity .3s ease, transform .3s cubic-bezier(0.16,1,0.3,1); }
.wp-sv-step.show{ opacity:1; transform:none; }
.wp-sv-step.pop{ animation:wp-sv-step-pop .42s cubic-bezier(0.16,1,0.3,1); }
@keyframes wp-sv-step-pop{ 0%{ transform:translateY(6px) scale(.97); } 60%{ transform:translateY(-2px) scale(1.015); } 100%{ transform:none; } }
.wp-sv-step-av{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; overflow:hidden; display:block;
  background:radial-gradient(120% 120% at 30% 20%, rgba(94,92,230,.6), rgba(17,19,28,.95)); }
.wp-sv-step-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.wp-sv-step-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wp-sv-step-name{ font:700 .7rem/1 'Inter',system-ui,-apple-system,sans-serif; letter-spacing:.04em; text-transform:uppercase;
  color:var(--wp-accent,#8f8bff); }
.wp-sv-step-txt{ font:500 .92rem/1.4 'Inter',system-ui,-apple-system,sans-serif; color:#eef2f7; }
@media (max-width:768px){ .wp-sv-step{ left:10px; right:10px; bottom:12px; max-width:none; } }

/* Inline "watch me or handle it" choice, a Servant chat bubble */
.wp-sv-choose .wp-sv-choose-q{ margin-bottom:9px; }
.wp-sv-choose-row{ display:flex; gap:8px; }
.wp-sv-choose-btn{ flex:1; padding:10px 12px; border-radius:12px; border:1px solid var(--wp-border,rgba(255,255,255,.14));
  background:var(--wp-surface,rgba(255,255,255,.06)); color:var(--wp-text,#eef2f7); font:600 .85rem/1 'Inter',system-ui,-apple-system,sans-serif;
  cursor:pointer; transition:transform .15s ease, background .2s ease, border-color .2s ease; }
.wp-sv-choose-btn:hover{ transform:translateY(-1px); }
.wp-sv-choose-btn.primary{ background:var(--wp-accent,#4f8fff); border-color:transparent; color:#fff; }
.wp-sv-chose{ opacity:.65; font-size:.82rem; }

/* End mouse share bar, pinned atop the Servant chat while a session runs */
.wp-sv-endbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px;
  background:color-mix(in srgb, var(--wp-accent,#5e5ce6) 15%, var(--wp-surface,rgba(255,255,255,.05)));
  border-bottom:1px solid var(--wp-border,rgba(255,255,255,.12)); }
.wp-sv-endbar[hidden]{ display:none; }
.wp-sv-endbar-txt{ font:600 .8rem/1.25 'Inter',system-ui,-apple-system,sans-serif; color:var(--wp-text,#eef2f7); }
.wp-sv-endbar-btn{ flex:0 0 auto; padding:7px 13px; border-radius:999px; border:none; background:var(--wp-accent,#5e5ce6);
  color:#fff; font:600 .78rem/1 'Inter',system-ui,-apple-system,sans-serif; cursor:pointer; }
.wp-sv-endbar-btn:hover{ filter:brightness(1.08); }

/* low-opacity scroll-to-top / scroll-to-bottom pills, bottom-right */
.wp-scrollnav{ position:fixed; right:18px; bottom:18px; z-index:6000; display:flex; flex-direction:column; gap:8px; align-items:flex-end; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease, visibility .3s; font-family:'Inter',system-ui,-apple-system,sans-serif; }
.wp-scrollnav.show{ opacity:.3; visibility:visible; transform:translateY(0); }
.wp-scrollnav:hover{ opacity:1; }
.wp-snav-btn{ display:none; border:1px solid rgba(255,255,255,.12); background:rgba(16,18,26,.7); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:#eef2f7; font-family:inherit; font-size:.76rem; font-weight:700; padding:9px 14px; border-radius:999px; cursor:pointer; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.wp-scrollnav.show-top .wp-snav-btn[data-dir="top"]{ display:inline-flex; }
.wp-scrollnav.show-bottom .wp-snav-btn[data-dir="bottom"]{ display:inline-flex; }
.wp-snav-btn:hover{ background:rgba(30,34,46,.9); }
.wp-pin-chip{ position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:0; }
.wp-pin-chip > a{ display:inline-flex; align-items:center; gap:6px; max-width:140px; padding:6px 11px; border-radius:999px; background:var(--wp-pill-surface, rgba(255,255,255,.07)); border:1px solid var(--wp-pill-border, rgba(255,255,255,.1)); color:#eef2f7; text-decoration:none; font-size:.78rem; font-weight:700; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.wp-pin-chip > a:hover{ background:rgba(255,255,255,.13); }
.wp-pin-chip img{ width:18px; height:18px; border-radius:5px; object-fit:contain; flex:0 0 auto; }
.wp-pin-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* The Unpin button is absolutely positioned BELOW the chip so it never adds to
   the chip's height. (It used to sit in the column flow, growing the chip and,
   because the row is centre-aligned, shoving the pill up off the top of the
   screen.) Now the pills never move; the button just appears beneath them. */
.wp-pin-x{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:6px; white-space:nowrap; padding:4px 11px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(16,18,26,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:rgba(238,242,247,.7); font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1; cursor:pointer; display:none; transition:background .15s ease, color .15s ease, border-color .15s ease; z-index:6; }
.wp-pin-chip:hover .wp-pin-x{ display:block; }
/* invisible bridge across the gap so moving from pill to Unpin keeps the hover */
.wp-pin-x::before{ content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:100%; width:80%; height:8px; }
.wp-pin-x:hover{ background:rgba(239,68,68,.25); border-color:rgba(239,68,68,.5); color:#ef4444; }
.wp-pin-chip:has(.wp-pin-x:hover) > a{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4); box-shadow:0 0 12px rgba(239,68,68,.15); }
.wp-link{ position:relative; }
.wp-link-pin{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:5px; vertical-align:middle; border-radius:50%; color:rgba(238,242,247,.5); opacity:0; cursor:pointer; transition:opacity .15s ease, color .15s ease; }
.wp-link-pin svg{ width:12px; height:12px; }
.wp-link:hover .wp-link-pin{ opacity:.7; }
.wp-link.is-current .wp-link-pin{ opacity:.7; }   /* current directory: pin hint always visible */
.wp-link-pin:hover{ color:#fff; }
.wp-link-pin.on{ opacity:1; color:#f7cf6b; }

/* ===== Live search results — free pills with a depth-scroll, no rectangle cage ===== */
.wp-results{
  position:fixed; z-index:6001;
  display:flex; flex-direction:column; gap:9px;
  padding:6px 2px; max-height:330px; overflow-y:auto; overscroll-behavior:contain;
  background:none; border:none; box-shadow:none;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  scrollbar-width:none; font-family:'Inter',system-ui,-apple-system,sans-serif;
}
/* while the search is open, the page underneath can't scroll (results are the safe zone) */
html.wp-search-lock, html.wp-search-lock body{ overflow:hidden; }
html.wp-settings-lock, html.wp-settings-lock body{ overflow:hidden; }
/* and the page is blurred/dimmed so the floating results read clearly */
.wp-scrim{ position:fixed; inset:0; z-index:5999; background:rgba(8,10,16,.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s; }
html.wp-search-lock .wp-scrim{ opacity:1; visibility:visible; }
/* Settings backdrop: blur + tint scale with how deep you are (vars set in JS),
   so going deeper blurs more and tapping it (one step back) lightens it. */
.wp-set-scrim{ position:fixed; inset:0; z-index:5999; opacity:0; visibility:hidden; pointer-events:none;
  background:rgba(8,10,16,var(--wp-set-tint,.15));
  backdrop-filter:blur(var(--wp-set-blur,6px)); -webkit-backdrop-filter:blur(var(--wp-set-blur,6px));
  transition:opacity .28s ease, visibility .28s, backdrop-filter .28s ease, background .28s ease; }
html.wp-settings-lock .wp-set-scrim{ opacity:1; visibility:visible; pointer-events:auto; }
/* Notes / rectangle backdrop: blurs the page behind the Notes window and the open
   pill rectangle. Purely visual; Coplay deepens --wp-nt-blur / --wp-nt-tint as you
   drill into a person, so going deeper into People blurs more (like Settings). */
.wp-nt-scrim{ position:fixed; inset:0; z-index:5999; opacity:0; visibility:hidden; pointer-events:none;
  background:rgba(8,10,16,var(--wp-nt-tint,.16));
  backdrop-filter:blur(var(--wp-nt-blur,6px)); -webkit-backdrop-filter:blur(var(--wp-nt-blur,6px));
  transition:opacity .3s ease, visibility .3s, backdrop-filter .3s ease, background .3s ease; }
html.wp-notes-open:not(.wp-notes-mini) .wp-nt-scrim{ opacity:1; visibility:visible; }
@media (min-width:769px){ body.wp-rect .wp-nt-scrim{ opacity:1; visibility:visible; } }
/* While the Notes blob is open (and NOT a mini (i) peek) it behaves as a MODAL:
   nothing behind the blur is interactive. Everything on the page — page content AND
   the pill's own nav / pinned shortcuts / crumbs — goes inert; only the blob itself
   and Machine toasts stay live. This also stops hover transforms on background cards
   from escaping the scrim's backdrop-filter (a composited element paints sharp in
   Chromium, reading as the blur "switching off" under the cursor). Clicking anywhere
   behind still falls through to the document handler that dismisses the blob. The
   lightweight rectangle peek (body.wp-rect) and the mini (i) peek are left alone. */
/* The page is inert while the blob is open, EXCEPT the header corners: the blob
   icon and the other header buttons must stay tappable so they can dismiss it
   (on mobile there is no hover-away to close). */
html.wp-notes-open:not(.wp-notes-mini) body > *:not(.wp-notes):not(.wp-notify-wrap):not(.wp-topleft):not(.wp-topright):not(.wp-prompt-ov):not(.wp-imgview-ov):not(.wp-hero){ pointer-events:none; }
/* The open rectangle / settings are modal too: the blurred page behind must be
   inert so background cards can't be hovered or paint sharp under the cursor
   ("blur switching off"), and so the mouse can't interact with the page through
   the blur. Unlike Notes, the pill stays live (it holds the rectangle). Machine
   toasts and the backdrop scrims are exempt; a background click still falls to
   the document handler that dismisses. System-level: applies on every product.
   Scoped out of Notes, which already makes the pill itself inert. */
html:not(.wp-notes-open) body.wp-rect > *:not(.wp-pill):not(.wp-notify-wrap):not(.wp-set-scrim):not(.wp-nt-scrim):not(.wp-scrim):not(.wp-undersearch):not(.wp-results):not(.wp-prompt-ov):not(.wp-imgview-ov):not(.wp-consent){ pointer-events:none; }
/* Modal also means the page behind can't scroll, so scrolling at the blob's own
   scroll edge never leaks into (and moves) the blurred background. */
html.wp-notes-open:not(.wp-notes-mini), html.wp-notes-open:not(.wp-notes-mini) body{ overflow:hidden; }
/* --- Robust page-behind blur: fixes "auto-unblur" -------------------------------
   backdrop-filter (used by every scrim) CANNOT blur composited backdrop layers — a
   background <video>, a <canvas>, or any element running a CSS animation — so on
   pages like the Classroom (hero video, aurora canvas, morphing cards) those layers
   punch through the scrim and read as the blur switching itself off. Blurring the
   page CONTENT with a REAL filter does blur those layers at their source. It's scoped
   to non-wp body children (the pill's own UI stays sharp) and only while a scrim is
   up — the page's own fixed overlays are never shown at the same time as a pill scrim,
   so nothing meant to be crisp gets caught. Additive to the scrim blur, so simple
   pages are unaffected beyond a touch more frost. */
html.wp-search-lock body > :not([class^="wp-"]):not([class*=" wp-"]),
html.wp-settings-lock body > :not([class^="wp-"]):not([class*=" wp-"]),
html.wp-notes-open:not(.wp-notes-mini) body > :not([class^="wp-"]):not([class*=" wp-"]){ filter:blur(9px) saturate(1.04); }
@media (min-width:769px){
  body.wp-rect > :not([class^="wp-"]):not([class*=" wp-"]){ filter:blur(9px) saturate(1.04); }
  /* Desktop: while the Notes blob is open, the pill's own chrome — the centre nav
     pill AND the header corners (pins, widgets, crumbs) — recedes behind the blur and
     goes inert, so the blob is the sole focus and a stray click on them can't do
     anything. Desktop has other ways to dismiss the blob (hover-away, the blob's X, a
     click on the blurred page), so unlike mobile the corners don't need to stay
     tappable here. Mobile keeps them live (handled above / in the mobile block). */
  html.wp-notes-open:not(.wp-notes-mini) .wp-pill:not(.settings-open):not(.panel-open),
  html.wp-notes-open:not(.wp-notes-mini) .wp-topleft,
  html.wp-notes-open:not(.wp-notes-mini) .wp-topright{ filter:blur(9px) saturate(1.04); pointer-events:none; }
  /* Servant teaching: when the chat is open ALONGSIDE a rectangle it just guided
     you to (the settings rectangle, the pill rectangle, or the widgets rectangle),
     keep that rectangle crisp AND live above the blob's blur — the whole point is to
     read and use exactly what the Servant is pointing at, not stare at it blurred. */
  html.wp-notes-open:not(.wp-notes-mini) .wp-pill.settings-open,
  html.wp-notes-open:not(.wp-notes-mini) .wp-pill.panel-open,
  html.wp-notes-open:not(.wp-notes-mini) body.wp-rect .wp-pill,
  html.wp-notes-open:not(.wp-notes-mini) .wp-widgets{ filter:none !important; pointer-events:auto !important; }
}
.wp-sr-recent{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:20px; height:20px; color:#f7cf6b; margin-right:-2px; }
.wp-sr-recent svg{ width:16px; height:16px; }
.wp-results::-webkit-scrollbar{ display:none; }
.wp-results.show{ opacity:1; visibility:visible; transform:translateY(0); }
/* each result carries its own pill-shaped blur (no big card behind them) */
.wp-sr-item{
  display:flex; align-items:center; gap:10px; padding:11px 15px; border-radius:14px;
  text-decoration:none; color:#eef2f7; flex:0 0 auto;
  background:rgba(16,18,26,.72); border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transform-origin:center top;
  transition:transform .18s ease, opacity .18s ease, background .15s ease;
}
.wp-sr-item:hover{ background:rgba(30,34,46,.85); }
button.wp-sr-item{ width:100%; font:inherit; cursor:pointer; text-align:left; }
.wp-sr-sw{ width:24px; height:24px; border-radius:6px; flex:0 0 auto; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.1); }
.wp-sr-item img{ width:24px; height:24px; border-radius:6px; object-fit:contain; background:rgba(255,255,255,.06); flex:0 0 auto; }
.wp-sr-name{ font-size:.86rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wp-sr-sub{ font-size:.72rem; color:rgba(238,242,247,.45); margin-left:auto; flex:0 0 auto; padding-left:8px; }
.wp-sr-empty{ font-size:.82rem; color:rgba(238,242,247,.7); padding:11px 15px; border-radius:14px; background:rgba(16,18,26,.72); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
button.wp-sr-ask{ display:block; width:100%; text-align:left; cursor:pointer; font:inherit; font-size:.82rem; color:var(--wp-accent,#7c89ff); transition:background .15s ease, color .15s ease; }
button.wp-sr-ask:hover{ background:rgba(124,137,255,.16); color:#eef2f7; }
/* availability tone for provider rows (green available / red unavailable) */
.wp-sr-ok .wp-sr-name{ color:#34d399; }
.wp-sr-bad .wp-sr-name{ color:#ff7a7a; }
.wp-sr-bad .wp-sr-sub{ color:#ff8f8f; }
.wp-sr-dot-ok{ background:#34d399 !important; border-color:#34d399 !important; }
.wp-sr-dot-bad{ background:#ff7a7a !important; border-color:#ff7a7a !important; }
/* glass "Buy" button (no colour fill, blurred) */
.wp-sr-btn{ margin-left:auto; flex:0 0 auto; padding:7px 18px; border-radius:999px; font-size:.78rem; font-weight:700; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .15s ease; }
.wp-sr-item:hover .wp-sr-btn{ background:rgba(255,255,255,.18); }

/* ===== Notes / Machine / Coplay panel ===== */
.wp-notes-trigger{ flex:0 0 auto; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:none; background:none; padding:0; color:rgba(238,242,247,.7); cursor:pointer; transition:color .2s ease; }
.wp-notes-trigger:hover{ color:#fff; }
.wp-notes-trigger svg{ width:18px; height:18px; display:block; }

.wp-notes{
  /* The blob rides above every blur layer and overlay, second only to prompts
     (2147483600), the photo viewer (...601) and notifications (...620). */
  position:fixed; z-index:2147483000; top:72px; right:16px;
  width:min(360px, calc(100vw - 24px)); height:min(620px, calc(100vh - 96px));
  display:flex; flex-direction:column;
  border-radius:24px; border:1px solid var(--wp-border,rgba(255,255,255,.12));
  background:var(--wp-bg-solid,#181b25); color:var(--wp-text-solid,#eef2f7);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 26px 70px rgba(0,0,0,.55); overflow:visible;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transform-origin:top right;
  transition:opacity .25s ease, transform .3s cubic-bezier(.22,.61,.36,1), visibility .25s;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}
.wp-notes.show{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
/* (i) notification mini-mode: a compact top-right peek showing just the latest
   Machine bubble (head/compose/resize grips hidden). It never blurs the page (the
   scrim is suppressed for html.wp-notes-mini above); hovering it restores the blob
   to its full size + position. Desktop only — the mobile sheet stays fullscreen. */
.wp-notes.wp-nt-mini{
  width:min(400px, calc(100vw - 24px)) !important; height:auto !important;
  min-height:0 !important; max-height:min(88vh, 900px) !important;
  cursor:pointer; overflow:hidden;
  /* organic, softly-morphing shape (not a rigid rectangle, not a full oval).
     No !important on the radius, or it would beat the morph animation. */
  border-radius:38px 24px 42px 28px / 28px 42px 24px 38px;
  animation:wp-nt-mini-in .34s cubic-bezier(.22,.61,.36,1), wp-nt-morph 10s ease-in-out .34s infinite;
}
@keyframes wp-nt-morph{
  0%,100%{ border-radius:38px 24px 42px 28px / 28px 42px 24px 38px; }
  33%{ border-radius:24px 46px 28px 40px / 46px 26px 40px 24px; }
  66%{ border-radius:46px 28px 34px 42px / 26px 40px 30px 46px; }
}
@media (prefers-reduced-motion:reduce){ .wp-notes.wp-nt-mini{ animation:wp-nt-mini-in .34s cubic-bezier(.22,.61,.36,1); } }
.wp-notes.wp-nt-mini .wp-notes-head,
.wp-notes.wp-nt-mini .wp-nt-compose,
.wp-notes.wp-nt-mini .wp-nt-grip{ display:none !important; }
/* The peek's exact pixel height is set in JS (sizeNotesMini) to fit the latest
   notification bubble, because with an abspos panel the window can't auto-size to
   content via CSS alone. max-height above is just the safety cap. */
.wp-notes.wp-nt-mini .wp-nt-views{ padding:12px; }
/* In the peek the notification fills the card like a Mac notification, not a
   narrow chat bubble squeezed against one edge. */
.wp-notes.wp-nt-mini .wp-nt-msg{ max-width:100% !important; font-size:.92rem; }
@keyframes wp-nt-mini-in{ from{ opacity:0; transform:translateY(-10px) scale(.965); } to{ opacity:1; transform:none; } }
/* On mobile the (i) peek is a small notification card at the top (NOT the fullscreen
   sheet), so a hint reads like a system notification. Tap it to expand to the full
   Machine thread; tap outside to dismiss. */
@media (max-width:768px){
  .wp-notes.wp-nt-mini{
    top:calc(env(safe-area-inset-top, 0px) + 10px) !important; left:10px !important; right:10px !important; bottom:auto !important;
    width:auto !important; min-height:0 !important; max-height:62vh !important; height:auto !important;
    cursor:pointer;
    border-radius:38px 24px 42px 28px / 28px 42px 24px 38px;
    animation:wp-nt-mini-in .34s cubic-bezier(.22,.61,.36,1), wp-nt-morph 10s ease-in-out .34s infinite;
  }
}
/* Blob-location picker (General settings): a 3x3 grid mapping each button to the
   screen corner/edge it anchors the blob to (top-centre + centre left blank). */
.wp-bloc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px; }
.wp-bloc-cell{ height:46px; border-radius:12px; border:1px solid var(--wp-border,rgba(255,255,255,.14)); background:var(--wp-surface,rgba(255,255,255,.05)); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:border-color .15s ease, background .15s ease; }
.wp-bloc-cell.empty{ border:none; background:none; cursor:default; }
.wp-bloc-cell .wp-bloc-dot{ width:14px; height:14px; border-radius:5px; background:rgba(238,242,247,.5); transition:background .15s ease, transform .15s ease; }
.wp-bloc-cell:hover{ border-color:var(--wp-accent,#34d399); }
.wp-bloc-cell.on{ border-color:var(--wp-accent,#34d399); background:var(--wp-surface-strong,rgba(255,255,255,.1)); }
.wp-bloc-cell.on .wp-bloc-dot{ background:var(--wp-accent,#34d399); transform:scale(1.15); }
/* Machine notifications: small chat-style bubbles, top-right, auto-dismiss. */
/* Site law: notifications are ALWAYS the topmost layer, above every blur,
   overlay, prompt, the blob, even the photo viewer. Nothing covers them. */
.wp-notify-wrap{ position:fixed; z-index:2147483620; top:72px; right:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none; max-width:min(330px, calc(100vw - 24px)); }
.wp-notify{ pointer-events:auto; cursor:pointer; max-width:100%; background:rgba(18,26,44,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.12); border-radius:16px 16px 16px 5px; padding:11px 15px; color:#eef2f7; font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:.9rem; line-height:1.45; box-shadow:0 18px 50px rgba(0,0,0,.5); animation:wp-notify-in .28s cubic-bezier(.22,.61,.36,1); }
.wp-notify b{ color:#fff; }
.wp-notify.out{ animation:wp-notify-out .3s ease forwards; }
@keyframes wp-notify-in{ from{ opacity:0; transform:translateY(-8px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes wp-notify-out{ to{ opacity:0; transform:translateY(-6px) scale(.96); } }
@media (max-width:768px){ .wp-notify-wrap{ top:64px; right:10px; left:10px; max-width:none; align-items:stretch; } }
/* Game invite card: one-tap Join, always visible (even with the blob closed). */
.wp-notify.wp-gameinvite{ cursor:default; }
.wp-gameinvite .wp-gi-txt{ margin-bottom:9px; }
.wp-gameinvite .wp-gi-btns{ display:flex; gap:8px; align-items:center; }
.wp-gi-join{ flex:0 0 auto; background:var(--wp-accent,#4f8fff); color:#fff; text-decoration:none; font-weight:700; font-size:.85rem; padding:8px 18px; border-radius:999px; }
.wp-gi-join:hover{ filter:brightness(1.08); }
.wp-gi-x{ background:none; border:0; color:rgba(238,242,247,.6); font:inherit; font-size:.82rem; cursor:pointer; padding:8px 6px; }
.wp-gi-x:hover{ color:#fff; }
/* Transient in-game Servant toast (hunter/CCTV/game-started/disconnect alerts). */
.wp-notify.wp-gtoast{ display:flex; align-items:center; gap:10px; border-radius:16px 16px 5px 16px; }
.wp-gtoast-av{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; overflow:hidden; display:inline-flex; background:rgba(255,255,255,.08); }
.wp-gtoast-av img, .wp-gtoast-av svg, .wp-gtoast-av canvas{ width:100%; height:100%; object-fit:cover; }
.wp-gtoast-txt{ min-width:0; }
.wp-notes-head{ display:flex; flex:0 0 auto; align-items:center; gap:8px; padding:10px; border-bottom:1px solid rgba(255,255,255,.08); }
.wp-nt-tabs{ display:flex; gap:4px; flex:1; }
.wp-nt-close{ display:none; flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#eef2f7; font-size:1.3rem; line-height:1; cursor:pointer; }
.wp-nt-close:hover{ background:rgba(255,255,255,.14); }
.wp-nt-tab{ position:relative; flex:1; padding:8px 6px; border:none; border-radius:999px; background:transparent; color:inherit; opacity:.6; font-family:inherit; font-size:.8rem; font-weight:700; cursor:pointer; transition:background .15s ease, opacity .15s ease; }
.wp-nt-tab:hover{ opacity:1; }
.wp-nt-tab.is-active{ background:var(--wp-surface,rgba(255,255,255,.1)); opacity:1; }
/* Servant tab: its profile pic sits centered beside the name. */
.wp-nt-tab.wp-nt-tab-servant{ display:flex; align-items:center; justify-content:center; gap:6px; }
.wp-nt-tab-av{ width:18px; height:18px; border-radius:50%; overflow:hidden; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:#11131c; }
.wp-nt-tab-av img{ width:100%; height:100%; object-fit:cover; }
.wp-nt-tab-av .wp-servant-glyph svg{ width:12px; height:12px; }
.wp-nt-tab-nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
/* unread Machine DM: a small accent dot on the Machine tab (and the closed notes button) */
.wp-nt-tab.wp-nt-dm{ opacity:1; }
.wp-nt-tab.wp-nt-dm::after{ content:''; position:absolute; top:5px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--wp-accent,#34d399); box-shadow:0 0 0 2px var(--wp-bg-solid,rgba(20,22,30,.92)); }
.wp-notes-corner.wp-nt-dm::after{ content:''; position:absolute; top:7px; right:7px; width:9px; height:9px; border-radius:50%; background:var(--wp-accent,#34d399); border:2px solid rgba(8,10,16,.55); pointer-events:none; }
.wp-nt-x{ flex:0 0 auto; width:32px; height:32px; border:none; background:transparent; color:rgba(238,242,247,.6); font-size:1.25rem; line-height:1; cursor:pointer; border-radius:50%; transition:background .15s ease, color .15s ease; }
.wp-nt-x:hover{ background:rgba(255,255,255,.08); color:#fff; }
/* Machine card blurred background = the searched topic's photo. */
.wp-nt-bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(18px) saturate(1.1) brightness(1.05); transform:scale(1.12); opacity:0; transition:opacity .5s ease; z-index:0; border-radius:inherit; pointer-events:none; }
.wp-nt-bg.show{ opacity:.5; }
.wp-notes-head, .wp-nt-views{ position:relative; z-index:1; }
/* Inline Wopara Browser: while loading, the animation runs full-canvas (no bubble).
   Once results arrive (.wmb-ready) the host becomes a card with the topic photo.
   (.bot.wmb-host beats the .wp-nt-msg.bot bubble styling.) */
.wp-nt-msg.bot.wmb-host{ max-width:100%; align-self:stretch; background:none; padding:0; border-radius:0; position:relative; }
/* While loading (no .wmb-ready), the animation floats free — no card/canvas behind it. */
.wp-nt-msg.bot.wmb-host:not(.wmb-ready){ background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; }
.wp-nt-msg.bot.wmb-host.wmb-ready{ overflow:hidden; border-radius:20px; border:1px solid rgba(255,255,255,.08); padding:20px clamp(15px,4%,26px); background:transparent; }
/* The result card always keeps the Browser's own dark palette (it has a dark photo
   veil), so a light/forest theme forcing dark text can't make it unreadable. */
.wp-nt-msg.wmb-host.wmb{ --text-primary:#e6f3fb !important; --text-secondary:rgba(200,230,245,.62) !important; --text-muted:rgba(200,230,245,.42) !important; --bg:transparent !important; --surface:rgba(255,255,255,.05) !important; color:#e6f3fb !important; }
.wmb-host .wmb-photo, .wmb-host .wmb-veil{ position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none; }
.wmb-host .wmb-photo{ background-size:cover; background-position:center; filter:blur(16px) saturate(1.1); transform:scale(1.1); transition:opacity .5s ease; }
.wmb-host.wmb-ready .wmb-photo.show{ opacity:.5; }
.wmb-host.wmb-ready .wmb-veil{ opacity:1; background:linear-gradient(180deg, rgba(8,10,16,.5), rgba(8,10,16,.82)); }
.wmb-host .bw-result{ position:relative; z-index:1; }
.wp-nt-views{ flex:1 1 auto; min-height:0; position:relative; overflow:hidden; }
.wp-nt-view{ position:absolute; inset:0; display:flex; flex-direction:column; min-height:0; padding:12px; }
.wp-nt-view.is-hidden{ display:none; }
.wp-nt-notes{ flex:1; width:100%; resize:none; border:none; outline:none; background:transparent; color:inherit; font-family:inherit; font-size:.92rem; line-height:1.6; }
.wp-nt-notes::placeholder{ color:rgba(238,242,247,.4); }
/* Merged Machine + Hints view: one scroll body (greeting, chat, hints) above a pinned composer. */
.wp-nt-mscroll{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; }
.wp-nt-mscroll::-webkit-scrollbar{ display:none; }
.wp-nt-chat{ flex:0 0 auto; display:flex; flex-direction:column; gap:12px; }
.wp-nt-chat:not(:empty){ padding-bottom:8px; }
.wp-nt-msg{ max-width:86%; padding:9px 13px; border-radius:14px; font-size:.88rem; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
/* Neutral frosted bubbles (no accent fill) so text stays legible in every theme. */
.wp-nt-msg.user{ align-self:flex-end; background:rgba(130,140,160,.18); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); color:inherit; border-bottom-right-radius:5px; }
/* Machine empty-state greeting, sits at the top of the merged view. */
.wp-nt-mhero{ display:block; text-align:center; padding:10px 16px 12px; pointer-events:none; }
/* Empty state: the fact sits MIDDLE-centre, filling the space between the
   top "continue" pill and the bottom-right suggestions. */
.wp-nt-mhero:not(.is-hidden){ flex:1 1 auto; display:flex; align-items:center; justify-content:center; }
/* Top: a full-width pill that restores the last saved conversation. */
.wp-nt-resume{ flex:0 0 auto; width:100%; margin:2px 0 14px; padding:12px 16px; border-radius:999px; border:1px solid var(--wp-border-hover,rgba(255,255,255,.16)); background:var(--wp-surface,rgba(255,255,255,.05)); color:var(--wp-text,inherit); font-family:inherit; font-size:.9rem; font-weight:600; cursor:pointer; transition:background .15s ease; }
.wp-nt-resume:hover{ background:var(--wp-surface-strong,rgba(255,255,255,.1)); }
.wp-nt-mhero span{ font-family:var(--wp-display, inherit); font-size:1.5rem; font-weight:600; line-height:1.45; color:rgba(238,242,247,.82); max-width:420px; display:inline-block; }
.wp-nt-mhero.is-hidden{ display:none; }
html.wp-theme-light .wp-nt-mhero span{ color:rgba(16,19,28,.55); }
.wp-nt-msg.bot{ align-self:flex-start; background:rgba(130,140,160,.12); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.1); color:inherit; border-bottom-left-radius:5px; }
/* Machine markdown rendering */
.wp-nt-msg.md{ white-space:normal; }
.wp-nt-msg.bot.md > div{ margin:0; }
.wp-nt-msg.bot.md ul{ margin:5px 0; padding-left:18px; }
.wp-nt-msg.bot.md li{ margin:2px 0; }
.wp-nt-msg.bot.md .md-h{ font-weight:700; margin:7px 0 2px; }
.wp-nt-msg.bot.md strong{ font-weight:700; }
.wp-nt-msg.bot.md em{ font-style:italic; }
.wp-nt-msg.bot.md code{ background:rgba(255,255,255,.12); padding:1px 5px; border-radius:5px; font-size:.85em; }
.wp-nt-msg.bot.md a{ color:var(--wp-accent,#4f8fff); }
/* Pushed hint/alert: a normal left bot bubble holding the page's hint HTML. Tame
   the inner block margins so headings/paragraphs sit tidily inside the bubble. */
.wp-nt-msg.bot.hint{ white-space:normal; }
.wp-nt-msg.bot.hint > *:first-child{ margin-top:0; }
.wp-nt-msg.bot.hint > *:last-child{ margin-bottom:0; }
.wp-nt-msg.bot.hint p{ margin:6px 0; }
.wp-nt-msg.bot.hint h1, .wp-nt-msg.bot.hint h2, .wp-nt-msg.bot.hint h3{ font-size:.95rem; margin:7px 0 3px; }
.wp-nt-msg.bot.hint a{ color:var(--wp-accent,#4f8fff); }
/* ===== White theme rescue: outlines that go white-on-white =====
   In the White appearance the notes/Machine panel goes light (var(--wp-bg-solid)
   = #f2f4f7), so any component that fills itself with a faint white/grey and
   outlines with rgba(255,255,255,.x) becomes an invisible white-on-white shape
   (the chat bubbles, toolbar chips, cards). Re-tint those with the theme's dark
   ink (16,19,28 = the light theme's --text) so the border reads as a slightly
   darker shade of white. Only elements whose FILL turns light are touched here;
   the pill's floating dark-glass chrome (crumbs, nav, notify, widgets) keeps its
   white border because it stays dark in every theme. */
html.wp-theme-light .wp-nt-msg.bot{ background:rgba(16,19,28,.05); border-color:rgba(16,19,28,.14); }
html.wp-theme-light .wp-nt-msg.user{ background:rgba(59,111,212,.1); border-color:rgba(59,111,212,.28); }
html.wp-theme-light .wp-nt-msg.bot.md code{ background:rgba(16,19,28,.08); }
html.wp-theme-light .wp-nt-msg.wp-mbill{ border-color:rgba(16,19,28,.14); }
html.wp-theme-light .wp-mbill-row.total{ border-top-color:rgba(16,19,28,.14); }
html.wp-theme-light .wp-notes-head{ border-bottom-color:rgba(16,19,28,.1); }
html.wp-theme-light .wp-nt-compose{ border-top-color:rgba(16,19,28,.1); }
html.wp-theme-light .wp-nt-toolbar{ border-top-color:rgba(16,19,28,.1); }
html.wp-theme-light .wp-nt-close{ background:rgba(16,19,28,.05); border-color:rgba(16,19,28,.14); }
html.wp-theme-light .wp-nt-x:hover{ background:rgba(16,19,28,.07); color:#10131c; }
html.wp-theme-light .wp-nt-tb,
html.wp-theme-light .wp-nt-sel{ background:rgba(16,19,28,.05); border-color:rgba(16,19,28,.14); }
html.wp-theme-light .wp-nt-tb:hover,
html.wp-theme-light .wp-nt-sel:hover{ background:rgba(16,19,28,.09); border-color:rgba(16,19,28,.22); }
html.wp-theme-light .wp-nt-faqback{ border-color:rgba(16,19,28,.16); }
html.wp-theme-light .wp-nt-askbtn{ background:rgba(16,19,28,.05); border-color:rgba(16,19,28,.16); }
html.wp-theme-light .wp-nt-askbtn:hover{ background:rgba(16,19,28,.09); border-color:rgba(16,19,28,.26); }
html.wp-theme-light .wp-ncard{ border-color:rgba(16,19,28,.14); }
html.wp-theme-light .wp-bloc-cell .wp-bloc-dot{ background:rgba(16,19,28,.4); }
/* "Sent with Machine" caption under a reply that dispatched a chat to a person */
.wp-nt-sent{ align-self:flex-start; margin:-2px 0 2px 4px; font-size:.72rem; letter-spacing:.01em; color:rgba(238,242,247,.5); }
.wp-nt-sent.err{ color:#ff8585; }
/* One-tap chip offering a Wopara Browser lookup of the reply's subject */
.wp-nt-suggest{ align-self:flex-start; margin:-1px 0 2px 4px; max-width:86%; text-align:left; background:color-mix(in srgb, var(--wp-accent,#4f8fff) 14%, transparent); border:1px solid color-mix(in srgb, var(--wp-accent,#4f8fff) 38%, transparent); color:inherit; border-radius:999px; padding:7px 14px; font-family:inherit; font-size:.82rem; cursor:pointer; }
.wp-nt-suggest:hover{ background:color-mix(in srgb, var(--wp-accent,#4f8fff) 24%, transparent); }
.wp-nt-compose{ display:flex; flex:0 0 auto; gap:8px; align-items:center; padding-top:8px; border-top:1px solid rgba(255,255,255,.08); }
.wp-nt-input{ flex:1; min-width:0; background:var(--wp-surface,rgba(255,255,255,.06)); border:1px solid var(--wp-border,rgba(255,255,255,.1)); border-radius:999px; padding:10px 14px; color:inherit; font-family:inherit; font-size:.9rem; outline:none; }
.wp-nt-input::placeholder{ color:rgba(238,242,247,.4); }
.wp-nt-input:disabled{ opacity:.5; }
/* No circle: the send icon sits bare, tinted with the theme accent. */
.wp-nt-send{ flex:0 0 auto; width:40px; height:40px; border:none; border-radius:0; background:none; color:var(--wp-accent,#4f8fff); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s ease, opacity .15s ease; }
.wp-nt-send:hover{ transform:scale(1.08); }
.wp-nt-send:disabled{ opacity:.5; cursor:default; }
.wp-nt-send svg{ width:16px; height:16px; }
/* send.png rendered as a mask so it takes the button's colour (white on the
   accent fill) and stays crisp/themeable rather than baking in the PNG's own hue. */
.wp-nt-send-ic{ width:32px; height:32px; display:block; background:currentColor;
  -webkit-mask:url(/images/send.png) center/contain no-repeat; mask:url(/images/send.png) center/contain no-repeat; }
/* Compose tool buttons: attach (photo/doc) + voice-to-text mic. Theme-tinted like send. */
.wp-nt-tool{ flex:0 0 auto; width:34px; height:34px; border:none; border-radius:50%; background:transparent; color:var(--wp-accent,#4f8fff); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease, color .15s ease, transform .15s ease; }
.wp-nt-tool:hover{ background:color-mix(in srgb, var(--wp-accent,#4f8fff) 16%, transparent); transform:scale(1.08); }
.wp-nt-tool svg{ width:18px; height:18px; display:block; }
.wp-nt-tool.is-live{ color:#fff; background:color-mix(in srgb, var(--wp-accent,#4f8fff) 70%, #0a0e18); animation:wp-mic-pulse 1.2s ease-in-out infinite; }
@keyframes wp-mic-pulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--wp-accent,#4f8fff) 55%, transparent); } 50%{ box-shadow:0 0 0 6px transparent; } }
/* Pending photo preview above the composer. */
.wp-nt-attach{ display:flex; align-items:center; gap:10px; margin:0 0 8px; padding:7px 10px; border:1px solid var(--wp-border,rgba(255,255,255,.12)); border-radius:12px; background:var(--wp-surface,rgba(255,255,255,.05)); }
.wp-nt-attach[hidden]{ display:none; }
.wp-nt-attach-thumb{ width:34px; height:34px; border-radius:8px; object-fit:cover; flex:0 0 auto; }
.wp-nt-attach-thumb[hidden]{ display:none; }
/* Document (non-image) attachment: a small file glyph in place of the thumbnail. */
.wp-nt-attach.is-doc::before{ content:''; flex:0 0 auto; width:26px; height:30px; border-radius:5px; background:color-mix(in srgb, var(--wp-accent,#4f8fff) 24%, transparent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z'/%3E%3C/svg%3E") center/contain no-repeat; }
.wp-nt-attach-name{ flex:1; min-width:0; font-size:.82rem; color:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wp-nt-attach-x{ flex:0 0 auto; width:24px; height:24px; border:none; border-radius:50%; background:transparent; color:inherit; font-size:1.15rem; line-height:1; cursor:pointer; opacity:.7; }
.wp-nt-attach-x:hover{ opacity:1; background:rgba(255,255,255,.1); }
/* A photo shown inside the user's own chat bubble. */
.wp-nt-msg-img{ display:block; max-width:100%; width:220px; border-radius:12px; margin-bottom:7px; cursor:zoom-in; }
/* Full-screen viewer for chat photos: tap a photo to see it big, Download under
   it, tap the backdrop (or Esc) to close. Sits above the prompt layer. */
.wp-imgview-ov{ position:fixed; inset:0; z-index:2147483601; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(6,8,14,.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); font-family:'Inter',system-ui,-apple-system,sans-serif; }
.wp-imgview-box{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.wp-imgview-ov img{ max-width:min(92vw,900px); max-height:76vh; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.6); cursor:default; }
.wp-imgview-dl{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:14px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); color:#eef2f7; font:700 .95rem 'Inter',system-ui,-apple-system,sans-serif; text-decoration:none; cursor:pointer; }
.wp-imgview-dl:hover{ background:rgba(255,255,255,.18); }
.wp-imgview-dl svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* Embodied guidance: the Servant's figure floats in beside the thing it is
   pointing at, says one short line, bobs gently, then slips away. */
.wp-sv-point{ position:fixed; z-index:2147483602; display:flex; align-items:center; gap:8px; opacity:0; transform:translateX(-14px) scale(.9); transition:opacity .3s ease, transform .34s cubic-bezier(0.16,1,0.3,1); pointer-events:auto; cursor:pointer; font-family:'Inter',system-ui,-apple-system,sans-serif; }
.wp-sv-point.is-in{ opacity:1; transform:translateX(0) scale(1); }
.wp-svp-fig{ width:52px; height:52px; border-radius:50%; overflow:hidden; border:2px solid rgba(255,255,255,.35); box-shadow:0 10px 26px rgba(0,0,0,.45); background:#15171f; animation:wpSvpBob 2.2s ease-in-out infinite; }
.wp-svp-fig img{ width:100%; height:100%; object-fit:cover; display:block; }
.wp-svp-hand{ color:#fff; filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)); animation:wpSvpNudge 1.1s ease-in-out infinite; }
.wp-svp-hand svg{ width:26px; height:26px; display:block; }
.wp-svp-say{ position:absolute; left:0; top:-30px; white-space:nowrap; background:rgba(10,13,22,.92); border:1px solid rgba(255,255,255,.16); border-radius:11px; padding:5px 11px; font-size:.78rem; font-weight:600; color:#eef2f7; box-shadow:0 8px 22px rgba(0,0,0,.4); }
@keyframes wpSvpBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@keyframes wpSvpNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(6px); } }
/* A document reference chip inside the user's chat bubble. */
.wp-nt-msg-doc{ display:inline-block; margin-bottom:7px; padding:6px 12px; border-radius:10px; background:color-mix(in srgb, var(--wp-accent,#4f8fff) 18%, transparent); border:1px solid color-mix(in srgb, var(--wp-accent,#4f8fff) 34%, transparent); font-size:.82rem; font-weight:600; }
.wp-nt-soon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; color:rgba(238,242,247,.72); font-size:.95rem; line-height:1.6; background:rgba(16,18,26,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.wp-nt-soon.static{ position:static; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; flex:1; }
/* Machine: a bill card it can render for account/agentic requests */
.wp-nt-msg.wp-mbill{ align-self:stretch; max-width:100%; display:flex; flex-direction:column; gap:6px; background:var(--wp-surface,rgba(255,255,255,.07)); color:inherit; border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:12px 14px; }
.wp-mbill-h{ font-weight:700; font-size:.82rem; opacity:.85; }
.wp-mbill-row{ display:flex; justify-content:space-between; gap:12px; font-size:.86rem; }
.wp-mbill-row.total{ border-top:1px solid rgba(255,255,255,.16); padding-top:6px; margin-top:2px; font-weight:700; }
.wp-mbill-note{ font-size:.78rem; opacity:.7; margin-top:2px; }
.wp-mbill-go{ margin-top:8px; padding:9px; border:none; border-radius:10px; background:#14203a; background:color-mix(in srgb, var(--wp-accent,#4f8fff) 46%, #0a0e18); color:#fff; font:inherit; font-weight:600; font-size:.84rem; cursor:pointer; }
/* Hints tab */
/* Product intro splash: blurred screen with logo + name, then flies into the pill */
.wp-splash{ position:fixed; inset:0; z-index:7000; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.wp-splash-bg{ position:absolute; inset:0; background:rgba(8,10,16,.5); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); transition:opacity .6s ease; }
.wp-splash.go .wp-splash-bg{ opacity:0; }
/* inner = the morphing container: starts as the centred logo+name, then becomes
   a pill (rounded, glass) scaled to the nav pill and lands on it. */
.wp-splash-inner{ position:relative; display:flex; align-items:center; justify-content:center; gap:14px; padding:12px 22px; border-radius:26px; background:transparent; border:1px solid transparent; transform-origin:center center; will-change:transform; transition:transform .6s cubic-bezier(.5,0,.2,1), background .5s ease, border-color .5s ease, border-radius .6s ease; }
/* Land as the directory pill: same tinted glass the top-left crumb uses. */
.wp-splash.go .wp-splash-inner{ background:var(--wp-pill-surface, rgba(16,18,26,.82)); border-color:var(--wp-pill-border, rgba(255,255,255,.12)); border-radius:999px; }
.wp-splash-content{ display:flex; flex-direction:row; align-items:center; gap:14px; transition:gap .42s ease; }
/* The logo leaves while the splash is still travelling, so it arrives as just the
   name: a perfect directory pill. The name stays to the end and the real crumb
   (hidden during the flight) takes its place when the splash is removed. */
.wp-splash.go .wp-splash-content{ gap:0; }
.wp-splash-mark{ width:clamp(40px,7vw,56px); height:clamp(40px,7vw,56px); object-fit:contain; transition:opacity .3s ease, transform .42s cubic-bezier(.5,0,.2,1), width .42s ease; }
.wp-splash.go .wp-splash-mark{ opacity:0; transform:translateX(-10px) scale(.5); width:0; }
html.wp-theme-on .wp-splash-mark{ filter:drop-shadow(0 0 14px var(--wp-accent)); }
/* The name stays visible; the inner's transform scale shrinks it to the crumb's
   size, so it lands looking exactly like the directory pill it hands off to. */
.wp-splash-name{ font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:clamp(1.7rem,5vw,2.6rem); font-weight:800; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.55); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ .wp-splash{ display:none; } }

/* ===== "Tap here to go back" — the blur is the back button =====
   Every full-screen blurred backdrop that dismisses on an outside tap gets this
   caption (woparapill.js attaches it), so the blur reads as an affordance rather
   than dead space. Backdrops that already speak for themselves (the sign-in gate)
   or that cannot be tapped away (the consent gate, splashes) are skipped, and a
   page can opt any of its own out with data-no-backhint.
   Sits at negative z-index inside the backdrop's own stacking context: it paints
   over the blur but UNDER the card/panel the backdrop belongs to, and it is never
   a click target, so `e.target === backdrop` close checks still hold. */
.wp-backhint{
  position:absolute; z-index:-1; left:50%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 34px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  pointer-events:none; user-select:none;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:clamp(1.15rem,2.2vw,1.85rem); font-weight:700; letter-spacing:-.01em;
  line-height:1.15; text-align:center; white-space:nowrap;
  color:#fff;
  text-shadow:0 0 20px rgba(255,255,255,.42), 0 0 52px rgba(255,255,255,.2), 0 3px 24px rgba(0,0,0,.6);
  animation:wpBackHintGlow 3.4s ease-in-out infinite;
}
/* JS parks it in the biggest empty area around the open window, so the caption is
   centred in free space (equal air to the window and to the screen edges) and
   follows the blob as it is dragged or resized. left/top are set inline. */
/* --wp-hint-scale shrinks the caption when the window is dragged tall enough to
   squeeze the free space: better a smaller caption than one hidden behind the
   panel. Transitioned so a resize (and the blob being dragged) reads as the
   caption gliding out of the way rather than teleporting. */
.wp-backhint.wp-hint-placed{
  bottom:auto; top:0;
  transform:translate(-50%,-50%) scale(var(--wp-hint-scale,1));
  transition:left .16s ease-out, top .16s ease-out, transform .16s ease-out;
}
/* Blurs stack (a prompt over the open blob). Only the topmost one is the back
   button; a lower caption would just smear through the blur above it. */
.wp-backhint.wp-hint-mute{ display:none; }
@media (prefers-reduced-motion:reduce){ .wp-backhint.wp-hint-placed{ transition:none; } }
.wp-backhint svg{
  width:clamp(40px,4.4vw,58px); height:clamp(40px,4.4vw,58px); display:block;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.45)) drop-shadow(0 3px 18px rgba(0,0,0,.5));
}
/* The glyph acts out the gesture it names: the hand presses down and lifts (a tap),
   the cursor drifts around (a mouse in motion). */
.wp-hint-tap svg{ transform-origin:50% 22%; animation:wpBackHintTap 1.5s ease-in-out infinite; }
.wp-hint-hover svg{ animation:wpBackHintMove 2.6s ease-in-out infinite; }
@keyframes wpBackHintTap{
  0%,58%,100%{ transform:translateY(0) scale(1); }
  30%{ transform:translateY(5px) scale(.9); }
}
@keyframes wpBackHintMove{
  0%,100%{ transform:translate(0,0); }
  22%{ transform:translate(7px,-4px); }
  52%{ transform:translate(11px,4px); }
  78%{ transform:translate(3px,7px); }
}
@media (prefers-reduced-motion:reduce){ .wp-hint-tap svg, .wp-hint-hover svg{ animation:none; } }
/* A slow breathe, so the caption reads as live without flashing at anyone. */
@keyframes wpBackHintGlow{
  0%,100%{ opacity:.82; text-shadow:0 0 18px rgba(255,255,255,.34), 0 0 46px rgba(255,255,255,.14), 0 3px 24px rgba(0,0,0,.6); }
  50%{ opacity:1; text-shadow:0 0 26px rgba(255,255,255,.6), 0 0 64px rgba(255,255,255,.3), 0 3px 24px rgba(0,0,0,.6); }
}
@media (prefers-reduced-motion:reduce){ .wp-backhint{ animation:none; } }
@media (max-width:768px){
  .wp-backhint{ gap:10px; font-size:1.1rem; }
  .wp-backhint svg{ width:40px; height:40px; }
}
/* The Notes blob goes fullscreen on mobile: it covers the blur entirely, so there
   is nothing to caption and nothing to tap past. Every caption stays down while it
   is up (not just its own backdrop's — the mobile nav scrim sits under it too). */
@media (max-width:768px){
  html.wp-notes-open:not(.wp-notes-mini) .wp-backhint{ display:none; }
  .wp-nt-scrim .wp-backhint{ display:none; }
}

/* Cursor-following "Click here to go back" caption, shown while People is drilled
   in on desktop and the cursor is out in the blur. Sits above the blur but below
   the blob (which the cursor is off of when this shows); pointer-events:none so the
   click it invites lands on the backdrop and steps back a level. JS sets left/top
   to track the pointer, and eases so it trails the cursor rather than snapping. */
.wp-backfollow{
  position:fixed; left:0; top:0; z-index:2147482500;
  display:flex; align-items:center; gap:9px;
  pointer-events:none; user-select:none;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:.98rem; font-weight:700; letter-spacing:-.01em; line-height:1; white-space:nowrap;
  color:#fff; text-shadow:0 0 14px rgba(255,255,255,.4), 0 2px 16px rgba(0,0,0,.7);
  opacity:0; visibility:hidden; transform:translateY(4px);
  /* left/top are NOT transitioned: the label must sit under the cursor with no lag.
     Only the fade in/out eases. */
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.wp-backfollow.show{ opacity:1; visibility:visible; transform:translateY(0); }
.wp-backfollow svg{
  width:22px; height:22px; display:block;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.45)) drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
@media (prefers-reduced-motion:reduce){ .wp-backfollow{ transition:opacity .18s ease, visibility .18s; } }
/* No cursor to follow on touch — never show it there. */
@media (max-width:768px){ .wp-backfollow{ display:none; } }

/* On-brand prompt dialog (replaces native window.prompt) */
.wp-prompt-ov{ position:fixed; inset:0; z-index:6100; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(6,8,14,.6); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-family:'Inter',system-ui,-apple-system,sans-serif; }
.wp-prompt{ width:100%; max-width:380px; background:var(--wp-surface,#15171f); border:1px solid var(--wp-border,rgba(255,255,255,.14)); border-radius:22px; padding:22px; box-shadow:0 30px 80px rgba(0,0,0,.6); color:var(--wp-text,#eef2f7); }
.wp-prompt-title{ font-weight:800; font-size:1.1rem; margin-bottom:4px; }
.wp-prompt-hint{ font-size:.85rem; color:var(--wp-muted,rgba(238,242,247,.6)); margin-bottom:6px; line-height:1.5; }
.wp-prompt-field{ display:flex; align-items:center; gap:6px; background:var(--wp-bg,rgba(255,255,255,.06)); border:1px solid var(--wp-border,rgba(255,255,255,.16)); border-radius:12px; padding:0 12px; margin-top:8px; }
.wp-prompt-field:focus-within{ border-color:var(--wp-accent,#0a84ff); }
.wp-prompt-prefix{ color:var(--wp-muted,rgba(238,242,247,.5)); font-weight:700; }
.wp-prompt-input{ flex:1; min-width:0; background:transparent; border:none; outline:none; color:inherit; font:inherit; font-size:1rem; padding:13px 0; }
.wp-prompt-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.wp-prompt-btn{ border:none; border-radius:999px; padding:10px 20px; font-family:inherit; font-weight:700; font-size:.9rem; cursor:pointer; }
.wp-prompt-btn.cancel{ background:rgba(255,255,255,.08); color:var(--wp-text,#eef2f7); }
.wp-prompt-btn.cancel:hover{ background:rgba(255,255,255,.14); }
.wp-prompt-btn.ok{ background:var(--wp-accent,#0a84ff); color:var(--wp-on-accent,#fff); }
.wp-prompt-btn.ok:hover{ filter:brightness(1.06); }
.wp-prompt-btn.ok:disabled, .wp-prompt-btn.ok.disabled{ opacity:.45; cursor:not-allowed; filter:none; }
.wp-prompt-status{ min-height:1.1em; margin-top:9px; font-size:.82rem; font-weight:600; line-height:1.4; color:var(--wp-muted,rgba(238,242,247,.6)); }
.wp-prompt-status.is-ok{ color:#34d399; }
.wp-prompt-status.is-bad{ color:#ff7a7a; }

/* Cascading date picker (Year / Month / Day). Three scroll columns of pills, the
   selected one in the accent; days rebuild when the year or month changes. */
.wp-dp-card{ max-width:420px; }
.wp-dp{ display:flex; gap:8px; margin-top:12px; }
.wp-dp-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
.wp-dp-col-day{ flex:0 0 84px; }
.wp-dp-head{ font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--wp-muted,rgba(238,242,247,.5)); text-align:center; padding:0 0 8px; }
.wp-dp-list{ height:216px; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth; display:flex; flex-direction:column; gap:5px; padding:4px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px; }
.wp-dp-list::-webkit-scrollbar{ display:none; }
.wp-dp-opt{ flex:0 0 auto; border:0; border-radius:999px; padding:10px 8px; background:none; color:var(--wp-text,#eef2f7); font-family:inherit; font-size:.92rem; font-weight:600; text-align:center; cursor:pointer; white-space:nowrap; transition:background .14s ease, color .14s ease; }
.wp-dp-opt:hover{ background:rgba(255,255,255,.09); }
.wp-dp-opt.on{ background:var(--wp-accent,#0a84ff); color:var(--wp-on-accent,#fff); font-weight:800; }

.wp-nt-hint{ flex:0 0 auto; padding:2px 2px 8px; color:inherit; font-size:.95rem; line-height:1.65; scrollbar-width:none; }
.wp-nt-hint.is-hidden{ display:none; }
.wp-nt-hint::-webkit-scrollbar{ display:none; }
.wp-nt-hint-body{ background:var(--wp-surface,rgba(255,255,255,.05)); border:1px solid var(--wp-border,rgba(255,255,255,.1)); border-radius:14px; padding:14px 16px; }
.wp-nt-hint-body b{ color:var(--wp-text,#fff); }
.wp-nt-hint-empty{ color:var(--wp-muted,rgba(238,242,247,.5)); text-align:center; padding:18px 16px 14px; line-height:1.6; }
.wp-nt-hint-faq details{ background:var(--wp-surface,rgba(255,255,255,.05)); border:1px solid var(--wp-border,rgba(255,255,255,.1)); border-radius:12px; padding:2px 14px; margin-bottom:8px; }
.wp-nt-hint-faq summary{ cursor:pointer; font-weight:700; padding:11px 0; list-style:none; }
.wp-nt-hint-faq summary::-webkit-details-marker{ display:none; }
.wp-nt-hint-faq summary::after{ content:'+'; float:right; opacity:.6; font-weight:400; }
.wp-nt-hint-faq details[open] summary::after{ content:'\2212'; }
.wp-nt-hint-faq p{ margin:0 0 12px; opacity:.85; line-height:1.6; }
.wp-nt-faqback{ flex:0 0 auto; margin-top:10px; width:100%; padding:10px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:transparent; color:inherit; font-family:inherit; font-weight:600; font-size:.85rem; cursor:pointer; }
.wp-nt-faqback:hover{ background:rgba(255,255,255,.08); }
.wp-nt-askbtn{ flex:0 0 auto; margin-top:10px; width:100%; padding:12px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.05); color:#eef2f7; font-family:inherit; font-weight:700; font-size:.9rem; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.wp-nt-askbtn:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26); }

/* ===== Settings: the rectangle morphs into a bigger settings rectangle ===== */
.wp-settings-view{ display:none; }
.wp-pill.settings-open{ border-radius:24px; }
.wp-pill.settings-open .wp-top, .wp-pill.settings-open .wp-panel{ display:none; }
.wp-pill.settings-open .wp-settings-view{ display:block; width:min(440px, calc(100vw - 28px)); min-height:var(--wp-rect-minh, auto); max-height:min(74vh, 580px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; overscroll-behavior-x:none; -webkit-overflow-scrolling:touch; touch-action:pan-y; padding:10px 8px 14px; color:#eef2f7; }
.wp-settings-view::-webkit-scrollbar{ width:0; }
/* iOS-Settings look: large title, search field, inset grouped lists, badges.
   The backdrop is the pill's own frosted glass (no flat black). */
.ios-title{ font-size:1.8rem; font-weight:800; letter-spacing:-.02em; padding:6px 6px 2px; }
.ios-search{ display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.09); border-radius:11px; padding:8px 11px; margin:2px 4px 18px; }
.ios-search-ic{ width:16px; height:16px; color:rgba(235,235,245,.5); display:inline-flex; flex:0 0 auto; }
.ios-search-ic svg{ width:100%; height:100%; }
.ios-search-in{ flex:1; min-width:0; border:0; background:none; outline:none; color:#fff; font:inherit; font-size:.95rem; }
.ios-search-in::placeholder{ color:rgba(235,235,245,.5); }
.ios-label{ font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:rgba(235,235,245,.5); padding:14px 18px 6px; }
.ios-foot{ font-size:.74rem; line-height:1.45; color:rgba(235,235,245,.5); padding:6px 18px 4px; }
.ios-group, .ios-banner{ background:var(--wp-pill-surface-strong, #1c1c20); border-radius:14px; margin:0 4px; overflow:hidden; }
.ios-group{ display:block; }

/* ---- Finances page ---- */
.fin-total{ margin:6px 4px 4px; padding:20px 20px 18px; border-radius:16px; background:var(--wp-pill-surface-strong,#1c1c20); display:flex; flex-direction:column; gap:2px; }
.fin-total-lbl{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(235,235,245,.5); }
.fin-total-val{ font-size:1.9rem; font-weight:800; color:#fff; letter-spacing:-.01em; display:flex; align-items:center; gap:6px; }
/* The reserves glyph is an inline SVG with no intrinsic size — pin it to the text
   height everywhere it appears in Finances, or it expands to fill its box. */
.fin-total-val svg{ width:1.05em; height:1.05em; flex:0 0 auto; }
.fin-item-amt svg, .fin-bill-amt svg, .fin-pay svg{ width:1em; height:1em; vertical-align:-.12em; }
.fin-total-sub{ font-size:.8rem; color:rgba(235,235,245,.55); }
.fin-bill{ margin:14px 4px 0; padding:16px 18px; border-radius:16px; background:rgba(255,159,10,.10); border:1px solid rgba(255,159,10,.3); }
.fin-bill-due{ background:rgba(255,59,48,.12); border-color:rgba(255,59,48,.42); }
.fin-bill-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.fin-bill-lbl{ font-weight:700; color:#fff; font-size:.98rem; }
.fin-bill-amt{ font-weight:800; color:#fff; font-size:1.1rem; }
.fin-bill-sub{ margin-top:6px; font-size:.8rem; line-height:1.45; color:rgba(235,235,245,.62); }
.fin-pay{ margin-top:12px; width:100%; border:0; border-radius:999px; padding:12px 16px; background:var(--wp-accent,#0a84ff); color:var(--wp-on-accent,#fff); font-family:inherit; font-weight:700; font-size:.9rem; cursor:pointer; }
.fin-pay:hover{ filter:brightness(1.06); }
.fin-item{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-top:1px solid rgba(255,255,255,.06); }
.ios-group > .fin-item:first-child{ border-top:0; }
.fin-item-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fin-item-lbl{ font-weight:600; color:#fff; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fin-item-meta{ font-size:.76rem; color:rgba(235,235,245,.5); }
.fin-item-side{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.fin-item-amt{ font-weight:700; color:#fff; font-size:.9rem; white-space:nowrap; }
.fin-inv{ border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:5px 12px; background:rgba(255,255,255,.05); color:rgba(235,235,245,.82); font-family:inherit; font-size:.76rem; font-weight:700; cursor:pointer; transition:background .14s ease; }
.fin-inv:hover{ background:rgba(255,255,255,.12); color:#fff; }
.fin-ranges{ display:flex; gap:8px; padding:4px 6px 0; flex-wrap:wrap; }
.fin-range{ flex:1 1 auto; border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:9px 10px; background:rgba(255,255,255,.05); color:rgba(235,235,245,.82); font-family:inherit; font-size:.82rem; font-weight:700; cursor:pointer; transition:background .14s ease, color .14s ease; }
.fin-range:hover{ background:var(--wp-accent,#0a84ff); border-color:transparent; color:var(--wp-on-accent,#fff); }
/* Two grouped lists back-to-back (no section label between) still need the iOS
   gap, e.g. account "Switch account / Log out" under Personal info, or the
   servant "Forget everything" under the memory list. */
.ios-group + .ios-group{ margin-top:18px; }
.ios-banner{ display:flex; align-items:center; gap:14px; padding:14px 14px; margin:2px 4px 4px; text-decoration:none; color:inherit; }
button.ios-banner{ width:100%; border:none; font:inherit; cursor:pointer; text-align:left; }
/* in-settings back header (sub-pages) */
.ios-back{ display:flex; align-items:center; gap:4px; width:auto; border:none; background:none; color:var(--wp-accent,#0a84ff); font:inherit; font-size:1rem; font-weight:600; padding:4px 6px 8px; cursor:pointer; }
/* "All settings" nav chip at the top of a settings sub-page (not a back arrow) */
.wp-set-up{ display:inline-flex; align-items:center; gap:7px; margin:0 0 12px; padding:7px 14px 7px 11px; border-radius:999px; border:1px solid var(--wp-border-hover,rgba(255,255,255,.16)); background:var(--wp-surface,rgba(255,255,255,.05)); color:var(--wp-text,inherit); font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; transition:background .15s ease; }
.wp-set-up:hover{ background:var(--wp-surface-strong,rgba(255,255,255,.1)); }
.wp-set-up-ic{ display:inline-flex; }
.wp-set-up-ic svg{ width:15px; height:15px; opacity:.8; }
/* in-settings legal documents (Terms / Privacy / Disclosures) */
.wp-legal{ padding:2px 18px 28px; font-size:.82rem; line-height:1.62; color:rgba(235,235,245,.78); }
.wp-legal h2{ font-size:.9rem; font-weight:700; margin:1.4rem 0 .5rem; color:#f2f5fb; }
.wp-legal h3{ font-size:.84rem; font-weight:600; margin:1rem 0 .4rem; color:#f2f5fb; }
.wp-legal p{ margin:0 0 .7rem; }
.wp-legal ul{ margin:0 0 .8rem; padding-left:1.1rem; }
.wp-legal li{ margin:0 0 .35rem; }
.wp-legal a{ color:var(--wp-accent,#0a84ff); text-decoration:none; }
.wp-legal strong{ color:#f2f5fb; font-weight:600; }
.wp-legal .legal-updated{ font-size:.74rem; opacity:.55; margin:0 0 1.2rem; }
.wp-legal .legal-sec-label{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.5; margin:1.8rem 0 .3rem; }
/* Appearance: account-tied theme applied across every Wopara page.
   Readability safety net: while a theme is active, the page's base background
   and base text come from the SAME contrast-checked palette pair, so default
   text is always legible on its background. background-COLOR (not the shorthand)
   is used so any page background image/video is preserved. */
html.wp-theme-on body{ background-color:var(--wp-bg-solid) !important; color:var(--wp-text-solid) !important; }
/* Appearance accent theme picker */
.wp-appear-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:2px 6px 6px; }
.wp-appear{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 6px; border:none; background:rgba(255,255,255,.05); border-radius:14px; color:#fff; font:inherit; cursor:pointer; transition:background .15s ease; }
.wp-appear:hover{ background:rgba(255,255,255,.09); }
.wp-appear.on{ background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1.5px var(--wp-accent,#0a84ff); }
.wp-appear-dot{ position:relative; width:40px; height:40px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; }
.wp-appear-dot i{ position:absolute; right:-1px; bottom:-1px; width:15px; height:15px; border-radius:50%; border:2px solid rgba(0,0,0,.4); }
.wp-appear-dot b{ display:flex; width:20px; height:20px; }
.wp-appear-dot b svg{ width:100%; height:100%; }
.wp-appear-name{ font-size:.8rem; color:rgba(255,255,255,.85); }

/* Hero wallpaper tiles: each previews the paper it wears (the theme tile previews
   the live theme), so the choice is made by looking, not by reading a filename. */
.wp-wall-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:2px 6px 6px; }
.wp-wall{ display:flex; flex-direction:column; align-items:stretch; gap:7px; padding:8px; border:none; background:rgba(255,255,255,.05); border-radius:14px; color:#fff; font:inherit; cursor:pointer; transition:background .15s ease; }
.wp-wall:hover{ background:rgba(255,255,255,.09); }
.wp-wall-pic{ position:relative; width:100%; aspect-ratio:16/10; border-radius:10px; background-size:cover; background-position:center; background-color:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; }
.wp-wall.on .wp-wall-pic{ box-shadow:inset 0 0 0 2px var(--wp-accent,#0a84ff); }
.wp-wall-pic b{ display:flex; width:22px; height:22px; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.wp-wall-pic b svg{ width:100%; height:100%; }
.wp-wall-empty .wp-wall-pic{ font-size:1.6rem; font-weight:300; color:rgba(255,255,255,.55); }
.wp-wall-name{ font-size:.8rem; color:rgba(255,255,255,.85); text-align:center; }

/* Inline custom-theme colour picker (saturation/value square + hue strip + hex) */
.wp-cp{ margin:2px 6px 8px; display:flex; flex-direction:column; gap:10px; }
.wp-cp-sv{ position:relative; width:100%; height:150px; border-radius:14px; cursor:crosshair; touch-action:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.wp-cp-sv-thumb{ position:absolute; left:50%; top:0; width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.5); pointer-events:none; }
.wp-cp-hue{ position:relative; width:100%; height:16px; border-radius:10px; cursor:pointer; touch-action:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%); }
.wp-cp-hue-thumb{ position:absolute; left:0; top:50%; width:14px; height:22px; border-radius:6px; transform:translate(-50%,-50%); border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.5); pointer-events:none; }
.wp-cp-row{ display:flex; align-items:center; gap:10px; }
.wp-cp-prev{ width:34px; height:34px; flex:0 0 auto; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.wp-cp-hex{ flex:1 1 auto; min-width:0; font:inherit; color:inherit; background:rgba(120,120,128,.22); border:none; border-radius:10px; padding:8px 12px; outline:none; text-transform:lowercase; }
.wp-cp-use{ flex:0 0 auto; font:inherit; font-weight:600; color:var(--wp-on-accent,#fff); background:var(--wp-accent,#0a84ff); border:none; border-radius:10px; padding:8px 16px; cursor:pointer; }
/* Custom theme: the three tones (primary / secondary / complimentary).
   Tap one to aim the colour picker below at it. */
.wp-tones{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:2px 6px 10px; }
.wp-tone{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 6px; border:none; background:rgba(255,255,255,.05); border-radius:14px; color:#fff; font:inherit; cursor:pointer; transition:background .15s ease; }
.wp-tone:hover{ background:rgba(255,255,255,.09); }
.wp-tone.on{ background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1.5px var(--wp-accent,#0a84ff); }
.wp-tone-sw{ width:40px; height:40px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.wp-tone-lb{ font-size:.72rem; color:rgba(255,255,255,.85); text-align:center; line-height:1.2; }
.wp-theme-del{ border:none; background:transparent; color:#ff7a7a; font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; padding:4px 2px; }
/* Theme detail: Update / Save as new sit side by side, equal width */
.wp-theme-acts{ gap:10px; }
.wp-theme-acts .wp-cp-use{ flex:1 1 0; text-align:center; }
.wp-cp-use.wp-alt{ background:rgba(255,255,255,.12); color:#fff; }
.wp-cp-use.wp-alt:hover{ background:rgba(255,255,255,.18); }
/* Font family picker */
.wp-font-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:2px 6px 6px; }
.wp-font-tile{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 6px 12px; border:none; background:rgba(255,255,255,.05); border-radius:14px; color:rgba(238,242,247,.85); cursor:pointer; transition:background .15s ease; position:relative; }
.wp-font-tile:hover{ background:rgba(255,255,255,.09); }
.wp-font-tile.on{ background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1.5px var(--wp-accent,#0a84ff); }
.wp-font-preview{ font-size:1.35rem; font-weight:600; line-height:1.15; letter-spacing:-.01em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.wp-font-name{ font-size:.7rem; font-weight:500; opacity:.6; font-family:'Inter',system-ui,sans-serif; }
.wp-font-ck{ position:absolute; top:6px; right:6px; width:14px; height:14px; color:var(--wp-accent,#0a84ff); }
.wp-font-ck svg{ width:100%; height:100%; }
/* Text size chips */
.wp-fsize-row{ display:flex; gap:8px; margin:2px 6px 8px; }
.wp-fsize-chip{ flex:1; padding:10px 4px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); border-radius:12px; color:rgba(238,242,247,.8); font-family:inherit; font-size:.82rem; font-weight:600; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.wp-fsize-chip:hover{ background:rgba(255,255,255,.09); }
.wp-fsize-chip.on{ background:rgba(255,255,255,.12); border-color:var(--wp-accent,#0a84ff); color:#fff; }
/* Global font override — a blanket rule, so every hardcoded font-family on every
   product page is replaced by the account's chosen face. Exclusions, all deliberate:
     - code/pre/kbd/samp + .mono/.code  : keep their fixed-width face
     - [class*="fa-"] / .fas / .far / .fab / .material-icons : ICON FONTS. These render
       glyphs from a private code range; overriding their family turns every icon into
       a garbage letter. 21 pages load Font Awesome, so this exclusion is load-bearing.
     - .wp-font-preview : the picker's own tiles, which must each keep their own face
       or all twelve previews would repaint into the currently-selected font. */
[data-wpfont] body,
[data-wpfont] body *:not(code):not(pre):not(kbd):not(samp):not([class*="mono"]):not([class*="code"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.material-icons):not(.wp-font-preview) {
  font-family: var(--wp-font-ui, inherit) !important;
}
/* Global text-size scale — only non-default sizes write --wp-font-scale */
[data-wpfontsize] body { font-size: calc(1rem * var(--wp-font-scale, 1)) !important; }
/* Buy reserves: custom amount input inside an iOS row */
.wp-res-qty{ width:92px; background:rgba(120,120,128,.22); border:none; border-radius:8px; color:inherit; font:inherit; font-size:1rem; text-align:right; padding:6px 9px; margin-right:10px; -moz-appearance:textfield; }
.wp-res-qty::-webkit-outer-spin-button,.wp-res-qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.wp-res-qty:focus{ outline:2px solid var(--wp-accent,#0a84ff); outline-offset:1px; }
.ios-back svg{ width:20px; height:20px; }
.ios-banner-orb{ flex:0 0 auto; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,.12); }
.ios-banner-orb svg{ width:30px; height:30px; }
.ios-banner-orb.plan-pro{ background:linear-gradient(135deg,#ffd479,#f5a623); color:#1a1305; }
.ios-banner-orb.plan-standard{ background:linear-gradient(135deg,#4aa3ff,var(--wp-accent,#0a84ff)); }
.ios-banner-orb.plan-max{ background:linear-gradient(135deg,#ff7a9c,#ff375f); }
.ios-banner-orb.pic{ overflow:hidden; background:#11131c; }
.ios-banner-orb.pic img{ width:100%; height:100%; object-fit:cover; }
.ios-banner-orb .ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#f7cf6b; font-weight:800; }
.ios-banner-orb .ph svg{ width:28px; height:28px; }
.ios-banner-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
/* Your three progress rings on the right of the account banner (hours / bond /
   cadet), mirroring the Servant's bond badge. */
.wp-hrings{ flex:0 0 auto; width:52px; height:52px; padding:0; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.wp-hrings svg{ width:100%; height:100%; display:block; }
/* Strength / weakness badges on the progress page (weakness = amber growth area). */
.wp-hp-sw{ display:flex; gap:8px; flex-wrap:wrap; margin:0 4px; }
.wp-hp-badge{ font-size:.82rem; font-weight:700; padding:7px 14px; border-radius:999px; border:1px solid transparent; }
.wp-hp-str{ color:#34d399; background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.34); }
.wp-hp-weak{ color:#f5b342; background:rgba(245,179,66,.12); border-color:rgba(245,179,66,.34); }
.ios-banner-name{ font-size:1.05rem; font-weight:700; }
.ios-banner-sub{ font-size:.8rem; color:rgba(235,235,245,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ios-row{ position:relative; display:flex; align-items:center; gap:12px; padding:11px 14px; min-height:44px; text-decoration:none; color:#fff; }
/* a setting the user was routed to (e.g. tapped Pin while Recents is on) glows briefly */
.ios-row.wp-set-hl{ border-radius:12px; animation:wp-set-hl 1.4s ease-in-out 2; }
@keyframes wp-set-hl{ 0%,100%{ box-shadow:0 0 0 0 rgba(79,143,255,0); background:transparent; } 50%{ box-shadow:0 0 0 2px var(--wp-accent,#4f8fff); background:rgba(79,143,255,.12); } }
/* Machine "guide" card: explains a setting + offers a one-tap action */
.wp-nt-msg.wp-guide-card{ align-self:stretch; max-width:100%; display:flex; flex-direction:column; gap:8px; }
.wp-guide-title{ font-weight:700; font-size:.9rem; }
.wp-guide-body{ font-size:.85rem; line-height:1.5; opacity:.85; }
.wp-guide-act{ align-self:flex-start; margin-top:2px; padding:8px 14px; border:none; border-radius:999px; background:var(--wp-accent,#4f8fff); color:var(--wp-on-accent,#fff); font:inherit; font-weight:700; font-size:.82rem; cursor:pointer; }
.wp-guide-act.is-done{ background:rgba(52,211,153,.25); color:#34d399; cursor:default; }
.ios-row + .ios-row::before{ content:''; position:absolute; left:52px; right:0; top:0; height:1px; background:rgba(255,255,255,.08); }
.ios-badge{ flex:0 0 auto; width:29px; height:29px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#fff; overflow:hidden; }
.ios-badge svg{ width:18px; height:18px; display:block; }
/* rows that are buttons (account actions) reset native styling */
button.ios-row{ width:100%; border:none; background:none; font:inherit; cursor:pointer; text-align:left; }
button.ios-row:hover{ background:rgba(255,255,255,.04); }
.ios-row.danger .ios-row-label{ color:#ff453a; }
.ios-row-label{ flex:1; min-width:0; font-size:.95rem; font-weight:500; }
.ios-row-sub{ display:block; font-size:.78rem; font-weight:400; color:rgba(235,235,245,.5); margin-top:2px; white-space:normal; }
.ios-row-trail{ display:flex; align-items:center; gap:5px; flex:0 0 auto; }
.ios-row-value{ font-size:.9rem; color:rgba(235,235,245,.55); }
.ios-linkdel{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; color:rgba(235,235,245,.5); cursor:pointer; transition:background .15s ease, color .15s ease; }
.ios-linkdel:hover{ background:rgba(255,69,58,.16); color:#ff453a; }

/* ===== Reusable external-links orbit (photo + moving, morphing bubbles) ===== */
.wp-links-preview{ display:flex; justify-content:center; margin:8px 0 14px; }
.wp-orbit-stage{ position:relative; width:116px; height:116px; display:flex; align-items:center; justify-content:center; margin:6px auto; }
.wp-orbit-stage.has-orbit{ width:248px; height:248px; }
.wp-orbit-photo{ width:116px; height:116px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#2c2c30; color:#cfd2da; font-weight:700; font-size:2rem; position:relative; z-index:2; flex:none; }
.wp-orbit-stage.has-orbit .wp-orbit-photo{ box-shadow:0 10px 34px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.16); }
.wp-orbit-photo img{ width:100%; height:100%; object-fit:cover; }
.wp-orbit{ position:absolute; top:50%; left:50%; width:0; height:0; z-index:1; animation:wp-orbit-spin 30s linear infinite; }
.wp-orbit-item{ position:absolute; top:0; left:0; width:0; height:0; }
.wp-orbit-ic{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; margin:-23px; color:#fff; font-weight:800; font-size:.82rem; overflow:hidden; border-radius:42% 58% 56% 44% / 49% 42% 58% 51%; box-shadow:0 8px 22px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.16); animation:wp-orbit-spin 30s linear infinite reverse, wp-orbit-morph 7s ease-in-out infinite; transition:transform .18s ease; }
.wp-orbit-ic svg{ width:46%; height:46%; }
.wp-orbit-item:hover .wp-orbit-ic{ transform:scale(1.16); }
.wp-orbit-hint{ position:absolute; left:50%; bottom:30%; transform:translateX(-50%); z-index:3; font-size:.62rem; font-weight:600; color:rgba(255,255,255,.82); text-shadow:0 1px 7px rgba(0,0,0,.8); pointer-events:none; white-space:nowrap; }
@keyframes wp-orbit-spin{ to{ transform:rotate(360deg); } }
@keyframes wp-orbit-morph{ 0%,100%{ border-radius:42% 58% 56% 44% / 49% 42% 58% 51%; } 50%{ border-radius:58% 42% 45% 55% / 55% 56% 44% 45%; } }
@media (prefers-reduced-motion: reduce){ .wp-orbit, .wp-orbit-ic{ animation:none; } }
.ios-chev{ width:15px; height:15px; color:rgba(235,235,245,.32); display:inline-flex; flex:0 0 auto; }
.ios-chev svg{ width:100%; height:100%; }
/* iOS toggle */
.wp-switch{ flex:0 0 auto; width:51px; height:31px; border-radius:999px; background:rgba(120,120,128,.32); position:relative; cursor:pointer; transition:background .25s ease; }
.wp-switch.on{ background:var(--wp-accent, #30d158); }
.wp-switch-dot{ position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.3); transition:left .25s cubic-bezier(.3,.6,.4,1); }
.wp-switch.on .wp-switch-dot{ left:22px; }
/* preview-sound volume slider (Settings > General > Preview sounds) */
.wp-vol{ -webkit-appearance:none; appearance:none; flex:0 0 auto; width:140px; max-width:44vw; height:4px; border-radius:2px; background:rgba(120,120,128,.32); outline:none; margin-left:auto; cursor:pointer; }
.wp-vol::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--wp-accent,#0a84ff); border:none; box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer; }
.wp-vol::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--wp-accent,#0a84ff); border:none; box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer; }
/* Preview-sound tone chips: a row of five subtle choices under the Tone row. */
.wp-tone-row{ display:flex; flex-wrap:wrap; gap:8px; padding:2px 14px 12px; }
.wp-tone{ flex:1 1 auto; min-width:56px; padding:9px 10px; border-radius:12px; border:1px solid var(--wp-border,rgba(255,255,255,.14)); background:var(--wp-surface,rgba(255,255,255,.05)); color:var(--wp-text-solid,#eef2f7); font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.wp-tone:hover{ border-color:var(--wp-accent,#0a84ff); }
.wp-tone.on{ border-color:var(--wp-accent,#0a84ff); background:var(--wp-surface-strong,rgba(255,255,255,.1)); color:var(--wp-text-solid,#fff); }
/* ----- Servant settings: avatar, default glyph, memory rows ----- */
.ios-banner-orb.pic.wp-servant-orb{ background:radial-gradient(120% 120% at 30% 20%, rgba(94,92,230,.6), rgba(17,19,28,.95)); }
.wp-servant-glyph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.wp-servant-glyph svg{ width:30px; height:30px; stroke:#fff; }
.wp-servant-banner .ios-banner-sub{ color:rgba(235,235,245,.6); }
.wp-mem-row{ align-items:flex-start; }
.wp-mem-row .wp-mem-text{ font-weight:500; white-space:normal; line-height:1.4; padding:2px 0; }
.wp-mem-row .ios-linkdel{ margin-top:2px; }
/* ----- Servant bonding rings (Rapport / Trust / Presence) ----- */
.wp-orb-tap{ cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; }
.wp-orb-tap:hover{ transform:scale(1.05); box-shadow:0 0 0 2px var(--wp-accent,#0a84ff); }
.wp-orb-tap:focus-visible{ outline:2px solid var(--wp-accent,#0a84ff); outline-offset:2px; }
.wp-bond{ flex:0 0 auto; margin-left:auto; padding:1px; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.wp-bond-rings{ position:relative; width:44px; height:44px; display:flex; align-items:center; justify-content:center; transition:transform .16s ease; }
.wp-bond:hover .wp-bond-rings{ transform:scale(1.06); }
.wp-bond:focus-visible{ outline:2px solid var(--wp-accent,#0a84ff); outline-offset:2px; border-radius:50%; }
.wp-bond-svg{ display:block; }
.wp-bond-hero{ display:flex; justify-content:center; padding:20px 0 12px; }
.wp-bond-big{ position:relative; width:min(240px, 78vw); aspect-ratio:1; }
.wp-bond-big .wp-bond-svg{ width:100%; height:100%; }
.wp-bond-num{ fill:var(--wp-text-solid,#fff); font-family:inherit; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.wp-bond-ask{ display:flex; justify-content:center; padding:14px 4px 4px; }
/* ----- Servant first-use onboarding: setup steps as chat bubbles ----- */
.wp-nt-msg.wp-ob{ max-width:92%; white-space:normal; }
.wp-ob .wp-ob-t{ margin:0 0 10px; line-height:1.5; }
.wp-ob .wp-ob-row{ display:flex; gap:8px; align-items:center; }
.wp-ob .wp-ob-input{ flex:1; min-width:0; height:44px; padding:0 14px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(8,10,16,.35); color:inherit; font-family:inherit; font-size:.9rem; outline:none; }
.wp-ob .wp-ob-input:focus{ border-color:var(--wp-accent,#7c5cff); }
.wp-ob .wp-ob-go{ height:44px; padding:0 16px; border-radius:12px; border:0; background:var(--wp-accent,#7c5cff); color:var(--wp-on-accent,#fff); font-family:inherit; font-size:.88rem; font-weight:600; cursor:pointer; }
.wp-ob .wp-ob-alt{ height:44px; padding:0 16px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:transparent; color:inherit; font-family:inherit; font-size:.88rem; cursor:pointer; }
.wp-ob.is-done .wp-ob-go, .wp-ob.is-done .wp-ob-alt{ opacity:.45; pointer-events:none; }
.wp-ob.is-done .wp-ob-input{ opacity:.6; }
.wp-ob .wp-ob-chips{ margin-top:2px; padding:0; }
.wp-ob.is-done .wp-tone{ pointer-events:none; opacity:.55; }
.wp-ob.is-done .wp-tone.on{ opacity:1; }
.wp-ob .wp-ob-try{ display:flex; flex-direction:column; gap:8px; margin-top:8px; align-items:flex-start; }
.wp-ob .wp-ob-look{ margin:2px 0 10px; }
.wp-ob .wp-ob-look img{ display:block; width:100%; max-width:280px; border-radius:22px 18px 24px 19px/19px 24px 18px 22px; }
.wp-ob .wp-ob-video{ display:block; width:100%; max-width:320px; border-radius:22px 18px 24px 19px/19px 24px 18px 22px; box-shadow:0 14px 36px rgba(0,0,0,.35); }
.wp-nt-msg.wp-ob:has(.wp-ob-video){ padding:6px; background:transparent; border:0; }

/* iMessage-style typing bubble: the Servant is writing */
.wp-nt-msg.wp-nt-typing{ display:flex; gap:5px; align-items:center; padding:13px 15px; width:max-content; }
.wp-nt-tydot{ width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.35; animation:wpTyDot 1.2s ease-in-out infinite; }
.wp-nt-tydot:nth-child(2){ animation-delay:.18s; }
.wp-nt-tydot:nth-child(3){ animation-delay:.36s; }
@keyframes wpTyDot{ 0%,60%,100%{ transform:translateY(0); opacity:.35; } 30%{ transform:translateY(-4px); opacity:.9; } }

/* Agentic "doing" ring: the Servant is doing something, not typing */
.wp-nt-doing{ align-self:flex-start; position:relative; width:46px; height:46px; margin:2px 0; }
.wp-doing-ring{ position:absolute; inset:0; border-radius:50%; border:2.5px dashed color-mix(in srgb, var(--wp-accent,#7c5cff) 65%, transparent); animation:wpDoingSpin 1.1s linear infinite; }
.wp-doing-ic{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--wp-accent,#7c5cff); }
.wp-doing-ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes wpDoingSpin{ to{ transform:rotate(360deg); } }
/* The Servant operating its machine: a small window with a title bar, rows
   lighting up as work happens, and a mouse cursor gliding and clicking. Same
   illusion as the Browser animation, sized for the chat thread. */
.wp-doing-win{ align-self:flex-start; position:relative; width:216px; margin:4px 0; border-radius:13px; overflow:hidden; background:rgba(10,13,22,.92); border:1px solid rgba(255,255,255,.14); box-shadow:0 12px 34px rgba(0,0,0,.4); animation:wpDwIn .28s cubic-bezier(0.16,1,0.3,1); }
.wp-doing-win.is-done{ opacity:0; transform:scale(.92); transition:opacity .32s ease, transform .32s ease; }
.wp-dw-bar{ display:flex; align-items:center; gap:5px; padding:7px 10px; background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.08); }
.wp-dw-bar span{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.22); }
.wp-dw-bar span:first-child{ background:#ff5f57; } .wp-dw-bar span:nth-child(2){ background:#febc2e; } .wp-dw-bar span:nth-child(3){ background:#28c840; }
.wp-dw-bar em{ font:600 .68rem 'Inter',system-ui,sans-serif; font-style:normal; color:rgba(238,242,247,.75); margin-left:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wp-dw-body{ position:relative; height:84px; padding:12px 12px 12px 46px; }
.wp-dw-glyph{ position:absolute; left:12px; top:14px; color:var(--wp-accent,#7c5cff); }
.wp-dw-glyph svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.wp-dw-rows{ display:flex; flex-direction:column; gap:9px; padding-top:4px; }
.wp-dw-row{ height:9px; border-radius:5px; background:rgba(255,255,255,.10); animation:wpDwRow 1.5s ease infinite; }
.wp-dw-row.r1{ width:82%; } .wp-dw-row.r2{ width:64%; animation-delay:.35s; } .wp-dw-row.r3{ width:73%; animation-delay:.7s; }
@keyframes wpDwRow{ 0%,100%{ background:rgba(255,255,255,.10); } 40%{ background:color-mix(in srgb, var(--wp-accent,#7c5cff) 45%, rgba(255,255,255,.1)); } }
.wp-dw-cursor{ position:absolute; left:0; top:0; width:15px; height:15px; animation:wpDwCursor 1.6s ease-in-out infinite; }
.wp-dw-cursor svg{ width:15px; height:15px; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
@keyframes wpDwCursor{
  0%{ transform:translate(150px,62px) scale(1); }
  28%{ transform:translate(58px,24px) scale(1); }
  36%{ transform:translate(58px,24px) scale(.78); }
  44%{ transform:translate(58px,24px) scale(1); }
  66%{ transform:translate(118px,44px) scale(1); }
  74%{ transform:translate(118px,44px) scale(.78); }
  82%{ transform:translate(118px,44px) scale(1); }
  100%{ transform:translate(150px,62px) scale(1); }
}

/* Send glyph: hidden until there is something to send, then pops in and
   radiates a wave so tap-to-send explains itself, no copy needed */
/* Send stays hidden AND collapsed (zero width, gap cancelled) until there's
   something to send, so the input stretches to fill the whole bar instead of
   leaving an empty slot on the right; typing pops it in and the input makes room. */
.wp-nt-compose .wp-nt-send{ opacity:0; transform:scale(.35); pointer-events:none; position:relative; width:0; margin-left:-8px; overflow:hidden; transition:opacity .18s ease, transform .22s cubic-bezier(0.16,1,0.3,1), width .22s cubic-bezier(0.16,1,0.3,1), margin-left .22s cubic-bezier(0.16,1,0.3,1); }
.wp-nt-compose.has-text .wp-nt-send{ opacity:1; transform:scale(1); pointer-events:auto; width:40px; margin-left:0; }
.wp-nt-compose.has-text .wp-nt-send:hover{ transform:scale(1.08); }
.wp-nt-compose .wp-nt-send::before{ content:''; position:absolute; inset:2px; border-radius:50%; border:2px solid var(--wp-accent,#7c5cff); opacity:0; pointer-events:none; }
.wp-nt-compose.has-text .wp-nt-send::before{ animation:wpSendWave 1.15s ease-out 3; }
@keyframes wpSendWave{ 0%{ opacity:.75; transform:scale(.55); } 100%{ opacity:0; transform:scale(2.05); } }

/* Servant empty state: tappable suggestions + a Tips button (FAQ behind it) */
/* Suggestions live BOTTOM-RIGHT of the empty state. The base .wp-nt-suggest
   forces align-self:flex-start (left) + text-align:left, so override both. */
.wp-nt-hint-intro{ display:flex; flex-direction:column; gap:9px; align-items:flex-end; padding:2px 2px 4px; }
.wp-nt-hint-intro .wp-nt-suggests{ display:flex; flex-direction:column; gap:8px; width:100%; align-items:flex-end; }
.wp-nt-hint-intro .wp-nt-suggest{ align-self:flex-end; margin:0; text-align:right; }
.wp-nt-hint-intro .wp-nt-tips-btn{ align-self:flex-end; }
.wp-nt-tips-btn{ align-self:flex-start; margin-top:2px; padding:7px 18px; border-radius:999px; border:1px solid var(--wp-border-hover,rgba(255,255,255,.18)); background:transparent; color:var(--wp-text,inherit); font-family:inherit; font-size:.82rem; font-weight:600; cursor:pointer; transition:background .15s ease; }
.wp-nt-tips-btn:hover{ background:var(--wp-surface,rgba(255,255,255,.06)); }

/* In-chat settings strip: live toggle + jump to the real settings page */
.wp-nt-msg.wp-nt-setrow{ width:min(320px,92%); display:flex; flex-direction:column; gap:10px; }
.wp-nt-setrow .wp-setrow-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wp-nt-setrow .wp-setrow-label{ font-weight:600; }
.wp-nt-setrow .wp-setrow-visit{ width:100%; height:40px; border-radius:12px; border:1px solid color-mix(in srgb, var(--wp-accent,#7c5cff) 40%, transparent); background:color-mix(in srgb, var(--wp-accent,#7c5cff) 12%, transparent); color:inherit; font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer; }
/* Base look for .wp-setrow-visit anywhere (org owner panel used it unstyled before,
   so those Give / Approve / Co-manager buttons rendered as raw browser buttons). */
.wp-setrow-visit{ border-radius:12px; border:1px solid color-mix(in srgb, var(--wp-accent,#7c5cff) 42%, transparent); background:color-mix(in srgb, var(--wp-accent,#7c5cff) 14%, transparent); color:var(--wp-text-solid,#eef2f7); font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.wp-setrow-visit:hover{ background:color-mix(in srgb, var(--wp-accent,#7c5cff) 24%, transparent); }
.wp-setrow-visit.is-on{ background:color-mix(in srgb, var(--wp-accent,#7c5cff) 26%, transparent); border-color:var(--wp-accent,#7c5cff); }
.wp-setrow-visit:disabled{ opacity:.5; cursor:default; }
html.wp-theme-light .wp-ob .wp-ob-input{ background:rgba(16,19,28,.06); border-color:rgba(16,19,28,.18); color:rgba(16,19,28,.92); }
html.wp-theme-light .wp-ob .wp-ob-alt{ border-color:rgba(16,19,28,.2); color:rgba(16,19,28,.85); }

/* ----- Servant look page (settings drill): AI-drawn looks, no photo uploads ----- */
.wp-svlook-prev{ display:flex; justify-content:center; padding:4px 0 6px; position:relative; }
.wp-svlook-prev img{ display:block; width:100%; max-width:340px; border-radius:34px 28px 38px 30px/30px 38px 28px 34px; box-shadow:0 18px 44px rgba(0,0,0,.35); transition:filter .35s ease, transform .35s ease; }
/* "Drawing" state: blur the current look, no text, while the new one renders */
.wp-svlook-prev.is-drawing img, .wp-ob .wp-ob-look.is-drawing img{ filter:blur(16px) saturate(1.1); transform:scale(1.03); }
.wp-svlook-prev.is-drawing::after, .wp-ob .wp-ob-look.is-drawing::after{ content:''; position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; animation:wpDoingSpin .9s linear infinite; }
.wp-ob .wp-ob-look{ position:relative; }
.wp-ob .wp-ob-look img{ transition:filter .35s ease, transform .35s ease; }
.wp-svlook-form{ display:flex; flex-direction:column; gap:10px; margin:2px 4px 14px; }
.wp-svlook-input{ width:100%; min-height:84px; padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.16); background:rgba(8,10,16,.35); color:inherit; font-family:inherit; font-size:.92rem; outline:none; resize:vertical; }
.wp-svlook-input:focus{ border-color:var(--wp-accent,#7c5cff); }
.wp-svlook-go{ height:48px; border-radius:14px; border:0; background:var(--wp-accent,#7c5cff); color:var(--wp-on-accent,#fff); font-family:inherit; font-size:.95rem; font-weight:700; cursor:pointer; }
.wp-svlook-go:disabled{ opacity:.5; cursor:default; }
.wp-svlook-status{ min-height:18px; font-size:.85rem; color:var(--wp-muted,rgba(238,242,247,.6)); }
.wp-svlook-status.err{ color:#ff7a7a; }
/* Undo / Redo between generated looks: two equal big buttons under the preview */
.wp-svlook-nav{ display:flex; gap:10px; margin:2px 4px 12px; }
.wp-svlook-navbtn{ flex:1; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:14px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:inherit; font-family:inherit; font-size:.92rem; font-weight:700; cursor:pointer; }
.wp-svlook-navbtn svg{ width:17px; height:17px; }
.wp-svlook-navbtn:disabled{ opacity:.35; cursor:default; }
/* personality "in your own words" box: shorter than the look prompt */
.wp-svnote{ min-height:56px; }
html.wp-theme-light .wp-svlook-input{ background:rgba(16,19,28,.06); border-color:rgba(16,19,28,.18); color:rgba(16,19,28,.92); }
html.wp-theme-light .wp-svlook-navbtn{ background:rgba(16,19,28,.06); border-color:rgba(16,19,28,.18); color:rgba(16,19,28,.92); }
.wp-acct-btn.wp-set-open{ margin-top:12px; justify-content:center; gap:8px; }
.wp-acct-btn.wp-set-open svg{ width:16px; height:16px; }
/* Plan detail "Get" button (bottom of a membership sub-page) */
.wp-plan-cta{ display:flex; align-items:center; justify-content:center; margin:18px 4px 6px; padding:14px 18px; border-radius:14px; background:linear-gradient(135deg,#4aa3ff,var(--wp-accent,#0a84ff)); color:#fff; font-weight:700; font-size:1rem; text-decoration:none; transition:filter .15s ease; }
.wp-plan-cta.pro{ background:linear-gradient(135deg,#4aa3ff,var(--wp-accent,#0a84ff)); color:#fff; }
.wp-plan-cta:hover{ filter:brightness(1.06); }
.wp-plan-cta:disabled{ opacity:.5; cursor:default; filter:none; }
button.wp-plan-cta{ width:calc(100% - 8px); border:none; cursor:pointer; font:inherit; }

/* ===== Inline Stripe checkout (Payment Element) ===== */
.wp-pay{ padding:4px 4px 2px; }
.wp-pay-el{ min-height:120px; padding:4px 0; }
.wp-pay-load{ color:var(--wp-text-muted,rgba(235,235,245,.55)); font-size:.9rem; text-align:center; padding:34px 0; }
.wp-pay-msg{ font-size:.85rem; color:var(--wp-text-muted,rgba(235,235,245,.6)); padding:2px 4px; min-height:0; }
.wp-pay-msg.err{ color:#ff6961; }
.wp-pay-done{ text-align:center; padding:18px 6px 6px; }
.wp-pay-tick{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:#34c759; margin-bottom:12px; }
.wp-pay-tick svg{ width:24px; height:24px; }
.wp-pay-done-t{ font-weight:700; font-size:1.05rem; }
.wp-pay-done-s{ color:var(--wp-text-muted,rgba(235,235,245,.6)); font-size:.9rem; margin-top:4px; }

/* ===== Consent gate (after Google sign-in) =====
   Like wpPrompt, this is a true modal spawned on <body>, so it MUST sit above
   everything the pill raises itself to: the blob (2147483000), the settings-locked
   pill and the notes-open pill (2147483200). At its old z-index the gate PAINTED on
   top (nothing behind it was opaque) but the pill chrome still owned the taps, so a
   finger on the card fell straight through to the page behind it. Sit above the pill,
   below wpPrompt (2147483600) and notifications (2147483620). */
.wp-consent{ position:fixed; inset:0; z-index:2147483590; display:none; align-items:center; justify-content:center; padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background:rgba(6,8,14,.6); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); font-family:'Inter',system-ui,-apple-system,sans-serif; }
.wp-consent.show{ display:flex; pointer-events:auto; }
/* margin:auto keeps the card centred when it fits and scroll-reachable (button and all) when the viewport is too short */
.wp-consent-card{ position:relative; z-index:1; pointer-events:auto; width:min(420px,100%); margin:auto; border-radius:22px; border:1px solid rgba(255,255,255,.12); background:#181b25; box-shadow:0 30px 80px rgba(0,0,0,.6); padding:28px 24px; color:#eef2f7; text-align:center; }
/* Transparent tap-through shield held for a beat after the gate closes (see JS). */
.wp-consent-shield{ position:fixed; inset:0; z-index:2147483591; background:transparent; }
/* background must never scroll while the consent screen is up */
html.wp-consent-lock, html.wp-consent-lock body{ overflow:hidden; }
.wp-consent-title{ font-size:1.4rem; font-weight:800; margin-bottom:8px; }
.wp-consent-text{ font-size:.9rem; color:rgba(238,242,247,.7); line-height:1.5; margin:0 0 18px; }
.wp-consent-check{ display:flex; align-items:flex-start; gap:10px; text-align:left; font-size:.85rem; line-height:1.5; color:rgba(238,242,247,.85); margin-bottom:20px; cursor:pointer; }
.wp-consent-check input{ margin-top:2px; width:18px; height:18px; flex:0 0 auto; accent-color:#30d158; }
.wp-consent-check a{ color:#4ea1ff; text-decoration:none; }
.wp-consent-check a:hover{ text-decoration:underline; }
.wp-consent-go{ width:100%; padding:13px; border:none; border-radius:14px; background:var(--accent,#4e7fff); color:#fff; font:inherit; font-size:.95rem; font-weight:800; cursor:pointer; transition:opacity .15s ease; }
.wp-consent-go:disabled{ opacity:.4; cursor:default; }
.wp-consent-out{ width:100%; margin-top:10px; padding:10px; border:none; background:none; color:rgba(238,242,247,.6); font:inherit; font-size:.85rem; cursor:pointer; }
.wp-consent-out:hover{ color:#fff; }

/* A gate OWNS the document while it is up: behind it, NOTHING is interactive. Three
   independent locks, because any one of them can be defeated on its own:
     1. `inert` (JS) drops every other body child out of hit testing and focus order.
     2. these rules kill pointer events behind it, DESCENDANTS INCLUDED — a child with
        pointer-events:auto (the pill sets several) would otherwise re-arm itself.
     3. a capture-phase event trap (JS) swallows anything that still gets through.
   The gate's own pointer-events is !important because other rules (body.wp-rect) turn
   off pointer-events on body children by allowlist, and an allowlist that forgets the
   gate makes the gate itself click-through. That is the bug this whole block prevents:
   never gate interactivity behind a list someone has to remember to update. */
html.wp-gate-open, html.wp-gate-open body{ overflow:hidden; }
html.wp-gate-open body > *:not(.wp-consent):not(.wp-prompt-ov),
html.wp-gate-open body > *:not(.wp-consent):not(.wp-prompt-ov) *{ pointer-events:none !important; }
.wp-consent.show, .wp-consent.show *{ pointer-events:auto; }
.wp-consent.show{ pointer-events:auto !important; }

/* ----- First run: where would you like to start ----- */
.wp-welcome-card{ width:min(520px,100%); }
.wp-welcome-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 6px; }
.wp-welcome-grid.is-hidden{ display:none; }
.wp-welcome-egg{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:96px; padding:16px 16px 14px; text-align:left; border:1px solid rgba(255,255,255,.12); border-radius:26px 26px 30px 30px / 30px 30px 26px 26px; background:rgba(255,255,255,.05); color:#eef2f7; font:inherit; cursor:pointer; transition:background .18s ease, border-color .18s ease, transform .18s cubic-bezier(.22,.61,.36,1); }
.wp-welcome-egg:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); transform:translateY(-2px); }
.wp-welcome-egg:last-child{ grid-column:1 / -1; min-height:0; flex-direction:row; align-items:center; justify-content:space-between; }
.wp-welcome-egg-t{ font-size:.98rem; font-weight:800; }
.wp-welcome-egg-s{ font-size:.78rem; line-height:1.4; color:rgba(238,242,247,.6); }
.wp-welcome-tut:empty{ display:none; }
.wp-welcome-video{ position:relative; margin:16px 0 4px; padding-top:56.25%; border-radius:18px; overflow:hidden; background:#0b0d12; }
.wp-welcome-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.wp-welcome-soon{ margin:16px 0 4px; padding:38px 18px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(255,255,255,.04); color:rgba(238,242,247,.6); font-size:.86rem; }
/* one column on a phone, so the eggs don't need a card-sized body: shrink them until
   the whole card (Later included) fits a short screen without scrolling */
@media (max-width:480px){
  .wp-welcome-card{ padding:22px 18px; }
  .wp-welcome-grid{ grid-template-columns:1fr; gap:8px; margin:14px 0 4px; }
  .wp-welcome-egg{ min-height:0; padding:12px 16px; gap:2px; border-radius:22px 22px 24px 24px / 24px 24px 22px 22px; }
  .wp-welcome-egg:last-child{ display:flex; flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  .wp-pill, .wp-logo, .wp-mark, .wp-mark img, .wp-type, .wp-group{ transition:none; }
  .wp-type::after{ display:none; }
  .wp-prof-orb::before, .wp-prof-pic{ animation:none; }
}

/* ===== Mobile (kept at the end so it overrides the base rules above) ===== */
/* Desktop: keep the breadcrumb (left) and pinned shortcuts (right) from colliding
   with the centred pill. Each side grows toward the pill at full width (no more
   horizontal roll-over); when the row is about to touch the pill, JS adds .wp-fit
   and the side snaps into its icon (folder on the left, pin on the right) exactly
   like the mobile version, reopening as a dropdown. It springs back to the full
   row the moment a resize frees up the room again (see fitHeader in the JS). */
@media (min-width:769px){
  .wp-topleft, .wp-topright{ z-index:5990; flex-wrap:nowrap; max-width:none; }
  /* match the centre pill: same 46px height + vertical centre line (top:14px) so
     the crumbs and pins line up with it and read as the same size. */
  .wp-topleft, .wp-topright{ height:46px; align-items:center; }
  .wp-crumbs, .wp-pins{ flex-wrap:nowrap; overflow:visible; align-items:center; }
  .wp-crumb{ padding:11px 16px; }
  .wp-pin-chip > a{ padding:10px 13px; font-size:.82rem; }
  /* Pins side overrides: the "Unpinned/max" note grows the panel, so it must NOT
     be a fixed 46px box (that centred the tall panel and pushed it off the top of
     the screen). Anchor to the top and grow downward. */
  .wp-topright{ height:auto; min-height:46px; align-items:flex-start; }
  .wp-pins{ overflow:visible; }

  /* ---- collision collapse: the desktop mirror of the mobile icon+dropdown, but
     driven by JS (.wp-fit) off measured space rather than a viewport breakpoint. */
  /* LEFT: the breadcrumb snaps into the location/folder icon. */
  .wp-topleft.wp-fit .wp-crumbs-btn{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:rgba(16,18,26,.55); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); color:rgba(238,242,247,.72); cursor:pointer; padding:0; flex:0 0 auto; transition:color .18s ease, background .18s ease; }
  .wp-topleft.wp-fit .wp-crumbs-btn svg{ width:18px; height:18px; display:block; }
  .wp-topleft.wp-fit .wp-crumbs-btn:hover{ color:#fff; background:rgba(255,255,255,.14); }
  .wp-topleft.wp-fit .wp-crumbs{ display:none; }
  .wp-topleft.wp-fit.crumbs-open{ z-index:6006; }
  .wp-topleft.wp-fit.crumbs-open .wp-crumbs{ display:flex; position:fixed; top:64px; left:16px; flex-direction:column; align-items:flex-start; gap:10px; width:min(260px,42vw); padding:12px; border-radius:20px; background:var(--wp-pill-surface-strong, rgba(16,18,26,.92)); border:1px solid var(--wp-pill-border, rgba(255,255,255,.12)); box-shadow:0 24px 64px rgba(0,0,0,.55); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
  .wp-topleft.wp-fit.crumbs-open .wp-crumb{ width:100%; justify-content:flex-start; }
  .wp-topleft.wp-fit.crumbs-open .wp-crumb.wp-crumb-home{ gap:9px; }
  .wp-topleft.wp-fit.crumbs-open .wp-crumb-home-label{ display:inline; }

  /* RIGHT: the pinned shortcuts snap into the pin icon. */
  .wp-topright.wp-fit.has-pins .wp-pins-btn{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:rgba(16,18,26,.55); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); color:rgba(238,242,247,.72); cursor:pointer; transition:color .18s ease, background .18s ease; }
  .wp-topright.wp-fit.has-pins .wp-pins-btn:hover{ color:#fff; background:rgba(255,255,255,.14); }
  .wp-topright.wp-fit.has-pins .wp-pins-btn svg{ width:18px; height:18px; display:block; }
  .wp-topright.wp-fit .wp-pins-wrap{ display:none; }
  .wp-topright.wp-fit.pins-open{ z-index:6006; }
  .wp-topright.wp-fit.pins-open .wp-pins-wrap{ display:block; position:fixed; top:62px; right:16px; }
  .wp-topright.wp-fit.pins-open .wp-pins{ flex-direction:column; align-items:flex-end; gap:10px; }
  .wp-topright.wp-fit.pins-open .wp-pin-chip{ width:100%; }
  .wp-topright.wp-fit.pins-open .wp-pin-chip > a{ flex:1; max-width:none; }

  /* An open desktop dropdown reuses the mobile dismiss scrim, but transparent — it
     only needs to catch the outside click, not blur the whole page for a small
     corner list. */
  .wp-mscrim.show{ display:block; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
  /* ...so there is no blur here to caption, and the hint would read as loose text
     floating over the sharp page. The blurred backdrops behind it (rectangle,
     settings) carry it instead. */
  .wp-mscrim .wp-backhint{ display:none; }
}

@media (max-width:768px){
  .wp-panel{ min-width:0; width:min(360px,92vw); }
  .wp-panel-profile{ flex-basis:150px; }

  /* breadcrumb collapses behind a location icon; opens as a dropdown */
  .wp-topleft{ max-width:none; }
  .wp-crumbs-btn{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:rgba(16,18,26,.55); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); color:rgba(238,242,247,.72); cursor:pointer; padding:0; }
  .wp-crumbs-btn svg{ width:18px; height:18px; display:block; }
  .wp-topleft .wp-crumbs{ display:none; }
  .wp-topleft.crumbs-open .wp-crumbs{ display:flex; position:fixed; top:64px; left:12px; flex-direction:column; align-items:flex-start; gap:12px; width:min(240px,72vw); }
  .wp-topleft.crumbs-open .wp-crumb{ display:flex !important; width:100%; justify-content:flex-start; }
  /* the root crumb shows a labelled "Home" here, not a bare glyph */
  .wp-topleft.crumbs-open .wp-crumb.wp-crumb-home{ gap:9px; }
  .wp-topleft.crumbs-open .wp-crumb-home-label{ display:inline; }

  /* shrink the pill to a compact top-centre bar, aligned with the side icons */
  .wp-pill{ top:8px; max-width:calc(100vw - 16px); }
  .wp-topleft, .wp-topright{ top:8px; }
  .wp-notes-corner, .wp-pins-btn, .wp-crumbs-btn{ width:42px; height:42px; }
  .wp-core{ height:42px; padding:0 12px; }
  .wp-mark, .wp-mark img{ width:26px; height:26px; }
  /* keep the themed accent mask the same size as the shrunk mark, else it renders
     as a larger, offset second copy of the logo (looked like a duplicate). */
  html.wp-theme-on .wp-pill:not(.is-gold) .wp-mark::after{ width:26px; height:26px; }
  .wp-avatar{ width:30px; height:30px; }
  /* symmetric: equal gaps between logo, star and profile, and from the edges */
  .wp-pill.open .wp-core{ padding:0 0 0 12px; gap:12px; }
  .wp-pill.open .wp-top{ gap:12px; }
  .wp-pill.open .wp-avatar{ margin-right:12px; }

  /* directory becomes a vertical dropdown behind the menu (arrow) button */
  .wp-menu-btn{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:none; background:none; color:rgba(238,242,247,.72); cursor:pointer; padding:0; }
  .wp-menu-btn svg{ width:18px; height:18px; display:block; transition:transform .25s ease; }
  .wp-pill.nav-open .wp-menu-btn svg{ transform:scale(1.18); }
  /* the in-pill horizontal nav is hidden; the body-level mobile menu is used */
  .wp-pill.open .wp-group, .wp-pill.panel-open .wp-group{ display:none; }

  /* pinned shortcuts collapse behind a pin button (vertical dropdown) */
  .wp-topright.has-pins .wp-pins-btn{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:rgba(16,18,26,.55); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); color:rgba(238,242,247,.72); cursor:pointer; }
  .wp-pins-btn svg{ width:18px; height:18px; display:block; }
  .wp-pins-wrap{ display:none; }
  .wp-topright.pins-open .wp-pins-wrap{ display:block; position:fixed; top:62px; right:12px; }
  .wp-topright.pins-open .wp-pins{ flex-direction:column; align-items:flex-end; gap:12px; }
  .wp-topright.pins-open .wp-pin-chip{ width:100%; }
  .wp-topright.pins-open .wp-pin-chip > a{ flex:1; max-width:none; }

  /* blur the background while a dropdown — or the account rectangle — is open */
  .wp-mscrim.show, body.wp-rect .wp-mscrim{ display:block; }

  /* inputs at 16px so iOS doesn't zoom the page when focused */
  .wp-us-input, .ios-search-in, .wp-nt-input, .wp-nt-notes, .wp-nt-editor, .wp-search-input{ font-size:16px; }

  /* while the rectangle/settings is open, hide the peripheral icons (folder,
     pins, notes, the pill's menu arrow) to reduce congestion */
  .wp-rect .wp-topleft, .wp-rect .wp-topright{ display:none; }
  .wp-rect .wp-menu-btn{ display:none; }

  /* while the mobile directory is open, the profile circle, notes and the other
     header icons stay visible and tappable — tapping one closes the star menu
     and opens that thing (handled in JS) */
  .wp-pill.nav-open .wp-menu-btn{ color:#fff; }
  /* while the star menu is open, fill the star solid white (not just the outline) */
  .wp-pill.nav-open .wp-menu-btn svg{ fill:#fff; }

  /* the account rectangle + under-search go full-width and centred */
  .wp-pill.panel-open{ left:50%; }
  .wp-undersearch{ margin-top:18px; }
  /* the rectangle drops its logo/nav row on mobile (just the profile + actions) */
  .wp-pill.panel-open .wp-top{ display:none; }

  /* Notes is a truly fullscreen experience on mobile. The site header (pill +
     top-right icons) floats ABOVE the sheet so it stays part of the view and you
     navigate / dismiss with it — so there is no separate close (X) button. */
  /* Stretch top->bottom of the viewport (not height:100dvh, which can compute short on
     iOS Safari and leave a strip of page showing above the toolbar). */
  .wp-notes{ top:0 !important; right:0 !important; left:0 !important; bottom:0 !important; width:100vw !important; height:auto !important; max-height:none !important; border-radius:0 !important; }
  .wp-notes .wp-nt-compose{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 8px); }
  .wp-nt-close{ display:none !important; }
  /* push the notes' own tab row below the floating pill so they don't overlap */
  .wp-notes .wp-notes-head{ padding-top:calc(env(safe-area-inset-top) + 68px); padding-bottom:14px; }
  /* pointer-events needs !important: the notes-open inert rule (body > *) is more
     specific and would otherwise keep the floating pill dead, so tapping the avatar
     to leave the blob and open the rectangle did nothing on mobile. z-index must
     clear the blob itself (2147483000) or the fullscreen sheet paints over the
     header and it vanishes; it stays below prompts/photo viewer/notifications. */
  html.wp-notes-open .wp-pill, html.wp-notes-open .wp-topright, html.wp-notes-open .wp-topleft{ z-index:2147483200; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
  /* The fullscreen widgets panel is a modal: lock the page behind it so it can't
     scroll through the blur and drift the panel header out of view. */
  html.wp-widgets-open, html.wp-widgets-open body{ overflow:hidden; }
}

/* ===== "Minimalist blob" OFF: reveal every product blob's text always =====
   Mirrors the per-page :hover / .revealed reveal state so it works site-wide
   on any page that renders the morphing product blobs (.wg-blob). */
html.wg-text-open .wg-blob-desc{ max-height:200px; opacity:1; }
html.wg-text-open .wg-blob-pic img{ filter:blur(7px) brightness(.55); transform:scale(1.1); }
html.wg-text-open .wg-card.soon .wg-blob-pic img{ filter:blur(7px) brightness(.5) grayscale(.5); }

/* Eggs: the blob's organic content clips fine, but its box-shadow does NOT, since
   Safari/WebKit renders a box-shadow as a RECTANGLE while border-radius is being
   animated (the shadow corners never round). That stray soft rectangle is what
   showed behind every egg, most visibly on light themes. Cast depth with
   filter:drop-shadow on the card instead, which follows the live organic outline. */
.wg-blob{ box-shadow:none !important; }
.wg-card:hover .wg-blob, .wg-card.revealed .wg-blob{ box-shadow:none !important; }
.wg-card{ filter:drop-shadow(0 20px 34px rgba(0,0,0,.40)); transition:filter .35s ease; }
.wg-card:hover, .wg-card.revealed{ filter:drop-shadow(0 28px 52px rgba(0,0,0,.5)); }

/* ===== Notes: rich text editor + drawing layer + resize/move ===== */
.wp-nt-paper{ position:relative; flex:1; min-height:0; overflow:hidden; }
.wp-nt-editor{ position:absolute; inset:0; overflow-y:auto; padding:12px; color:#eef2f7; font-family:inherit; font-size:.95rem; line-height:1.6; outline:none; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.wp-nt-editor::-webkit-scrollbar{ display:none; }
.wp-nt-editor:empty:before{ content:attr(data-ph); color:rgba(238,242,247,.4); pointer-events:none; }
.wp-nt-editor h1{ font-size:1.4rem; font-weight:800; margin:.2em 0; }
.wp-nt-editor h2{ font-size:1.15rem; font-weight:800; margin:.2em 0; }
.wp-nt-editor h3{ font-size:1rem; font-weight:700; margin:.2em 0; }
.wp-nt-editor ul, .wp-nt-editor ol{ padding-left:1.4em; margin:.3em 0; }
.wp-nt-todo{ display:flex; align-items:flex-start; gap:8px; }
.wp-nt-todo input{ margin-top:4px; flex:0 0 auto; }
.wp-nt-draw{ position:absolute; inset:0; pointer-events:none; touch-action:none; }
.wp-notes.draw-mode .wp-nt-draw{ pointer-events:auto; cursor:crosshair; }
.wp-notes.draw-mode .wp-nt-editor{ pointer-events:none; }

.wp-nt-toolbar{ flex:0 0 auto; border-top:1px solid rgba(255,255,255,.08); padding:8px; }
.wp-nt-tools{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.wp-nt-tools[data-tools="draw"]{ display:none; }
.wp-notes.draw-mode .wp-nt-tools[data-tools="text"]{ display:none; }
.wp-notes.draw-mode .wp-nt-tools[data-tools="draw"]{ display:flex; }
.wp-nt-tb{ flex:0 0 auto; min-width:30px; height:30px; padding:0 7px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:rgba(255,255,255,.05); color:#eef2f7; font-family:inherit; font-size:.85rem; line-height:1; cursor:pointer; transition:background .12s ease, border-color .12s ease; }
.wp-nt-tb:hover{ background:rgba(255,255,255,.12); }
.wp-nt-tb.is-on{ background:rgba(79,143,255,.32); border-color:rgba(79,143,255,.6); color:#fff; }
.wp-nt-tb svg{ width:16px; height:16px; }
.wp-nt-tb b, .wp-nt-tb i, .wp-nt-tb u, .wp-nt-tb s{ font-size:.95rem; }
.wp-nt-sel{ position:relative; height:32px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.06); color:#eef2f7; font-family:inherit; font-size:.82rem; font-weight:600; padding:0 26px 0 10px; cursor:pointer; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aab4c6' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .15s ease, border-color .15s ease; }
.wp-nt-sel:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); }
.wp-nt-sel:focus{ border-color:rgba(79,143,255,.5); box-shadow:0 0 0 2px rgba(79,143,255,.15); }
.wp-nt-sel option{ background:#1a1e2a; color:#eef2f7; padding:6px 10px; }
.wp-nt-clr{ position:relative; overflow:hidden; }
.wp-nt-clr input[type=color]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:none; padding:0; }
.wp-nt-amark{ font-weight:800; border-bottom:3px solid #eef2f7; line-height:1.05; }
.wp-nt-amark.hl{ border-bottom:none; background:#ffd54a; color:#222; border-radius:3px; padding:0 3px; }
.wp-nt-pendot{ width:14px; height:14px; border-radius:50%; background:#4f8fff; box-shadow:0 0 0 1px rgba(255,255,255,.3); }
.wp-nt-pw .d{ display:block; border-radius:50%; background:currentColor; }
.wp-nt-done{ margin-left:auto; font-weight:700; padding:0 12px; }

/* edge / corner grips (kept inside the panel so overflow:hidden doesn't clip them) */
.wp-nt-grip{ position:absolute; z-index:5; }
.wp-nt-grip.n{ top:0; left:10px; right:10px; height:6px; cursor:ns-resize; }
.wp-nt-grip.s{ bottom:0; left:10px; right:10px; height:6px; cursor:ns-resize; }
.wp-nt-grip.e{ right:0; top:10px; bottom:10px; width:6px; cursor:ew-resize; }
.wp-nt-grip.w{ left:0; top:10px; bottom:10px; width:6px; cursor:ew-resize; }
.wp-nt-grip.ne{ top:0; right:0; width:14px; height:14px; cursor:nesw-resize; }
.wp-nt-grip.nw{ top:0; left:0; width:14px; height:14px; cursor:nwse-resize; }
.wp-nt-grip.se{ bottom:0; right:0; width:14px; height:14px; cursor:nwse-resize; }
.wp-nt-grip.sw{ bottom:0; left:0; width:14px; height:14px; cursor:nesw-resize; }
.wp-notes-head{ cursor:grab; }
.wp-notes-head.dragging{ cursor:grabbing; }
.wp-notes.resizing, .wp-notes.resizing *{ user-select:none; }
@media (max-width:768px){ .wp-nt-grip{ display:none; } .wp-notes-head{ cursor:default; } }

/* Settings gear flash over the profile blob when the rectangle opens */
.ios-banner-orb{ position:relative; }
/* Adullam Academy: AA image-credits used/total bar */
.wp-aa-bar{ height:10px; border-radius:999px; background:var(--wp-surface,rgba(255,255,255,.1)); overflow:hidden; }
.wp-aa-fill{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#ffb340,#ff9f0a); transition:width .4s ease; }
.wp-aa-meta{ display:flex; justify-content:space-between; margin-top:8px; font-size:.82rem; color:var(--wp-muted,rgba(238,242,247,.6)); }
/* Tappable account avatar: a small camera badge signals you can change it */
button.wp-avatar-edit{ border:none; padding:0; cursor:pointer; overflow:visible; }

/* ===== "Product requires sign in" gate ===== */
/* A blur scrim over the product (below the pill, which stays sharp) with a big
   line under the pill's sign-in card. Shown via html.wp-auth-gate. */
/* The gate must sit ABOVE every scrim/blur. The settings scrim jumps to
   ~2147482000 once the sign-in card opens (settings-lock), so a low z-index left
   the "requires sign in" line smeared behind that blur. Sit just above the scrims
   but below the sign-in card + notifications. */
.wp-authgate{ position:fixed; inset:0; z-index:2147482500; display:none; flex-direction:column; align-items:center; justify-content:flex-end; gap:12px; text-align:center; padding:24px 24px clamp(40px,12vh,140px); background:rgba(6,8,14,.42); -webkit-backdrop-filter:blur(17px) saturate(.92); backdrop-filter:blur(17px) saturate(.92); }
html.wp-auth-gate .wp-authgate{ display:flex; }
/* Lift the pill + top controls above the gate so the sign-in card stays sharp and
   usable (above the gate at 2147482500, below notifications at 2147483620). */
html.wp-auth-gate .wp-pill,
html.wp-auth-gate .wp-topleft,
html.wp-auth-gate .wp-topright{ z-index:2147483200; }
html.wp-auth-gate{ overflow:hidden; }
.wp-authgate-msg{ font-size:clamp(1.7rem,5vw,3.2rem); font-weight:800; color:rgba(255,255,255,.94); line-height:1.12; max-width:900px; text-shadow:0 4px 30px rgba(0,0,0,.55); }
.wp-authgate-msg b{ color:#fff; }
/* Mobile, signed out: hide pins / notes / nav icons (keep logo + the profile sign-in). */
@media (max-width:768px){
  html.wp-signed-out .wp-notes-corner,
  html.wp-signed-out .wp-pins-wrap,
  html.wp-signed-out .wp-pins-btn,
  html.wp-signed-out .wp-menu-btn,
  html.wp-signed-out .wp-crumbs-btn{ display:none !important; }
}
.wp-authgate-sub{ font-size:clamp(.95rem,1.6vw,1.15rem); color:rgba(255,255,255,.62); }

/* ===== Systemwide iOS-style toggle switch =====
   Any <label class="toggle"><input type="checkbox">…</label> renders as a real
   iOS toggle (grey off, green on, sliding white knob). */
.toggle input[type="checkbox"]{ -webkit-appearance:none; appearance:none; flex:0 0 auto; width:52px; height:31px; margin:0; border-radius:999px; background:#39393d; position:relative; cursor:pointer; transition:background .25s ease; vertical-align:middle; }
.toggle input[type="checkbox"]::after{ content:''; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.35), 0 0 0 .5px rgba(0,0,0,.04); transition:left .22s cubic-bezier(.3,1.25,.5,1); }
.toggle input[type="checkbox"]:checked{ background:#34c759; }
.toggle input[type="checkbox"]:checked::after{ left:23px; }
.toggle input[type="checkbox"]:focus-visible{ outline:2px solid rgba(52,199,89,.6); outline-offset:2px; }

/* ============================================================================
   Classic header bar — General settings, "Modern header" OFF (html.wp-classic-header).
   A full-width blurred bar the nav, pill, pins and notes sit on, for anyone who
   finds the floating-pill design hard to read. The rectangle / settings / search
   keep their own glass; only the RESTING pill is flattened onto the bar.
   ============================================================================ */
.wp-headerbar{ display:none; }
html.wp-classic-header .wp-headerbar{
  display:block; position:fixed; top:0; left:0; right:0; height:62px; z-index:5990;
  background:rgba(12,15,22,.74);
  -webkit-backdrop-filter:blur(22px) saturate(1.08); backdrop-filter:blur(22px) saturate(1.08);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 6px 30px rgba(0,0,0,.28);
}
/* Sit the resting pill flat on the bar: drop its floating glass + per-piece glass. */
html.wp-classic-header .wp-pill{ top:8px; }
html.wp-classic-header .wp-pill.open::before{ opacity:0; }
html.wp-classic-header .wp-pill:not(.panel-open):not(.settings-open):not(.search-open) .wp-core,
html.wp-classic-header .wp-pill:not(.panel-open):not(.settings-open):not(.search-open) .wp-avatar{
  background:transparent; border-color:transparent; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* Keep the group nav permanently visible on the bar. */
html.wp-classic-header .wp-group{ max-width:min(560px,72vw); opacity:1; margin-left:8px; overflow-x:auto; scrollbar-width:none; }
html.wp-classic-header .wp-group::-webkit-scrollbar{ display:none; }
/* Vertically centre the corner clusters (pins, notes, crumbs) on the 62px bar. */
html.wp-classic-header .wp-topleft, html.wp-classic-header .wp-topright{ top:9px; }

/* ============================================================================
   Drag-to-resize grip for the rectangle / settings panel (--wp-rect-h shared).
   ============================================================================ */
.wp-rect-resize{ display:none; }
.wp-pill.panel-open .wp-rect-resize, .wp-pill.settings-open .wp-rect-resize{
  display:flex; align-items:center; justify-content:center;
  position:absolute; left:0; right:0; bottom:0; height:14px; z-index:4;
  cursor:ns-resize; touch-action:none;
}
.wp-rect-resize::before{ content:''; width:38px; height:4px; border-radius:999px; background:rgba(255,255,255,.22); transition:background .15s ease; }
.wp-rect-resize:hover::before{ background:rgba(255,255,255,.42); }
html.wp-rect-resizing .wp-pill{ transition:none !important; }
html.wp-rect-resizing{ cursor:ns-resize; user-select:none; -webkit-user-select:none; }

/* ============================================================================
   Uniform theme-accent icons: every settings row badge takes the chosen accent
   (destructive rows stay red). Plus a visible corner grip on the blob/notes window.
   ============================================================================ */
.ios-badge{ background:var(--wp-accent, #0a84ff) !important; }
.ios-row.danger .ios-badge{ background:#ff453a !important; }
/* Bonding rows are the one exception: each badge keeps its ring's colour so the
   ring and its row read as a matched pair (higher specificity wins the accent rule). */
.ios-badge.wp-bond-badge{ background:var(--bc, var(--wp-accent,#0a84ff)) !important; }
/* White-on-white fix: the badge is filled with the accent, so its glyph must use
   the accent's computed contrast colour (--wp-on-accent, black on a light accent),
   not a hard-coded white. The SVGs hard-code fill/stroke="#fff", so retarget those
   by attribute. Destructive (red) badges keep their white glyph. */
.ios-badge{ color:var(--wp-on-accent,#fff); }
.ios-badge svg[fill="#fff"], .wp-avatar-cam svg[fill="#fff"]{ fill:var(--wp-on-accent,#fff); }
.ios-badge svg[stroke="#fff"], .wp-avatar-cam svg[stroke="#fff"]{ stroke:var(--wp-on-accent,#fff); }
.ios-row.danger .ios-badge{ color:#fff; }
.ios-row.danger .ios-badge svg[fill="#fff"]{ fill:#fff; }
.ios-row.danger .ios-badge svg[stroke="#fff"]{ stroke:#fff; }
/* Resize drag hint for the blob (notes) window: sits just OUTSIDE the bottom-LEFT
   corner, low opacity, so it never crowds the content or the send button. */
.wp-nt-grip.sw::after{ content:''; position:absolute; left:-9px; bottom:-9px; width:8px; height:8px;
  border-left:2px solid rgba(255,255,255,.26); border-bottom:2px solid rgba(255,255,255,.26); border-bottom-left-radius:3px;
  transition:border-color .15s ease; }
.wp-nt-grip.sw:hover::after{ border-color:rgba(255,255,255,.6); }

/* ============================================================================
   Desktop: a bigger, less-slim universal search bar + result rows (the slim
   bars were hard to use). Width is doubled in JS (positionUnderSearch).
   ============================================================================ */
@media (min-width:769px){
  .wp-us-bar{ height:88px; border-radius:24px; padding:0 16px 0 24px; gap:14px; }
  .wp-us-ic{ display:flex; align-items:center; }
  .wp-us-ic svg{ width:26px; height:26px; }
  .wp-us-input{ font-size:1.35rem; }
  .wp-us-radar{ min-width:56px; height:56px; }
  .wp-us-radar .wp-radar-ic{ width:56px; height:56px; }
  .wp-us-radar .wp-radar-ic svg{ width:24px; height:24px; }
  .wp-results{ gap:12px; max-height:min(70vh,660px); }
  .wp-sr-item{ padding:22px 26px; border-radius:20px; gap:14px; }
  .wp-sr-item img, .wp-sr-sw{ width:34px; height:34px; border-radius:9px; }
  .wp-sr-name{ font-size:1.12rem; }
  .wp-sr-sub{ font-size:.92rem; }
  .wp-sr-btn{ padding:11px 24px; font-size:.92rem; }
  .wp-sr-recent{ width:26px; height:26px; }
  .wp-sr-recent svg{ width:20px; height:20px; }
}

/* ============================================================================
   Some host pages (e.g. the Classroom) stack their own UI very high (z-index
   9000-10000). When the rectangle is open, lift its blur backdrop, the pill and
   the search bar above all of it so the page actually blurs behind the rectangle.
   ============================================================================ */
@media (min-width:769px){
  /* the open pill (rectangle / settings) and every blur backdrop sit above host UI */
  body.wp-rect .wp-pill, html.wp-settings-lock .wp-pill, html.wp-search-lock .wp-pill{ z-index:2147483000; }
  body.wp-rect .wp-nt-scrim, html.wp-settings-lock .wp-set-scrim, html.wp-search-lock .wp-scrim{ z-index:2147482000; }
  /* the search bar + results float above their own backdrop */
  body.wp-rect .wp-results, html.wp-search-lock .wp-results{ z-index:2147483001; }
  body.wp-rect .wp-undersearch, html.wp-search-lock .wp-undersearch{ z-index:2147483002; }
}
/* wpPrompt (Username / Date of birth / Phone entry from Account settings) is spawned
   on <body> as a true modal, so it MUST sit above everything the pill can raise itself
   to — including the settings-locked pill at z 2147483000 (desktop) — or its input and
   buttons render behind the pill's blur (they read as "behind the blur") and, on mobile,
   stop receiving taps even though they paint on top. Force it to the very top of the
   stack on every viewport width, and keep the overlay and its card fully interactive.
   Applies unconditionally (outside the desktop media query above) so mobile is covered. */
.wp-prompt-ov{ z-index:2147483600 !important; pointer-events:auto !important; }
.wp-prompt-ov .wp-prompt{ position:relative; z-index:1; pointer-events:auto !important; }

/* ===== macOS-style notification stack: chat and Machine cards stack at the top
   right; a new one spawns BELOW the existing ones. Shared by the pill (Machine)
   and coplay (chat) via window.WoparaPillPushCard. ===== */
/* Servant toast cards are notifications: they must ride the topmost tier (just
   under device notifications at 2147483620), never buried under the pill,
   settings panel, blob or blur. Was 6110, which put them behind everything. */
.wp-notestack{ position:fixed; z-index:2147483619; top:calc(env(safe-area-inset-top,0px) + 74px); right:16px;
  width:min(360px, calc(100vw - 24px)); display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.wp-ncard{ pointer-events:auto; display:flex; gap:12px; align-items:flex-start; padding:13px 15px; color:var(--wp-text-solid,#fff);
  background:var(--wp-bg-solid,#1c1c1e); border:1px solid rgba(255,255,255,.1); box-shadow:0 26px 70px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-radius:38px 24px 42px 28px / 28px 42px 24px 38px;
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.97); transform-origin:top right;
  transition:opacity .28s ease, transform .34s cubic-bezier(.22,.61,.36,1), visibility .28s;
  cursor:pointer; font-family:'Inter',system-ui,-apple-system,sans-serif;
  animation:wp-nt-morph 10s ease-in-out infinite; }
.wp-ncard.show{ opacity:1; visibility:visible; transform:none; }
.wp-ncard:hover{ border-color:rgba(255,255,255,.2); }
/* A repeat of an identical notification restarts the existing card's timer and gives
   it this quick pulse, instead of stacking another copy. */
.wp-ncard.wp-ncard-bump{ animation:wp-ncard-bump .32s ease; }
@keyframes wp-ncard-bump{ 0%{ transform:none; } 40%{ transform:scale(1.035); } 100%{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .wp-ncard.wp-ncard-bump{ animation:none; } }
.wp-ncard-av{ flex:none; }
.wp-ncard-body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.wp-ncard-top{ display:flex; align-items:baseline; gap:8px; }
.wp-ncard-name{ font-weight:800; font-size:1rem; line-height:1.2; }
.wp-ncard-tag{ font-size:.72rem; font-weight:600; color:var(--wp-muted,rgba(235,235,245,.5)); }
.wp-ncard-text{ font-size:.9rem; color:var(--wp-text-solid,rgba(235,235,245,.88)); opacity:.88; line-height:1.35; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; }
/* Machine avatar: the blob glyph in a tinted round circle */
.wp-ncav-blob{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--wp-accent,#4f8fff) 22%, #1c1c1e); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.wp-ncav-blob .wp-nt-blob{ width:26px; height:26px; opacity:1; }
/* Servant card avatar: their actual face (custom look, else the default
   character face), so a text from your Servant looks like a text from them. */
.wp-ncav-face{ width:44px; height:44px; border-radius:50%; overflow:hidden; display:block;
  background:#11131c; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.wp-ncav-face img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (prefers-reduced-motion:reduce){ .wp-ncard{ animation:none; } }
@media (max-width:768px){ .wp-notestack{ left:10px; right:10px; width:auto; top:calc(env(safe-area-inset-top,0px) + 66px); } }

/* ===== WoparaPillGame: the Servant's game chrome (score HUD + pause/store/game-over
   rendered in the Notes panel, on brand: morphing-egg buttons, dark glass, house
   type). Only ever visible while a game has called WoparaPillGame.mount(). ===== */
/* No separate on-screen HUD: while a game is mounted the Notes blob itself grows
   into a compact pill carrying the live score + stars, and a tap on it opens the
   Servant straight to the game (pause / game-over). It keeps the same 44px height
   and glass as the other corner buttons, just wider. */
.wp-notes-corner.wp-nt-game{ width:auto; min-width:44px; border-radius:22px; padding:0 14px; gap:9px; color:#eef2f7; }
.wp-ntg-hud{ display:inline-flex; align-items:center; gap:10px; font-family:'DM Sans',system-ui,sans-serif; font-weight:700; font-size:.9rem; line-height:1; letter-spacing:.01em; white-space:nowrap; }
.wp-gh-score{ letter-spacing:.02em; }
.wp-gh-stars{ display:inline-flex; align-items:center; gap:5px; color:#ffd44d; }
.wp-gh-stars svg,.wpg-stars svg,.wpg-egg-glyph svg{ width:15px; height:15px; }
html.wp-theme-light .wp-notes-corner.wp-nt-game{ color:#10131c; }
/* Keep the shared nav pill present + legible while a game is mounted. */
html.wp-in-game .wp-pill.wp-dim, html.wp-in-game .wp-topleft.wp-dim, html.wp-in-game .wp-topright.wp-dim{ opacity:1; }

/* ---- Sticky game panel: the game's controls / pickers / question prompt live at the
   top of the Servant view so they stay one tap away, with the live Servant chat +
   composer running below (chat with your Servant while paused). ---- */
.wp-nt-gamebar{ flex:0 0 auto; max-height:50%; overflow-y:auto; margin:0 0 10px; padding:12px; border-radius:16px;
  background:color-mix(in srgb, var(--wp-accent,#4f8fff) 7%, rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08);
  scrollbar-width:none; color:#eef2f7; font-family:'DM Sans',system-ui,sans-serif; }
.wp-nt-gamebar::-webkit-scrollbar{ display:none; }
.wp-nt-gamebar.is-hidden{ display:none; }
html.wp-theme-light .wp-nt-gamebar{ color:#10131c; border-color:rgba(16,19,28,.1); }
/* Option list (Subject / Level / Store items) as full-width tappable rows. */
.wpg-list{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.wpg-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; padding:11px 14px; border-radius:14px; cursor:pointer; font:inherit; color:inherit;
  background:color-mix(in srgb, var(--wp-accent,#4f8fff) 10%, transparent); border:1px solid color-mix(in srgb, var(--wp-accent,#4f8fff) 30%, transparent); transition:background .15s ease; }
.wpg-row:hover{ background:color-mix(in srgb, var(--wp-accent,#4f8fff) 20%, transparent); }
.wpg-row[disabled]{ cursor:default; opacity:.6; }
.wpg-row.is-locked{ opacity:.5; }
.wpg-row.is-owned{ opacity:.72; }
.wpg-row-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wpg-row-label{ font-weight:700; font-size:.95rem; }
.wpg-row-sub{ font-size:.8rem; opacity:.62; line-height:1.35; }
.wpg-row-right{ flex:0 0 auto; font-weight:700; font-size:.82rem; display:inline-flex; align-items:center; gap:4px; color:#ffd44d; }
.wpg-row-right svg{ width:13px; height:13px; }
.wpg-row-right.owned{ color:#34d399; }
/* Avatar in a row (people picker); selected + CTA variants; a spacer between groups. */
.wpg-row-av{ flex:0 0 auto; width:36px; height:36px; margin-right:11px; border-radius:50%; overflow:hidden; background:rgba(255,255,255,.09); display:inline-flex; align-items:center; justify-content:center; }
.wpg-row-av img{ width:100%; height:100%; object-fit:cover; }
.wpg-row-av-i{ font-weight:800; font-size:.9rem; color:#eef2f7; text-transform:uppercase; }
.wpg-row.is-sel{ border-color:var(--wp-accent,#4f8fff); background:color-mix(in srgb, var(--wp-accent,#4f8fff) 32%, transparent); box-shadow:inset 0 0 0 1px var(--wp-accent,#4f8fff); }
.wpg-row.wpg-row-cta{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.13); }
.wpg-row.wpg-row-cta:hover{ background:rgba(255,255,255,.09); }
.wpg-row.wpg-row-go{ background:var(--wp-accent,#4f8fff); border-color:transparent; color:#fff; justify-content:center; }
.wpg-row.wpg-row-go:hover{ filter:brightness(1.08); background:var(--wp-accent,#4f8fff); }
.wpg-row.wpg-row-go .wpg-row-main{ align-items:center; }
.wpg-row-spacer{ height:12px; }
/* Settings rows: steppers, toggles, colour pickers, option chips. */
.wpg-settings{ display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.wpg-set-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 4px; }
.wpg-set-row.col{ flex-direction:column; align-items:stretch; gap:8px; }
.wpg-set-row.full{ padding:3px 0; }
.wpg-set-label{ font-weight:600; font-size:.9rem; }
.wpg-stepper{ display:inline-flex; align-items:center; gap:2px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:3px; }
.wpg-step{ width:28px; height:28px; border-radius:50%; border:0; background:transparent; color:inherit; font-size:1.1rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.wpg-step:hover{ background:rgba(255,255,255,.12); }
.wpg-step-val{ min-width:56px; text-align:center; font-weight:700; font-size:.9rem; }
.wpg-switch{ width:46px; height:27px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); position:relative; cursor:pointer; padding:0; transition:background .18s ease; flex:0 0 auto; }
.wpg-switch.on{ background:var(--wp-accent,#4f8fff); border-color:transparent; }
.wpg-knob{ position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%; background:#fff; transition:left .18s ease; }
.wpg-switch.on .wpg-knob{ left:22px; }
.wpg-color{ width:46px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.16); background:none; cursor:pointer; padding:2px; flex:0 0 auto; }
.wpg-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.wpg-opt{ border-radius:999px; padding:7px 13px; font:inherit; font-size:.83rem; font-weight:600; cursor:pointer; color:inherit; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.wpg-opt.on{ background:var(--wp-accent,#4f8fff); border-color:transparent; color:#fff; }
html.wp-theme-light .wpg-stepper, html.wp-theme-light .wpg-switch, html.wp-theme-light .wpg-opt{ background:rgba(16,19,28,.05); border-color:rgba(16,19,28,.14); }
/* In-game question prompt (was a centred overlay) rendered inside the blob. */
.wpg-prompt{ display:flex; flex-direction:column; gap:10px; margin-top:2px; }
.wpg-prompt-timer{ font-weight:800; font-size:1.05rem; color:#ffcc00; letter-spacing:.02em; }
.wpg-prompt-q{ font-weight:700; font-size:1.15rem; line-height:1.3; }
.wpg-prompt-in{ width:100%; padding:12px 14px; border-radius:12px; border:2px solid var(--wp-accent,#4f8fff); background:rgba(255,255,255,.96); color:#10131c; font:inherit; font-size:16px; outline:none; }
.wpg-prompt-in:disabled{ opacity:.7; }
.wpg-prompt-hint{ align-self:flex-start; border-radius:999px; padding:8px 14px; font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; color:inherit; background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.26); }
.wpg-prompt-hint.done{ border-style:solid; opacity:.85; cursor:default; }
.wpg-prompt-reveal{ font-weight:700; font-size:.95rem; color:#34d399; }
.wpg-prompt-reveal[hidden], .wpg-prompt-skip[hidden]{ display:none; }
.wpg-prompt-skip{ font-size:.8rem; opacity:.6; cursor:pointer; }

.wp-ntgame{ display:block; padding:16px clamp(12px,4%,20px); overflow-y:auto; color:#fff; font-family:'DM Sans',system-ui,sans-serif; }
html.wp-theme-light .wp-ntgame{ color:#10131c; }
/* Servant-styled game turn: the game's pause/store/game-over reads as the Servant
   messaging you, options rendered as tappable text chips (not big on-screen eggs). */
.wpg-turn{ display:flex; gap:10px; align-items:flex-start; }
.wpg-turn-av{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; overflow:hidden; display:inline-flex; background:rgba(255,255,255,.06); }
.wpg-turn-av img,.wpg-turn-av svg,.wpg-turn-av canvas{ width:100%; height:100%; object-fit:cover; }
.wpg-turn-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
.wpg-turn-name{ font-size:.8rem; font-weight:700; opacity:.7; display:flex; align-items:center; gap:8px; }
.wpg-turn-meta{ font-weight:600; opacity:.9; display:inline-flex; align-items:center; gap:6px; }
.wpg-turn-meta .wpg-stars{ color:#ffd44d; }
.wpg-say{ align-self:flex-start; max-width:100%; }
.wpg-choices{ display:flex; flex-wrap:wrap; gap:8px; }
.wpg-choice{ background:color-mix(in srgb, var(--wp-accent,#4f8fff) 14%, transparent); border:1px solid color-mix(in srgb, var(--wp-accent,#4f8fff) 38%, transparent); color:inherit; border-radius:999px; padding:8px 15px; font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background .15s ease; }
.wpg-choice:hover{ background:color-mix(in srgb, var(--wp-accent,#4f8fff) 26%, transparent); }
.wpg-choice[disabled]{ cursor:default; }
.wpg-choice.is-locked{ opacity:.5; }
.wpg-choice.is-owned{ opacity:.7; }
.wpg-choice-cost{ opacity:.85; font-size:.78rem; font-weight:700; color:#ffd44d; display:inline-flex; align-items:center; gap:3px; }
.wpg-choice-cost svg{ width:12px; height:12px; }
.wpg-choice.is-owned .wpg-choice-cost{ color:#34d399; }
/* (legacy egg-grid styles below are unused now but kept for back-compat) */
.wpg-screen{ width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; color:#fff; font-family:'DM Sans',system-ui,sans-serif; }
html.wp-theme-light .wpg-screen{ color:#10131c; }
.wpg-head{ display:flex; align-items:center; justify-content:center; gap:12px; width:100%; }
.wpg-name{ font-family:'Syne','DM Sans',sans-serif; font-weight:800; font-size:1.5rem; }
.wpg-right,.wpg-stars{ display:inline-flex; align-items:center; gap:5px; font-weight:700; color:#ffd44d; }
.wpg-line{ font-size:.95rem; opacity:.75; line-height:1.5; max-width:34ch; }
.wpg-eggs{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; width:100%; }
.wpg-eggs.wpg-store{ grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.wpg-egg{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px; background:none; border:0; cursor:pointer; color:inherit; font:inherit; }
.wpg-egg-blob{ position:relative; width:78px; height:78px; display:flex; align-items:center; justify-content:center;
  border-radius:46% 54% 56% 44%/56% 46% 54% 44%; background:linear-gradient(160deg,rgba(79,143,255,.35),rgba(79,143,255,.12));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 16px 40px rgba(0,0,0,.4); animation:wpgmorph 9s ease-in-out infinite; transition:transform .18s ease; }
.wpg-egg:hover .wpg-egg-blob{ transform:translateY(-3px) scale(1.03); }
.wpg-egg:nth-child(2n) .wpg-egg-blob{ animation-delay:-2.5s; }
.wpg-egg:nth-child(3n) .wpg-egg-blob{ animation-delay:-4.5s; }
.wpg-egg-glyph{ font-size:1.5rem; line-height:1; color:#fff; display:flex; }
.wpg-egg-name{ font-size:.9rem; font-weight:700; }
.wpg-egg-cost{ display:inline-flex; align-items:center; gap:4px; font-size:.82rem; font-weight:700; color:#ffd44d; }
.wpg-item.is-owned{ opacity:.55; cursor:default; }
.wpg-item.is-owned .wpg-egg-cost{ color:#34d399; }
.wpg-item.is-locked{ opacity:.5; }
.wpg-item.is-locked .wpg-egg-blob{ background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04)); }
@keyframes wpgmorph{ 0%,100%{ border-radius:46% 54% 56% 44%/56% 46% 54% 44%; } 25%{ border-radius:58% 42% 44% 56%/44% 56% 50% 50%; } 50%{ border-radius:50% 50% 60% 40%/52% 44% 56% 48%; } 75%{ border-radius:42% 58% 48% 52%/48% 52% 42% 58%; } }

/* ===== Eggs: freeze the morph WHILE HOVERING (the real cure for the glitch) =====
   The glitch is the animated (per-frame-changing) rounded clip fighting the hover
   transform + blur on the image. Pausing the border-radius animation during hover
   makes the clip STATIC for the whole interaction, so there is nothing to re-clip
   or tear. The morph still plays at rest, so the look is unchanged otherwise.
   Covers hovering the blob directly and hovering the surrounding card. ===== */
.wg-blob:hover, .geg-blob:hover, .egg-blob:hover, .wl-blob:hover, .ex-egg-blob:hover,
.dv-egg-blob:hover, .ce-blob:hover, .pg-doc-egg:hover,
.wg-card:hover .wg-blob, .geg:hover .geg-blob, .egg:hover .egg-blob,
.class-egg:hover .ce-blob, .wg-card:hover .wg-blob-pic, .geg:hover .geg-pic {
  animation-play-state: paused;
}

/* ===== Eggs: round the IMAGE itself so square corners can never flash =====
   The picture only got its rounding from the wrapper's overflow:hidden clip, which
   a hover transform can drop for one compositor frame -> the image's square box
   shows. Rounding the image element directly (border-radius:inherit, same as the
   veil, so it tracks the morph) makes the picture intrinsically rounded: no square
   corners ever, and it costs NOTHING to composite (no will-change => no blink). */
.wg-blob-pic img, .wg-blob-pic video, .geg-pic img, .geg-pic video,
.ce-blob-pic img, .ce-blob-pic video, .egg-blob > img, .egg-blob > video {
  border-radius: inherit;
}

/* ===== Shared "ask <Servant>" affordance (replaces bare (i) info buttons) ===== */
.wp-ask{display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 4px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:rgba(238,242,247,.7);font-family:'DM Sans',system-ui,sans-serif;font-size:.76rem;font-weight:600;cursor:pointer;vertical-align:middle;line-height:1;transition:color .15s,border-color .15s}
.wp-ask:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.wp-ask-av{width:22px;height:22px;border-radius:50%;overflow:hidden;flex:none;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);font-size:.7rem;font-weight:700;color:#fff}
.wp-ask-av img{width:100%;height:100%;object-fit:cover;display:block}
.wp-ask-av svg{width:60%;height:60%}
.wp-ask-nm{white-space:nowrap;letter-spacing:.01em}
html.wp-theme-light .wp-ask{color:rgba(16,19,28,.7);border-color:rgba(16,19,28,.16);background:rgba(16,19,28,.03)}
html.wp-theme-light .wp-ask:hover{color:#10131c;border-color:rgba(16,19,28,.32)}
html.wp-theme-light .wp-ask-av{background:rgba(16,19,28,.12);color:#10131c}