@font-face{
    font-family:'TelAviv Modernist';
    src:url('../assets/fonts/TelAviv-ModernistBold.ttf') format('truetype');
    font-weight:700;
    font-style:normal;
    font-display:block;
}

@font-face{
    font-family:'TelAviv Modernist';
    src:url('../assets/fonts/TelAviv-ModernistRegular.ttf') format('truetype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

/* Latin-letter override for the display family — TelAviv Modernist has no
   real lowercase Latin (a-z render as caps glyphs), which forced every
   English text and input value into ALL-CAPS. These faces are declared
   AFTER the base ones, so for the ranges below (Latin LETTERS only —
   digits, punctuation and Hebrew stay TelAviv Modernist / .num Baskerville)
   the browser takes the glyphs from Alef instead, giving English true
   upper/lowercase everywhere without touching any font-family declaration. */
@font-face{
    font-family:'TelAviv Modernist';
    src:url('../assets/fonts/Alef-Latin-Regular.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap;
    unicode-range:U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-00FF,U+0100-017F;
}
@font-face{
    font-family:'TelAviv Modernist';
    src:url('../assets/fonts/Alef-Latin-Bold.woff2') format('woff2');
    font-weight:700;
    font-style:normal;
    font-display:swap;
    unicode-range:U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-00FF,U+0100-017F;
}


:root{
    --lavender:#ADA9FF;
    --lavender-strong:#8e87f5;
    --lavender-deeper:#6f66cf;
    --lavender-soft:#f5f2ff;
    --lavender-tint:#ebe6ff;
    --deep:#343249;
    --text:#4a4658;
    --muted:#8b8698;
    --subtle:#b2adbe;
    --soft:#cbc5d8;
    --hairline:rgba(38,36,60,.07);
    --hairline-soft:rgba(38,36,60,.045);
    --bg:#ffffff;
    --card:#ffffff;
    --shadow-card:0 1px 2px rgba(38,36,60,.04),0 6px 18px rgba(38,36,60,.04);
    --shadow-cta:0 4px 12px rgba(142,135,245,.22);
    --pad:20px;
    --radius-sm:3px;
    --radius-md:5px;
    --radius-lg:7px;
    --font-title:'TelAviv Modernist',sans-serif;
    --font-body:'TelAviv Modernist',sans-serif;
    --font-num:'Libre Baskerville',serif;
}

.num{
    font-family:var(--font-num);
    font-style:italic;
    font-weight:400;
    font-size:.85em;
    letter-spacing:.3px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html,body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

body{
    background:var(--bg);
    font-family:var(--font-body);
    color:var(--text);
    padding-bottom:calc(92px + env(safe-area-inset-bottom));
    font-feature-settings:"kern" 1;
}
/* Pages that omit footer.php opt out of the reserved nav space. */
body.no-bottom-nav{ padding-bottom:env(safe-area-inset-bottom); }

.phone{
    width:100%;
    background:var(--bg);
    min-height:100vh;
    position:relative;
}

.status{display:none;}

/* HEADER */

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 24px 6px;
    max-width:1400px;
    margin:0 auto;
    min-height:56px;
    position:relative;
    z-index:2;
}

.logo{
    height:30px;
    width:auto;
    display:block;
    opacity:.96;
}

.menu-btn{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    cursor:pointer;
    color:var(--deep);
    padding:0;
    flex-shrink:0;
    transition:transform .15s ease, opacity .25s ease;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
    outline:none;
}

.menu-btn:hover{opacity:.7;}
.menu-btn:active{transform:scale(.96);}

.menu-btn svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.85;
}

.menu-btn{margin-inline-start:-4px;}

.topbar-spacer{
    width:38px;
    height:38px;
    flex-shrink:0;
    margin-inline-end:-4px;
}

/* Topbar chat entry (merged /home messages) — mirrors .menu-btn so the logo
   stays centered, plus an unread badge in lavender. */
.topbar-chat{
    position:relative;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--deep);
    flex-shrink:0;
    margin-inline-end:-4px;
    text-decoration:none;
    transition:transform .15s ease, opacity .25s ease;
    -webkit-tap-highlight-color:transparent;
}
.topbar-chat:hover{opacity:.7;}
.topbar-chat:active{transform:scale(.96);}
.topbar-chat svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.85;
}
.topbar-chat-badge{
    position:absolute;
    top:3px;
    inset-inline-start:1px;
    min-width:15px;
    height:15px;
    border-radius:999px;
    background:var(--lavender-strong);
    color:#fff;
    font-size:9.5px;
    font-weight:700;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 4px;
    box-shadow:0 1px 4px rgba(111,102,207,.4);
}
.topbar-chat-badge[hidden]{display:none;}
.topbar.topbar-stuck .topbar-chat{width:30px;height:30px;}
.topbar.topbar-stuck .topbar-chat svg{width:15px;height:15px;}
.topbar.topbar-stuck .topbar-chat-badge{top:0;}

/* Topbar side clusters — matching fixed-size icon pairs on both flanks
   (menu + add-review on the start side, search + chat/spacer on the end
   side) keep the space-between flex balanced so the logo stays centered. */
.topbar-side{
    display:flex;
    align-items:center;
    gap:2px;
    flex-shrink:0;
}
.topbar-add,
.topbar-search{
    position:relative;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    color:var(--deep);
    flex-shrink:0;
    padding:0;
    cursor:pointer;
    text-decoration:none;
    outline:none;
    transition:transform .15s ease, opacity .25s ease;
    -webkit-tap-highlight-color:transparent;
}
.topbar-add:hover,
.topbar-search:hover{opacity:.7;}
.topbar-add:active,
.topbar-search:active{transform:scale(.96);}
.topbar-add svg,
.topbar-search svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.85;
}
.topbar.topbar-stuck .topbar-add,
.topbar.topbar-stuck .topbar-search{width:30px;height:30px;}
.topbar.topbar-stuck .topbar-add svg,
.topbar.topbar-stuck .topbar-search svg{width:15px;height:15px;}

/* Sticky topbar — mirrors .bottom-nav frosted-glass pill */
.topbar.topbar-stuck{
    position:fixed;
    overflow:hidden;
    top:10px;
    left:12px;
    right:12px;
    max-width:none;
    margin:0;
    padding:6px 24px;
    min-height:auto;
    z-index:50;
    border-radius:11px;
    background:rgba(255,255,255,.72);
    backdrop-filter:saturate(140%) blur(10px);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
    border:1.5px solid rgba(255,255,255,.8);
    box-shadow:0 2px 20px rgba(52,50,73,.08);
    animation:topbar-slide-in .3s cubic-bezier(.22,1,.36,1) both;
}
.topbar.topbar-stuck .logo{
    height:22px;
    /* Let glyphs grow past the tight viewBox during the letter-bump without
       being clipped at the edges (esp. the leftmost letter at x=0). The pill
       has ample room around the centred logo, so nothing else crops it. */
    overflow:visible;
}
.topbar.topbar-stuck .menu-btn{width:30px;height:30px;}
.topbar.topbar-stuck .menu-btn svg{width:15px;height:15px;}
.topbar.topbar-stuck .topbar-spacer{width:30px;height:30px;}

@keyframes topbar-slide-in{
    from{opacity:0;transform:translateY(-100%);}
    to{opacity:1;transform:translateY(0);}
}

/* ── Header reveal choreography ────────────────────────────────────────────
   On scroll-down the compact pill slides in (topbar-slide-in, above) while the
   logo letters ripple one-by-one — lifting, glowing lavender and settling —
   cascading left→right, and a single white diagonal glimmer sweeps right→left
   across it. On first page load the logo letters cascade in (fading up) instead. */

/* Diagonal shine sweep — continues the slide-in once the pill is in place. */
.topbar.topbar-stuck::after{
    content:"";
    position:absolute;
    top:-25%;
    bottom:-25%;
    width:38%;
    z-index:3;
    pointer-events:none;
    background:linear-gradient(100deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 32%,
        rgba(255,255,255,.55) 50%,
        rgba(255,255,255,0) 68%,
        rgba(255,255,255,0) 100%);
    transform:skewX(-18deg) translateX(330%);
    opacity:0;
    animation:topbar-shine .9s cubic-bezier(.35,0,.25,1) .32s 1 both;
}
@keyframes topbar-shine{
    0%{transform:skewX(-18deg) translateX(330%);opacity:0;}
    12%{opacity:1;}
    88%{opacity:1;}
    100%{transform:skewX(-18deg) translateX(-330%);opacity:0;}
}

/* First-load letter cascade — JS tags each glyph with its left-to-right --i
   (the SVG paths are authored grouped by colour, not in reading order). */
.topbar .logo.logo-cascade path,
.topbar .logo.logo-cascade rect{
    transform-box:fill-box;
    transform-origin:50% 60%;
    animation:logo-letter-in .32s cubic-bezier(.2,.7,.3,1) both;
    animation-delay:calc(var(--i, 0) * .03s);
}
@keyframes logo-letter-in{
    from{opacity:0;transform:translateY(26%) scale(.6);}
    60%{opacity:1;}
    to{opacity:1;transform:translateY(0) scale(1);}
}

/* Sticky-header letter ripple — when the compact pill reappears, each glyph
   lifts a touch, glows toward the lavender accent and softly dims, then eases
   back, cascading left→right (reusing the same per-glyph --i the first-load
   cascade tagged). transform-box:view-box keeps the lift uniform across glyphs
   of different heights; fill is set only at the mid-point, so each <g>'s own
   colour shows through at rest (implicit start/end keyframes) and the wordmark
   is unchanged before & after. Declared after .logo-cascade so it wins on equal
   specificity while .topbar-stuck is present. */
.topbar.topbar-stuck .logo path,
.topbar.topbar-stuck .logo rect{
    transform-box:view-box;
    animation:logo-letter-ripple .3s ease-in-out 1 both;
    animation-delay:calc(.1s + var(--i, 0) * .027s);
}
@keyframes logo-letter-ripple{
    0%{transform:translateY(0);opacity:1;}
    45%{transform:translateY(-13%);opacity:.85;fill:#c0bcff;}
    100%{transform:translateY(0);opacity:1;}
}

/* Keep the menu-open pill calm, and honour reduced-motion. */
html.wp-menu-open .topbar.topbar-stuck::after{display:none;}
html.wp-menu-open .topbar.topbar-stuck .logo path,
html.wp-menu-open .topbar.topbar-stuck .logo rect{animation:none;transform:none;}
@media (prefers-reduced-motion: reduce){
    .topbar .logo.logo-cascade path,
    .topbar .logo.logo-cascade rect{animation:none;opacity:1;transform:none;}
    .topbar.topbar-stuck::after{display:none;}
    .topbar.topbar-stuck .logo path,
    .topbar.topbar-stuck .logo rect{animation:none;transform:none;}
}

/* When the menu is open and the topbar is stuck, keep the floating pill
   look — just restore the pill visuals over the wp-menu-open overrides
   and suppress the slide-in animation. */
html.wp-menu-open .topbar.topbar-stuck{
    background:rgba(255,255,255,.72);
    backdrop-filter:saturate(140%) blur(10px);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
    border:1.5px solid rgba(255,255,255,.8);
    box-shadow:0 2px 20px rgba(52,50,73,.08);
    animation:none;
}

/* Section sub-nav — horizontal scrolling links below topbar.
   Hidden (not removed) since the footer quick-nav popover took over its
   role; restore by switching display back to flex. */
.topbar-subnav{
    display:none;
    gap:20px;
    padding:0 24px 6px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    white-space:nowrap;
    max-width:1400px;
    margin:0 auto;
}
.topbar-subnav::-webkit-scrollbar{display:none;}
.topbar-subnav a{
    color:#999;
    text-decoration:none;
    font-family:var(--font-title);
    font-size:13px;
    font-weight:400;
    flex-shrink:0;
    padding:2px 0;
    position:relative;
    transition:color .15s ease;
}
.topbar-subnav a.active{
    color:var(--lavender-deeper);
}
/* Paid-upgrade entry — subtle navy emphasis. */
.topbar-subnav a.subnav-upgrade{
    color:var(--deep);
}
/* Same selected-underline as .tab.active::after on the filter tabs */
.topbar-subnav a.active::after{
    content:'';
    position:absolute;
    inset-inline-start:0;
    inset-inline-end:0;
    bottom:-3px;
    height:2px;
    border-radius:2px;
    background:var(--lavender-strong);
}
.topbar-subnav.subnav-stuck{
    position:fixed;
    left:12px;
    right:12px;
    max-width:none;
    margin:0;
    padding:6px 20px;
    z-index:49;
    border-radius:11px;
    background:rgba(255,255,255,.72);
    backdrop-filter:saturate(140%) blur(10px);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
    border:1.5px solid rgba(255,255,255,.8);
    box-shadow:0 2px 20px rgba(52,50,73,.08);
    animation:topbar-slide-in .3s cubic-bezier(.22,1,.36,1) both;
}
html.wp-menu-open .topbar-subnav{display:none;}

/* HERO */

.hero{
    padding:32px 24px 44px;
    max-width:1400px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.hero-rings{
    position:absolute;
    inset:0;
    background-image:url('../assets/images/rings.jpg?v=9');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    pointer-events:none;
    z-index:0;
}

/* Soft hand-off into the (white) page below — the photo dissolves to --bg
   instead of ending on a hard edge. */
.hero-rings::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(255,255,255,0) 55%, var(--bg) 100%);
}

.hero > *:not(.hero-rings){
    position:relative;
    z-index:1;
}

.hero .overline,
.hero h1,
.hero-meta,
.hero-countdown-line{
    text-shadow:
        0 1px 3px rgba(16,14,34,.55),
        0 4px 22px rgba(16,14,34,.4);
}

.overline{
    color:#fff;
    font-family:'TelAviv Modernist',var(--font-title);
    letter-spacing:3.4px;
    font-size:12.5px;
    font-weight:600;
    margin-bottom:18px;
    text-transform:uppercase;
}

.hero h1{
    font-family:'TelAviv Modernist',var(--font-title);
    font-size:40px;
    line-height:1.05;
    font-weight:600;
    margin-bottom:20px;
    letter-spacing:-1px;
    color:#fff;
    position:relative;
}

.sparkle-layer{
    position:absolute;
    inset:-6px -10px;
    pointer-events:none;
    z-index:2;
}

.sparkle-layer i{
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    background:radial-gradient(circle, #fff 0%, #fff 26%, rgba(255,255,255,.55) 55%, transparent 100%);
    opacity:0;
    transform:scale(.3);
    animation:sparkle-twinkle 7s ease-in-out infinite;
}

@keyframes sparkle-twinkle{
    0%,100%{opacity:0;transform:scale(.25);}
    50%{opacity:1;transform:scale(1);}
}

.hero-divider{
    height:1px;
    width:56px;
    margin:0 0 16px;
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 30%, rgba(255,255,255,.6) 70%, transparent 100%);
    border-radius:2px;
}

.hero-meta{
    color:#fff;
    font-family:'TelAviv Modernist',var(--font-title);
    font-size:12.5px;
    line-height:1.5;
    font-weight:400;
    letter-spacing:.5px;
}

.hero-meta .dot,
.overline .dot{
    margin:0 10px;
    color:rgba(255,255,255,.75);
    font-size:8px;
    vertical-align:middle;
    opacity:.7;
}

/* HERO — wedding variant (centered, names + ampersand, heart divider) */

.hero.is-wedding{
    text-align:center;
    padding:28px 24px 36px;
}

.hero.is-wedding .overline{
    display:none;
}

.hero.is-wedding h1{
    font-size:54px;
    line-height:1.05;
    margin-bottom:14px;
    letter-spacing:-.5px;
    display:inline-block;
}

.hero.is-wedding h1 .and{
    font-family:'Libre Baskerville',serif;
    font-style:italic;
    font-weight:400;
    color:var(--deep);
    -webkit-text-fill-color:var(--deep);
    background:none;
    -webkit-background-clip:initial;
    background-clip:initial;
    margin:0 .12em;
    font-size:.92em;
    vertical-align:.04em;
}

.hero-heart-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:2px 0 14px;
}

.hero-heart-divider .hd-line{
    width:34px;
    height:1px;
    background:linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.55) 40%,
        rgba(255,255,255,.65) 60%,
        transparent 100%);
    border-radius:1px;
}

.hero-heart-divider .hd-heart{
    width:14px;
    height:14px;
    fill:none;
    stroke:#C8C4FF;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.9;
}

.hero-date{
    color:var(--deep);
    font-size:13px;
    line-height:1.5;
    font-weight:400;
    letter-spacing:.4px;
    margin-bottom:6px;
}

.hero-venue{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:var(--deep);
    font-size:12.5px;
    line-height:1.5;
    font-weight:400;
    letter-spacing:.4px;
}

.hero-venue .hv-pin{
    width:12px;
    height:12px;
    fill:none;
    stroke:var(--deep);
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.85;
    flex-shrink:0;
    transform:translateY(-1px);
}

/* HERO COUNTDOWN LINE — premium inline countdown beneath the H1 */
.hero-countdown-line{
    display:flex;
    flex-wrap:nowrap;
    align-items:baseline;
    justify-content:center;
    column-gap:7px;
    margin:6px 12px 14px;
    color:#fff;
    font-size:12px;
    font-weight:400;
    line-height:1.5;
    letter-spacing:.3px;
    direction:rtl;
    white-space:nowrap;
}
.hero-countdown-line .hcl-prefix{
    font-size:10px;
    font-weight:500;
    color:#fff;
    letter-spacing:1.4px;
    text-transform:uppercase;
    opacity:.8;
}
.hero-countdown-line .hcl-unit{
    display:inline-flex;
    align-items:baseline;
    gap:3px;
}
.hero-countdown-line .num{
    font-family:var(--font-num);
    font-style:italic;
    font-weight:400;
    font-size:14.5px;
    color:#C8C4FF;
    letter-spacing:.2px;
    width:1.45em;
    display:inline-block;
    text-align:center;
    margin:0;
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum";
}
.hero-countdown-line .num[data-cd="d"]{width:1.95em;}
.hero-countdown-line .hcl-word{
    font-size:10.5px;
    font-weight:500;
    color:rgba(255,255,255,.88);
    letter-spacing:.4px;
    opacity:.78;
}
@media (max-width:360px){
    .hero-countdown-line{column-gap:5px;margin-inline:8px;font-size:11px;}
    .hero-countdown-line .num{font-size:13px;}
    .hero-countdown-line .hcl-word{font-size:10px;letter-spacing:.2px;}
    .hero-countdown-line .hcl-prefix{font-size:9.5px;letter-spacing:1px;}
}
@media (min-width:560px){
    .hero-countdown-line{column-gap:13px;font-size:12.5px;}
    .hero-countdown-line .num{font-size:17px;width:1.5em;}
    .hero-countdown-line .num[data-cd="d"]{width:1.95em;}
    .hero-countdown-line .hcl-word{font-size:11px;letter-spacing:.8px;}
    .hero-countdown-line .hcl-prefix{font-size:11px;letter-spacing:2.4px;}
    .hero-countdown-line .hcl-unit{gap:5px;}
}

/* TABS */

.tabs{
    display:flex;
    gap:28px;
    padding:18px var(--pad) 0;
    border-bottom:1px solid var(--hairline);
    max-width:1400px;
    margin:0 auto;
    align-items:flex-end;
}

.tab{
    padding:0 0 12px;
    color:var(--muted);
    font-family:'TelAviv Modernist',var(--font-title);
    font-size:14px;
    font-weight:500;
    position:relative;
    cursor:pointer;
    transition:color .2s ease;
}

.tab.active{
    color:var(--deep);
    font-weight:600;
}

.tab.active::after{
    content:'';
    position:absolute;
    inset-inline-start:0;
    inset-inline-end:0;
    bottom:-1px;
    height:2px;
    border-radius:2px;
    background:var(--lavender-strong);
}

/* Tabbers & segmented filter strips: a tap must never select the label text
   or flash a selection highlight — keeps the planner feeling like a real app.
   Covers .tab/.tab-action tabbers and the .filters .item count strips alike. */
.tabs,
.tab,
.tab-action,
.tab-slider,
.filters .item,
.gift-pie-tab,
.budget-pie-tab{
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
}

/* CONTROLS */

/* Search bar spacing: more room above (separate it from the summary card)
   and a tight gap below so the search sits closer to the list. Shared by
   every list-search page (guests/gifts/wishes/expenses/tasks/tables) for a
   uniform search-to-list distance. */
.controls{
    padding:16px var(--pad) 8px;
    max-width:1400px;
    margin:0 auto;
}

.search{
    background:var(--card);
    border:1px solid var(--hairline);
    height:36px;
    border-radius:var(--radius-md);
    display:flex;
    align-items:center;
    padding:0 14px;
    box-shadow:var(--shadow-card);
    transition:border-color .2s ease,box-shadow .2s ease;
}

.search:focus-within{
    border-color:var(--lavender);
    box-shadow:0 0 0 3px rgba(173,169,255,.14);
}

.search-icon{
    width:18px;
    height:18px;
    flex-shrink:0;
    color:var(--subtle);
    stroke:currentColor;
    stroke-width:1.6;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.search input{
    border:none;
    outline:none;
    width:100%;
    background:transparent;
    margin-inline-start:12px;
    font-size:15px;
    color:var(--text);
    font-family:var(--font-body);
    font-weight:400;
    text-align:start;
}

.search input::placeholder{
    color:var(--subtle);
    font-weight:400;
}

.add-btn{
    position:relative;
    text-decoration:none;
    margin-inline-start:auto;
    margin-block-end:6px;
    width:auto;
    height:34px;
    padding:1.5px;
    background:var(--deep);
    color:#fff;
    border:none;
    border-radius:var(--radius-md);
    box-shadow:0 4px 12px rgba(52,50,73,.22);
    font-family:var(--font-body);
    cursor:pointer;
    overflow:hidden;
    isolation:isolate;
    transition:transform .12s ease,box-shadow .2s ease;
}

.add-btn-glow{display:none;}

.add-btn-inner{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 16px;
    border-radius:calc(var(--radius-md) - 1.5px);
    font-size:13px;
    font-weight:400;
    letter-spacing:.1px;
    white-space:nowrap;
    color:#fff;
}

.add-btn:hover{
    box-shadow:0 6px 16px rgba(52,50,73,.32);
}

.add-btn:active{
    transform:scale(.98);
}

.add-btn.is-saving{pointer-events:none;opacity:.7;}
/* Same saving state for the onboarding/provider "next" button (.onb-next),
   which the provider entry page uses for its server-side save. */
.onb-next.is-saving{pointer-events:none;opacity:.7;}
.add-btn-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:wpBtnSpin .55s linear infinite;}
@keyframes wpBtnSpin{to{transform:rotate(360deg);}}

/* Primary buttons are text-only — the icons that used to sit beside the
   label are hidden here so per-page markup doesn't need touching. */
.add-btn .add-user-icon,
.add-btn-inner > svg{display:none;}

/* Shared spin for the onboarding glow buttons (.onb-*-glow). */
@keyframes addBtnSpin{
    to{transform:rotate(360deg);}
}

/* FILTERS */

.filters{
    display:flex;
    align-items:stretch;
    background:transparent;
    border:none;
    border-radius:var(--radius-lg);
    box-shadow:none;
    margin:12px var(--pad) 4px;
    max-width:1400px;
    overflow:hidden;
}

@media (min-width:1432px){
    .filters{margin:12px auto 4px;}
}

.filters .item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:12px 6px;
    cursor:pointer;
    position:relative;
    color:var(--muted);
    transition:color .2s ease,background .2s ease;
}

.filters .item + .item::before{
    content:none;
}

.filters .count{
    color:var(--deep);
    font-family:var(--font-num);
    font-style:italic;
    font-weight:400;
    font-size:26px;
    line-height:1.2;
    letter-spacing:.3px;
}

.filters .label{
    font-family:'TelAviv Modernist',var(--font-title);
    font-size:12px;
    font-weight:500;
    line-height:1.2;
}

.filters .item.active{
    background:transparent;
}

.filters .item.active .count,
.filters .item.active .label{
    color:var(--lavender-strong);
}

.filters .item.active .label{font-weight:600;}

/* GUEST CARD */

.guest-card{
    margin:0 16px;
    max-width:1400px;
    background:var(--card);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-card);
}

@media (min-width:1432px){
    .guest-card{margin:0 auto;}
}

.guest{
    display:flex;
    align-items:center;
    padding:9px 16px;
    border-bottom:1px solid var(--hairline-soft);
    cursor:pointer;
    transition:background .15s ease;
}

.guest:last-child{border-bottom:none;}
.guest:active{background:var(--lavender-soft);}

.avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--lavender-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--deep);
    font-family:var(--font-title);
    font-size:13px;
    font-weight:600;
    margin-inline-end:14px;
    flex-shrink:0;
    letter-spacing:.4px;
    overflow:hidden;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.guest-info{flex:1;min-width:0;}

.guest-name{
    font-family:var(--font-title);
    font-size:16px;
    color:var(--deep);
    margin-bottom:2px;
    font-weight:400;
    line-height:1.25;
}

.guest-sub{
    color:var(--muted);
    font-size:12.5px;
    font-weight:400;
}

.badge{
    padding:2px 8px;
    border-radius:var(--radius-sm);
    font-family:'TelAviv Modernist',var(--font-title);
    font-size:11px;
    font-weight:400;
    letter-spacing:.2px;
    white-space:nowrap;
}

.attending{background:#eaf3df;color:#5b8a3f;}
.pending{background:#efebff;color:#7268d3;}
.not{background:#fbe9eb;color:#b46b71;}

/* CTA */

.cta{
    margin:18px 16px 22px;
    max-width:1400px;
    background:var(--lavender-soft);
    border:1px solid var(--lavender-tint);
    border-radius:var(--radius-lg);
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

@media (min-width:1432px){
    .cta{margin:18px auto 22px;}
}

.cta-left{
    display:flex;
    gap:12px;
    align-items:center;
    flex:1;
    min-width:0;
}

.cta-icon{
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--card);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--lavender-strong);
    flex-shrink:0;
}

.cta-icon svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    stroke-width:1.5;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.cta-text{flex:1;min-width:0;}

.cta-title{
    font-family:var(--font-title);
    font-size:14px;
    color:var(--deep);
    font-weight:600;
    margin-bottom:2px;
    line-height:1.3;
}

.cta-sub{
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
}

.cta-link{
    color:var(--lavender-strong);
    font-weight:600;
    white-space:nowrap;
    font-size:12.5px;
    flex-shrink:0;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.cta-link svg{
    width:14px;
    height:14px;
    stroke:currentColor;
    stroke-width:1.8;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* BOTTOM NAV */

.bottom-nav{
    display:flex;
    justify-content:space-around;
    align-items:center;
    gap:4px;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    position:fixed;
    bottom:10px;
    left:12px;
    right:12px;
    z-index:50;
    border-radius:11px;
}
/* Frosted-glass pill on its own layer so it can fade in under the cascading
   icons. The 1.5px border is drawn as an inset shadow to keep the box model
   identical to a real border (no layout shift). */
.bottom-nav::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:inherit;
    background:rgba(255,255,255,.78);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
    backdrop-filter:saturate(140%) blur(10px);
    box-shadow:
        inset 0 0 0 1.5px rgba(255,255,255,.8),
        0 2px 20px rgba(52,50,73,.1);
}

.nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-size:2.6vw;
    font-weight:500;
    color:#67637f;
    text-decoration:none;
    padding:6px 4px;
    border-radius:var(--radius-sm);
    flex:1;
    text-align:center;
    line-height:1.25;
    white-space:nowrap;
    transition:color .2s ease;
}

.nav-item .icon{
    width:22px;
    height:22px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round;
    color:inherit;
}

/* The mit4mit rings logo mark keeps its own brand fills — cancel the stroke
   the generic .icon rule would let its paths inherit, and widen the slot a
   touch so its shorter viewBox renders at the same visual weight. */
.nav-item .icon-rings{stroke:none;width:24px;}

.nav-item.active{color:var(--lavender-deeper);}
.nav-item.active span{font-weight:400;}

/* Footer icons drop into place on load — each starts a few px high and falls
   into position, cascading from the rightmost icon to the leftmost.
   (JS assigns --i by on-screen x, so the RTL DOM order doesn't matter.)
   The frosted pill (::before) fades up from transparent over the same beat. */
.bottom-nav.foot-cascade .nav-item{
    animation:foot-item-in .36s cubic-bezier(.2,.7,.3,1) both;
    animation-delay:calc(var(--i, 0) * .07s);
}
@keyframes foot-item-in{
    from{opacity:0;transform:translateY(-10px);}
    to{opacity:1;transform:translateY(0);}
}
.bottom-nav.foot-cascade::before{
    animation:foot-bg-in .6s ease both;
}
@keyframes foot-bg-in{
    from{opacity:0;}
    to{opacity:1;}
}
@media (prefers-reduced-motion: reduce){
    .bottom-nav.foot-cascade .nav-item{animation:none;opacity:1;transform:none;}
    .bottom-nav.foot-cascade::before{animation:none;opacity:1;}
}

/* REVEAL ANIMATIONS */

.reveal{
    opacity:0;
    transform:translate3d(0,14px,0);
    transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--reveal-delay,0s);
    will-change:opacity,transform;
}

.reveal.in{
    opacity:1;
    transform:translate3d(0,0,0);
}

@media (prefers-reduced-motion:reduce){
    .reveal,.reveal.in{
        opacity:1;
        transform:none;
        transition:none;
    }
}

/* Per-row cascade — drop this class on any list-row-level element to have
   it fade+rise+scale in as it scrolls into view. Rows arriving in the
   same IntersectionObserver callback are staggered by JS so initial load
   / fast scroll reads as a cascade; slow scroll animates each row
   immediately as it crosses the threshold. Observer wiring lives in
   yonso26/includes/reveal.php. Use this for repeating list items
   (task rows, guest rows, summary rows) — .reveal is for page sections. */
.task-reveal{
    opacity:0;
    transform:translate3d(0,28px,0) scale(.97);
    transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
    will-change:opacity,transform;
}
.task-reveal.in{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
}
@media (prefers-reduced-motion:reduce){
    .task-reveal,.task-reveal.in{
        opacity:1;
        transform:none;
        transition:none;
    }
}

@media (max-width:360px){
    .filters .label{font-size:11px;}
    .filters .count{font-size:22px;}
}

/* ============================================================
   ONBOARDING
   ============================================================ */

.phone-onboarding{
    background:
        radial-gradient(900px 520px at 100% -8%, rgba(248,232,210,.55) 0%, transparent 60%),
        radial-gradient(640px 460px at -5% 280px, rgba(173,169,255,.18) 0%, transparent 65%),
        radial-gradient(520px 420px at 120% 70%, rgba(214,206,255,.22) 0%, transparent 70%),
        var(--bg);
}

.onb-section{
    padding:8px var(--pad) 4px;
    max-width:1400px;
    margin:0 auto;
    position:relative;
}

/* STEP FLOW — each step uses the same animated reveal as pair-grid → couple-names */

.onb-flow{
    position:relative;
}

.onb-step{
    max-width:1400px;
    margin:0 auto;
    padding:8px var(--pad) 16px;
    position:relative;
    max-height:0;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
    transition:
        max-height .6s cubic-bezier(.22,1,.36,1),
        opacity .35s ease,
        padding .4s cubic-bezier(.22,1,.36,1);
    padding-top:0;
    padding-bottom:0;
}
.onb-step.active{
    max-height:2400px;
    opacity:1;
    pointer-events:auto;
    padding-top:8px;
    padding-bottom:16px;
}
/* Old "stretch the step + scroll the page" approach is replaced by an
   overlay model: when focused, the venue autocomplete pins to the top of
   the viewport over a blurry backdrop. See `.venue-autocomplete.is-overlay`. */

/* STEP NAV (back · continue) */

.onb-step-nav{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:48px;
}

.onb-back{
    background:transparent;
    border:none;
    color:var(--muted);
    font-family:var(--font-body);
    font-size:13px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    padding:8px 10px;
    border-radius:var(--radius-sm);
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:color .2s ease,background .2s ease;
}
.onb-back:hover{color:var(--deep);background:var(--lavender-soft);}
.onb-back svg{
    width:12px;
    height:12px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0;
    transform:translateY(1px);
}

.onb-next{
    margin-inline-start:auto;
    position:relative;
    height:42px;
    min-width:128px;
    padding:1.5px;
    border:none;
    border-radius:var(--radius-md);
    background:var(--deep);
    box-shadow:0 4px 12px rgba(52,50,73,.22);
    cursor:pointer;
    overflow:hidden;
    isolation:isolate;
    font-family:var(--font-body);
    transition:transform .12s ease,box-shadow .2s ease,opacity .2s ease;
}
.onb-next:hover{box-shadow:0 6px 16px rgba(52,50,73,.32);}
.onb-next:active{transform:scale(.98);}
.onb-next:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}
.onb-next:disabled:hover{box-shadow:none;}

.onb-next-glow{display:none;}

.onb-next-inner{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 18px;
    border-radius:calc(var(--radius-md) - 1.5px);
    color:#fff;
    font-size:14px;
    font-weight:600;
    letter-spacing:.1px;
}
.onb-next-inner svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* PER-STEP REASSURANCE NOTE — small footer text under every step.
   Sits below the nav, gently telling the user nothing is final. */

/* In-card reassurance line — sits at the bottom of a white input card. Sized
   to match .onb-field-label (11px) and styled in the softest gray so it reads
   as a quiet aside rather than copy. */
.onb-card-foot{
    margin-top:16px;
    text-align:right;
    font-size:11px;
    color:var(--subtle);
    line-height:1.45;
    letter-spacing:.1px;
}

/* "WE DON'T KNOW YET" SKIP — borderless link sitting above the Continue CTA. */

.onb-skip{
    width:100%;
    margin-top:18px;
    background:transparent;
    border:none;
    color:var(--muted);
    font-family:var(--font-body);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    padding:6px 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:color .2s ease;
}
.onb-skip:hover{ color:var(--lavender-deeper); }
.onb-skip[hidden]{display:none;}

.onb-eyebrow{
    color:var(--lavender-deeper);
    letter-spacing:3px;
    font-size:10.5px;
    font-weight:600;
    text-transform:uppercase;
    opacity:.85;
    margin-bottom:6px;
}

.onb-title{
    font-family:var(--font-title);
    font-size:22px;
    line-height:1.2;
    color:var(--deep);
    font-weight:600;
    letter-spacing:-.3px;
    margin-bottom:4px;
}

.onb-sub{
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
    margin-bottom:18px;
}

/* Section divider with sparkle glyph */
.onb-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:18px var(--pad);
    max-width:1400px;
    margin:0 auto;
}
.onb-divider-line{
    flex:1;
    height:1px;
    background:linear-gradient(90deg,transparent 0%,rgba(142,135,245,.35) 50%,transparent 100%);
    max-width:140px;
}
.onb-divider-glyph{
    width:14px;
    height:14px;
    color:var(--lavender-strong);
    flex-shrink:0;
    filter:drop-shadow(0 1px 4px rgba(142,135,245,.35));
}

/* PARTNER GRID */

.partner-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    align-items:stretch;
    position:relative;
}

@media (min-width:560px){
    .partner-grid{
        grid-template-columns:1fr auto 1fr;
        gap:14px;
    }
}

.partner-card{
    position:relative;
    background:
        radial-gradient(220px 140px at 50% 0%, rgba(245,242,255,.95) 0%, var(--card) 70%);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    padding:18px 16px 16px;
    box-shadow:var(--shadow-card);
    overflow:hidden;
    isolation:isolate;
    transition:border-color .25s ease,box-shadow .25s ease;
}

.partner-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(160px 110px at 0% 0%, rgba(173,169,255,.12) 0%, transparent 70%),
        radial-gradient(160px 110px at 100% 100%, rgba(248,224,196,.18) 0%, transparent 70%);
    pointer-events:none;
    z-index:0;
}

.partner-card > *{
    position:relative;
    z-index:1;
}

/* Phone field follows the card's RTL flow — opt out of the shared
   .onb-input-tel LTR treatment so it lines up with the name above it. */
.partner-card .onb-input-tel{
    direction:rtl;
    text-align:start;
}

/* Partner portrait — premium framed SVG */

.partner-portrait{
    width:96px;
    height:96px;
    margin:0 auto 14px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--lavender-strong);
}

.partner-halo{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 40%, rgba(173,169,255,.22) 0%, transparent 70%),
        radial-gradient(circle at 50% 60%, rgba(248,224,196,.28) 0%, transparent 72%);
    filter:blur(2px);
    z-index:0;
}

.partner-orbit{
    position:absolute;
    inset:6px;
    border-radius:50%;
    border:1px solid var(--lavender-tint);
    background:linear-gradient(180deg,#ffffff 0%,#faf8ff 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.7),
        0 6px 14px rgba(38,36,60,.05);
    z-index:1;
}

.partner-svg-wrap{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    opacity:0;
    transform:scale(.85);
    transition:opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.partner-svg-wrap svg,
.partner-svg-wrap .figure-img{width:60px;height:60px;}

/* Bride/groom illustrations — inline SVG line-art rendered via currentColor so
   the figures pick up the parent's lavender brand tone. */
.figure-img{
    display:block;
    fill:currentColor;
}

.partner-card[data-gender="bride"] .partner-svg-bride{opacity:1;transform:scale(1);}
.partner-card[data-gender="groom"] .partner-svg-groom{opacity:1;transform:scale(1);}

/* Uploaded partner photo — covers the SVG illustration when set. */
.partner-photo{
    position:absolute;
    inset:6px;
    border-radius:50%;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    z-index:3;
    opacity:0;
    transform:scale(.92);
    transition:opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
    pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 4px 12px rgba(38,36,60,.10);
}
.partner-photo.has-photo{opacity:1;transform:scale(1);}
.partner-portrait.has-photo .partner-svg-wrap{opacity:0 !important;transform:scale(.85);}

/* CANONICAL RADIO GROUP — borderless, vertical, custom dot.
   Shared across all yonso26 forms. See STYLEGUIDE §8b for usage. */

.onb-radio-group{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:22px;
}
.onb-radio-group .onb-field-label{
    margin-bottom:2px;
}

.onb-radio{
    display:flex;
    align-items:center;
    gap:12px;
    padding:4px 0;
    cursor:pointer;
    font-size:14px;
    color:var(--muted);
    transition:color .15s ease;
}
.onb-radio input[type="radio"]{
    position:absolute;
    opacity:0;
    pointer-events:none;
    width:0;
    height:0;
}
.onb-radio-dot{
    width:20px;
    height:20px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--card);
    border:1.5px solid var(--soft);
    position:relative;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.onb-radio-dot::after{
    content:'';
    position:absolute;
    inset:3.5px;
    border-radius:50%;
    background:var(--lavender-strong);
    transform:scale(0);
    transition:transform .18s cubic-bezier(.22,1,.36,1);
}
.onb-radio:hover .onb-radio-dot{ border-color:var(--lavender); }
.onb-radio:has(input:checked){ color:var(--deep); }
.onb-radio:has(input:checked) .onb-radio-dot{
    border-color:var(--lavender-strong);
}
.onb-radio:has(input:checked) .onb-radio-dot::after{ transform:scale(1); }
.onb-radio:has(input:focus-visible) .onb-radio-dot{
    box-shadow:0 0 0 3px rgba(173,169,255,.22);
}
.onb-radio-text{ line-height:1.3; }

.onb-photo-status{
    display:block;
    font-size:12px;
    line-height:1.35;
    margin-top:4px;
    color:var(--muted);
}
.onb-photo-status.is-loading{ color:var(--lavender-deeper); }
.onb-photo-status.is-ok{ color:#2f8a5b; }
.onb-photo-status.is-warn{ color:#c84668; }

/* CANONICAL ALERT MODAL — block-level error popup. See STYLEGUIDE §8c. */

.onb-modal{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    pointer-events:none;
}
.onb-modal:not([hidden]){ pointer-events:auto; }
.onb-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(38,36,60,.36);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    transition:opacity .22s ease;
}
.onb-modal.open .onb-modal-backdrop{ opacity:1; }

.onb-modal-card{
    position:relative;
    width:100%;
    max-width:420px;
    margin:0 16px;
    background:var(--card);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    box-shadow:0 12px 40px rgba(38,36,60,.18);
    padding:22px 22px 18px;
    text-align:center;
    transform:translate3d(0,16px,0);
    opacity:0;
    transition:transform .26s cubic-bezier(.22,1,.36,1), opacity .22s ease;
}
.onb-modal.open .onb-modal-card{
    transform:translate3d(0,0,0);
    opacity:1;
}

.onb-modal-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--lavender-soft);
    color:var(--lavender-strong);
    margin-bottom:10px;
}
.onb-modal-icon svg{ width:22px; height:22px; }

.onb-modal-title{
    font-family:var(--font-title);
    font-size:18px;
    font-weight:600;
    color:var(--deep);
    line-height:1.2;
    margin-bottom:6px;
}
.onb-modal-msg{
    font-size:14px;
    color:var(--text);
    line-height:1.45;
    margin-bottom:18px;
}

.onb-modal-actions{
    display:flex;
    justify-content:center;
}

.onb-modal-btn{
    position:relative;
    height:42px;
    min-width:140px;
    padding:1.5px;
    border:none;
    border-radius:var(--radius-md);
    background:var(--deep);
    box-shadow:0 4px 12px rgba(52,50,73,.22);
    cursor:pointer;
    overflow:hidden;
    isolation:isolate;
    font-family:var(--font-body);
    transition:transform .12s ease,box-shadow .2s ease;
}
.onb-modal-btn:hover{ box-shadow:0 6px 16px rgba(52,50,73,.32); }
.onb-modal-btn:active{ transform:scale(.98); }

/* CANONICAL IMAGE CROPPER — opens after a partner photo is uploaded so the
   user can pan/zoom to fit the face inside the round portrait. Same backdrop
   and entry animation contract as .onb-modal. */
.onb-crop{
    position:fixed;
    inset:0;
    z-index:210;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}
.onb-crop:not([hidden]){ pointer-events:auto; }
.onb-crop-backdrop{
    position:absolute;
    inset:0;
    background:rgba(38,36,60,.42);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    transition:opacity .22s ease;
}
.onb-crop.open .onb-crop-backdrop{ opacity:1; }

.onb-crop-card{
    position:relative;
    width:100%;
    max-width:340px;
    margin:0 16px;
    background:var(--card);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    box-shadow:0 12px 40px rgba(38,36,60,.18);
    padding:18px 18px 16px;
    text-align:center;
    transform:translate3d(0,16px,0);
    opacity:0;
    transition:transform .26s cubic-bezier(.22,1,.36,1), opacity .22s ease;
}
.onb-crop.open .onb-crop-card{
    transform:translate3d(0,0,0);
    opacity:1;
}

.onb-crop-title{
    font-family:var(--font-title);
    font-size:18px;
    font-weight:600;
    color:var(--deep);
    margin-bottom:4px;
}
.onb-crop-sub{
    font-size:12px;
    color:var(--muted);
    line-height:1.45;
    margin-bottom:14px;
}

.onb-crop-stage{
    position:relative;
    width:280px;
    height:280px;
    max-width:100%;
    margin:0 auto;
    border-radius:var(--radius-md);
    overflow:hidden;
    background:#1d1c2c;
    user-select:none;
    -webkit-user-select:none;
    touch-action:none;
    cursor:grab;
}
.onb-crop-stage.is-dragging{ cursor:grabbing; }

.onb-crop-image{
    position:absolute;
    transform-origin:center center;
    pointer-events:none;
    -webkit-user-drag:none;
    user-select:none;
    will-change:transform;
}

.onb-crop-mask{
    position:absolute;
    top:50%; left:50%;
    width:240px; height:240px;
    margin-left:-120px;
    margin-top:-120px;
    border-radius:50%;
    box-shadow:0 0 0 9999px rgba(38,36,60,.55);
    border:2px solid rgba(255,255,255,.78);
    pointer-events:none;
}

.onb-crop-zoom{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
    padding:0 4px;
    color:var(--muted);
    font-size:14px;
    font-weight:600;
}
.onb-crop-zoom input[type="range"]{
    flex:1;
    -webkit-appearance:none;
    appearance:none;
    height:4px;
    background:var(--hairline);
    border-radius:2px;
    outline:none;
}
.onb-crop-zoom input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:18px; height:18px;
    border-radius:50%;
    background:var(--lavender-strong);
    border:2px solid #fff;
    box-shadow:0 2px 6px rgba(142,135,245,.42);
    cursor:pointer;
}
.onb-crop-zoom input[type="range"]::-moz-range-thumb{
    width:18px; height:18px;
    border-radius:50%;
    background:var(--lavender-strong);
    border:2px solid #fff;
    box-shadow:0 2px 6px rgba(142,135,245,.42);
    cursor:pointer;
}

.onb-crop-actions{
    display:flex;
    gap:10px;
    margin-top:16px;
}
.onb-crop-cancel{
    flex:1;
    background:transparent;
    border:1px solid var(--hairline);
    color:var(--text);
    border-radius:var(--radius-md);
    height:44px;
    font-family:var(--font-body);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background .18s ease;
}
.onb-crop-cancel:hover{ background:var(--lavender-soft); }

.onb-crop-save{
    flex:1.2;
    position:relative;
    height:44px;
    padding:1.5px;
    border:none;
    border-radius:var(--radius-md);
    background:var(--deep);
    box-shadow:0 4px 12px rgba(52,50,73,.22);
    cursor:pointer;
    overflow:hidden;
    isolation:isolate;
}
.onb-crop-save-glow{display:none;}
.onb-crop-save-inner{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    border-radius:calc(var(--radius-md) - 1.5px);
    background:var(--deep);
    color:#fff;
    font-family:var(--font-body);
    font-size:14px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
}
.onb-modal-btn-glow{display:none;}
.onb-modal-btn-inner{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:0 22px;
    border-radius:calc(var(--radius-md) - 1.5px);
    color:#fff;
    font-size:14px;
    font-weight:600;
    letter-spacing:.1px;
}

/* ONB FIELD / INPUT */

.onb-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:10px;
}
.onb-field:last-of-type{margin-bottom:0;}

.onb-field-label{
    font-size:11px;
    font-weight:600;
    color:var(--lavender-deeper);
    letter-spacing:.6px;
    text-transform:uppercase;
    opacity:.85;
}

.onb-input{
    background:var(--card);
    border:1px solid var(--hairline);
    height:42px;
    border-radius:var(--radius-md);
    padding:0 14px;
    font-family:var(--font-body);
    font-size:15px;
    color:var(--deep);
    width:100%;
    box-shadow:var(--shadow-card);
    transition:border-color .2s ease,box-shadow .2s ease;
    text-align:start;
    appearance:none;
    -webkit-appearance:none;
}

.onb-input::placeholder{color:var(--subtle);}

.onb-input:focus{
    outline:none;
    border-color:var(--lavender);
    box-shadow:0 0 0 3px rgba(173,169,255,.16);
}

.onb-input[type="date"],
.onb-input[type="time"],
.onb-input-tel{
    font-variant-numeric:tabular-nums;
    letter-spacing:.4px;
    color:var(--deep);
    direction:ltr;
    text-align:start;
}

.onb-input.is-invalid{
    border-color:#e8638a;
    background:#fff5f7;
    box-shadow:0 0 0 3px rgba(232,99,138,.10);
}
.onb-input.is-invalid:focus{
    border-color:#e8638a;
    box-shadow:0 0 0 3px rgba(232,99,138,.18);
}

.onb-field-error{
    font-size:11px;
    font-weight:600;
    color:#c84668;
    line-height:1.3;
    margin-top:2px;
    letter-spacing:.2px;
}

.onb-field-flush{flex:1;margin-bottom:0;}

/* PAIR-TYPE CHOOSER (step 1 of couple section) */

.pair-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    transition:max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, margin .25s ease;
    overflow:hidden;
    max-height:1200px;
}
@media (min-width:560px){
    .pair-grid{gap:12px;}
}
.pair-grid.chosen{
    max-height:0;
    opacity:0;
    margin-bottom:0;
    pointer-events:none;
}

.pair-card{
    position:relative;
    background:
        linear-gradient(180deg,#ffffff 0%,#faf8ff 100%);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    padding:12px 8px 14px;
    text-align:center;
    cursor:pointer;
    box-shadow:var(--shadow-card);
    overflow:hidden;
    isolation:isolate;
    font-family:var(--font-body);
    color:var(--deep);
    transition:transform .15s ease,box-shadow .25s ease,border-color .25s ease;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:132px;
}
@media (min-width:560px){
    .pair-card{padding:14px 14px 16px;gap:6px;min-height:140px;}
}
.pair-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(160px 110px at 50% 0%, rgba(173,169,255,.12) 0%, transparent 70%),
        radial-gradient(160px 110px at 100% 100%, rgba(248,224,196,.16) 0%, transparent 70%);
    pointer-events:none;
    z-index:0;
}
.pair-card > *{position:relative;z-index:1;}
.pair-card:hover{border-color:var(--lavender-tint);}
.pair-card:active{transform:scale(.985);}

.pair-card-art{
    width:100%;
    height:54px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--lavender-strong);
    margin-bottom:2px;
}
@media (min-width:560px){
    .pair-card-art{height:64px;}
}
.pair-figure{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.pair-figure svg,
.pair-figure .figure-img{width:36px;height:36px;}
.pair-figure-a{margin-inline-end:-5px;}
.pair-figure-b{margin-inline-start:-5px;}
@media (min-width:560px){
    .pair-figure{width:48px;height:48px;}
    .pair-figure svg,
    .pair-figure .figure-img{width:46px;height:46px;}
    .pair-figure-a{margin-inline-end:-6px;}
    .pair-figure-b{margin-inline-start:-6px;}
}
.pair-card-label{
    font-family:var(--font-title);
    font-size:12.5px;
    font-weight:600;
    color:var(--deep);
    line-height:1.2;
    letter-spacing:-.1px;
}
.pair-card-sub{
    font-size:10.5px;
    color:var(--muted);
    line-height:1.35;
}
@media (min-width:560px){
    .pair-card-label{font-size:14px;letter-spacing:0;}
    .pair-card-sub{font-size:11.5px;line-height:1.4;}
}
.pair-card-tick{
    position:absolute;
    top:7px;
    inset-inline-end:7px;
    width:16px;
    height:16px;
    border-radius:50%;
    border:1px solid var(--hairline);
    background:transparent;
    color:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.pair-card-tick svg{width:10px;height:10px;}
@media (min-width:560px){
    .pair-card-tick{top:10px;inset-inline-end:10px;width:18px;height:18px;}
    .pair-card-tick svg{width:11px;height:11px;}
}

.pair-card.active{
    border-color:var(--lavender);
    box-shadow:
        0 0 0 3px rgba(173,169,255,.14),
        0 8px 22px rgba(142,135,245,.22);
}
.pair-card.active .pair-card-tick{
    background:var(--lavender-strong);
    border-color:var(--lavender-strong);
    color:#fff;
}

/* COUPLE NAMES (step 2 — revealed after a pair type is chosen) */

.couple-names{
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, margin .25s ease;
}
.couple-names.open{
    max-height:600px;
    opacity:1;
    margin-top:14px;
}
.couple-names-inner{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    align-items:stretch;
    position:relative;
}
@media (min-width:560px){
    .couple-names-inner{
        grid-template-columns:1fr auto 1fr;
        gap:14px;
    }
}

.couple-edit-pair{
    margin:14px auto 0;
    display:block;
    background:transparent;
    border:none;
    color:var(--lavender-strong);
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    padding:6px 10px;
    border-radius:var(--radius-sm);
}
.couple-edit-pair:hover{background:var(--lavender-soft);}

/* WHEN CARD */

.onb-card{
    background:var(--card);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    overflow:hidden;
}

.onb-card-when{
    padding:14px 16px;
    display:flex;
    flex-direction:column;
    gap:0;
}

.onb-card-time{
    padding:8px 16px 14px;
    display:flex;
    flex-direction:column;
    gap:0;
}

.onb-when-row{
    display:flex;
    align-items:flex-end;
    gap:14px;
    padding:8px 0;
}
/* The .onb-field column is taller than the icon (label + input),
   so center-align would float the icon above the input. Bottom-align
   keeps the icon level with the date text input. */
.onb-when-row > .onb-icon{
    margin-bottom:-1px;
}

.onb-row-divider{
    height:1px;
    background:var(--hairline-soft);
    margin:0;
}

/* TIME WHEEL — Samsung/iOS-style scroll-snap picker. Two columns share a centered
   selection band painted by .onb-wheel-frame. Items are exactly --wheel-item tall;
   we snap on every row, fade the off-center rows with a mask gradient, and let the
   centered row swell into the bold "selected" reading. */

.onb-time-wheel{
    --wheel-item:56px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:8px 0 4px;
    margin-top:8px;
    user-select:none;
    -webkit-user-select:none;
    touch-action:pan-y;
}

.onb-wheel-frame{
    position:absolute;
    inset-inline:8%;
    top:50%;
    height:var(--wheel-item);
    transform:translateY(-50%);
    border-top:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    pointer-events:none;
    z-index:0;
}

.onb-wheel{
    width:96px;
    height:calc(var(--wheel-item) * 3);
    overflow-y:scroll;
    scroll-snap-type:y mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    text-align:center;
    padding:var(--wheel-item) 0;
    position:relative;
    z-index:1;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
    mask-image:linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
    outline:none;
}
.onb-wheel::-webkit-scrollbar{ display:none; width:0; height:0; }

.onb-wheel-row{
    height:var(--wheel-item);
    line-height:var(--wheel-item);
    font-family:var(--font-body);
    font-variant-numeric:tabular-nums;
    font-size:34px;
    font-weight:600;
    color:rgba(38,36,60,.18);
    scroll-snap-align:center;
    scroll-snap-stop:always;
    transition:color .18s ease, font-size .18s ease;
    cursor:pointer;
}
.onb-wheel-row.is-active{
    color:var(--deep);
    font-size:42px;
    font-weight:600;
}
.onb-wheel:focus-visible .onb-wheel-row.is-active{
    text-shadow:0 0 0 var(--lavender-strong);
}

.onb-wheel-sep{
    font-family:var(--font-body);
    font-size:36px;
    font-weight:600;
    color:var(--deep);
    line-height:1;
    padding-bottom:4px;
    z-index:1;
}

.onb-icon{
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--lavender-soft);
    border:1px solid var(--lavender-tint);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--lavender-strong);
    flex-shrink:0;
}

.onb-icon svg{width:20px;height:20px;}

.onb-icon-mini{width:36px;height:36px;}
.onb-icon-mini svg{width:18px;height:18px;}

/* VENUE AUTOCOMPLETE */

.venue-autocomplete{
    position:relative;
}

/* Overlay mode: when the venue input is focused, the search box is pinned
   to the very top of the viewport over a blurry backdrop so the suggestions
   appear directly under it without competing with the mobile keyboard or
   the rest of the page. Backdrop matches the alert-modal style. */
.venue-overlay-backdrop{
    position:fixed;
    inset:0;
    background:rgba(38,36,60,.36);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    z-index:200;
}
.venue-autocomplete.is-overlay .venue-overlay-backdrop{
    opacity:1;
    pointer-events:auto;
}
.venue-autocomplete.is-overlay .venue-search,
.venue-autocomplete.is-overlay .venue-suggest{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    width:min(calc(100vw - 24px), 460px);
    z-index:210;
}
.venue-autocomplete.is-overlay .venue-search{
    top:max(12px, calc(env(safe-area-inset-top, 0px) + 12px));
}
.venue-autocomplete.is-overlay .venue-suggest{
    top:calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 56px);
    margin-top:0;
    max-height:calc(100vh - 84px);
    max-height:calc(100dvh - 84px);
}
/* While the search box is pinned, leave a placeholder gap in the flow so
   the rest of step 6 doesn't jump up under the overlay. */
.venue-autocomplete.is-overlay::before{
    content:"";
    display:block;
    height:48px;
}
body.venue-search-active{ overflow:hidden; }

.venue-search{
    position:relative;
    background:var(--card);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    padding:0 14px 0 12px;
    height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:var(--shadow-card);
    transition:border-color .2s ease,box-shadow .2s ease;
}
/* The display:flex above wins over the UA [hidden]{display:none}
   rule, so hiding via the `hidden` attribute is silently ignored.
   Restore the expected behavior. */
.venue-search[hidden]{display:none;}
.venue-search:focus-within{
    border-color:var(--lavender);
    box-shadow:0 0 0 3px rgba(173,169,255,.16);
}
.venue-search.has-selection{
    border-color:var(--lavender-tint);
    background:var(--lavender-soft);
}

.venue-search-icon{
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--lavender-strong);
    flex-shrink:0;
}
.venue-search-icon svg{width:20px;height:20px;}

.venue-search-input{
    border:none;
    outline:none;
    background:transparent;
    flex:1;
    min-width:0;
    font-family:var(--font-body);
    font-size:15px;
    color:var(--deep);
    height:100%;
    text-align:start;
    direction:rtl;
}
.venue-search-input::placeholder{color:var(--subtle);}

.venue-search-clear,
.venue-selected-clear{
    width:24px;
    height:24px;
    border-radius:50%;
    background:transparent;
    border:none;
    color:var(--muted);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    padding:0;
    transition:background .15s ease,color .15s ease;
}
.venue-search-clear:hover,
.venue-selected-clear:hover{
    background:rgba(38,36,60,.05);
    color:var(--deep);
}
/* The buttons set display:flex, which beats the UA-default display:none
   that the [hidden] attribute relies on — restore it explicitly so the X
   actually disappears when the input isn't focused. */
.venue-search-clear[hidden],
.venue-selected-clear[hidden]{display:none;}
.venue-search-clear svg,
.venue-selected-clear svg{width:12px;height:12px;}

.venue-suggest{
    list-style:none;
    margin:6px 0 0;
    padding:6px;
    background:var(--card);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-card);
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-4px);
    transition:max-height .25s ease, opacity .2s ease, transform .25s ease;
    z-index:5;
    position:relative;
}
.venue-suggest.open{
    max-height:380px;
    overflow-y:auto;
    opacity:1;
    transform:translateY(0);
}

.venue-suggest-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 10px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    color:var(--deep);
    transition:background .15s ease;
}
.venue-suggest-item:hover,
.venue-suggest-item.active{
    background:var(--lavender-soft);
}
.venue-suggest-item + .venue-suggest-item{
    border-top:1px solid var(--hairline-soft);
    margin-top:2px;
    padding-top:12px;
}

/* Per-row cascade for autocomplete suggestions. Tuned to feel like a slide
   (opacity finishes well before transform) rather than the gentler scroll
   reveal on .task-reveal — for a dropdown the motion should read first
   and the fade second. Stagger is added by JS in section_onboarding.php. */
.venue-suggest-item.cascade-up{
    opacity:0;
    transform:translate3d(0,32px,0);
    transition:opacity .28s ease-out, transform .55s cubic-bezier(.2,.7,.1,1);
    will-change:opacity,transform;
}
.venue-suggest-item.cascade-up.in{
    opacity:1;
    transform:translate3d(0,0,0);
}
@media (prefers-reduced-motion:reduce){
    .venue-suggest-item.cascade-up,
    .venue-suggest-item.cascade-up.in{
        opacity:1;
        transform:none;
        transition:none;
    }
}

.venue-suggest-icon{
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--lavender-soft);
    color:var(--lavender-strong);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    overflow:hidden;
    position:relative;
}
.venue-suggest-icon .venue-suggest-fallback{width:18px;height:18px;}
.venue-suggest-logo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    background:var(--card);
}
.venue-suggest-logo.failed{display:none;}

.venue-suggest-text{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}
.venue-suggest-name{
    font-size:14px;
    font-weight:600;
    color:var(--deep);
    line-height:1.25;
}
.venue-suggest-name mark{
    background:transparent;
    color:var(--lavender-strong);
    font-weight:600;
}
.venue-suggest-sub{
    font-size:11.5px;
    color:var(--muted);
    letter-spacing:.2px;
}

.venue-suggest-empty{
    padding:14px 12px;
    color:var(--muted);
    font-size:13px;
    text-align:center;
}

/* SELECTED VENUE PILL (replaces input once chosen) */

.venue-selected{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
    min-width:0;
}
.venue-selected[hidden]{display:none;}

.venue-selected-icon{
    width:24px;
    height:24px;
    border-radius:50%;
    background:var(--lavender-strong);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.venue-selected-icon svg{width:14px;height:14px;}

.venue-selected-name{
    font-size:15px;
    font-weight:600;
    color:var(--lavender-deeper);
    line-height:1.3;
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* "OTHER" TOGGLE BUTTON */

.venue-other-toggle{
    margin-top:10px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 14px;
    background:transparent;
    border:1px dashed var(--lavender-tint);
    border-radius:var(--radius-md);
    color:var(--lavender-deeper);
    font-family:var(--font-body);
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.venue-other-toggle:hover{
    background:var(--lavender-soft);
    border-color:var(--lavender);
}
.venue-other-toggle.active{
    background:var(--lavender-soft);
    border-color:var(--lavender);
    border-style:solid;
}
.venue-other-toggle[hidden]{display:none;}
.venue-other-toggle-icon{
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--lavender-strong);
    flex-shrink:0;
}
.venue-other-toggle-icon svg{width:16px;height:16px;}

/* OTHER FIELDS */

.venue-other-fields{
    margin-top:12px;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, margin-top .25s ease;
}
.venue-other-fields.open{
    max-height:520px;
    opacity:1;
    margin-top:14px;
}

.venue-map-card{
    background:linear-gradient(150deg,var(--lavender-soft) 0%,#fff5e8 100%);
    border:1px solid var(--lavender-tint);
    border-radius:var(--radius-lg);
    padding:14px;
    margin-top:10px;
    position:relative;
    overflow:hidden;
}

.venue-map-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.venue-map-text{flex:1;min-width:0;}

.venue-map-title{
    font-family:var(--font-title);
    font-size:14px;
    font-weight:600;
    color:var(--deep);
    margin-bottom:2px;
}

.venue-map-sub{
    font-size:12px;
    color:var(--muted);
    line-height:1.45;
}

.venue-map-preview{
    margin-top:12px;
    height:120px;
    border-radius:var(--radius-md);
    background:
        repeating-linear-gradient(45deg, rgba(142,135,245,.08) 0px, rgba(142,135,245,.08) 1px, transparent 1px, transparent 14px),
        repeating-linear-gradient(-45deg, rgba(142,135,245,.05) 0px, rgba(142,135,245,.05) 1px, transparent 1px, transparent 14px),
        radial-gradient(circle at 30% 60%, rgba(173,169,255,.18) 0%, transparent 60%),
        radial-gradient(circle at 70% 30%, rgba(248,224,196,.22) 0%, transparent 60%),
        var(--card);
    border:1px dashed var(--lavender-tint);
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.venue-map-pin{
    width:36px;
    height:36px;
    color:var(--lavender-strong);
    opacity:.5;
    transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1);
    transform:translateY(-6px);
    filter:drop-shadow(0 4px 6px rgba(142,135,245,.25));
}
.venue-map-pin svg{width:100%;height:100%;}

.venue-map-preview.placed .venue-map-pin{
    opacity:1;
    transform:translateY(0);
    animation:pinDrop .8s cubic-bezier(.22,1.6,.36,1) 1;
}

@keyframes pinDrop{
    0%{transform:translateY(-30px) scale(.7);opacity:0;}
    60%{transform:translateY(2px) scale(1.05);opacity:1;}
    100%{transform:translateY(0) scale(1);opacity:1;}
}

/* ONBOARDING ACTIONS */

.onb-actions{
    margin:40px 16px 12px;
    max-width:1400px;
    text-align:center;
}
@media (min-width:1432px){
    .onb-actions{margin:40px auto 12px;}
}

.onb-cta{
    width:100%;
    position:relative;
    height:52px;
    padding:1.5px;
    border:none;
    border-radius:var(--radius-md);
    background:var(--lavender-strong);
    box-shadow:0 6px 18px rgba(142,135,245,.32);
    cursor:pointer;
    overflow:hidden;
    isolation:isolate;
    font-family:var(--font-body);
    transition:transform .12s ease,box-shadow .25s ease;
}
.onb-cta:hover{box-shadow:0 8px 22px rgba(142,135,245,.38);}
.onb-cta:active{transform:scale(.99);}

.onb-cta-glow{
    position:absolute;
    inset:-300%;
    background:conic-gradient(from 90deg at 50% 50%, var(--lavender-strong) 0%, #ddd6ff 45%, #f8e0c4 55%, var(--lavender-strong) 100%);
    animation:addBtnSpin 6s linear infinite;
    z-index:0;
    pointer-events:none;
}

.onb-cta-inner{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    border-radius:calc(var(--radius-md) - 1.5px);
    background:rgba(142,135,245,.94);
    backdrop-filter:blur(40px);
    -webkit-backdrop-filter:blur(40px);
    color:#fff;
    font-size:15px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    letter-spacing:.2px;
}
.onb-cta-inner svg{width:16px;height:16px;}

.onb-actions-foot{
    margin-top:10px;
    font-size:11.5px;
    color:var(--muted);
    letter-spacing:.3px;
}

/* Back button on the final summary — centered under the CTA so it
   reads as a quiet escape hatch rather than a competing action. */
.onb-back-final{
    margin:14px auto 0;
}

/* SUMMARY (step 5) */

.onb-summary{
    background:linear-gradient(180deg, var(--card) 0%, var(--lavender-soft) 100%);
    border:1px solid var(--lavender-tint);
    border-radius:var(--radius-lg);
    padding:18px 16px 14px;
    box-shadow:var(--shadow-card);
    overflow:hidden;
    position:relative;
    isolation:isolate;
}
.onb-summary::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(220px 140px at 100% 0%, rgba(248,224,196,.22) 0%, transparent 70%),
        radial-gradient(220px 140px at 0% 100%, rgba(173,169,255,.16) 0%, transparent 70%);
    pointer-events:none;
    z-index:0;
}
.onb-summary > *{position:relative;z-index:1;}

.onb-summary-couple{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:18px;
}

.onb-summary-partner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    flex:1;
    min-width:0;
}

.onb-summary-portrait{
    width:64px;
    height:64px;
    position:relative;
    color:var(--lavender-strong);
    flex-shrink:0;
}
.onb-summary-portrait .partner-halo{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 40%, rgba(173,169,255,.22) 0%, transparent 70%),
        radial-gradient(circle at 50% 60%, rgba(248,224,196,.28) 0%, transparent 72%);
    filter:blur(2px);
    z-index:0;
}
.onb-summary-portrait .partner-orbit{
    position:absolute;
    inset:4px;
    border-radius:50%;
    border:1px solid var(--lavender-tint);
    background:linear-gradient(180deg,#ffffff 0%,#faf8ff 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.7),
        0 4px 10px rgba(38,36,60,.04);
    z-index:1;
}
.onb-summary-portrait .partner-svg-wrap{
    position:absolute;
    inset:4px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    opacity:0;
    transform:scale(.85);
    transition:opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.onb-summary-portrait .partner-svg-wrap svg,
.onb-summary-portrait .partner-svg-wrap .figure-img{width:42px;height:42px;}
.onb-summary-portrait[data-gender="bride"] .partner-svg-bride{opacity:1;transform:scale(1);}
.onb-summary-portrait[data-gender="groom"] .partner-svg-groom{opacity:1;transform:scale(1);}

.onb-summary-portrait .partner-photo{
    inset:4px;
    z-index:3;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 3px 8px rgba(38,36,60,.10);
}
.onb-summary-portrait.has-photo .partner-svg-wrap{opacity:0 !important;}

.onb-summary-name{
    font-family:var(--font-title);
    font-size:14px;
    font-weight:600;
    color:var(--deep);
    line-height:1.2;
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:100%;
    letter-spacing:-.1px;
}
.onb-summary-name.is-empty{
    color:var(--subtle);
    font-weight:500;
    font-style:italic;
}

.onb-summary-heart{
    width:30px;
    height:30px;
    color:var(--lavender-strong);
    flex-shrink:0;
    align-self:center;
    margin-bottom:14px;
    opacity:.85;
    filter:drop-shadow(0 2px 6px rgba(142,135,245,.32));
    animation:onbHeartbeat 1.6s ease-in-out infinite;
}
.onb-summary-heart svg{width:100%;height:100%;}

@keyframes onbHeartbeat{
    0%,100%{transform:scale(1);}
    25%{transform:scale(1.12);}
    50%{transform:scale(.97);}
    75%{transform:scale(1.08);}
}

.onb-summary-list{
    display:flex;
    flex-direction:column;
    border-top:1px dashed var(--lavender-tint);
    padding-top:8px;
}

.onb-summary-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid var(--hairline-soft);
}
.onb-summary-row:last-child{border-bottom:none;}

.onb-summary-row .onb-icon{
    width:38px;
    height:38px;
}
.onb-summary-row .onb-icon svg{width:17px;height:17px;}

.onb-summary-row-text{
    flex:1;
    min-width:0;
}
.onb-summary-row-label{
    font-size:10.5px;
    font-weight:600;
    color:var(--lavender-deeper);
    letter-spacing:.6px;
    text-transform:uppercase;
    margin-bottom:2px;
    opacity:.85;
}
.onb-summary-row-value{
    font-size:14px;
    color:var(--deep);
    font-weight:600;
    line-height:1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.onb-summary-row-value.muted{
    color:var(--muted);
    font-weight:500;
    font-style:italic;
}

.onb-summary-row-edit{
    background:transparent;
    border:none;
    color:var(--lavender-strong);
    font-family:var(--font-body);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    padding:6px 10px;
    border-radius:var(--radius-sm);
    flex-shrink:0;
    transition:background .2s ease;
}
.onb-summary-row-edit:hover{background:var(--lavender-soft);}

@media (max-width:360px){
    .onb-summary-portrait{width:56px;height:56px;}
    .onb-summary-portrait .partner-svg-wrap svg{width:36px;height:36px;}
    .onb-summary-heart{width:24px;height:24px;}
    .onb-summary-name{font-size:13px;}
}

/* small-screen tightening */
@media (max-width:360px){
    .onb-title{font-size:20px;}
    .partner-portrait{width:84px;height:84px;}
    .partner-svg-wrap svg,
    .partner-svg-wrap .figure-img{width:54px;height:54px;}
    .pair-card{min-height:122px;padding:10px 6px 12px;gap:4px;}
    .pair-figure{width:34px;height:34px;}
    .pair-figure svg,
    .pair-figure .figure-img{width:32px;height:32px;}
    .pair-card-art{height:48px;}
    .pair-card-label{font-size:12px;}
    .pair-card-sub{font-size:10px;}
    .venue-search{height:44px;}
}

/* ============================================================
   DASHBOARD (yonso26/dashboard) — widget components
   Prefix .dash-, reuses tokens. Mirrors patterns from STYLEGUIDE
   §9 (cards) and §11 (bottom nav rhythm).
   ============================================================ */

/* SECTION HEADERS (eyebrow + title + link) ------------------- */
.dash-section{
    padding:8px var(--pad) 12px;
    max-width:1400px;
    margin:0 auto;
}
.dash-section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}
.dash-section-eyebrow{
    color:var(--lavender-deeper);
    letter-spacing:2.4px;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    opacity:.85;
    margin-bottom:2px;
}
.dash-section-title{
    font-family:'TelAviv Modernist',var(--font-title);
    color:var(--deep);
    font-weight:600;
    font-size:16px;
    letter-spacing:-.2px;
    line-height:1.2;
}
.dash-section-link{
    color:var(--lavender-strong);
    font-size:12.5px;
    font-weight:600;
    text-decoration:none;
    flex-shrink:0;
}

/* CARD CONTAINER (used by tasks + feed lists) --------------- */
.dash-card{
    margin:0 16px;
    background:var(--card);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    overflow:hidden;
    max-width:1400px;
}
@media (min-width:1432px){.dash-card{margin:0 auto;}}

/* PROGRESS RING ---------------------------------------------- */
.dash-ring-card{
    position:relative;
    margin:18px 16px 0;
    background:
        linear-gradient(135deg, #fffdf6 0%, #ffffff 55%, #fcfaff 100%);
    border:1px solid rgba(173,169,255,.18);
    border-radius:var(--radius-lg);
    box-shadow:
        0 1px 2px rgba(38,36,60,.03),
        0 12px 32px rgba(112,103,210,.07),
        inset 0 1px 0 rgba(255,255,255,.6);
    padding:22px 22px 24px;
    display:flex;
    align-items:center;
    gap:20px;
    max-width:1400px;
    overflow:hidden;
}
@media (min-width:1432px){.dash-ring-card{margin:18px auto 0;}}

/* card-level lavender ambient light, sitting behind the ring (right side in RTL) */
.dash-ring-aura{
    position:absolute;
    inset-block:-30%;
    inset-inline-start:-12%;
    width:62%;
    border-radius:50%;
    background:
        radial-gradient(closest-side,
            rgba(173,169,255,.20) 0%,
            rgba(173,169,255,.10) 40%,
            rgba(173,169,255,0)   75%);
    filter:blur(14px);
    pointer-events:none;
    z-index:0;
}

.dash-ring{
    position:relative;
    width:108px;
    height:108px;
    flex-shrink:0;
    z-index:1;
    isolation:isolate;
}

/* close-in halo bloom around the ring (frosted-glass glow) */
.dash-ring-glow{
    position:absolute;
    inset:-6px;
    border-radius:50%;
    background:
        radial-gradient(closest-side,
            rgba(157,149,240,.22) 0%,
            rgba(157,149,240,.10) 50%,
            rgba(157,149,240,0)   78%);
    filter:blur(5px);
    pointer-events:none;
    animation:dash-ring-breath 7s ease-in-out infinite;
    z-index:0;
}

.dash-ring svg{
    position:relative;
    transform:rotate(-90deg);
    overflow:visible;
    z-index:1;
}

.dash-ring-track{
    stroke:rgba(38,36,60,.055);
    stroke-width:4;
    fill:none;
}

.dash-ring-grad-start{stop-color:var(--lavender);}
.dash-ring-grad-mid  {stop-color:var(--lavender-strong);}
.dash-ring-grad-end  {stop-color:var(--lavender-deeper);}

.dash-ring-fill{
    stroke:url(#dashRingGrad);
    stroke-width:4.5;
    fill:none;
    stroke-linecap:round;
    stroke-dasharray:263.894;          /* 2π × 42 */
    stroke-dashoffset:263.894;
    filter:drop-shadow(0 0 3px rgba(142,135,245,.45));
    transition:stroke-dashoffset 1.8s cubic-bezier(.22,1,.36,1);
}
.dash-ring.in-view .dash-ring-fill{
    stroke-dashoffset:var(--ring-offset, 97.64);
}

/* faint inner rim — gives a glass / jewellery edge */
.dash-ring-inner{
    stroke:rgba(255,255,255,.85);
    stroke-width:.6;
    fill:none;
    opacity:.55;
}

.dash-ring-num{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:var(--deep);
    z-index:2;
    gap:2px;
}
.dash-ring-num strong{
    font-family:var(--font-num);
    font-style:italic;
    font-weight:400;
    font-size:32px;
    line-height:1;
    letter-spacing:.3px;
    color:var(--deep);
    display:inline-flex;
    align-items:baseline;
}
.dash-ring-num strong .num{font-size:1em;letter-spacing:.3px;}
.dash-ring-num strong .dash-ring-pct{
    font-family:var(--font-num);
    font-style:italic;
    font-weight:400;
    font-size:.5em;
    color:var(--lavender-deeper);
    margin-inline-start:2px;
    opacity:.85;
}
.dash-ring-num small{
    font-size:9px;
    color:var(--muted);
    text-transform:none;
    letter-spacing:.6px;
    margin-top:5px;
    font-weight:500;
    opacity:.72;
}

.dash-ring-text{flex:1;min-width:0;position:relative;z-index:1;}
.dash-ring-text h3{
    font-family:var(--font-title);
    font-size:16.5px;
    color:var(--deep);
    font-weight:600;
    margin-bottom:6px;
    letter-spacing:-.1px;
    line-height:1.25;
}
.dash-ring-text p{
    font-size:13px;
    color:var(--muted);
    line-height:1.6;
}

@keyframes dash-ring-breath{
    0%,100%{opacity:.78;transform:scale(.98);}
    50%    {opacity:1;  transform:scale(1.05);}
}

@media (prefers-reduced-motion:reduce){
    .dash-ring-glow{animation:none;}
    .dash-ring-fill{transition:none;}
}

/* mobile — keep the card balanced on narrow screens */
@media (max-width:360px){
    .dash-ring-card{padding:18px 16px 20px;gap:16px;}
    .dash-ring{width:96px;height:96px;}
    .dash-ring svg{width:96px;height:96px;}
    .dash-ring-num strong{font-size:28px;}
}

/* QUICK STATS ------------------------------------------------- */
.dash-stats{
    margin:14px 16px 0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    max-width:1400px;
}
@media (min-width:1432px){.dash-stats{margin:14px auto 0;}}
.dash-stat{
    background:var(--card);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    padding:12px 6px 14px;
    text-align:center;
}
.dash-stat-num{
    font-family:var(--font-num);
    font-style:italic;
    font-size:22px;
    color:var(--deep);
    line-height:1;
    letter-spacing:.4px;
}
.dash-stat-label{
    font-size:10.5px;
    color:var(--muted);
    font-weight:600;
    margin-top:5px;
    letter-spacing:.4px;
}
.dash-stat.is-attending .dash-stat-num{color:#5b8a3f;}
.dash-stat.is-pending  .dash-stat-num{color:#7268d3;}
.dash-stat.is-budget   .dash-stat-num{color:var(--lavender-strong);}
@media (max-width:360px){
    .dash-stat-num{font-size:19px;}
    .dash-stat-label{font-size:9.5px;}
}

/* DASH SUMMARY — tasks completed + total expenses ------------- */
/* DAYS-LEFT STRIP — slim days-only countdown between the hero and the stats */
.dash-days-left{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:8px;
    margin:18px var(--pad) 2px;
    max-width:1400px;
    color:var(--muted);
    font-family:'TelAviv Modernist',var(--font-title);
    font-size:13px;
    font-weight:500;
    letter-spacing:.4px;
    white-space:nowrap;
}
@media (min-width:1432px){.dash-days-left{margin:18px auto 2px;}}
.dash-days-left .ddl-num{
    color:var(--deep);
    font-family:var(--font-num);
    font-style:italic;
    font-weight:600;
    font-size:30px;
    line-height:1;
    letter-spacing:.3px;
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum";
}

.dash-summary{
    display:flex;
    align-items:stretch;
    margin:0 var(--pad) 6px;
    max-width:1400px;
}
@media (min-width:1432px){.dash-summary{margin:0 auto 6px;}}
.dash-summary-item{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px 6px 4px;
}
.dash-summary-item + .dash-summary-item{
    border-inline-start:1px solid var(--hairline-soft);
}
.dash-summary-stack{
    display:inline-flex;
    flex-direction:column;
    align-items:stretch;
    gap:5px;
}
.dash-summary-row{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:6px;
    color:var(--muted);
    font-size:12px;
    font-weight:500;
    line-height:1.3;
    white-space:nowrap;
}
.dash-summary-num{
    color:var(--deep);
    font-family:var(--font-num);
    font-style:italic;
    font-weight:600;
    font-size:24px;
    letter-spacing:.3px;
}
.dash-summary-num .num{font-size:1em;}
.dash-summary-num .cur{font-size:.58em;font-weight:400;}
.dash-summary-progress{
    height:2px;
    background:var(--hairline);
    border-radius:1px;
    overflow:hidden;
    direction:ltr;
}
.dash-summary-progress-fill{
    display:block;
    height:100%;
    width:0;
    border-radius:1px;
    background:linear-gradient(90deg,var(--lavender) 0%,var(--lavender-strong) 55%,var(--lavender-deeper) 100%);
    box-shadow:0 0 3px rgba(142,135,245,.45);
    transition:width 1.6s cubic-bezier(.22,1,.36,1);
}
.dash-summary.in .dash-summary-progress-fill{
    width:var(--progress,0%);
}
@media (max-width:360px){
    .dash-summary-row{font-size:11px;gap:5px;}
    .dash-summary-num{font-size:20px;}
}

/* QUICK ACTIONS ----------------------------------------------- */
.dash-actions{
    margin:18px 16px 0;
    display:flex;
    flex-direction:column;
    gap:8px;
    max-width:1400px;
}
@media (min-width:1432px){.dash-actions{margin:18px auto 0;}}
.dash-action{
    background:var(--lavender-soft);
    border:1px solid var(--lavender-tint);
    border-radius:var(--radius-lg);
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    cursor:pointer;
    text-decoration:none;
    color:var(--deep);
    transition:transform .12s ease,border-color .25s ease;
}
.dash-action:active{transform:scale(.98);}
.dash-action-left{
    display:flex;
    gap:12px;
    align-items:center;
    flex:1;
    min-width:0;
}
.dash-action-icon{
    width:38px;height:38px;border-radius:6px;
    background:var(--card);
    color:var(--lavender-strong);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.dash-action-icon svg{
    width:18px;height:18px;
    stroke:currentColor;fill:none;
    stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.dash-action-text{flex:1;min-width:0;}
.dash-action-title{
    font-family:var(--font-title);
    font-size:14px;
    color:var(--deep);
    font-weight:600;
    margin-bottom:2px;
    line-height:1.3;
}
.dash-action-sub{
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
}
.dash-action-link{
    color:var(--lavender-strong);
    font-weight:600;
    white-space:nowrap;
    font-size:12.5px;
    flex-shrink:0;
}

/* TOP-3 TASKS ------------------------------------------------- */
.dash-task-row{
    display:flex;
    gap:12px;
    align-items:center;
    padding:12px 16px;
    border-bottom:1px solid var(--hairline-soft);
    cursor:pointer;
    transition:background .15s ease;
}
.dash-task-row:last-child{border-bottom:none;}
.dash-task-row:active{background:var(--lavender-soft);}
.dash-task-check{
    width:22px;height:22px;
    border-radius:6px;
    border:1.6px solid var(--lavender-tint);
    background:var(--lavender-tint);
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    color:transparent;
    transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.dash-task-check svg{
    width:12px;height:12px;
    stroke:currentColor;stroke-width:2.2;fill:none;
    stroke-linecap:round;stroke-linejoin:round;
}
.dash-task-row.done .dash-task-check{
    background:var(--lavender-strong);
    border-color:var(--lavender-strong);
    color:#fff;
}
.dash-task-info{flex:1;min-width:0;}
.dash-task-title{
    font-family:var(--font-title);
    font-size:14.5px;
    color:var(--deep);
    font-weight:600;
    margin-bottom:2px;
    line-height:1.3;
}
.dash-task-row.done .dash-task-title{
    text-decoration:line-through;
    color:var(--muted);
}
.dash-task-meta{font-size:11.5px;color:var(--muted);}
.dash-pill{
    display:inline-block;
    padding:1px 6px;
    border-radius:var(--radius-sm);
    background:var(--lavender-soft);
    color:var(--lavender-deeper);
    font-weight:600;
    margin-inline-end:6px;
    letter-spacing:.2px;
    font-size:10.5px;
}
.dash-task-due{
    font-size:11px;
    font-weight:600;
    color:var(--lavender-deeper);
    flex-shrink:0;
    text-align:end;
}
.dash-task-due.is-soon{color:#b46b71;}

/* NOTIFICATION FEED ------------------------------------------ */
.dash-feed{
    display:flex;
    flex-direction:column;
}
.dash-feed-row{
    padding:11px 16px;
    border-bottom:1px solid var(--hairline-soft);
    display:flex;gap:12px;align-items:flex-start;
}
.dash-feed-row:last-child{border-bottom:none;}
.dash-feed-icon{
    width:32px;height:32px;
    border-radius:6px;
    background:var(--lavender-soft);
    color:var(--lavender-strong);
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    margin-top:1px;
}
.dash-feed-icon svg{
    width:14px;height:14px;
    stroke:currentColor;fill:none;
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.dash-feed-icon.is-attend {background:#eaf3df;color:#5b8a3f;}
.dash-feed-icon.is-pay    {background:#fdf2e1;color:#b78a3a;}
.dash-feed-icon.is-bless  {background:#f9e8ee;color:#b46b8c;}
.dash-feed-icon.is-guest  {background:#e3edf7;color:#4a7ab5;}
.dash-feed-icon.is-design {background:#ece4f6;color:#7e57a0;}
.dash-feed-icon.is-invite {background:#e0f2ef;color:#3d8b7a;}
.dash-feed-icon.is-setup  {background:#fef4e0;color:#c4932a;}
.dash-feed-text{flex:1;font-size:13px;color:var(--text);line-height:1.45;}
.dash-feed-text strong{color:var(--deep);font-weight:600;}
.dash-feed-time{
    font-size:11px;color:var(--muted);
    flex-shrink:0;
    margin-top:1px;
}

/* ===== ONBOARDING — PARTNER INVITE STEP ===== */

.onb-invite-card{
    padding:16px 18px 12px;
    display:flex;
    flex-direction:column;
    gap:14px;
}
/* The picker label is a full sentence with the user's email/phone in it,
   not a short field caption — render it as plain body copy, overriding
   the uppercase/purple treatment .onb-field-label uses elsewhere. */
.onb-invite-card [data-invite-picker-label]{
    text-transform:none;
    letter-spacing:0;
    font-size:14px;
    font-weight:600;
    color:var(--text);
    margin-bottom:4px;
}
.onb-invite-card > [hidden]{display:none !important;}
.onb-invite-identity{display:flex;flex-direction:column;gap:10px;}
.onb-invite-detected-text,
.onb-invite-target-text,
.onb-invite-target-both p,
.onb-invite-empty p{
    margin:0;
    font-size:14px;
    line-height:1.6;
    color:var(--text);
}
.onb-invite-detected{
    background:var(--lavender-soft);
    border-radius:var(--radius-md);
    padding:10px 12px;
}
.onb-invite-target{
    border-top:1px dashed var(--hairline);
    padding-top:12px;
}
.onb-invite-target-text .muted{color:var(--muted);font-size:12px;margin-inline-start:4px;}
.onb-invite-status{
    font-size:13px;
    color:var(--lavender-deeper);
    padding:6px 0 0;
}
.onb-invite-status.is-error{color:#b53b3b;}
.onb-next:disabled{opacity:.45;cursor:not-allowed;}

/* ============================================================================
   FULLSCREEN MENU OVERLAY (header.php)
   Triggered by .menu-btn in the topbar; same button morphs to an X while open.
   The overlay owns its own scroll so the page underneath stays locked.
   ============================================================================ */

/* Lock background scroll while the menu is open. Apply on <html> + <body>
   so iOS Safari can't keep momentum-scrolling the page behind. */
html.wp-menu-open,
body.wp-menu-open{
    overflow:hidden;
    touch-action:none;
}

/* Hide the fixed footer while the menu is open — the menu has its own
   navigation, so the bottom nav would just be redundant chrome poking
   through. Display:none also yanks it out of the tab order. */
body.wp-menu-open .bottom-nav{ display:none !important; }

/* The three hamburger bars morph into an X when the button has .is-open.
   Animating transform on the SVG paths gives a soft 200ms tween. */
.menu-btn svg path{
    transition:transform .22s cubic-bezier(.4,0,.2,1), opacity .15s ease;
    transform-origin:50% 50%;
    transform-box:fill-box;
}
.menu-btn.is-open svg path:nth-child(1){
    transform:translateY(5px) rotate(45deg);
}
.menu-btn.is-open svg path:nth-child(2){
    opacity:0;
    transform:scaleX(.2);
}
.menu-btn.is-open svg path:nth-child(3){
    transform:translateY(-5px) rotate(-45deg);
}
/* Keep the morphing X above the overlay so it stays tappable while open.
   The .topbar has its own stacking context (z-index:2), so we lift the
   whole topbar past the overlay while the menu is open — z-index on the
   button alone wouldn't escape the topbar's stacking context.
   Also paint it as white frosted glass so the logo + X chrome reads
   as a fixed bar over the menu content underneath. */
html.wp-menu-open .topbar{
    position:fixed;
    top:10px;
    left:12px;
    right:12px;
    max-width:none;
    margin:0;
    padding:6px 24px;
    min-height:auto;
    z-index:1002;
    border-radius:11px;
    background:rgba(255,255,255,.72);
    backdrop-filter:saturate(140%) blur(10px);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
    border:1.5px solid rgba(255,255,255,.8);
    box-shadow:0 2px 20px rgba(52,50,73,.08);
}
html.wp-menu-open .topbar .logo{height:22px;}
html.wp-menu-open .topbar .menu-btn{width:30px;height:30px;}
html.wp-menu-open .topbar .menu-btn svg{width:15px;height:15px;}
html.wp-menu-open .topbar .topbar-spacer{width:30px;height:30px;}
html.wp-menu-open .topbar .topbar-add,
html.wp-menu-open .topbar .topbar-search,
html.wp-menu-open .topbar .topbar-chat{width:30px;height:30px;}
html.wp-menu-open .topbar .topbar-add svg,
html.wp-menu-open .topbar .topbar-search svg,
html.wp-menu-open .topbar .topbar-chat svg{width:15px;height:15px;}
html.wp-menu-open .topbar .topbar-chat-badge{top:0;}

.wp-menu{
    position:fixed;
    inset:0;
    /* On mobile Chrome the URL bar collapses when the user scrolls up,
       briefly making the visual viewport taller than 100vh. inset:0
       chases that change one frame late and exposes the page underneath.
       min-height:100lvh pre-sizes the overlay to the URL-bar-collapsed
       (large) viewport from the start, so the gap can never appear. */
    min-height:100lvh;
    z-index:1000;
    /* No painted base — the ::before frosted layer supplies the glassy-white
       material, sampling the page underneath like the fixed top/bottom bars. */
    background:transparent;
    opacity:0;
    visibility:hidden;
    transition:opacity .24s ease, visibility 0s linear .24s;
    display:flex;
    flex-direction:column;
}
.wp-menu.open{
    opacity:1;
    visibility:visible;
    transition:opacity .24s ease, visibility 0s linear 0s;
}
/* Frosted glass over the page — same white-glass material as the floating
   topbar/sticky bars. Because .wp-menu is position:fixed and this ::before
   is absolutely positioned inside it, the glass also stays put while the
   items scroll — backdrop-filter keeps sampling the page underneath. */
.wp-menu::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.72);
    backdrop-filter:saturate(140%) blur(28px);
    -webkit-backdrop-filter:saturate(140%) blur(28px);
    pointer-events:none;
    z-index:0;
}

.wp-menu-scroll{
    flex:1;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    /* Vertical topbar offset is absorbed by .wp-menu-top so the hero photo
       can extend up behind the glass topbar without a fixed-pixel gap. */
    padding:0 24px calc(36px + env(safe-area-inset-bottom));
    max-width:1400px;
    margin:0 auto;
    width:100%;
    /* Above the .wp-menu::before frosted-glass layer. */
    position:relative;
    z-index:1;
}

/* ---- Top block: portraits + couple names + actions ---- */

.wp-menu-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    /* Edge-to-edge: cancel the parent's 24px horizontal padding so the
       hero photo bleeds to the screen edges, then restore the inner
       24px so the portraits + chips keep their content margin. The
       padding-top absorbs the topbar offset so the photo extends behind
       the glass topbar without a fixed-pixel gap. */
    margin-inline:-24px;
    /* Margin pushes the block past the topbar so the frosted topbar
       shows the menu's background through. */
    margin-top:calc(56px + env(safe-area-inset-top));
    padding:24px 24px 14px;
    background:transparent;
}

.wp-menu-portraits{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    position:relative;
}

.wp-menu-portrait{
    width:84px;
    height:84px;
    position:relative;
    color:var(--lavender-strong);
    flex-shrink:0;
    z-index:2;
}

.wp-menu-portrait-halo{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 40%, rgba(173,169,255,.24) 0%, transparent 70%),
        radial-gradient(circle at 50% 60%, rgba(248,224,196,.30) 0%, transparent 72%);
    filter:blur(2.5px);
    z-index:0;
}
.wp-menu-portrait-orbit{
    position:absolute;
    inset:4px;
    border-radius:50%;
    border:1px solid var(--lavender-tint);
    background:linear-gradient(180deg,#ffffff 0%,#faf8ff 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.7),
        0 4px 12px rgba(38,36,60,.05);
    z-index:1;
}
.wp-menu-portrait-fig{
    position:absolute;
    inset:4px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    opacity:0;
    transform:scale(.85);
    transition:opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.wp-menu-portrait-fig svg{width:54px;height:54px;color:currentColor;}
.wp-menu-portrait[data-gender="bride"] .wp-menu-portrait-fig-bride,
.wp-menu-portrait[data-gender="groom"] .wp-menu-portrait-fig-groom{
    opacity:1;transform:scale(1);
}
.wp-menu-portrait-photo{
    position:absolute;
    inset:4px;
    border-radius:50%;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    z-index:3;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 3px 8px rgba(38,36,60,.10);
}
.wp-menu-portrait.has-photo .wp-menu-portrait-fig{opacity:0 !important;}

.wp-menu-couple-names{
    font-family:var(--font-title);
    font-size:16px;
    font-weight:600;
    color:var(--deep);
    letter-spacing:-.2px;
    text-align:center;
}
.wp-menu-amp{
    color:var(--lavender-deeper);
    font-weight:400;
    font-family:var(--font-num);
    font-style:italic;
    margin:0 4px;
}

.wp-menu-top-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:4px;
}

.wp-menu-action{
    display:inline-flex;
    align-items:center;
    gap:7px;
    height:36px;
    padding:0 6px;
    border:0;
    background:none;
    color:var(--text);
    font-size:13px;
    font-weight:500;
    text-decoration:none;
    cursor:pointer;
    transition:color .15s ease, transform .12s ease;
}
.wp-menu-action:active{transform:scale(.97);}
.wp-menu-action svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0;
}
.wp-menu-action-logout{
    color:var(--lavender-deeper);
}

/* ---- Section dividers — text/logo flanked by hairlines ---- */

.wp-menu-divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:10px 0 6px;
}
.wp-menu-divider::before,
.wp-menu-divider::after{
    content:'';
    flex:1;
    height:1px;
    background:var(--hairline);
}
.wp-menu-divider > span{
    font-family:var(--font-title);
    font-weight:600;
    font-size:14px;
    color:var(--deep);
    letter-spacing:.2px;
    flex-shrink:0;
}
.wp-menu-divider-accent{color:var(--lavender-deeper);}
.wp-menu-divider-logo{margin-top:36px;}
.wp-menu-divider-logo-mark svg{
    height:22px;
    width:auto;
    display:block;
    opacity:.9;
}

/* ---- Link rows ---- */

.wp-menu-links{
    display:flex;
    flex-direction:column;
}
.wp-menu-links a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 4px;
    font-family:var(--font-body);
    font-size:15px;
    font-weight:500;
    color:var(--text);
    text-decoration:none;
    border-bottom:1px solid var(--hairline-soft);
    -webkit-tap-highlight-color:transparent;
    transition:color .15s ease, padding-inline-start .15s ease;
}
.wp-menu-links a:last-child{border-bottom:none;}
/* Paid-upgrade entry — subtle navy emphasis. */
.wp-menu-links a.wp-menu-link-upgrade{
    color:var(--deep);
}
.wp-menu-link-ico{
    width:20px;
    height:20px;
    stroke:var(--lavender-strong);
    fill:none;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0;
    opacity:.85;
}

.wp-menu-foot{height:24px;}

/* ---- Cascade-in: each row fades up one after another when the menu opens.
   JS marks every row (.wp-menu-top, dividers, individual links) with
   .wp-menu-row and a sequential --wp-menu-i; CSS reads that for the
   per-row transition-delay. On close, the .open class drops and rows
   snap back instantly (no exit transition is defined) while the overlay
   fades out as one block via the existing .wp-menu opacity transition. */
.wp-menu-row{
    opacity:0;
    transform:translateY(10px);
    will-change:opacity, transform;
}
.wp-menu.open .wp-menu-row{
    opacity:1;
    transform:translateY(0);
    transition:opacity .35s ease, transform .42s cubic-bezier(.22,1,.36,1);
    transition-delay:calc(90ms + var(--wp-menu-i, 0) * 28ms);
}

/* ── Toast ────────────────────────────────────────────────────────────── */
.wp-toast{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:51;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 24px;
    border-radius:0;
    background:var(--lavender-strong);
    font-family:var(--font-body);
    font-size:14px;
    font-weight:600;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    opacity:0;
    transform:translateY(-100%);
    animation:wp-toast-in .3s cubic-bezier(.22,1,.36,1) forwards;
}
.wp-toast.out{
    animation:wp-toast-out .25s ease forwards;
}
.wp-toast svg{
    width:16px;height:16px;
    flex-shrink:0;
}
.wp-toast-bar{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:3px;
    background:rgba(255,255,255,.25);
    z-index:2;
}
.wp-toast-bar::after{
    content:'';
    position:absolute;
    inset:0;
    background:#fff;
    transform-origin:right;
    animation:wp-toast-bar var(--wp-toast-dur, 2.4s) linear forwards;
}
.wp-toast.err{
    background:#c0392b;
}
.wp-toast.err .wp-toast-bar::after{
    background:#c0392b;
}
html.wp-toast-active .topbar{
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .15s ease;
}
@keyframes wp-toast-in{
    from{opacity:0;transform:translateY(-100%);}
    to{opacity:1;transform:translateY(0);}
}
@keyframes wp-toast-out{
    from{opacity:1;transform:translateY(0);}
    to{opacity:0;transform:translateY(-100%);}
}
@keyframes wp-toast-bar{
    from{transform:scaleX(0);}
    to{transform:scaleX(1);}
}

/* Reduce motion: skip the hamburger morph, overlay fade, and row cascade. */
@media (prefers-reduced-motion:reduce){
    .menu-btn svg path,
    .wp-menu,
    .wp-menu-portrait-fig,
    .wp-menu-row{transition:none !important;}
    .wp-menu-row{opacity:1 !important;transform:none !important;}
    .wp-toast{animation-duration:0s !important;}
}

/* ====================================================================
   EXPORT FORMAT PICKER — bottom sheet shown by window.wpExport.pick()
   (head.php). Lets the couple choose CSV or PDF before an export runs.
   Shared by the expenses + gifts ייצוא actions. */
.wp-export-sheet{
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}
.wp-export-backdrop{
    position:absolute;
    inset:0;
    background:rgba(38,36,60,.42);
    opacity:0;
    transition:opacity .24s ease;
}
.wp-export-sheet.open .wp-export-backdrop{opacity:1;}
.wp-export-card{
    position:relative;
    width:100%;
    max-width:460px;
    background:#fff;
    border-radius:22px 22px 0 0;
    padding:10px 18px calc(20px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 34px rgba(38,36,60,.20);
    transform:translateY(102%);
    transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.wp-export-sheet.open .wp-export-card{transform:translateY(0);}
.wp-export-grip{
    width:38px;height:4px;border-radius:4px;
    background:var(--hairline,#e6e3f0);
    margin:0 auto 12px;
}
.wp-export-title{
    font-size:14px;font-weight:700;color:var(--deep);
    text-align:center;margin-bottom:14px;
}
.wp-export-opt{
    display:flex;align-items:center;gap:13px;
    width:100%;
    border:1px solid var(--lavender-tint);
    background:var(--lavender-soft);
    border-radius:15px;
    padding:13px 14px;
    margin-bottom:10px;
    cursor:pointer;
    text-align:start;
    transition:transform .12s ease, background .15s ease;
}
.wp-export-opt:last-child{margin-bottom:0;}
.wp-export-opt:active{transform:scale(.985);background:var(--lavender-tint);}
.wp-export-ic{
    flex-shrink:0;
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    border-radius:11px;
    background:#fff;
    color:var(--lavender-strong);
}
.wp-export-ic svg{width:20px;height:20px;}
.wp-export-tx{display:flex;flex-direction:column;gap:2px;}
.wp-export-tx b{font-size:14px;font-weight:600;color:var(--deep);}
.wp-export-tx small{font-size:11.5px;color:var(--muted);}
@media (prefers-reduced-motion:reduce){
    .wp-export-card{transition:none;}
    .wp-export-backdrop{transition:none;}
}

/* INSPIRATION STRIP (השראה) — latest blog articles above the footer on
   every planner page: section head (title + blog link) over ONE card
   holding the three articles as columns (single shared frame instead of
   three small cards, so images/text get more width).
   Markup: includes/section_inspiration.php. */
.wp-inspo{padding-top:26px;}
.wp-inspo .dash-section-link{font-weight:400;}
.wp-inspo-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:14px;
    background:var(--card);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    padding:12px;
}
.wp-inspo-card{
    display:flex;
    flex-direction:column;
    gap:10px;
    text-decoration:none;
}
.wp-inspo-pic{
    display:block;
    width:100%;
    aspect-ratio:1/1;
    border-radius:var(--radius-sm);
    overflow:hidden;
    background:var(--lavender-tint);
}
.wp-inspo-pic img{width:100%;height:100%;object-fit:cover;display:block;}
.wp-inspo-title{
    font-size:13px;
    font-weight:400;
    color:var(--deep);
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    padding:0 2px 4px;
}
@media (min-width:700px){
    .wp-inspo-grid{gap:18px;}
    .wp-inspo-title{font-size:15px;}
}

/* bold->semibold element defaults */
b,strong,th,optgroup{font-weight:600;}

/* ============================================================================
   QUICK-NAV POPOVER — the "החתונה שלי" footer tab (footer.php).
   A vertical stack of frosted pills that springs up out of the heart tab,
   mirroring the topbar subnav links. The heart morphs into an X while open,
   and a frosted scrim dims the page while the bottom nav stays crisp on top.
   ============================================================================ */

/* Heart ⇄ X morph inside the footer tab. Both icons share the same 22px
   slot; the inactive one is rotated away and faded, FAB-style. */
.nav-ico{position:relative;width:22px;height:22px;flex-shrink:0;}
.nav-ico .icon{position:absolute;inset:0;transition:transform .34s cubic-bezier(.34,1.4,.44,1),opacity .18s ease;}
.nav-ico-x{opacity:0;transform:rotate(-90deg) scale(.55);}
.wp-quick-toggle.is-open{color:var(--lavender-deeper);}
.wp-quick-toggle.is-open .nav-ico-heart{opacity:0;transform:rotate(90deg) scale(.55);}
.wp-quick-toggle.is-open .nav-ico-x{opacity:1;transform:none;}

/* Lock the page while the popover is open (the stack scrolls itself if it
   ever has to), and lift the bottom nav above the scrim so the morphing X
   stays crisp and tappable. */
html.wp-quick-open,
body.wp-quick-open{overflow:hidden;}
body.wp-quick-open .bottom-nav{z-index:70;}

.wp-quick{position:fixed;inset:0;z-index:60;}

.wp-quick-scrim{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(38,36,60,.32),rgba(38,36,60,.14));
    -webkit-backdrop-filter:blur(14px) saturate(130%);
    backdrop-filter:blur(14px) saturate(130%);
    opacity:0;
    transition:opacity .3s ease;
}
.wp-quick.open .wp-quick-scrim{opacity:1;}

/* Anchored over the heart tab (rightmost in RTL). width:max-content makes
   every pill as wide as the longest label, so the stack reads as one card
   deck rather than a ragged cloud. */
.wp-quick-stack{
    position:absolute;
    right:18px;
    bottom:calc(92px + env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    gap:7px;
    width:max-content;
    min-width:186px;
}
/* Short viewports (landscape phones): let the stack scroll instead of
   running off the top. The spring overshoot gets clipped here, but only
   where the full stack could never fit anyway. */
@media (max-height:620px){
    .wp-quick-stack{
        max-height:calc(100vh - 128px);
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        padding:2px;
    }
    .wp-quick-stack::-webkit-scrollbar{display:none;}
}

/* Collapsed (base) state doubles as the exit animation: pills sink back
   toward the heart, top pill first (--qi counts from the top), so closing
   reads as the menu being sucked back into the tab. Same frosted-glass
   material as the .bottom-nav pill (fill/blur/inset border/shadow), layered
   over the scrim's own frost. */
.wp-quick-item{
    display:flex;
    align-items:center;
    gap:11px;
    padding:8px 13px 8px 22px;
    border-radius:12px;
    background:rgba(255,255,255,.78);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
    backdrop-filter:saturate(140%) blur(10px);
    box-shadow:
        inset 0 0 0 1.5px rgba(255,255,255,.8),
        0 2px 20px rgba(52,50,73,.1);
    /* Inactive rows match the footer's icon/label gray; the active row
       overrides to navy below. */
    color:#67637f;
    font-size:14.5px;
    font-weight:500;
    text-decoration:none;
    white-space:nowrap;
    will-change:transform,opacity;
    opacity:0;
    transform:translateY(calc(18px + var(--qr,0) * 11px)) scale(.85);
    transform-origin:100% 100%;
    transition:opacity .16s ease,transform .2s cubic-bezier(.5,0,.7,.4);
    transition-delay:calc(var(--qi,0) * 14ms);
}
/* RTL puts the icon chip on the right (13px edge padding); the wider 22px
   physical-left padding is the breathing room past the label text. */

/* Open: each pill springs up into place, nearest-to-the-heart first
   (--qr counts from the bottom), with a slight overshoot. */
.wp-quick.open .wp-quick-item{
    opacity:1;
    transform:none;
    transition:opacity .3s ease,transform .5s cubic-bezier(.32,1.44,.48,1);
    transition-delay:calc(30ms + var(--qr,0) * 34ms);
}
.wp-quick.open .wp-quick-item:active{
    transform:scale(.96);
    transition:transform .12s ease;
    transition-delay:0ms;
}

/* Bare icon (no chip square) in the footer's nav gray; a fixed slot keeps
   the labels aligned. */
.wp-quick-ico{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.wp-quick-ico svg{
    width:18px;
    height:18px;
    stroke:#67637f;
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Current page: same treatment as the footer's active tab — lavender icon
   and label at regular weight, chip left as-is. */
.wp-quick-item.is-active{color:var(--lavender-deeper);font-weight:400;}
.wp-quick-item.is-active .wp-quick-ico svg{stroke:var(--lavender-deeper);}

/* The paid-upgrade entry — subtle emphasis: navy label + icon instead of
   the section gray, nothing louder. */
.wp-quick-item.is-upgrade,
.wp-quick-item.is-upgrade.is-active{color:var(--deep);}
.wp-quick-item.is-upgrade .wp-quick-ico svg,
.wp-quick-item.is-upgrade.is-active .wp-quick-ico svg{stroke:var(--deep);}

@media (prefers-reduced-motion:reduce){
    .wp-quick-scrim,
    .wp-quick-item,
    .nav-ico .icon{transition:none !important;}
    .wp-quick.open .wp-quick-item{opacity:1;transform:none;}
}

/* ============================================================
   DESKTOP — the app renders as a centered phone-like column
   instead of stretching across the whole viewport. The fixed
   glass bars (stuck topbar, open-menu topbar, bottom nav, quick
   popover) cap to the same 680px column; the bottom-nav labels
   swap their vw sizing for a fixed cap once vw units grow.
   ============================================================ */
@media (min-width:560px){
    .nav-item{font-size:13px;}
}
@media (min-width:850px){
    .phone{max-width:680px;margin:0 auto;}
    .topbar.topbar-stuck,
    html.wp-menu-open .topbar{
        left:calc(50% - 340px);
        right:calc(50% - 340px);
    }
    .topbar-subnav.subnav-stuck{
        left:calc(50% - 340px);
        right:calc(50% - 340px);
    }
    .bottom-nav{
        left:calc(50% - 328px);
        right:calc(50% - 328px);
    }
    .wp-menu-scroll{max-width:680px;}
    .wp-quick-stack{right:calc(50% - 322px);}
}

/* ============================================================
   PAIR ROW — two stacks of blocks that read as one column on a
   phone and sit side by side once the desktop chrome takes over
   at 850px.

   Below the breakpoint BOTH wrapper levels are display:contents,
   so the children participate in the page exactly as they did
   before the wrapper existed — same DOM order, same margins, no
   mobile regression to reason about. Above it the outer wrapper
   becomes the grid and each column a flex stack; the children's
   own 16/20px side margins would then double up against the grid
   gap, so they're zeroed and the wrapper owns the gutters.
   ============================================================ */
.wp-pair,
.wp-pair-col{display:contents;}

@media (min-width:850px){
    .wp-pair{
        display:grid;
        grid-template-columns:1fr 1fr;
        align-items:start;
        gap:0 20px;
        max-width:1400px;
        margin:0 auto;
        padding:0 16px;
    }
    /* One column's worth of content (e.g. the dashboard's vendor-chat card
       when the couple has no threads yet) — full width rather than a
       half-empty row. */
    .wp-pair-solo{grid-template-columns:1fr;}
    /* Opt-in: two cards that read as a matched pair rather than two stacks
       of blocks, so the shorter one grows to the taller one's height. */
    .wp-pair-stretch{align-items:stretch;}
    .wp-pair-stretch .wp-pair-col > *{flex:1;}
    .wp-pair-col{
        display:flex;
        flex-direction:column;
        min-width:0;
    }
    /* Two classes deep on purpose: the blocks being paired are often styled
       from a page's own inline <style>, which the browser sees after this
       file, so a single-class reset here would lose the tie. Left as
       margin:auto a paired card also stops stretching — auto cross-axis
       margins beat align-self:stretch — and centres at its content width. */
    .wp-pair .wp-pair-col > *{
        margin-inline:0;
        max-width:none;
    }
    .wp-pair .wp-pair-col > .dash-section,
    .wp-pair .wp-pair-col > .filters,
    .wp-pair .wp-pair-col > .dash-days-left,
    .wp-pair .wp-pair-col > .dash-summary{padding-inline:0;}
}

/* ============================================================
   DESKTOP TYPE SCALE
   The sizes above are tuned for a 390px phone, where 11-14px body copy is
   right. Stretched into the desktop chrome's 1240px column the same text
   reads tiny beside the rest of the site, which runs 16px body / 18px names
   / 14.5px links (compare /category/331).

   Rather than hand-picking classes and missing three hundred, this block is
   generated from every rule in the app — this file plus each page's inline
   <style> — that sets a font-size of 14.5px or less. Metadata under 12px
   (badges, timestamps, eyebrows) goes up 1px; body copy from 12px up goes up
   2px. Regenerate the same way if the app's sizes move.

   Gated twice: html.wp-desktop-ua is stamped only by
   includes/site_header_desktop.php, which is emitted for desktop user agents
   only, and none of it exists below 850px. A phone is untouched. The class
   prefix also buys the specificity to beat a page's own inline <style>,
   which the browser sees after this file.
   ============================================================ */
@media (min-width:850px){
    html.wp-desktop-ua .hero-meta .dot, html.wp-desktop-ua .overline .dot{ font-size:9px; }
    html.wp-desktop-ua .dash-ring-num small{ font-size:10px; }
    html.wp-desktop-ua .tpl-tile-lock,
    html.wp-desktop-ua .wps-node-paid,
    html.wp-desktop-ua .wps-node-r2{ font-size:10.5px; }
    html.wp-desktop-ua .budget-pie-legend-num small,
    html.wp-desktop-ua .dash-section-eyebrow,
    html.wp-desktop-ua .gift-pie-legend-num small,
    html.wp-desktop-ua .wiz-preview-hero.is-mini .wiz-phone-loading,
    html.wp-desktop-ua .wiz-preview-sticky .wiz-phone-loading,
    html.wp-desktop-ua .wp-relation-add-btn,
    html.wp-desktop-ua .wps-node-extra{ font-size:11px; }
    html.wp-desktop-ua .acct-verify-chip,
    html.wp-desktop-ua .budget-pie-hint,
    html.wp-desktop-ua .dash-chat-time,
    html.wp-desktop-ua .dash-chat-unseen,
    html.wp-desktop-ua .dash-pill,
    html.wp-desktop-ua .dash-stat-label,
    html.wp-desktop-ua .gift-pie-hint,
    html.wp-desktop-ua .guests-pie-hint,
    html.wp-desktop-ua .onb-eyebrow,
    html.wp-desktop-ua .onb-summary-row-label,
    html.wp-desktop-ua .tpl-tile-sub,
    html.wp-desktop-ua .wiz-credit-chip,
    html.wp-desktop-ua .wp-task-row.doing .wp-task-title::after,
    html.wp-desktop-ua .wprv-chip,
    html.wp-desktop-ua .wps-lock-chip,
    html.wp-desktop-ua .wps-node-sent{ font-size:11.5px; }
    html.wp-desktop-ua .badge,
    html.wp-desktop-ua .budget-pie-total-label,
    html.wp-desktop-ua .dash-feed-time,
    html.wp-desktop-ua .dash-task-due,
    html.wp-desktop-ua .expense-amount small,
    html.wp-desktop-ua .gift-amount small,
    html.wp-desktop-ua .gift-pie-total-label,
    html.wp-desktop-ua .guests-pie-center-label,
    html.wp-desktop-ua .guests-pie-total-label,
    html.wp-desktop-ua .hero-countdown-line .hcl-prefix,
    html.wp-desktop-ua .hero-countdown-line .hcl-word,
    html.wp-desktop-ua .onb-card-foot,
    html.wp-desktop-ua .onb-field-error,
    html.wp-desktop-ua .onb-field-label,
    html.wp-desktop-ua .seating-edit-group-head,
    html.wp-desktop-ua .seating-edit-guest-where,
    html.wp-desktop-ua .seating-edit-seated-chip .seating-edit-guest-name,
    html.wp-desktop-ua .seating-list-guest-name,
    html.wp-desktop-ua .tpl-gallery-sub,
    html.wp-desktop-ua .tpl-group-count,
    html.wp-desktop-ua .wiz-cgr-doc-hint,
    html.wp-desktop-ua .wiz-cgr-poweredby,
    html.wp-desktop-ua .wiz-cgr-stagenote,
    html.wp-desktop-ua .wiz-tpl-name,
    html.wp-desktop-ua .wp-gift-ac-opt .wp-gift-ac-has,
    html.wp-desktop-ua .wp-guest-status-opt,
    html.wp-desktop-ua .wp-task-modal-card.doing .wp-task-modal-title::after,
    html.wp-desktop-ua .wp-task-modal-card.done .wp-task-modal-title::after,
    html.wp-desktop-ua .wp-task-modal-vendor-label,
    html.wp-desktop-ua .wplk-kind,
    html.wp-desktop-ua .wprv-date,
    html.wp-desktop-ua .wps-node-sub,
    html.wp-desktop-ua .wps-radio-sub,
    html.wp-desktop-ua .wpu-plan-chip,
    html.wp-desktop-ua .wpu-plan-vat{ font-size:12px; }
    html.wp-desktop-ua .b4-group-count,
    html.wp-desktop-ua .b4-group-sep,
    html.wp-desktop-ua .b4-row-group,
    html.wp-desktop-ua .dash-task-meta,
    html.wp-desktop-ua .gift-group-total,
    html.wp-desktop-ua .guest-card .budget-group-sep,
    html.wp-desktop-ua .guest-card .gift-group-sep,
    html.wp-desktop-ua .guest-group,
    html.wp-desktop-ua .guest-group-count,
    html.wp-desktop-ua .guest-group-sep,
    html.wp-desktop-ua .guest-status .guest-sub-att,
    html.wp-desktop-ua .invite-quick-label,
    html.wp-desktop-ua .onb-actions-foot,
    html.wp-desktop-ua .pair-card-sub,
    html.wp-desktop-ua .seating-edit-group-chip-count,
    html.wp-desktop-ua .tasks-overall-progress .dash-summary-label,
    html.wp-desktop-ua .venue-suggest-sub,
    html.wp-desktop-ua .wiz-cgr-err,
    html.wp-desktop-ua .wiz-cgr-terms,
    html.wp-desktop-ua .wiz-credit-ext,
    html.wp-desktop-ua .wiz-credit-status,
    html.wp-desktop-ua .wiz-credit-sub,
    html.wp-desktop-ua .wiz-row-sub,
    html.wp-desktop-ua .wp-budget-toggle-sub,
    html.wp-desktop-ua .wp-export-tx small,
    html.wp-desktop-ua .wp-newtask-cal-note,
    html.wp-desktop-ua .wp-newtask-hint,
    html.wp-desktop-ua .wp-task-modal-seg,
    html.wp-desktop-ua .wp-tasks-sep-count .dash-summary-label,
    html.wp-desktop-ua .wp-upsell-group,
    html.wp-desktop-ua .wpc-secure,
    html.wp-desktop-ua .wps-hint,
    html.wp-desktop-ua .wps-hint-link,
    html.wp-desktop-ua .wps-rsvplock-livehint{ font-size:12.5px; }
    html.wp-desktop-ua .seating-list-index{ font-size:13px; }
    html.wp-desktop-ua .b4-group-label,
    html.wp-desktop-ua .b4-sort-label,
    html.wp-desktop-ua .budget-group-label,
    html.wp-desktop-ua .budget-pie-legend-num,
    html.wp-desktop-ua .budget-sort-label,
    html.wp-desktop-ua .cta-sub,
    html.wp-desktop-ua .dash-action-sub,
    html.wp-desktop-ua .dash-card .wp-task-desc,
    html.wp-desktop-ua .dash-chat-prev,
    html.wp-desktop-ua .dash-summary-row,
    html.wp-desktop-ua .gift-group-label,
    html.wp-desktop-ua .gift-pie-legend-num,
    html.wp-desktop-ua .gift-sort-label,
    html.wp-desktop-ua .guest-group-label,
    html.wp-desktop-ua .guest-sort-label,
    html.wp-desktop-ua .guests-filter-chip,
    html.wp-desktop-ua .guests-filter-trigger,
    html.wp-desktop-ua .guests-pie-legend-num,
    html.wp-desktop-ua .guests-pie-total-num small,
    html.wp-desktop-ua .inv-field-hint,
    html.wp-desktop-ua .inv-gallery-empty,
    html.wp-desktop-ua .inv-gift-method-sub,
    html.wp-desktop-ua .invite-quick-chip,
    html.wp-desktop-ua .onb-crop-sub,
    html.wp-desktop-ua .onb-invite-target-text .muted,
    html.wp-desktop-ua .onb-photo-status,
    html.wp-desktop-ua .onb-summary-row-edit,
    html.wp-desktop-ua .seating-edit-group-count,
    html.wp-desktop-ua .venue-map-sub,
    html.wp-desktop-ua .wiz-cgp-later,
    html.wp-desktop-ua .wiz-cgr-disclose li,
    html.wp-desktop-ua .wiz-cgr-sec,
    html.wp-desktop-ua .wiz-credit-url,
    html.wp-desktop-ua .wiz-field-label,
    html.wp-desktop-ua .wiz-panel-sub,
    html.wp-desktop-ua .wiz-photo-add,
    html.wp-desktop-ua .wiz-photos-hint,
    html.wp-desktop-ua .wiz-upload-hint,
    html.wp-desktop-ua .wp-guest-modal-sub,
    html.wp-desktop-ua .wp-import-count,
    html.wp-desktop-ua .wp-import-preview .wp-import-map,
    html.wp-desktop-ua .wp-task-modal-pill,
    html.wp-desktop-ua .wp-task-row .wp-task-desc,
    html.wp-desktop-ua .wp-task-row .wp-task-note,
    html.wp-desktop-ua .wp-upsell-price,
    html.wp-desktop-ua .wpc-coupon-ok button,
    html.wp-desktop-ua .wpc-price span,
    html.wp-desktop-ua .wplk-sub,
    html.wp-desktop-ua .wps-fact small,
    html.wp-desktop-ua .wps-r2-teaser,
    html.wp-desktop-ua .wps-rsvplock-sub,
    html.wp-desktop-ua .wpu-contact-sub,
    html.wp-desktop-ua .wpu-plan-inc,
    html.wp-desktop-ua .wpu-plan-note{ font-size:14px; }
    html.wp-desktop-ua .acct-danger,
    html.wp-desktop-ua .acct-pic-btn,
    html.wp-desktop-ua .acct-profile-mail,
    html.wp-desktop-ua .budget-pie-legend-row,
    html.wp-desktop-ua .couple-edit-pair,
    html.wp-desktop-ua .cta-link,
    html.wp-desktop-ua .dash-action-link,
    html.wp-desktop-ua .dash-autopilot,
    html.wp-desktop-ua .dash-feed-note,
    html.wp-desktop-ua .dash-section-link,
    html.wp-desktop-ua .gift-pie-legend-row,
    html.wp-desktop-ua .guest-info .expense-cat,
    html.wp-desktop-ua .guest-info .gift-group,
    html.wp-desktop-ua .guest-sub,
    html.wp-desktop-ua .guests-pie-legend-row,
    html.wp-desktop-ua .guests-send-card-tllink,
    html.wp-desktop-ua .hero-countdown-line,
    html.wp-desktop-ua .hero-meta,
    html.wp-desktop-ua .hero-venue,
    html.wp-desktop-ua .overline,
    html.wp-desktop-ua .seating-edit-empty,
    html.wp-desktop-ua .seating-edit-group-chip,
    html.wp-desktop-ua .seating-edit-section-head,
    html.wp-desktop-ua .seating-modal-sub,
    html.wp-desktop-ua .tpl-tile-label,
    html.wp-desktop-ua .wiz-cgp-points li,
    html.wp-desktop-ua .wiz-cgr-doc-label,
    html.wp-desktop-ua .wiz-choice-sub,
    html.wp-desktop-ua .wiz-credit-btn,
    html.wp-desktop-ua .wiz-final-links a, html.wp-desktop-ua .wiz-final-links button,
    html.wp-desktop-ua .wiz-music-track,
    html.wp-desktop-ua .wp-decl-check-text,
    html.wp-desktop-ua .wp-decl-sub,
    html.wp-desktop-ua .wp-guest-form-msg,
    html.wp-desktop-ua .wp-hero-imgtoggle,
    html.wp-desktop-ua .wp-import-preview,
    html.wp-desktop-ua .wp-newtask-cal-btn,
    html.wp-desktop-ua .wp-newtask-cal-label,
    html.wp-desktop-ua .wp-upsell-sub,
    html.wp-desktop-ua .wpc-coupon-err,
    html.wp-desktop-ua .wprv-score,
    html.wp-desktop-ua .wprv-snippet,
    html.wp-desktop-ua .wps-modal-desc,
    html.wp-desktop-ua .wps-node-name,
    html.wp-desktop-ua .wps-rsvplock-select,
    html.wp-desktop-ua .wps-send-r2link,
    html.wp-desktop-ua .wps-sent-line{ font-size:14.5px; }
    html.wp-desktop-ua .acct-sheet-cancel,
    html.wp-desktop-ua .acct-sheet-sub,
    html.wp-desktop-ua .add-btn-inner,
    html.wp-desktop-ua .avatar,
    html.wp-desktop-ua .b4-empty,
    html.wp-desktop-ua .b4-row-ava,
    html.wp-desktop-ua .b4-row-msg,
    html.wp-desktop-ua .b4-row-signoff,
    html.wp-desktop-ua .b4-sort-select,
    html.wp-desktop-ua .budget-pie-tab,
    html.wp-desktop-ua .budget-sort-select,
    html.wp-desktop-ua .dash-chat-ava,
    html.wp-desktop-ua .dash-days-left,
    html.wp-desktop-ua .dash-feed-text,
    html.wp-desktop-ua .dash-nav-item,
    html.wp-desktop-ua .dash-quick-action,
    html.wp-desktop-ua .dash-ring-text p,
    html.wp-desktop-ua .expenses-empty,
    html.wp-desktop-ua .gift-group-total .num,
    html.wp-desktop-ua .gift-pie-tab,
    html.wp-desktop-ua .gift-sort-select,
    html.wp-desktop-ua .gifts-empty,
    html.wp-desktop-ua .guest-sort-select,
    html.wp-desktop-ua .guests-empty,
    html.wp-desktop-ua .guests-send-card-sub,
    html.wp-desktop-ua .hero-date,
    html.wp-desktop-ua .inv-field-label,
    html.wp-desktop-ua .inv-img-upload-text,
    html.wp-desktop-ua .inv-meal-num,
    html.wp-desktop-ua .inv-sheet-sub,
    html.wp-desktop-ua .inv-success-sub,
    html.wp-desktop-ua .inv-view-back,
    html.wp-desktop-ua .invite-bar-cancel,
    html.wp-desktop-ua .invite-bar-label,
    html.wp-desktop-ua .onb-back,
    html.wp-desktop-ua .onb-invite-status,
    html.wp-desktop-ua .onb-skip,
    html.wp-desktop-ua .onb-sub,
    html.wp-desktop-ua .seating-confirm-sub,
    html.wp-desktop-ua .seating-edit-delete,
    html.wp-desktop-ua .seating-list-empty,
    html.wp-desktop-ua .tab-action,
    html.wp-desktop-ua .tpl-back-link,
    html.wp-desktop-ua .venue-suggest-empty,
    html.wp-desktop-ua .wiz-fx-chip,
    html.wp-desktop-ua .wiz-intro-names .when,
    html.wp-desktop-ua .wiz-phone-loading,
    html.wp-desktop-ua .wiz-replace-btn,
    html.wp-desktop-ua .wp-budget-delete,
    html.wp-desktop-ua .wp-budget-modal-sub,
    html.wp-desktop-ua .wp-gfilter-clear,
    html.wp-desktop-ua .wp-gift-ac-empty,
    html.wp-desktop-ua .wp-guest-addmore-no,
    html.wp-desktop-ua .wp-guest-form-delete,
    html.wp-desktop-ua .wp-guest-invite-btn,
    html.wp-desktop-ua .wp-inspo-title,
    html.wp-desktop-ua .wp-mock-modal-sub,
    html.wp-desktop-ua .wp-newtask-mode,
    html.wp-desktop-ua .wp-relgrp-add-btn,
    html.wp-desktop-ua .wp-relgrp-empty,
    html.wp-desktop-ua .wp-task-modal-delete,
    html.wp-desktop-ua .wp-task-modal-link,
    html.wp-desktop-ua .wp-task-modal-note-edit-label,
    html.wp-desktop-ua .wp-task-modal-tip,
    html.wp-desktop-ua .wp-tasks-empty,
    html.wp-desktop-ua .wp-upsell-feat,
    html.wp-desktop-ua .wpc-back,
    html.wp-desktop-ua .wpc-coupon-ok,
    html.wp-desktop-ua .wpc-coupon-toggle,
    html.wp-desktop-ua .wpc-inc-item,
    html.wp-desktop-ua .wplk-empty-sub,
    html.wp-desktop-ua .wprv-empty-sub,
    html.wp-desktop-ua .wps-fact,
    html.wp-desktop-ua .wps-facts-title,
    html.wp-desktop-ua .wps-intro-sub,
    html.wp-desktop-ua .wps-r2-title,
    html.wp-desktop-ua .wps-send-confirm .wps-send-q,
    html.wp-desktop-ua .wps-send-confirm .wps-send-yes, html.wp-desktop-ua .wps-send-confirm .wps-send-no,
    html.wp-desktop-ua .wps-send-warn,
    html.wp-desktop-ua .wps-upgrade-item,
    html.wp-desktop-ua .wpu-contact-btn,
    html.wp-desktop-ua .wpu-count,
    html.wp-desktop-ua .wpu-feature,
    html.wp-desktop-ua .wpu-intro-sub,
    html.wp-desktop-ua .wpu-success-sub,
    html.wp-desktop-ua .wpu-terms-text{ font-size:15px; }
    html.wp-desktop-ua .acct-switch-label,
    html.wp-desktop-ua .prov-saved,
    html.wp-desktop-ua .venue-other-toggle,
    html.wp-desktop-ua .wiz-intro-row,
    html.wp-desktop-ua .wiz-row-title,
    html.wp-desktop-ua .wp-relgrp-item-input,
    html.wp-desktop-ua .wp-relgrp-item-name,
    html.wp-desktop-ua .wp-tasks-sep-count .dash-summary-num,
    html.wp-desktop-ua .wp-upsell-continue,
    html.wp-desktop-ua .wps-rsvplock-title{ font-size:15.5px; }
    html.wp-desktop-ua .acct-link-text,
    html.wp-desktop-ua .budget-pie-total-amount small,
    html.wp-desktop-ua .cta-title,
    html.wp-desktop-ua .dash-action-title,
    html.wp-desktop-ua .dash-chat-name,
    html.wp-desktop-ua .filters .count,
    html.wp-desktop-ua .filters .item,
    html.wp-desktop-ua .filters .label,
    html.wp-desktop-ua .gift-pie-total-amount small,
    html.wp-desktop-ua .inv-gift-msg,
    html.wp-desktop-ua .inv-preview-bgfx.fx-sparkles span,
    html.wp-desktop-ua .inv-seg label,
    html.wp-desktop-ua .onb-crop-cancel,
    html.wp-desktop-ua .onb-crop-save-inner,
    html.wp-desktop-ua .onb-crop-zoom,
    html.wp-desktop-ua .onb-invite-card [data-invite-picker-label],
    html.wp-desktop-ua .onb-invite-detected-text, html.wp-desktop-ua .onb-invite-target-text, html.wp-desktop-ua .onb-invite-target-both p, html.wp-desktop-ua .onb-invite-empty p,
    html.wp-desktop-ua .onb-modal-btn-inner,
    html.wp-desktop-ua .onb-modal-msg,
    html.wp-desktop-ua .onb-next-inner,
    html.wp-desktop-ua .onb-radio,
    html.wp-desktop-ua .onb-summary-name,
    html.wp-desktop-ua .onb-summary-row-value,
    html.wp-desktop-ua .pair-card-label,
    html.wp-desktop-ua .prov-vendor-selected-name,
    html.wp-desktop-ua .seating-confirm-cancel,
    html.wp-desktop-ua .seating-confirm-delete,
    html.wp-desktop-ua .seating-confirm-go,
    html.wp-desktop-ua .seating-edit-guest-name,
    html.wp-desktop-ua .seating-edit-search input,
    html.wp-desktop-ua .seating-edit-section-head .seating-edit-count,
    html.wp-desktop-ua .seating-list-count,
    html.wp-desktop-ua .tab,
    html.wp-desktop-ua .venue-map-title,
    html.wp-desktop-ua .venue-suggest-name,
    html.wp-desktop-ua .wiz-final-secondary,
    html.wp-desktop-ua .wiz-input,
    html.wp-desktop-ua .wp-budget-check,
    html.wp-desktop-ua .wp-budget-toggle-label,
    html.wp-desktop-ua .wp-decl-cancel,
    html.wp-desktop-ua .wp-desktop-hero .hero-venue,
    html.wp-desktop-ua .wp-export-title,
    html.wp-desktop-ua .wp-export-tx b,
    html.wp-desktop-ua .wp-gift-ac-opt,
    html.wp-desktop-ua .wp-gift-pay-opt,
    html.wp-desktop-ua .wp-guest-addmore-sub,
    html.wp-desktop-ua .wp-import-choice,
    html.wp-desktop-ua .wp-new-task-form textarea.onb-input,
    html.wp-desktop-ua .wp-relgrp-add-input,
    html.wp-desktop-ua .wp-status-btn,
    html.wp-desktop-ua .wp-task-modal-desc,
    html.wp-desktop-ua .wp-task-modal-note-edit textarea.onb-input,
    html.wp-desktop-ua .wp-task-modal-note-text,
    html.wp-desktop-ua .wp-toast,
    html.wp-desktop-ua .wpc-coupon-apply,
    html.wp-desktop-ua .wpc-coupon-row input,
    html.wp-desktop-ua .wps-send-btn,
    html.wp-desktop-ua .wps-upgrade-title,
    html.wp-desktop-ua .wpu-contact-title,
    html.wp-desktop-ua .wpu-features-title{ font-size:16px; }
    html.wp-desktop-ua .dash-card .wp-task-title,
    html.wp-desktop-ua .dash-task-title,
    html.wp-desktop-ua .expense-amount,
    html.wp-desktop-ua .hero-countdown-line .num,
    html.wp-desktop-ua .inv-sheet-guest,
    html.wp-desktop-ua .seating-list-name,
    html.wp-desktop-ua .wiz-panel-title,
    html.wp-desktop-ua .wp-task-modal-vendor-name,
    html.wp-desktop-ua .wp-task-row .wp-task-title{ font-size:16.5px; }
}

/* ------------------------------------------------------------
   …and the same step for the 15-18px band: page headings, card
   titles, buttons and form inputs. The generated block above stops at
   14.5px, which left every page except the dashboard with headings at their
   phone size while the dashboard's own .dash-section-title had been lifted to
   18px by hand — the two read as different pages at the same zoom.

   Decorative glyphs, icon/close buttons, avatar initials and the already-
   large numeric displays are excluded by name; anything already 19px+ reads
   as a heading on its own and is left alone.
   ------------------------------------------------------------ */
@media (min-width:850px){
    html.wp-desktop-ua .gift-amount,
    html.wp-desktop-ua .guests-send-cta,
    html.wp-desktop-ua .inv-field,
    html.wp-desktop-ua .inv-gift-method-label,
    html.wp-desktop-ua .onb-cta-inner,
    html.wp-desktop-ua .onb-input,
    html.wp-desktop-ua .search input,
    html.wp-desktop-ua .venue-search-input,
    html.wp-desktop-ua .venue-selected-name,
    html.wp-desktop-ua .wiz-upload-label,
    html.wp-desktop-ua .wp-decl-confirm,
    html.wp-desktop-ua .wp-inspo-title,
    html.wp-desktop-ua .wp-upsell-go,
    html.wp-desktop-ua .wplk-name,
    html.wp-desktop-ua .wprv-name,
    html.wp-desktop-ua .wps-send-btn.wps-upgrade-btn,
    html.wp-desktop-ua .wpu-plan-btn,
    html.wp-desktop-ua .wpu-plan-cap,
    html.wp-desktop-ua .wpu-success-btn{ font-size:17px; }
    html.wp-desktop-ua .wiz-choice-title{ font-size:17.5px; }
    html.wp-desktop-ua .b4-row-name,
    html.wp-desktop-ua .dash-section-title,
    html.wp-desktop-ua .guest-name,
    html.wp-desktop-ua .inv-submit,
    html.wp-desktop-ua .wp-guest-form textarea.onb-input,
    html.wp-desktop-ua .wp-guest-modal .onb-input,
    html.wp-desktop-ua .wp-relgrp-title,
    html.wp-desktop-ua .wp-tasks-sep-label,
    html.wp-desktop-ua .wpc-pay,
    html.wp-desktop-ua .wpc-plan-name,
    html.wp-desktop-ua .wplk-empty-title,
    html.wp-desktop-ua .wprv-empty-title,
    html.wp-desktop-ua .wps-form .onb-input{ font-size:18px; }
    html.wp-desktop-ua #wpcPriceWas,
    html.wp-desktop-ua .acct-profile-name,
    html.wp-desktop-ua .acct-sheet-title,
    html.wp-desktop-ua .dash-feed-modal-title,
    html.wp-desktop-ua .dash-ring-text h3,
    html.wp-desktop-ua .wp-decl-title{ font-size:18.5px; }
    html.wp-desktop-ua .guests-send-card-title,
    html.wp-desktop-ua .inv-success-title,
    html.wp-desktop-ua .onb-crop-title,
    html.wp-desktop-ua .onb-modal-title,
    html.wp-desktop-ua .tpl-group-title,
    html.wp-desktop-ua .wp-gfilter-modal-title,
    html.wp-desktop-ua .wp-mock-modal-title,
    html.wp-desktop-ua .wps-intro-title,
    html.wp-desktop-ua .wpu-intro-title,
    html.wp-desktop-ua .wpu-success-title{ font-size:19.5px; }
}