/* ──────────────────────────────────────────────────────────────────────
   DUPLICATE-SELECTOR NOTE
   This file accumulated duplicate single-class selectors during the
   chrome-design-system migration: the older block (lines ~1500-3100) was
   left in place when the new block (lines ~5500+) was added. Most
   duplicates are benign (additive properties), but some have silently
   fought in the cascade and broken UX:
     * .drag-handle            — old display:flex vs new display:none
     * .toggle-slider::before  — old transform:translateX vs new left
     * .surprise-badge         — old font-weight/color leaking into newer
   Each of those was deduplicated when its symptom was discovered.
   To audit:
       awk '/^\.[a-zA-Z][a-zA-Z0-9_-]*[[:space:]]*\{[[:space:]]*$/ { \
            gsub(/[[:space:]]*\{.*/, ""); print }' static/css/style.css \
         | sort | uniq -c | sort -rn | awk '$1 > 1'
   When deduplicating: keep the design-system block, delete the old block,
   leave a short note pointing future readers to the surviving definition.
   ────────────────────────────────────────────────────────────────────── */

/* Self-hosted Google Fonts (GDPR compliance — no external requests) */
/* latin-ext */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/dm-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-ext-italic.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/fraunces-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/fraunces-latin-ext-italic.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/fraunces-latin-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ════════════════════════════════════════════════════════════════
   Saturday Plans 2.0 — Design tokens
   ════════════════════════════════════════════════════════════════ */
:root {
    /* Surfaces (dark, default) */
    --wp-bg:        #15110f;
    --wp-bg-soft:   #1c1815;
    --wp-card:      #221d1a;
    --wp-card-2:    #2a2421;
    --wp-input:     #2a2421;
    --wp-line:      #332b27;
    --wp-line-soft: #2a2421;

    /* Ink */
    --wp-ink:       #efe5da;
    --wp-ink-2:     #d8ccbf;
    --wp-ink-3:     #9e8f81;
    --wp-ink-4:     #6b5e54;
    --wp-strike:    #594d44;

    /* Brand */
    --wp-rose:      #e8a3a8;
    --wp-rose-2:    #d28a90;
    --wp-rose-soft: #3a2728;
    --wp-rose-ink:  #2a1a1c;
    --wp-rose-text: #f0b3b8;   /* text on rose-soft */
    --wp-ink-on-pastel: #1f1812; /* legible against any palette swatch (avatars, chips) — pinned dark in both themes */

    /* User accents */
    --wp-james:     #d9c285;
    --wp-olivia:    #d28aa6;

    /* Status */
    --wp-success:   #8db481;
    --wp-warning:   #d6a85a;
    --wp-danger:    #c87878;

    /* Type */
    --wp-serif:  'Fraunces', 'Times New Roman', Georgia, serif;
    --wp-sans:   'DM Sans', system-ui, -apple-system, sans-serif;
    --wp-mono:   'JetBrains Mono', ui-monospace, Menlo, monospace;

    /* Radii */
    --wp-r-sm: 6px;
    --wp-r:    10px;
    --wp-r-lg: 14px;
    --wp-r-pill: 999px;

    /* Shadows */
    --wp-shadow-card:  0 1px 0 rgba(255,255,255,.02) inset, 0 12px 28px -16px rgba(0,0,0,.5);
    --wp-shadow-pop:   0 24px 48px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);

    /* Glass (sticky header) */
    --wp-glass: rgba(28, 26, 24, .85);

    /* RGB triplet of --wp-rose — used by rgba(...) inside legacy CSS rules
       that produce alpha-tinted shadows / backgrounds. Standalone token
       (not an alias). Re-targeted for light theme below. */
    --color-primary-rgb: 232, 163, 168;

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --radius: 0.5rem;
}

[data-theme="light"] {
    --wp-bg:        #f3ede4;
    --wp-bg-soft:   #ede6db;
    --wp-card:      #faf5ed;
    --wp-card-2:    #f5ede1;
    --wp-input:     #efe7d9;
    --wp-line:      #e1d6c4;
    --wp-line-soft: #ebe2d2;

    --wp-ink:       #1f1a16;
    --wp-ink-2:     #3d342c;
    --wp-ink-3:     #786b5e;
    --wp-ink-4:     #a59685;
    --wp-strike:    #8a7565;

    --wp-rose:      #b5636a;
    --wp-rose-2:    #964f55;
    --wp-rose-soft: #f2dfe0;
    --wp-rose-ink:  #ffffff;
    --wp-rose-text: #964f55;
    --wp-ink-on-pastel: #1f1812;

    --wp-james:     #a17e35;
    --wp-olivia:    #b04875;

    --wp-success:   #5a7a58;
    --wp-warning:   #946612;
    --wp-danger:    #b94a48;

    --wp-shadow-card:  0 1px 0 rgba(255,255,255,.6) inset, 0 12px 24px -18px rgba(60,40,20,.18);
    --wp-glass: rgba(243, 237, 228, .85);

    /* RGB triplet of --wp-rose retargeted for light theme. */
    --color-primary-rgb: 181, 99, 106;
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.16);
}

/* Backwards compat: the existing CSS used [data-theme="dark"] for dark
   overrides on top of light :root. The new system has dark in :root
   and light overrides under [data-theme="light"], so this block is now
   a no-op (keeps any inline JS that sets [data-theme="dark"] working). */
[data-theme="dark"] {
    /* tokens already match :root */
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--wp-sans);
    background-color: var(--wp-bg);
    color: var(--wp-ink);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    letter-spacing: -0.005em;
    position: relative;
    font-size: 15px;
}

h1, h2, h3 {
    font-family: 'Fraunces', Georgia, serif;
    letter-spacing: -0.02em;
}

.container {
    max-width: 40rem;
    margin: 0 auto;
    padding: var(--spacing);
    position: relative;
    z-index: 1;
}

/* ── Auth Page Wrapper ── */

.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 4rem);
    min-height: calc(100dvh - 4rem);
    padding: var(--spacing-xl) var(--spacing);
}

.auth-theme-toggle {
    position: absolute;
    top: var(--spacing);
    right: var(--spacing);
}

/* ── Login ── */

.login-container {
    max-width: 22rem;
    margin: var(--spacing-xl) auto;
    text-align: center;
    width: 100%;
}

.login-container h1 {
    font-style: italic;
    font-size: 2rem;
    margin-bottom: var(--spacing-xs);
    background: linear-gradient(135deg, var(--wp-ink), var(--wp-rose));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-tagline {
    color: var(--wp-ink-3);
    font-size: 0.9rem;
    margin: 0 0 var(--spacing-xl) 0;
    font-style: italic;
}

.login-container h2 {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
    font-weight: 500;
}

.login-form {
    background: var(--wp-card);
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--wp-line);
}

.login-form .btn-primary {
    width: 100%;
}

.auth-footer {
    text-align: center;
    margin-top: var(--spacing);
    font-size: 0.9rem;
    color: var(--wp-ink-3);
}

.auth-footer a {
    color: var(--wp-rose);
    text-decoration: none;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.forgot-password {
    text-align: right;
    margin-top: -0.25rem;
    margin-bottom: 0.75rem;
}

.forgot-password a {
    font-size: 0.85rem;
    color: var(--wp-ink-3);
    text-decoration: none;
    transition: color 0.15s;
}

.forgot-password a:hover {
    color: var(--wp-rose);
}

/* ── Forms ── */

.form-group {
    margin-bottom: var(--spacing);
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--spacing-sm) 0.75rem;
    background: var(--wp-input);
    border: 1px solid var(--wp-line);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: inherit;
    color: var(--wp-ink);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group textarea {
    overflow: hidden;
    resize: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--wp-rose);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}

.inline-form {
    margin-top: var(--spacing-sm);
    padding: var(--spacing);
    background: var(--wp-bg);
    border-radius: var(--radius);
}

/* ── Alerts ── */

.error {
    background: rgba(200,120,120,.10);
    color: var(--wp-danger);
    padding: var(--spacing-sm) var(--spacing);
    border-radius: var(--radius);
    margin-bottom: var(--spacing);
}

.success {
    background: rgba(141,180,129,.10);
    color: var(--wp-success);
    padding: var(--spacing-sm) var(--spacing);
    border-radius: var(--radius);
    margin-bottom: var(--spacing);
}

.alert {
    padding: var(--spacing-sm) var(--spacing);
    border-radius: var(--radius);
    margin-bottom: var(--spacing);
}

.alert-success {
    background: rgba(141,180,129,.10);
    color: var(--wp-success);
}

.alert-error {
    background: rgba(200,120,120,.10);
    color: var(--wp-danger);
}

/* Toast styling lives at the dedicated block lower in this file (search
   for "/* Per-step alternative status"); this section is intentionally
   empty to avoid two competing rule blocks with overlapping property
   ownership (cascade was leaking `opacity: 0`, `pointer-events: none`,
   and `font-weight: 500` from this block through to the active block). */

/* ── Landing Page ── */

.container:has(.landing-page) {
    max-width: none;
    padding: 0;
}

/* ── Landing Nav ── */

.landing-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing) var(--spacing-xl);
}

.landing-nav-brand {
    font-size: 1.25rem;
    font-weight: 600;
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
    color: inherit;
    text-decoration: none;
}

.landing-nav-brand:hover {
    color: var(--wp-rose);
}

.landing-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing);
}

.landing-nav-actions a {
    color: var(--wp-ink-3);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.15s;
}

.landing-nav-actions a:hover {
    color: var(--wp-rose);
}

.landing-nav-actions .btn-primary {
    color: var(--wp-card);
}

.landing-nav-actions .btn-primary:hover {
    color: var(--wp-card);
}

/* ── Hero ── */

.landing-hero {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    max-width: 76rem;
    margin: 0 auto;
    padding: 4rem;
    min-height: calc(100vh - 8rem);
    min-height: calc(100svh - 8rem);
    position: relative;
    overflow: hidden;
}

.hero-left {
    flex: 1;
    text-align: left;
}

.hero-right {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.demo-window {
    width: 100%;
    max-width: 52rem;
    border-radius: 0.75rem;
    border: 2px solid rgba(var(--color-primary-rgb), 0.25);
    background: var(--wp-card);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.demo-window-bar {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.6rem 0.875rem;
    background: var(--wp-input);
    border-bottom: 1px solid var(--wp-line);
}

.demo-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--wp-line);
}

.demo-dot:nth-child(1) { background: #ec6a5e; }
.demo-dot:nth-child(2) { background: #f4bf4f; }
.demo-dot:nth-child(3) { background: #61c554; }

.demo-window-url {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--wp-ink-3);
    background: var(--wp-bg);
    padding: 0.125rem 0.75rem;
    border-radius: 0.25rem;
    letter-spacing: 0.01em;
}

.hero-demo {
    display: block;
    width: 100%;
}

.demo-caption {
    text-align: center;
    color: var(--wp-ink-3);
    font-size: 0.8125rem;
    margin: var(--spacing) 0 0;
    font-style: italic;
}

.landing-page {
    position: relative;
    overflow: hidden;
}

.hero-gradient {
    position: absolute;
    top: -20%;
    left: -20%;
    right: -20%;
    bottom: -20%;
    pointer-events: none;
    z-index: 0;
    animation: gradientDrift 12s ease-in-out infinite alternate;
    background:
        radial-gradient(ellipse 60% 50% at 15% 30%, rgba(var(--color-primary-rgb), 0.2) 0%, transparent 70%),
        radial-gradient(ellipse 55% 45% at 85% 25%, rgba(201, 180, 148, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 50% 60%, rgba(var(--color-primary-rgb), 0.12) 0%, transparent 70%);
}

[data-theme="dark"] .hero-gradient {
    background:
        radial-gradient(ellipse 60% 50% at 15% 30%, rgba(var(--color-primary-rgb), 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 55% 45% at 85% 25%, rgba(120, 90, 60, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 50% 60%, rgba(var(--color-primary-rgb), 0.1) 0%, transparent 70%);
}

@keyframes gradientDrift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(5%, -3%) scale(1.05); }
}

.landing-page > *:not(.hero-gradient):not(.landing-journey) {
    position: relative;
    z-index: 1;
}

.floating-hearts {
    position: absolute;
    inset: 0;
    min-height: 100vh;
    min-height: 100dvh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.fh {
    position: absolute;
    color: var(--wp-rose);
    opacity: 0.18;
}

/* row 1: 0-10% */
.fh-1  { top: 3%;  left: 5%;   animation: fhDrift 7s ease-in-out infinite; }
.fh-2  { top: 6%;  right: 8%;  animation: fhDrift 9s ease-in-out 1.5s infinite; }
.fh-11 { top: 4%;  left: 28%;  animation: fhDrift 8s ease-in-out 2.2s infinite; }
/* row 2: 10-20% */
.fh-3  { top: 12%; left: 10%;  animation: fhDrift 8s ease-in-out 0.8s infinite; }
.fh-29 { top: 14%; right: 4%;  animation: fhDrift 6s ease-in-out 3s infinite; }
.fh-12 { top: 11%; right: 25%; animation: fhDrift 7s ease-in-out 0.6s infinite; }
/* row 3: 20-30% */
.fh-4  { top: 22%; right: 10%; animation: fhDrift 6s ease-in-out 2s infinite; }
.fh-14 { top: 25%; left: 18%;  animation: fhDrift 6.5s ease-in-out 1.2s infinite; }
.fh-17 { top: 20%; left: 4%;   animation: fhDrift 9s ease-in-out 2.8s infinite; }
/* row 4: 30-40% */
.fh-5  { top: 33%; left: 12%;  animation: fhDrift 10s ease-in-out 0.5s infinite; }
.fh-15 { top: 35%; right: 15%; animation: fhDrift 8.5s ease-in-out 4s infinite; }
.fh-16 { top: 38%; left: 30%;  animation: fhDrift 7.5s ease-in-out 0.9s infinite; }
/* row 5: 40-50% */
.fh-18 { top: 42%; left: 6%;   animation: fhDrift 6s ease-in-out 1.5s infinite; }
.fh-19 { top: 45%; right: 7%;  animation: fhDrift 10s ease-in-out 3.2s infinite; }
.fh-13 { top: 48%; right: 28%; animation: fhDrift 9.5s ease-in-out 3.5s infinite; }
/* row 6: 50-60% */
.fh-6  { top: 52%; right: 14%; animation: fhDrift 7s ease-in-out 3s infinite; }
.fh-20 { top: 55%; left: 8%;   animation: fhDrift 7s ease-in-out 0.4s infinite; }
.fh-21 { top: 58%; left: 25%;  animation: fhDrift 8s ease-in-out 2.6s infinite; }
/* row 7: 60-70% */
.fh-7  { top: 62%; left: 5%;   animation: fhDrift 8s ease-in-out 1s infinite; }
.fh-22 { top: 64%; right: 6%;  animation: fhDrift 9s ease-in-out 1.7s infinite; }
.fh-23 { top: 68%; right: 22%; animation: fhDrift 7.5s ease-in-out 3.8s infinite; }
/* row 8: 70-80% */
.fh-8  { top: 72%; right: 10%; animation: fhDrift 9s ease-in-out 2.5s infinite; }
.fh-24 { top: 75%; left: 15%;  animation: fhDrift 6.5s ease-in-out 0.7s infinite; }
.fh-25 { top: 78%; left: 3%;   animation: fhDrift 8s ease-in-out 2.1s infinite; }
/* row 9: 80-90% */
.fh-9  { top: 82%; left: 20%;  animation: fhDrift 7.5s ease-in-out 1.8s infinite; }
.fh-26 { top: 85%; right: 18%; animation: fhDrift 9.5s ease-in-out 1.3s infinite; }
.fh-27 { top: 88%; right: 5%;  animation: fhDrift 7s ease-in-out 4.2s infinite; }
/* row 10: 90-100% */
.fh-10 { top: 92%; right: 12%; animation: fhDrift 8.5s ease-in-out 0.3s infinite; }
.fh-28 { top: 94%; left: 8%;   animation: fhDrift 8.5s ease-in-out 0.2s infinite; }
.fh-30 { top: 96%; left: 28%;  animation: fhDrift 7.5s ease-in-out 1.9s infinite; }

@keyframes fhDrift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(8px, -18px) rotate(8deg); }
    50% { transform: translate(-6px, -8px) rotate(-5deg); }
    75% { transform: translate(4px, 12px) rotate(6deg); }
}

[data-theme="dark"] .fh { opacity: 0.10; }

@media (prefers-reduced-motion: reduce) {
    .fh { animation: none; }
    .hero-gradient { animation: none; }
}

@media print {
    .floating-hearts, .floating-hearts-defs { display: none; }
}


.landing-hero h1 {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 var(--spacing) 0;
    padding-bottom: 0.06em;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--wp-ink), var(--wp-rose));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landing-tagline {
    font-size: 1.25rem;
    color: var(--wp-ink-3);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
}

.hero-subtitle {
    color: var(--wp-ink-3);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 var(--spacing-lg) 0;
    max-width: 32rem;
}

.hero-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    margin-bottom: var(--spacing-xl);
}

.hero-feature {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.hero-feature::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wp-rose);
    flex-shrink: 0;
    position: relative;
    top: -1px;
}

.hero-feature strong {
    color: var(--wp-ink);
    white-space: nowrap;
}

.hero-feature span {
    color: var(--wp-ink-3);
}

.landing-secondary {
    margin-top: var(--spacing);
    font-size: 0.875rem;
}

.landing-secondary a {
    color: var(--wp-ink-3);
    text-decoration: none;
}

.landing-secondary a:hover {
    color: var(--wp-rose);
    text-decoration: underline;
}

.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.3);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.btn-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4);
}

/* ── Section Divider ── */

.landing-divider {
    border: none;
    height: 2px;
    max-width: 4rem;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, var(--wp-rose), transparent);
    opacity: 0.5;
}

/* ── Journey Section (Hook + How It Works) ── */

.landing-journey {
    position: relative;
    overflow: hidden;
    padding: 1.5rem var(--spacing) var(--spacing-xl);
    margin: 0 0 var(--spacing-xl) 0;
}

.landing-journey-bg {
    position: absolute;
    inset: -20px;
    background: url('/static/img/dinner-bg.webp') center/cover no-repeat;
    filter: blur(6px);
    z-index: 0;
}

.landing-journey-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(240, 236, 228, 0.82);
}

[data-theme="dark"] .landing-journey-bg::after {
    background: rgba(26, 24, 22, 0.82);
}

.landing-journey-inner {
    position: relative;
    z-index: 2;
}

.landing-journey .landing-hook {
    text-align: center;
    padding: 0 var(--spacing) var(--spacing-xl);
    max-width: 32rem;
    margin: 0 auto;
}

.hook-quote {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--wp-rose);
    margin: 0 0 3rem 0;
    line-height: 1.5;
    white-space: nowrap;
}

.hook-sub {
    color: var(--wp-ink-3);
    margin: 0;
    font-size: 0.9375rem;
}

/* ── Scroll Reveal for Journey Content ── */

.journey-reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.journey-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.landing-steps-title {
    text-align: center;
    margin: 0 0 var(--spacing-xl) 0;
}

/* ── Zigzag Steps Track ── */

.steps-track {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    max-width: 56rem;
    margin: 0 auto;
    position: relative;
    padding: var(--spacing-xl) 0;
}

/* Vertical center line */
.steps-track::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 2px dashed rgba(var(--color-primary-rgb), 0.35);
    transform: translateX(-1px);
}

.step {
    display: flex;
    align-items: center;
    width: 42%;
    position: relative;
    z-index: 1;
}

.step:nth-child(odd) {
    align-self: flex-start;
    padding-right: calc(var(--spacing-lg) + 1.125rem);
}

.step:nth-child(even) {
    align-self: flex-end;
    padding-left: calc(var(--spacing-lg) + 1.125rem);
}

.step-number {
    position: absolute;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--wp-rose);
    color: var(--wp-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    z-index: 2;
}

.step:nth-child(odd) .step-number {
    right: -1.125rem;
}

.step:nth-child(even) .step-number {
    left: -1.125rem;
}

/* Horizontal arms connecting badges to cards */

/* ── Frosted Glass Cards ── */

.step-card {
    position: relative;
    z-index: 1;
    background: rgba(248, 246, 240, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.step:hover .step-card {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: rgba(var(--color-primary-rgb), 0.4);
}

.step:hover .step-number {
    transform: scale(1.15);
    transition: transform 0.3s ease;
}


[data-theme="dark"] .step-card {
    background: rgba(37, 34, 32, 0.6);
}

.step-card h3 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 1rem;
    color: var(--wp-ink);
}

.step-card p {
    margin: 0;
    color: var(--wp-ink-3);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ── Steps Mobile (≤640px) ── */

@media (max-width: 640px) {
    .steps-track::before {
        display: none;
    }
    .step-number::before {
        display: none;
    }
    .step,
    .step:nth-child(odd),
    .step:nth-child(even) {
        width: 100%;
        align-self: center;
        padding-left: 0;
        padding-right: 0;
    }
    .step-number {
        position: static;
        margin: 0 auto var(--spacing-sm);
    }
    .step {
        flex-direction: column;
        text-align: center;
    }
}

/* ── Blog Section (Landing) ── */

.landing-blog-section {
    padding: var(--spacing-xl) 4rem var(--spacing-xl);
    margin-top: var(--spacing-xl);
    max-width: 76rem;
    margin-left: auto;
    margin-right: auto;
}

.landing-blog-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.landing-blog-header h2 {
    margin: 0 0 var(--spacing-sm) 0;
}

.landing-blog-subtitle {
    color: var(--wp-ink-3);
    margin: 0;
    font-size: 1.05rem;
}

.landing-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.landing-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--wp-card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--wp-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}

.landing-blog-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.landing-blog-card:hover h3 {
    color: var(--wp-rose);
}

.landing-blog-card-img {
    width: 100%;
    height: 11rem;
    object-fit: cover;
    display: block;
}

.landing-blog-card-body {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.landing-blog-card-body h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 1.1rem;
    transition: color 0.15s;
}

.landing-blog-card-body p {
    margin: 0 0 var(--spacing) 0;
    color: var(--wp-ink-3);
    font-size: 0.925rem;
    line-height: 1.5;
    flex: 1;
}

.landing-blog-card-cta {
    color: var(--wp-rose);
    font-weight: 500;
    font-size: 0.9rem;
}

.landing-blog-footer {
    text-align: center;
    margin-top: var(--spacing-xl);
}

.landing-blog-view-all {
    display: inline-block;
    color: var(--wp-rose);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.5rem 1.25rem;
    border: 1.5px solid var(--wp-rose);
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
}

.landing-blog-view-all:hover {
    background: var(--wp-rose);
    color: #fff;
}

.landing-blog-view-all span {
    display: inline-block;
    transition: transform 0.15s;
}

.landing-blog-view-all:hover span {
    transform: translateX(3px);
}

/* ── Closing CTA ── */

.landing-cta-section {
    text-align: center;
    padding: 3rem 4rem;
    max-width: 76rem;
    margin: var(--spacing-xl) auto var(--spacing-xl);
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--radius);
}

.landing-cta-section h2 {
    margin: 0 0 var(--spacing-sm) 0;
}

.landing-cta-section p {
    color: var(--wp-ink-3);
    margin: 0 0 var(--spacing-lg) 0;
}

/* ── Landing Plans Section ── */

.landing-plans-section {
    max-width: 76rem;
    margin: 0 auto;
    padding: var(--spacing-xl) 4rem;
}

.landing-plans-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.landing-plans-header h2 {
    margin: 0 0 var(--spacing-sm) 0;
}

.landing-plans-header p {
    color: var(--wp-ink-3);
    font-size: 1.05rem;
    margin: 0;
    line-height: 1.6;
}

.landing-plans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    max-width: 48rem;
    margin: 0 auto;
}

.landing-plan-card {
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--radius);
    padding: var(--spacing-xl) var(--spacing-lg);
    display: flex;
    flex-direction: column;
}

.landing-plan-card-featured {
    border-color: var(--wp-rose);
    box-shadow: 0 0 0 1px var(--wp-rose), 0 4px 20px rgba(var(--color-primary-rgb), 0.15);
}

.landing-plan-label {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.landing-plan-card-featured .landing-plan-label {
    color: var(--wp-rose);
}

.landing-plan-price {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.landing-plan-price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--wp-ink-3);
}

.landing-plan-subtitle {
    color: var(--wp-ink-3);
    font-size: 0.8125rem;
    margin: 0 0 var(--spacing-lg) 0;
}

.landing-plan-includes {
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--wp-ink);
}

.landing-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing) 0;
    flex: 1;
}

.landing-plan-features li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.landing-plan-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 0.75rem;
    height: 0.75rem;
    background: var(--wp-rose);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

.landing-plan-features-coming li {
    color: var(--wp-ink-3);
}

.landing-plan-features-coming li::before {
    opacity: 0.4;
}

.coming-soon {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp-rose);
    opacity: 0.7;
    margin-left: 0.25rem;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.landing-plan-cta {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: auto;
    padding: 0.625rem var(--spacing);
}

.landing-plan-current {
    display: block;
    text-align: center;
    margin-top: auto;
    padding: 0.625rem var(--spacing);
    color: var(--wp-ink-3);
    font-size: 0.875rem;
    font-weight: 500;
}

.landing-plans-footer {
    text-align: center;
    color: var(--wp-ink-3);
    font-size: 0.8125rem;
    margin-top: var(--spacing-lg);
}

/* ── Footer ── */

.landing-footer {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
    border-top: 1px solid var(--wp-line);
    color: var(--wp-ink-3);
    font-size: 0.875rem;
}

.landing-footer-brand {
    font-weight: 600;
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
    color: var(--wp-ink);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 1rem;
}

.landing-footer-nav {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing);
}

.landing-footer-nav a {
    color: var(--wp-ink-3);
    text-decoration: none;
    transition: color 0.15s;
}

.landing-footer-nav a:hover {
    color: var(--wp-rose);
}

.landing-footer-tagline {
    margin: 0;
    color: var(--wp-ink-3);
}

/* ── Blog Images ── */

.blog-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: var(--spacing) 0;
    display: block;
}

.blog-article .blog-img {
    width: min(48rem, calc(100vw - 2rem));
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.blog-img-hero {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ── Blog Page Layout ── */

.blog-page {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}

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


.container:has(.blog-page) {
    max-width: none;
    padding: 0;
}

.blog-page-header {
    text-align: center;
    max-width: 72rem;
    margin: 0 auto;
    padding: 2.5rem var(--spacing-xl) var(--spacing-lg);
}

.blog-page-header h1 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.blog-page-subtitle {
    color: var(--wp-ink-3);
    font-size: 1.125rem;
    margin: 0;
}

.blog-page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--spacing-xl) var(--spacing-xl);
}

.blog-card-bordered {
    border: 1px solid var(--wp-line);
    transition: transform 0.2s, box-shadow 0.2s;
}

.blog-card-bordered:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.blog-card-link {
    color: var(--wp-rose);
    text-decoration: none;
    font-size: 0.9rem;
}

.blog-card-link:hover {
    text-decoration: underline;
}

/* ── Blog Featured Card ── */

.blog-featured {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--spacing-xl) var(--spacing-xl);
}

.blog-card-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--wp-line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--wp-card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}

.blog-card-featured:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

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

.blog-card-featured-body {
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-card-featured-body h2 {
    font-size: 1.5rem;
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--wp-ink);
}

.blog-card-featured-body time {
    color: var(--wp-ink-3);
    font-size: 0.875rem;
}

.blog-card-featured-body .blog-reading-time {
    color: var(--wp-ink-3);
    font-size: 0.875rem;
    margin-left: var(--spacing-sm);
}

.blog-card-featured-body p {
    color: var(--wp-ink-3);
    margin: var(--spacing-sm) 0;
    line-height: 1.6;
}

.blog-card-featured-body .blog-card-link {
    color: var(--wp-rose);
    font-size: 0.9rem;
}

/* ── Blog Post Layout ── */

.blog-post-container {
    max-width: 42rem;
    margin: 0 auto;
    padding: 0 var(--spacing-xl) var(--spacing-xl);
}

.blog-breadcrumb {
    margin: 0 0 var(--spacing-lg) 0;
}

.blog-breadcrumb a {
    color: var(--wp-ink-3);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.15s;
}

.blog-breadcrumb a:hover {
    color: var(--wp-rose);
}

.blog-post-cta {
    text-align: center;
    padding: 2rem;
    margin-top: 3rem;
    background: var(--wp-rose-soft);
    border: 1px solid var(--wp-line);
    border-radius: var(--radius);
}

.blog-post-cta p {
    margin: 0 0 var(--spacing) 0;
    font-size: 1.1rem;
}

/* ── Blog Card Image ── */

.blog-card-img {
    width: 100%;
    height: 10rem;
    object-fit: cover;
    border-radius: var(--radius) var(--radius) 0 0;
    margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing) calc(-1 * var(--spacing-lg));
    width: calc(100% + 2 * var(--spacing-lg));
    display: block;
}

/* ── Blog ── */

.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing) 0;
}

.blog-header a {
    text-decoration: none;
    color: inherit;
}

.blog-header a:hover {
    color: var(--wp-rose);
}

.blog-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing);
}

.blog-list {
    display: grid;
    gap: var(--spacing-lg);
    max-width: 40rem;
}

.blog-card {
    background: var(--wp-card);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s;
}

.blog-card:hover {
    box-shadow: var(--shadow-md);
}

.blog-card h2,
.blog-card h3 {
    margin: 0 0 var(--spacing-sm) 0;
}

.blog-card h2 a,
.blog-card h3 a {
    color: inherit;
    text-decoration: none;
}

.blog-card h2 a:hover,
.blog-card h3 a:hover {
    color: var(--wp-rose);
}

.blog-card time {
    color: var(--wp-ink-3);
    font-size: 0.85rem;
}

.blog-card .blog-reading-time {
    display: inline-block;
    font-size: 0.85rem;
}

.blog-card p {
    margin: var(--spacing-sm) 0;
}

.blog-article {
    max-width: 40rem;
    margin: 0 auto;
    line-height: 1.7;
}

.blog-article h1 {
    margin-bottom: 0.5rem;
}

.blog-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 2rem;
}

.blog-meta-line {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--wp-ink-3);
    font-size: 0.85rem;
}

.blog-reading-time {
    color: var(--wp-ink-3);
    font-size: 0.85rem;
}

.blog-reading-time::before {
    content: "\00b7";
    margin-right: var(--spacing-sm);
}

.blog-updated {
    font-size: 0.85rem;
    color: var(--wp-rose);
    font-style: italic;
}

.blog-related {
    margin-top: 3rem;
    padding: 2rem var(--spacing-xl) var(--spacing-xl);
    border-top: 1px solid var(--wp-line);
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.blog-related h2 {
    margin: 0 0 var(--spacing-lg) 0;
    text-align: center;
}

.blog-related .blog-page-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
}

.blog-related .blog-card {
    display: flex;
    flex-direction: column;
}

.blog-related .blog-card p {
    flex: 1;
}

.blog-related .blog-card-link {
    margin-top: auto;
}


.blog-article p {
    margin-bottom: 1.25rem;
}

.blog-article h2,
.blog-article h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.blog-article blockquote {
    border-left: 3px solid var(--wp-rose);
    padding-left: 1rem;
    color: var(--wp-ink-3);
    margin: 1.25rem 0;
}

.blog-cta {
    text-align: center;
    padding: 2rem;
    margin-top: 3rem;
    background: var(--wp-rose-soft);
    border-radius: var(--radius);
}

.blog-cta p {
    margin: 0 0 var(--spacing) 0;
    font-size: 1.1rem;
}

/* ── Turn Indicator ── */

.turn-indicator {
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.turn-indicator h2 {
    margin: 0 0 var(--spacing-sm) 0;
}

.turn-indicator p {
    margin: 0;
    color: var(--wp-ink-3);
    font-weight: 300;
}

.turn-indicator.your-turn {
    background: var(--wp-card-2);
    border: 1px solid var(--wp-line);
}

.turn-indicator.waiting {
    background: var(--wp-card-2);
    border: 1px solid var(--wp-line);
}

.pick-form {
    background: var(--wp-card);
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.empty-state {
    text-align: center;
    color: var(--wp-ink-3);
    padding: var(--spacing-xl);
    font-weight: 300;
}

/* ── Planned Weekend (main dashboard card) ── */

.planned-weekend {
    background: var(--wp-card);
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border-left: 5px solid var(--picker-color, var(--wp-line));
}

.planned-weekend-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.planned-by {
    margin: 0.25rem 0 var(--spacing-lg) 0;
    font-size: 0.875rem;
    color: var(--wp-ink-3);
    font-style: italic;
}

/* ── Plan Actions (Extend / Move) ── */

.plan-actions {
    margin: var(--spacing-sm) 0 var(--spacing);
}

.extension-notice {
    background: var(--wp-card-2);
    padding: var(--spacing-sm) var(--spacing);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-sm);
    font-size: 0.875rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.extension-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.extension-switch {
    font-size: 0.75rem;
    color: var(--wp-ink-3);
}

.your-turn-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing);
}

.plan-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing);
    flex-wrap: wrap;
}

.extend-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--wp-input);
    border: 1px solid var(--wp-line);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--wp-ink);
}

/* ── Plan Tabs ── */

.plan-tabs {
    display: flex;
    gap: 0;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}

.plan-tab {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--wp-line);
    border-bottom: 1px solid var(--wp-line);
    background: var(--wp-bg);
    border-radius: var(--radius) var(--radius) 0 0;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wp-ink-3);
    margin-right: var(--spacing-xs);
}

.plan-tab.active {
    background: var(--wp-card);
    border-bottom-color: var(--wp-card);
    color: var(--wp-ink);
}

.plan-tab:hover:not(.active) {
    background: var(--wp-card);
    color: var(--wp-ink);
}

.plan-tab-add {
    border-style: dashed;
    color: var(--wp-ink-3);
    font-weight: 400;
}

.plan-tab-add.active {
    border-style: dashed;
    border-bottom-color: var(--wp-card);
}

/* ── Plan Panel ── */

/* No border — the parent card already provides the visual frame, and
   each .activity-item carries its own border. The old `border + border-
   radius 0 r r r` pattern was meant to tab into an active plan-tab
   above (browser-tab style), but the plan tabs are pill-shaped in this
   design and don't visually connect to the panel. On the partner view
   there are no plan tabs at all, so the inner border was pure noise.
   Horizontal padding is also zero so the toggle + activity rows align
   on the same X as the heading, subtitle, and Plan A tab — without
   the border, the old `padding: var(--spacing)` was indenting children
   for no visual reason. Vertical padding stays for breathing room
   between the tabs above and the toggle/list below. */
.plan-panel {
    padding: var(--spacing) 0;
    margin-bottom: var(--spacing);
}

/* ── Activity List ── */

.activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.activity-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing);
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--radius);
    transition: box-shadow 0.15s, transform 0.15s;
}

.activity-item > .inline-form {
    flex-basis: 100%;
}

.activity-item-content {
    flex: 1;
    min-width: 0;
}

/* ── Drag & Drop ── */

.drag-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing);
    opacity: 0;
    transition: opacity 0.15s;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    z-index: 2;
}

.drag-handle::before {
    content: '';
    display: block;
    width: 4px;
    height: 1.25rem;
    background-image: radial-gradient(circle, var(--wp-ink-3) 1px, transparent 1px);
    background-size: 4px 4px;
    background-repeat: repeat;
}

.activity-item:hover .drag-handle {
    opacity: 0.5;
}

.activity-item:hover .drag-handle:hover {
    opacity: 1;
}

.drag-handle:active {
    cursor: grabbing;
}

.sortable-ghost {
    opacity: 0.4;
    border: 2px dashed var(--wp-rose);
    background: var(--wp-rose-soft);
}

.sortable-chosen {
    box-shadow: var(--shadow-md);
    transform: scale(1.02);
}

.activity-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.activity-details strong {
    font-weight: 500;
    font-size: 1.05rem;
}

.notes {
    white-space: pre-line;
}

.activity-details .notes {
    margin: 0;
    color: var(--wp-ink-3);
    font-size: 0.875rem;
}

.activity-menu {
    position: relative;
    align-self: flex-start;
    flex-shrink: 0;
    margin-left: auto;
}

/* base .btn-icon / .btn-kebab live in the wp-* design system block below */

.activity-item:hover .btn-kebab,
.kebab-dropdown.open + .btn-kebab,
.activity-menu:has(.kebab-dropdown.open) .btn-kebab {
    opacity: 1;
}

.kebab-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10;
    min-width: 8rem;
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 0.25rem 0;
}

.kebab-dropdown.drop-up {
    top: auto;
    bottom: 100%;
}

.kebab-dropdown.open {
    display: block;
}

.kebab-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    min-height: 2.75rem;
    border: none;
    background: transparent;
    color: var(--wp-ink);
    font-size: 0.875rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}

.kebab-item:hover {
    background: var(--wp-input);
}

.kebab-item-danger {
    color: var(--wp-danger);
}

.kebab-item-danger:hover {
    background: rgba(200,120,120,.10);
}

/* ── Add Activity ── */

.add-activity {
    margin-top: var(--spacing);
}

/* base .btn-and lives in the wp-* design system block below */

.btn-new-group {
    display: block;
    background: none;
    color: var(--wp-ink-3);
    border: 2px dashed var(--wp-line);
    width: 100%;
    padding: var(--spacing-sm);
    margin-top: var(--spacing);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius);
    transition: all 0.15s;
    letter-spacing: 0.02em;
}

.btn-new-group:hover {
    color: var(--wp-rose);
    border-color: var(--wp-rose);
    background: var(--wp-rose-soft);
}



/* ── Per-Step Alternatives ── */

.alternative-item {
    flex-basis: 100%;
    /* Paired with the pre-emptive :has() opacity override above — keeps the
       un-fade smooth if/when root-level opacity is added to alt items. */
    transition: opacity .12s ease;
}

.alt-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.375rem 0 0.25rem;
}

.alt-divider::before,
.alt-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--wp-line);
    opacity: 0.5;
}

.alt-divider span {
    color: var(--wp-ink-3);
    font-size: 0.7rem;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.alt-content {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.alt-content .activity-details {
    flex: 1;
    min-width: 0;
}

.alt-content .activity-menu {
    flex-shrink: 0;
}

.alternative-item .inline-form {
    margin-top: 0.25rem;
}


/* ── History ── */

/* Month Accordion */
.month-accordion {
    margin-bottom: var(--spacing-sm);
}

.month-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing);
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--wp-ink);
    transition: background-color 0.15s;
}

.month-header:hover {
    background: var(--wp-bg);
}

.month-header .chevron {
    transition: transform 0.2s;
    flex-shrink: 0;
}

.month-header.expanded .chevron {
    transform: rotate(90deg);
}



/* ── Ideas ── */

.ideas-list {
    margin-bottom: var(--spacing);
}


.ideas-hint {
    margin-top: var(--spacing);
    text-align: center;
    font-size: 0.875rem;
}

.ideas-hint a {
    color: var(--wp-ink-3);
    text-decoration: none;
}

.ideas-hint a:hover {
    color: var(--wp-rose);
    text-decoration: underline;
}

/* ── Profile: Color Picker ── */

.color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.color-swatch {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid var(--wp-line);
    cursor: pointer;
    font-size: 1rem;
    line-height: 3rem;
    text-align: center;
    padding: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}

.color-swatch:hover:not(.taken) {
    transform: scale(1.15);
}

.color-swatch.selected {
    border: 3px solid var(--wp-ink);
    box-shadow: 0 0 0 2px var(--wp-card), 0 0 0 4px var(--wp-ink);
}

.color-swatch.taken {
    opacity: 0.35;
    cursor: not-allowed;
}

.color-swatch-none {
    background: var(--wp-bg);
    color: var(--wp-ink-3);
    font-size: 0.875rem;
    line-height: 3rem;
}

/* ── Movie Night ── */

.planned-movie {
    position: relative;
    background: var(--wp-card);
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border-left: 5px solid var(--picker-color, var(--wp-line));
}
.planned-movie > .activity-menu {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
}


/* SVG-visibility utility for the theme toggle button — referenced by
   both the wp-header partial (authenticated pages) and the public landing /
   blog nav. */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: inline-block; }

[data-theme="dark"] .theme-icon-sun { display: inline-block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

/* ── Select Inputs ── */

.form-group select {
    width: 100%;
    padding: var(--spacing-sm);
    background: var(--wp-input);
    border: 1px solid var(--wp-line);
    border-radius: var(--radius);
    font-size: 1rem;
    color: var(--wp-ink);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8078' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
    cursor: pointer;
}

.form-group select:focus {
    outline: none;
    border-color: var(--wp-rose);
}

[data-theme="dark"] .form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23968a7e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* ── Confirm Modal ── */

.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: confirmFadeIn 0.15s ease;
}

@keyframes confirmFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.confirm-dialog {
    background: var(--wp-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
    max-width: 22rem;
    width: calc(100% - 2rem);
    animation: confirmSlideIn 0.15s ease;
}

@keyframes confirmSlideIn {
    from { transform: translateY(-0.5rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.confirm-message {
    margin: 0 0 var(--spacing-lg) 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--wp-ink);
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.confirm-actions .btn {
    min-width: 5rem;
    text-align: center;
}

/* ── Form Modal ── */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.15s ease;
}

.modal-dialog {
    background: var(--wp-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-lg);
    max-width: 28rem;
    width: calc(100% - 2rem);
    animation: slideIn 0.15s ease;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing);
}

.modal-title {
    margin: 0;
    font-size: 1.1rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--wp-ink-3);
    padding: 0 0.25rem;
    transition: color 0.15s;
}

.modal-close:hover {
    color: var(--wp-ink);
}

.modal-body .inline-form {
    margin: 0;
    padding: 0;
    background: none;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing);
}

/* ── Pick Status ── */

/* ── Parent pick status styling ── */
.activity-item.activity-completed {
    border-left: 1px solid var(--wp-line);
    opacity: 0.7;
}
/* When the kebab dropdown is open on a completed item, restore opacity to 1.
   The 0.7 above creates a new stacking context; without this override the
   next sibling completed item (also a stacking context) paints OVER the
   absolute-positioned popover regardless of its z-index, and the popover
   itself renders at 70% opacity. Restoring opacity dissolves the stacking
   context so the popover's z-index hoists into the list-level context.

   .alternative-item is included pre-emptively: it can carry .activity-
   completed (see templates/partials/dashboard-content.html:252, where the
   class is appended on $alt.Status == "completed"), and although root-
   level opacity isn't applied there today, the moment it is the same bug
   would appear. The rule is a no-op until that day; the comment is the
   load-bearing part — DO NOT delete this as "unused" without first
   checking that nothing applies an opacity (or other stacking-context
   trigger) to .alternative-item.activity-completed. */
.activity-item.activity-completed:has(.kebab-dropdown.open),
.alternative-item.activity-completed:has(.kebab-dropdown.open) {
    opacity: 1;
}
.activity-item.activity-completed > .activity-item-content,
.activity-item.activity-completed > .activity-details {
    border-left: 3px solid var(--wp-success);
    padding-left: var(--spacing);
}
.activity-item.activity-completed > .activity-item-content .activity-details strong,
.activity-item.activity-completed > .activity-details strong {
    color: var(--wp-success);
    text-decoration: line-through;
}

.activity-item.activity-skipped > .activity-item-content,
.activity-item.activity-skipped > .activity-details {
    opacity: 0.5;
}
.activity-item.activity-skipped > .activity-item-content .activity-details strong,
.activity-item.activity-skipped > .activity-details strong {
    text-decoration: line-through;
    color: var(--wp-ink-3);
}

.status-icon {
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: 0.25rem;
}
.activity-completed .status-icon {
    color: var(--wp-success);
}
.activity-skipped .status-icon {
    color: var(--wp-ink-3);
}

/* ── Alternative pick status styling ── */
.alternative-item.activity-completed > .alt-content {
    border-left: 3px solid var(--wp-success);
    padding-left: var(--spacing);
}
.alternative-item.activity-completed > .alt-content .activity-details strong {
    color: var(--wp-success);
}

.alternative-item.activity-skipped > .alt-content {
    opacity: 0.6;
}
.alternative-item.activity-skipped > .alt-content .activity-details strong {
    text-decoration: line-through;
    color: var(--wp-ink-3);
}

.activity-title-row {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.status-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.status-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    font-weight: 500;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.status-surprise {
    background: var(--wp-rose-soft);
    color: var(--wp-rose);
    font-style: italic;
}

/* base .btn-edit-notes lives in the wp-* design system block below */

.activity-details:hover .btn-edit-notes {
    opacity: 0.5;
}

/* ── Per-Activity Secret ── */

.activity-secret {
    border-color: var(--wp-rose);
    border-style: dashed;
    background: var(--wp-rose-soft);
}

/* Always reveal the kebab on a secret pick — the picker's only path back
   to "Show to partner" is the kebab menu, and the global hover-only rule
   makes it impossible to find on touch/hybrid devices. */
.activity-secret .btn-kebab {
    opacity: 1;
}

/* Drag handle on a secret pick should also stay visible — same reasoning:
   the secret-styled item visually obscures the affordance, and reordering
   should still work without forcing the user to discover it via hover. */
.activity-secret .drag-handle {
    opacity: 0.5;
}

.activity-surprise {
    display: flex;
    align-items: center;
    padding: var(--spacing-xs) 0;
}

/* .surprise-badge — base styles live in the design-system block below
   (line ~5579). A duplicate ruleset used to live here whose font-weight,
   color, and font-size differed; the cascade resolved them mostly
   correctly but font-weight:500 from this block leaked into the newer
   pill style. Removed; do NOT re-introduce a competing definition. */

/* .plan-secret-bar / .toggle-switch / .toggle-slider — base styles live in
   the design-system block below (line ~5575). A duplicate ruleset used to
   live here whose `transform: translateX(1.125rem)` stacked on top of the
   newer block's `left: 18px`, double-shifting the knob off the right edge
   of the track. Removed; do NOT re-introduce a competing definition. */

/* ── Landing Responsive (640px) ── */

@media (max-width: 640px) {
    .landing-hero {
        flex-direction: column;
        padding: 2.5rem var(--spacing) 2rem;
        min-height: auto;
        overflow: visible;
    }

    .hero-left {
        text-align: center;
    }

    .hero-right {
        margin-top: var(--spacing);
    }


    .landing-blog-grid {
        grid-template-columns: 1fr;
    }

    .landing-footer-nav {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .blog-card-featured {
        grid-template-columns: 1fr;
    }

    .blog-card-img-featured {
        height: 12rem;
    }

    .blog-featured {
        padding-left: var(--spacing);
        padding-right: var(--spacing);
    }

    .blog-page-grid {
        grid-template-columns: 1fr;
        padding-left: var(--spacing);
        padding-right: var(--spacing);
    }

    .blog-page-header {
        padding-left: var(--spacing);
        padding-right: var(--spacing);
    }

    .blog-post-container {
        padding-left: var(--spacing);
        padding-right: var(--spacing);
    }

    .blog-related {
        padding-left: var(--spacing);
        padding-right: var(--spacing);
    }

    .blog-related .blog-page-grid {
        grid-template-columns: 1fr;
    }

    .landing-cta-section {
        margin-left: var(--spacing);
        margin-right: var(--spacing);
    }

    .landing-plans-section {
        padding-left: var(--spacing);
        padding-right: var(--spacing);
    }

    .landing-plans-grid {
        grid-template-columns: 1fr;
    }

    .landing-nav,
    .landing-journey,
    .landing-blog-section,
    .landing-footer {
        padding-left: var(--spacing);
        padding-right: var(--spacing);
    }

    /* The hook quote is forced onto one line (white-space: nowrap) for the
       desktop look; on a phone that single line is wider than the viewport and
       the tail ("…— sound familiar?") gets clipped. Let it wrap on small screens. */
    .hook-quote {
        white-space: normal;
    }
}

/* ── Mobile / Touch ── */

@media (hover: none) {
    .btn-kebab {
        opacity: 1;
    }

    .drag-handle {
        opacity: 0.5;
    }
}

@media (max-width: 480px) {
    .container {
        padding: var(--spacing-sm);
    }

    /* Header: stack title above nav */
    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .header h1 {
        font-size: 1.25rem;
    }

    .header nav {
        width: 100%;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        font-size: 0.875rem;
    }

    /* Sub-nav */
    .sub-nav {
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
        font-size: 0.875rem;
    }

    /* Planned weekend card */
    .planned-weekend {
        padding: var(--spacing);
    }

    .planned-weekend-title {
        font-size: 1.1rem;
    }

    /* Plan controls: stack vertically */
    .plan-controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    .plan-controls .btn {
        text-align: center;
    }

    /* Extension notice: stack on narrow screens */
    .extension-notice {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    /* Plan tabs: allow horizontal scroll */
    .plan-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .plan-tab {
        padding: var(--spacing-sm) var(--spacing);
        font-size: 0.875rem;
        white-space: nowrap;
    }

    /* Plan panel */
    .plan-panel {
        padding: var(--spacing-sm);
    }

    /* Activity items */
    .activity-item {
        padding: var(--spacing-sm);
    }

    .activity-item:has(> .drag-handle) {
        padding-left: var(--spacing);
    }

    /* Kebab always visible on mobile */
    .btn-kebab {
        opacity: 1;
    }

    /* Drag handle always visible on mobile */
    .drag-handle {
        opacity: 0.5;
    }

    /* Inline forms need full width */
    .inline-form {
        padding: var(--spacing-sm);
    }

    /* Login */
    .login-container {
        margin: var(--spacing) auto;
        padding: 0 var(--spacing-sm);
    }

    .login-form {
        padding: var(--spacing);
    }

    /* History cards */
    .week-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    /* Ideas */
    .idea-actions {
        flex-wrap: wrap;
    }

    .use-form {
        margin-left: 0;
        width: 100%;
    }

    /* Color picker */
    .color-swatch {
        width: 2.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
    }

    /* Confirm dialog */
    .confirm-dialog,
    .modal-dialog {
        padding: var(--spacing);
    }

    .modal-actions .btn {
        padding: 0.625rem 1.25rem;
        font-size: 1rem;
    }

    /* Movie cards */
    .planned-movie {
        padding: var(--spacing);
    }
}

/* Swap & Bonus */
.bonus-notice {
    background: var(--wp-card-2);
    border: 1px solid var(--wp-line);
    padding: var(--spacing-sm) var(--spacing);
    border-radius: var(--radius);
    margin-bottom: var(--spacing);
    font-size: 0.875rem;
    text-align: center;
    color: var(--wp-ink-3);
}

.swap-request-banner {
    background: var(--wp-card-2);
    border: 1px solid var(--wp-line);
    padding: var(--spacing) var(--spacing-lg);
    border-radius: var(--radius);
    margin-bottom: var(--spacing);
    text-align: center;
}

.swap-request-banner p {
    margin: 0 0 var(--spacing-sm) 0;
    font-weight: 500;
}

.swap-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}

.swap-pending-text {
    color: var(--wp-ink-3);
    font-size: 0.875rem;
    text-align: center;
    margin-top: var(--spacing-sm);
}

/* Drag handle still used by .wp-section-row in activities.html */
.section-drag-handle {
    position: static;
    flex-shrink: 0;
    margin-right: 0.5rem;
    cursor: grab;
    opacity: 0.4;
    width: auto;
}
.section-drag-handle:hover {
    opacity: 1 !important;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Selectable-card variant used inside form modals (e.g. Create Activity).
   Each option is a tappable surface with a custom-styled radio indicator —
   the native input is kept for a11y/keyboard but visually replaced. */
.radio-group .radio-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "indicator title"
        "indicator desc";
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid var(--wp-line-soft);
    border-radius: var(--wp-r);
    background: var(--wp-card-2);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    font-weight: 400;
}
.radio-group .radio-card:hover {
    border-color: var(--wp-line);
}
.radio-group .radio-card:has(input:checked) {
    border-color: color-mix(in oklab, var(--wp-rose) 55%, var(--wp-line));
    background: color-mix(in oklab, var(--wp-rose) 8%, var(--wp-card-2));
}
.radio-group .radio-card input[type="radio"] {
    grid-area: indicator;
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    /* Override padding inherited from .inline-form input — without this,
       border-box sizing inflates the radio to ~27×23. */
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--wp-ink-4);
    margin: 0;
    margin-top: 2px;
    background: var(--wp-card);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.radio-group .radio-card input[type="radio"]:checked {
    border-color: var(--wp-rose);
    background: radial-gradient(circle, var(--wp-rose) 0 4px, var(--wp-card) 5px 100%);
}
.radio-group .radio-card input[type="radio"]:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--wp-rose) 55%, transparent);
    outline-offset: 2px;
}
.radio-group .radio-card .radio-title {
    grid-area: title;
    font-weight: 600;
    color: var(--wp-ink);
    line-height: 1.3;
}
.radio-group .radio-card .radio-desc {
    grid-area: desc;
    color: var(--wp-ink-3);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

/* Compact inline radios used for binary lightweight choices
   (e.g. "First pick: Me / Partner" in the Create Activity modal).
   Specificity bumped via .wp-field to override .inline-form label {display:block}
   and .inline-form input {padding/width} rules later in this file. */
.radio-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
}
.wp-field .radio-inline label,
.form-group .radio-inline label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    cursor: pointer;
    color: var(--wp-ink);
    font-weight: 400;
    font-size: 14px;
}
.wp-field .radio-inline input[type="radio"],
.form-group .radio-inline input[type="radio"] {
    width: auto;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

/* Legacy plain radio rows (no .radio-card wrapper) — preserved for any
   call sites that haven't moved to the card style. */
.radio-group label:not(.radio-card) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 400;
}
.radio-group label:not(.radio-card) input[type="radio"] {
    width: auto;
    margin: 0;
}
.radio-group label:not(.radio-card) .radio-desc {
    display: block;
    color: var(--wp-ink-3);
    font-size: 0.75rem;
    margin-left: 1.5rem;
    margin-top: -0.125rem;
}

.shared-section .shared-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing);
}

.shared-section .shared-header h2 {
    margin: 0;
}

.active-picks-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* ── Pace Dropdown ── */

.dashboard-content {
    position: relative;
}

.dashboard-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
}

.pace-setting {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    margin-bottom: var(--spacing-sm);
}

/* Cadence pill + "turn ends" indicator, grouped on the right of the toolbar. */
.dashboard-pace-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    flex-wrap: wrap;
}
.dashboard-pace-group .pace-setting {
    margin-left: 0;
    margin-bottom: 0;
}
.dashboard-turn-ends {
    font-size: 12px;
    color: var(--wp-ink-3);
    white-space: nowrap;
}

.pace-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--wp-line);
    border-radius: 1rem;
    background: transparent;
    color: var(--wp-ink-3);
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.pace-trigger:hover {
    color: var(--wp-ink);
    border-color: var(--wp-ink-3);
}

.pace-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10;
    min-width: 7.5rem;
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-top: 0.25rem;
}


.pace-menu.open {
    display: block;
}

.pace-option {
    display: block;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--wp-ink);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}

.pace-option:hover {
    background: var(--wp-input);
}

.pace-option.active {
    color: var(--wp-rose);
    font-weight: 600;
}

/* ── Plan Group Headers ── */

.group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: var(--spacing) 0 var(--spacing-sm) 0;
    color: var(--wp-ink-3);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.group-header::before,
.group-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--wp-line);
}

.group-header:first-child {
    margin-top: 0;
}

.group-progress {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.6;
}

/* ── Group Management ── */

.plan-group {
    margin-bottom: var(--spacing-sm);
}

.plan-group.collapsed .activity-list,
.plan-group.collapsed .btn-and {
    display: none;
}

.group-drag-handle {
    cursor: grab;
    color: var(--wp-ink-3);
    opacity: 0.3;
    font-size: 0.75rem;
    user-select: none;
}

.group-drag-handle:hover {
    opacity: 0.7;
}

.collapse-indicator {
    font-size: 0.625rem;
    color: var(--wp-ink-3);
    margin-left: 0.125rem;
}

.group-actions {
    position: relative;
    display: inline-block;
    margin-left: auto;
}

.group-action-btn {
    background: none;
    border: none;
    color: var(--wp-ink-3);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0.25rem;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.group-action-btn:hover {
    opacity: 1;
}

.group-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10;
    min-width: 7rem;
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.group-menu.open {
    display: block;
}

/* ── 404 Page ── */

.not-found {
    max-width: 24rem;
    margin: 0 auto;
    text-align: center;
    padding: 4rem var(--spacing);
}

.not-found-code {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    background: linear-gradient(135deg, var(--wp-line), var(--wp-rose));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.6;
}

.not-found h2 {
    margin: var(--spacing) 0 var(--spacing-sm);
    font-size: 1.5rem;
}

.not-found p {
    color: var(--wp-ink-3);
    margin-bottom: var(--spacing-lg);
}

/* ── Lobby Page ── */

.lobby-options {
    margin-top: var(--spacing-lg);
}

.lobby-section {
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing);
}

.lobby-section h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 1.1rem;
}

.lobby-section p {
    color: var(--wp-ink-3);
    margin: 0 0 var(--spacing) 0;
    font-size: 0.9rem;
}

.lobby-divider {
    display: flex;
    align-items: center;
    gap: var(--spacing);
    color: var(--wp-ink-3);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: var(--spacing-sm) 0;
}

.lobby-divider::before,
.lobby-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--wp-line);
}

.lobby-waiting {
    margin-top: var(--spacing-lg);
    color: var(--wp-ink-3);
    font-size: 0.9rem;
    font-style: italic;
}

.lobby-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    margin-top: var(--spacing);
}

/* ── Premium Badge ── */

.badge-plus {
    display: inline-block;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wp-rose);
    background: var(--wp-rose-soft);
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    vertical-align: top;
    position: relative;
    top: -0.25em;
    margin-left: 0.125rem;
}

/* ── Nav Upgrade Link ── */

.nav-upgrade {
    color: var(--wp-rose) !important;
    font-weight: 600;
}

.nav-settings {
    display: flex;
    align-items: center;
}

/* ── Upcoming Dates (inline in sub-nav) ── */

.upcoming-dates-inline {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.upcoming-badge {
    font-size: 0.8125rem;
    color: var(--wp-rose);
    background: var(--wp-rose-soft);
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius);
    text-decoration: none;
    white-space: nowrap;
}

.upcoming-badge:hover {
    opacity: 0.85;
}

/* ── Milestone / Detail / Wishlist Styles ── */

.milestone-list, .detail-list, .wishlist-list {
    margin-bottom: var(--spacing);
}

.milestone-card, .detail-row, .wishlist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--wp-line-soft);
}
.milestone-card:last-child,
.detail-row:last-child,
.wishlist-item:last-child {
    border-bottom: 0;
}

.milestone-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.milestone-date {
    color: var(--wp-ink-3);
    font-size: 0.875rem;
}

.milestone-reminder {
    color: var(--wp-rose);
    font-size: 0.8125rem;
    font-style: italic;
}

.detail-label {
    font-weight: 600;
    min-width: 8rem;
    color: var(--wp-ink);
}

.detail-value {
    flex: 1;
    color: var(--wp-ink-2);
}

.suggestion-chip {
    background: transparent;
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-pill);
    padding: 5px 12px;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--wp-ink-2);
    transition: all .12s ease;
}

.suggestion-chip:hover {
    background: var(--wp-rose-soft);
    border-color: var(--wp-rose);
    color: var(--wp-rose-text);
}

.wishlist-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
}

.wishlist-item-info strong a {
    color: var(--wp-ink);
    text-decoration: none;
    border-bottom: 1px dotted var(--wp-rose);
}
.wishlist-item-info strong a:hover { color: var(--wp-rose); }

.wishlist-price {
    color: var(--wp-rose);
    font-size: 0.875rem;
    font-weight: 600;
}

.wishlist-notes {
    color: var(--wp-ink-3);
    font-size: 0.8125rem;
}

.btn-claimed {
    background: var(--wp-rose-soft);
    color: var(--wp-rose);
    border-color: var(--wp-rose);
}

.form-row {
    display: flex;
    gap: var(--spacing);
}

.form-row .form-group {
    flex: 1;
}

/* ── Upgrade Banner (Activities Page) ── */

.upgrade-banner {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing);
    background: var(--wp-rose-soft);
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    border-radius: var(--radius);
    color: var(--wp-rose);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}

.upgrade-banner:hover {
    background: rgba(var(--color-primary-rgb), 0.15);
    border-color: rgba(var(--color-primary-rgb), 0.35);
}

/* ── Insights ── */

.insights-hero { text-align: center; padding: 2rem 0 1.5rem; }
.insights-hero-number { font-family: 'Fraunces', Georgia, serif; font-size: 3.5rem; font-weight: 700; color: var(--wp-rose); line-height: 1; }
.insights-hero-label { font-size: 1.125rem; color: var(--wp-ink-3); margin-top: 0.25rem; }
.insights-hero-since { font-size: 0.875rem; color: var(--wp-ink-3); margin-top: 0.5rem; }
.insights-hero-first { font-size: 0.875rem; color: var(--wp-ink-3); margin-top: 0.375rem; font-style: italic; }

.insights-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; }
.insight-card { background: var(--wp-card); border-radius: var(--radius); padding: 1.25rem; text-align: center; box-shadow: var(--shadow-sm); }
.insight-card-wide { grid-column: 1 / -1; }
.insight-value { font-family: 'Fraunces', Georgia, serif; font-size: 2rem; font-weight: 700; color: var(--wp-ink); line-height: 1.2; }
.insight-label { font-size: 0.8125rem; color: var(--wp-ink-3); margin-top: 0.25rem; }

.insight-section { margin-bottom: 2rem; }
.insight-section h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.125rem; margin-bottom: 0.75rem; }

.insights-partner-bars { display: flex; flex-direction: column; gap: 0.75rem; }
.partner-bar { display: flex; align-items: center; gap: 0.75rem; }
.partner-bar-label { flex: 0 0 5rem; font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partner-bar-track { flex: 1; height: 1.25rem; background: var(--wp-line); border-radius: 0.625rem; overflow: hidden; }
.partner-bar-fill { height: 100%; border-radius: 0.625rem; transition: width 0.3s ease; min-width: 0.25rem; }
.partner-bar-count { flex: 0 0 2rem; font-size: 0.875rem; color: var(--wp-ink-3); text-align: right; }

.insight-rated-list { background: var(--wp-card); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.insight-rated-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--wp-line); }
.insight-rated-item:last-child { border-bottom: none; }
.insight-rated-title { font-weight: 500; }
.insight-rated-section { font-size: 0.8125rem; color: var(--wp-ink-3); }
.insight-rated-count { font-size: 0.875rem; color: var(--wp-ink-3); margin-bottom: 0.5rem; }

.insights-monthly { display: flex; align-items: flex-end; gap: 0.25rem; height: 8rem; padding: 0 0.25rem; }
.monthly-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.monthly-bar { width: 100%; max-width: 2rem; background: var(--wp-rose); border-radius: 0.25rem 0.25rem 0 0; min-height: 2px; }
.monthly-bar-label { font-size: 0.625rem; color: var(--wp-ink-3); margin-top: 0.25rem; }
.monthly-bar-count { font-size: 0.625rem; color: var(--wp-ink-3); margin-bottom: 0.125rem; }

.insights-fun-facts { display: flex; flex-direction: column; gap: 0.75rem; }
.fun-fact { background: var(--wp-rose-soft); border-radius: var(--radius); padding: 0.875rem 1rem; font-size: 0.9375rem; color: var(--wp-ink); line-height: 1.4; border-left: 3px solid var(--wp-rose); }

@media (max-width: 480px) {
    .insights-grid { grid-template-columns: 1fr; }
    .insights-hero-number { font-size: 2.5rem; }
}

/* ════════════════════════════════════════════════════════════════
   Saturday Plans 2.0 — Component System (.wp-*)
   ════════════════════════════════════════════════════════════════ */

.wp-app {
    font-family: var(--wp-sans);
    color: var(--wp-ink);
    background: var(--wp-bg);
    letter-spacing: -0.005em;
    line-height: 1.5;
    font-size: 15px;
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
}

/* Thin warm vignette */
.wp-app::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% -10%, rgba(232,163,168,.06), transparent 70%),
        radial-gradient(ellipse 80% 50% at 50% 110%, rgba(232,163,168,.04), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="light"] .wp-app::before {
    background:
        radial-gradient(ellipse 60% 40% at 50% -10%, rgba(181,99,106,.07), transparent 70%),
        radial-gradient(ellipse 80% 50% at 50% 110%, rgba(181,99,106,.05), transparent 70%);
}

.wp-scroll {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
}

/* Hyperlink */
.wp-link {
    color: var(--wp-rose);
    text-decoration: none;
    font-weight: 500;
}
.wp-link:hover { color: var(--wp-rose-2); text-decoration: underline; text-underline-offset: 3px; }

/* ── Hearts (animated, varied, depth-based) ── */
.wp-hearts {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.wp-hearts svg {
    position: absolute;
    fill: var(--wp-rose);
    will-change: transform, opacity;
}
.wp-hearts svg.is-outline {
    fill: none;
    stroke: var(--wp-rose);
    stroke-width: 1.5;
}
[data-theme="light"] .wp-hearts svg { filter: saturate(1.05); }

@keyframes wp-heart-drift {
    0%   { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
    50%  { transform: translate3d(var(--sway, 6px), -10px, 0) rotate(calc(var(--rot, 0deg) + 6deg)); }
    100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
}
@keyframes wp-heart-pulse {
    0%, 100% { opacity: var(--op, .07); }
    50%      { opacity: calc(var(--op, .07) * 1.6); }
}
@keyframes wp-heart-rise {
    0%   { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)) scale(.8); opacity: 0; }
    10%  { opacity: var(--op, .12); }
    90%  { opacity: var(--op, .12); }
    100% { transform: translate3d(var(--sway, 0), -120px, 0) rotate(calc(var(--rot, 0deg) + 14deg)) scale(1); opacity: 0; }
}
.wp-hearts.is-drift svg {
    animation: wp-heart-drift var(--dur, 8s) ease-in-out infinite,
               wp-heart-pulse var(--pdur, 6s) ease-in-out infinite;
    animation-delay: var(--delay, 0s), var(--delay, 0s);
}
.wp-hearts.is-rise svg {
    animation: wp-heart-rise var(--dur, 14s) linear infinite;
    animation-delay: var(--delay, 0s);
}
.wp-hearts.is-watermark {
    display: flex; align-items: center; justify-content: center;
}
.wp-hearts.is-watermark svg {
    position: static;
    width: clamp(360px, 60vw, 720px);
    height: clamp(360px, 60vw, 720px);
    opacity: .025;
    animation: wp-heart-drift 14s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .wp-hearts svg { animation: none !important; }
}

/* ── Type ── */
.wp-serif { font-family: var(--wp-serif); letter-spacing: -.01em; }
.wp-mono  { font-family: var(--wp-mono); }

/* ── Header ── */
.wp-header {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 18px 26px;
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    margin: 22px auto 0;
    max-width: 920px;
    font-size: 14px;
}
.wp-header-brand {
    display: inline-flex; align-items: baseline; gap: 7px;
    font-family: var(--wp-serif);
    font-style: italic;
    font-weight: 700;
    font-size: 22px;
    color: var(--wp-ink);
    letter-spacing: -.02em;
    line-height: 1;
    text-decoration: none;
}
.wp-header-brand::before {
    content: "♥";
    color: var(--wp-rose);
    font-size: 15px;
    font-style: normal;
    margin-right: 3px;
    position: relative;
    top: -1px;
    filter: drop-shadow(0 1px 2px rgba(232,163,168,.3));
}
.wp-header-brand .wp-plus {
    font-family: var(--wp-sans);
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .16em;
    background: var(--wp-rose);
    color: var(--wp-rose-ink);
    padding: 3px 6px 2px;
    border-radius: 3px;
    margin-left: 4px;
    position: relative;
    top: -7px;
}
.wp-header-pair {
    /* Positioning container for the .wp-pair-toggle pill + .wp-pair-history
       popover. The pill chrome (padding/background/border) lives on the
       button itself so the entire pill is the hover/click target. */
    display: inline-flex;
    align-items: center;
    justify-self: center;
    position: relative;
}
.wp-pair-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px 4px 4px;
    background: var(--wp-bg-soft);
    border: 1px solid var(--wp-line-soft);
    border-radius: var(--wp-r-pill);
    font-size: 13px;
    color: var(--wp-ink-2);
    /* Button reset (only meaningful for <button>; harmless on the static variant). */
    appearance: none;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s ease;
}
.wp-pair-toggle:hover {
    background: var(--wp-card-2);
}
.wp-pair-toggle:focus-visible {
    outline: 2px solid var(--wp-rose);
    outline-offset: 3px;
}
.wp-pair-toggle--static {
    cursor: default;
}
.wp-pair-toggle--static:hover {
    background: var(--wp-bg-soft);
}

/* Stack the "first" partner's avatar on top of the second — matches the
   label order ("X & Y" → X's avatar overlaps Y's). Without this, default
   paint order would put the right-side avatar on top, which reads as
   "Y is in front" and contradicts the label. */
.wp-header-pair .wp-avatar {
    position: relative;
}
.wp-header-pair .wp-avatar:first-child {
    z-index: 1;
}

/* HTMX swap fade — hx-swap="outerHTML swap:200ms" toggles these classes. */
#wp-header-pair {
    transition: opacity 200ms ease;
}
#wp-header-pair.htmx-swapping {
    opacity: 0;
}

/* History popover — desktop only, JS controls .is-visible after hover delay. */
.wp-pair-history {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    max-width: 360px;
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-md);
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
    padding: 10px 12px;
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.wp-pair-history.is-visible {
    opacity: 1;
    /* Re-enable pointer events only when visible so the user can move into the
       popover to scroll the toggle log. Hidden state stays pointer-events:none
       so a 0-opacity popover doesn't intercept clicks. */
    pointer-events: auto;
}
.wp-pair-history-title {
    font-family: var(--wp-serif);
    font-style: italic;
    font-size: 12px;
    color: var(--wp-ink-2);
    margin-bottom: 6px;
}
.wp-pair-history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 240px;
    overflow-y: auto;
    font-size: 12px;
    color: var(--wp-ink);
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--wp-ink-4) transparent;
}
/* WebKit / Blink — thin theme-aware scrollbar so the default chunky gray
   bar doesn't clash with the soft cream popover in light theme. */
.wp-pair-history-list::-webkit-scrollbar {
    width: 8px;
}
.wp-pair-history-list::-webkit-scrollbar-track {
    background: transparent;
}
.wp-pair-history-list::-webkit-scrollbar-thumb {
    background: var(--wp-ink-4);
    border-radius: 4px;
}
.wp-pair-history-list::-webkit-scrollbar-thumb:hover {
    background: var(--wp-ink-3);
}
.wp-pair-history-list li {
    padding: 6px 0;
    border-bottom: 1px dashed var(--wp-line-soft);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wp-pair-history-list li:last-child {
    border-bottom: 0;
}
.wp-pair-history-result {
    font-weight: 600;
    color: var(--wp-ink);
    font-size: 13px;
}
.wp-pair-history-result-suffix {
    font-weight: 400;
    font-style: italic;
    color: var(--wp-ink-2);
}
.wp-pair-history-meta {
    font-size: 11px;
    color: var(--wp-ink-3);
}
.wp-pair-history-more {
    margin-top: 6px;
    font-size: 11px;
    color: var(--wp-ink-3);
    text-align: center;
}
/* Hide the popover entirely on touch / coarse-pointer devices. */
@media (hover: none), (pointer: coarse) {
    .wp-pair-history { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .wp-pair-toggle,
    .wp-pair-history,
    #wp-header-pair { transition: none !important; }
}
.wp-header-pair::before,
.wp-header-pair::after {
    content: "";
    width: 14px; height: 1px;
    background: var(--wp-line);
    position: absolute;
    top: 50%;
}
.wp-header-pair::before { left: -22px; }
.wp-header-pair::after  { right: -22px; }
.wp-header-pair .wp-pair-label {
    font-family: var(--wp-serif);
    font-style: italic;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--wp-ink);
    font-size: 14px;
}
.wp-avatars { display: flex; }
.wp-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600;
    color: var(--wp-ink-on-pastel);
    border: 2px solid var(--wp-card);
    background: var(--wp-rose);
}
.wp-avatar + .wp-avatar { margin-left: -8px; }
.wp-header-nav {
    display: flex; align-items: center; gap: 18px;
    color: var(--wp-rose);
}
.wp-header-nav a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}
.wp-header-nav a:hover { color: var(--wp-ink); }
.wp-header-nav a.is-active { color: var(--wp-ink); }

.wp-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: transparent; border: 0;
    color: var(--wp-rose);
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
    text-decoration: none;
}
.wp-icon-btn:hover { background: var(--wp-card-2); color: var(--wp-ink); }
.wp-icon-btn:focus-visible { outline: 2px solid var(--wp-rose); outline-offset: 2px; }

/* Logout form (no submit chrome) */
.wp-logout-form { display: inline; margin: 0; padding: 0; }
.wp-logout-form button {
    background: transparent; border: 0; padding: 0;
    color: var(--wp-rose);
    font: inherit;
    cursor: pointer;
}
.wp-logout-form button:hover { color: var(--wp-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── Container ── */
.wp-container {
    position: relative; z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    padding: 28px 22px 64px;
}
.wp-container.is-narrow { max-width: 560px; }
.wp-container.is-wide   { max-width: 1080px; }

/* ── Tabs ── */
.wp-tabs {
    display: flex; gap: 28px;
    border-bottom: 1px solid var(--wp-line);
    margin-bottom: 28px;
    position: relative;
    z-index: 2;
}
.wp-tabs a, .wp-tab {
    position: relative;
    padding: 12px 0;
    color: var(--wp-ink-3);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: transparent; border: 0;
}
.wp-tabs a:hover, .wp-tab:hover { color: var(--wp-ink-2); }
.wp-tabs .is-active {
    color: var(--wp-ink);
}
.wp-tabs .is-active::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 1.5px;
    background: var(--wp-rose);
}
.wp-tabs a.is-locked {
    color: var(--wp-ink-3);
}
.wp-tabs a.is-locked:hover {
    color: var(--wp-rose);
}
.wp-tabs a.is-locked .wp-pill {
    margin-left: 6px;
    font-size: 11px;
    padding: 1px 7px;
    vertical-align: 1px;
}

/* ── Buttons ── */
.wp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13px; font-weight: 500;
    border-radius: var(--wp-r-pill);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.wp-btn:focus-visible { outline: 2px solid var(--wp-rose); outline-offset: 2px; }
.wp-btn-primary {
    background: var(--wp-rose);
    color: var(--wp-rose-ink);
}
.wp-btn-primary:hover { background: var(--wp-rose-2); color: var(--wp-rose-ink); }
.wp-btn-ghost {
    background: transparent;
    color: var(--wp-ink-2);
    border-color: var(--wp-line);
}
.wp-btn-ghost:hover { color: var(--wp-ink); border-color: var(--wp-ink-3); }
.wp-btn-soft {
    background: var(--wp-card-2);
    color: var(--wp-ink-2);
}
.wp-btn-soft:hover { background: var(--wp-line); color: var(--wp-ink); }
.wp-btn-danger {
    background: transparent;
    color: var(--wp-danger);
    border-color: rgba(200,120,120,.3);
}
.wp-btn-danger:hover { background: rgba(200,120,120,.1); }
.wp-btn-lg { padding: 12px 22px; font-size: 14px; }
.wp-btn-sm { padding: 5px 11px; font-size: 12px; }
.wp-btn-block { width: 100%; }

/* ── Card ── */
.wp-card {
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    box-shadow: var(--wp-shadow-card);
    position: relative;
    z-index: 1;
}
.wp-card-pad     { padding: 18px 22px; }
.wp-card-pad-lg  { padding: 26px 28px; }

/* ── Inputs ── */
.wp-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--wp-ink-2);
    margin-bottom: 6px;
    letter-spacing: -.005em;
}
.wp-label .wp-opt {
    font-weight: 400;
    color: var(--wp-ink-3);
    margin-left: 4px;
}
.wp-input,
.wp-select,
.wp-textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--wp-input);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-sm);
    color: var(--wp-ink);
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.wp-input:focus,
.wp-select:focus,
.wp-textarea:focus {
    border-color: var(--wp-rose);
    box-shadow: 0 0 0 3px rgba(232,163,168,.15);
}
[data-theme="light"] .wp-input:focus,
[data-theme="light"] .wp-select:focus,
[data-theme="light"] .wp-textarea:focus {
    box-shadow: 0 0 0 3px rgba(181,99,106,.15);
}
.wp-textarea { min-height: 80px; resize: vertical; }
.wp-input::placeholder,
.wp-textarea::placeholder { color: var(--wp-ink-4); }
.wp-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239e8f81' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* ── Pills / chips ── */
.wp-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: var(--wp-card-2);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-pill);
    font-size: 11px;
    color: var(--wp-ink-2);
    letter-spacing: .02em;
    font-family: inherit;
    cursor: default;
    text-decoration: none;
}
.wp-pill.is-rose {
    background: var(--wp-rose-soft);
    border-color: rgba(232,163,168,.3);
    color: var(--wp-rose-text);
}
.wp-pill.is-active {
    background: var(--wp-rose);
    color: var(--wp-rose-ink);
    border-color: transparent;
}
.wp-pill.is-success {
    color: var(--wp-success);
    border-color: rgba(141,180,129,.25);
    background: rgba(141,180,129,.07);
}
.wp-pill.is-danger {
    color: var(--wp-danger);
    border-color: rgba(200,120,120,.30);
    background: rgba(200,120,120,.07);
}
.wp-pill.is-block {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 14px;
}

/* ── Toggle ── */
.wp-toggle {
    position: relative;
    width: 36px; height: 20px;
    background: var(--wp-card-2);
    border-radius: var(--wp-r-pill);
    cursor: pointer;
    border: 1px solid var(--wp-line);
    transition: background .2s;
    flex-shrink: 0;
    display: inline-block;
}
.wp-toggle::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    background: var(--wp-ink-3);
    border-radius: 50%;
    transition: left .2s, background .2s;
}
.wp-toggle.is-on {
    background: var(--wp-rose);
    border-color: transparent;
}
.wp-toggle.is-on::after {
    left: 18px;
    background: var(--wp-rose-ink);
}
.wp-toggle:focus-visible { outline: 2px solid var(--wp-rose); outline-offset: 2px; }

/* ── Section header (editorial) ── */
.wp-h-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wp-rose);
    display: flex; align-items: center; gap: 8px;
}
.wp-h-eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.wp-h1 {
    font-family: var(--wp-serif);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0;
    line-height: 1.05;
    color: var(--wp-ink);
}
.wp-h2 {
    font-family: var(--wp-serif);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--wp-ink);
    line-height: 1.15;
}
.wp-h3 {
    font-family: var(--wp-serif);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--wp-ink);
}

/* ── Meta line ── */
.wp-meta {
    font-size: 12px;
    color: var(--wp-ink-3);
    letter-spacing: .005em;
}

/* ── Dotted divider ── */
.wp-dotted {
    border: 0;
    border-top: 1px dashed var(--wp-line);
    margin: 14px 0;
}

/* ── Plan tab pills (Plan A / + Plan B) ── */
.wp-plan-tabs {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.wp-plan-tab {
    padding: 7px 16px;
    border-radius: var(--wp-r-pill);
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    color: var(--wp-ink-3);
    border: 1px solid var(--wp-line);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}
.wp-plan-tab:hover { color: var(--wp-ink); border-color: var(--wp-ink-3); }
.wp-plan-tab.is-active {
    background: var(--wp-rose);
    color: var(--wp-rose-ink);
    border-color: transparent;
}

/* ── Pick row (centerpiece) ── */
.wp-pick {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: start;
    gap: 4px 14px;
    padding: 16px 20px 16px 16px;
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    position: relative;
}
.wp-pick + .wp-pick { margin-top: 10px; }
.wp-pick.is-done .wp-pick-title {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--wp-ink-4);
    color: var(--wp-strike);
}
.wp-pick.is-done .wp-pick-num { color: var(--wp-ink-4); }
.wp-pick-title {
    font-family: var(--wp-serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--wp-ink);
    line-height: 1.3;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    word-break: break-word;
}
.wp-pick-num {
    font-family: var(--wp-serif);
    font-style: italic;
    font-size: 22px;
    color: var(--wp-rose);
    letter-spacing: -.02em;
    font-weight: 400;
    align-self: center;
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    line-height: 1;
    opacity: .85;
}
.wp-pick-note {
    display: flex; gap: 6px;
    font-size: 13px;
    color: var(--wp-ink-2);
    padding-left: 12px;
    border-left: 2px solid var(--wp-rose);
    margin-top: 6px;
    grid-column: 2 / -1;
    grid-row: 2;
    line-height: 1.5;
    opacity: .9;
    word-break: break-word;
}
.wp-pick.is-done .wp-pick-note {
    border-left-color: var(--wp-line);
    opacity: .7;
}
.wp-pick-note .wp-author {
    font-style: italic;
    color: var(--wp-rose);
    flex-shrink: 0;
    font-weight: 500;
}
.wp-pick.is-done .wp-pick-note .wp-author { color: var(--wp-ink-3); }
.wp-pick-actions {
    display: flex; gap: 6px;
    align-self: center;
    grid-column: 3;
    grid-row: 1;
}

/* ── OR divider for alternative plans ── */
.wp-or {
    display: flex; align-items: center; gap: 14px;
    margin: 6px 24px;
    font-family: var(--wp-serif); font-style: italic;
    font-size: 13px;
    color: var(--wp-rose);
    letter-spacing: .04em;
}
.wp-or::before, .wp-or::after {
    content: "";
    flex: 1;
    border-top: 1px dotted var(--wp-rose);
    opacity: .35;
}

/* ── Empty / placeholder card ── */
.wp-and {
    border: 1px dashed var(--wp-line);
    border-radius: var(--wp-r);
    padding: 20px 24px;
    text-align: center;
    color: var(--wp-ink-3);
    font-size: 13px;
    margin-top: 12px;
}
.wp-and .wp-h3 {
    color: var(--wp-ink-2);
    font-style: italic;
    margin-bottom: 4px;
}

/* ── Banner / surprise mode card ── */
.wp-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: var(--wp-bg-soft);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    margin-bottom: 14px;
}
.wp-banner-icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--wp-card-2);
    border: 1px solid var(--wp-line);
    border-radius: 8px;
    color: var(--wp-rose);
}
.wp-banner-body { flex: 1; min-width: 0; }
.wp-banner-title { font-weight: 600; font-size: 14px; color: var(--wp-ink); }
.wp-banner-sub   { font-size: 12px; color: var(--wp-ink-3); }
.wp-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Heart accent in margins */
.wp-margin-heart {
    position: absolute;
    color: var(--wp-line);
    opacity: .35;
}

/* ── Form modal restyle (uses .wp-card surfaces, keeps existing ids/JS) ── */
.modal-overlay,
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 16, .65);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 22px 40px;
    overflow-y: auto;
}
.modal-dialog,
.confirm-dialog {
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-lg);
    box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
    max-width: 560px;
    width: 100%;
    z-index: 1001;
    color: var(--wp-ink);
}
.confirm-dialog { max-width: 420px; padding: 24px 28px; }
.confirm-message {
    font-family: var(--wp-serif);
    font-size: 18px;
    color: var(--wp-ink);
    margin: 0 0 18px;
    line-height: 1.4;
}
.confirm-actions {
    display: flex; justify-content: flex-end; gap: 8px;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--wp-line);
}
.modal-title {
    font-family: var(--wp-serif);
    font-size: 19px;
    font-weight: 600;
    color: var(--wp-ink);
    margin: 0;
}
.modal-close {
    background: transparent; border: 0;
    color: var(--wp-ink-3);
    font-size: 24px; line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.modal-close:hover { color: var(--wp-ink); }
.modal-body { padding: 20px 24px 24px; }

/* ── Dashboard tools row (extend dropdown + pace pill) ── */
.wp-tools-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.wp-tools-row .wp-select { width: auto; min-width: 200px; padding: 7px 32px 7px 12px; font-size: 13px; }
.wp-tools-row .wp-pill { cursor: pointer; padding: 7px 14px; font-size: 12px; }
.wp-tools-spacer { flex: 1; }

/* ── Pace dropdown menu (re-skinned, keeps id="pace-menu") ── */
#pace-menu, .wp-menu {
    position: absolute;
    z-index: 50;
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    box-shadow: var(--wp-shadow-pop);
    padding: 6px;
    min-width: 180px;
    margin-top: 6px;
}
#pace-menu button, .wp-menu button, .wp-menu a {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    color: var(--wp-ink-2);
    border-radius: var(--wp-r-sm);
    cursor: pointer;
    text-decoration: none;
}
#pace-menu button:hover, .wp-menu button:hover, .wp-menu a:hover {
    background: var(--wp-card-2);
    color: var(--wp-ink);
}
#pace-menu button.is-active, .wp-menu .is-active {
    background: var(--wp-rose-soft);
    color: var(--wp-rose-text);
}

/* ── Auth shell (wraps login/register/etc.) ── */
.wp-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 22px;
    position: relative;
    z-index: 1;
}
.wp-auth-logo {
    margin-bottom: 28px;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--wp-serif);
    font-style: italic;
    font-weight: 700;
    font-size: 22px;
    color: var(--wp-ink);
    letter-spacing: -.01em;
    text-decoration: none;
}
.wp-auth-logo::before {
    content: "♥";
    color: var(--wp-rose);
    font-size: 18px;
}
.wp-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-lg);
    box-shadow: var(--wp-shadow-card);
    padding: 32px 30px;
}
.wp-auth-eyebrow {
    text-align: center;
    margin-bottom: 4px;
}
.wp-auth-title {
    font-family: var(--wp-serif);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.1;
    text-align: center;
    color: var(--wp-ink);
    margin: 0 0 6px;
}
.wp-auth-title em { color: var(--wp-rose); font-style: italic; }
.wp-auth-sub {
    text-align: center;
    color: var(--wp-ink-3);
    font-size: 13px;
    margin-bottom: 24px;
}
.wp-auth-card .wp-field + .wp-field { margin-top: 14px; }
.wp-auth-card .wp-actions { margin-top: 22px; }
.wp-auth-foot {
    margin-top: 22px;
    text-align: center;
    color: var(--wp-ink-3);
    font-size: 13px;
}
.wp-field { display: block; }

/* ── Activities list ──
   A single .wp-card containing one .wp-section-row per activity. The card
   has its own padding suppressed (padding:0); each row carries its own
   padding and a border-bottom for separation. Hovering darkens the row
   slightly to telegraph clickability — the whole row is a `role="link"`. */
.wp-section-list {
    display: block;
}
.wp-section-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--wp-line-soft);
    cursor: pointer;
    transition: background .12s;
    color: inherit;
    text-decoration: none;
}
.wp-section-row:last-child { border-bottom: 0; }
.wp-section-row:hover { background: var(--wp-card-2); }
.wp-section-row:focus-visible { outline: 2px solid var(--wp-rose); outline-offset: -2px; }
.wp-section-row-info { min-width: 0; }
.wp-section-row-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.wp-section-name {
    font-family: var(--wp-serif);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--wp-ink);
}
.wp-section-desc {
    color: var(--wp-ink-3);
    font-style: italic;
    font-size: 12px;
}
.wp-section-row-tags {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.wp-section-row-tags .wp-pill {
    font-size: 10px;
    padding: 2px 8px;
}
.wp-section-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wp-section-row-actions .wp-icon-btn {
    width: 26px; height: 26px;
}
.wp-section-row-arrow {
    color: var(--wp-rose);
    display: inline-flex;
    margin-left: 4px;
}
@media (hover: hover) {
    .wp-section-row .wp-icon-btn { opacity: 0; transition: opacity .15s; }
    .wp-section-row:hover .wp-icon-btn { opacity: 1; }
}

.wp-opt {
    color: var(--wp-ink-3);
    font-size: 11px;
    font-style: italic;
    margin-left: 4px;
}

/* ── Section ideas list ── */
.wp-ideas-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wp-idea-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 16px 20px 16px 28px;
    box-shadow: none;
    align-items: center;
}
.wp-idea-info { min-width: 0; }
/* Drag handle for the ideas list — overrides .drag-handle defaults
   (which start at opacity:0 and need parent hover). Sits in the left
   inset of the card. */
.idea-drag-handle {
    left: 4px;
    width: 18px;
    opacity: 0.3;
}
.wp-idea-row:hover .idea-drag-handle { opacity: 0.65; }
.idea-drag-handle:hover { opacity: 1 !important; }
.wp-idea-title {
    font-family: var(--wp-serif);
    font-weight: 600;
    font-size: 16px;
    color: var(--wp-ink);
    letter-spacing: -.005em;
}
.wp-idea-note {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--wp-ink-2);
    font-style: italic;
    line-height: 1.45;
}
.wp-idea-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 11px;
}
.wp-idea-meta .wp-avatar {
    width: 16px;
    height: 16px;
    font-size: 9px;
    border-width: 1.5px;
}
.wp-idea-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Settings (profile.html) ── */
.wp-settings-card { margin-top: 18px; }
.wp-settings-card .wp-h3 { margin: 0 0 6px; }
.wp-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.wp-settings-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.wp-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    margin-top: 14px;
}
@media (max-width: 640px) {
    .wp-settings-grid { grid-template-columns: 1fr; }
}
.wp-settings-form .wp-field + .wp-field { margin-top: 14px; }
/* Inside the 2-col grid the row-gap handles spacing — cancel the stacked-field
   margin so the two columns stay top-aligned (otherwise the 2nd column drops 14px). */
.wp-settings-grid .wp-field + .wp-field { margin-top: 0; }

/* Read-only value display (e.g. Email) — recessed + locked, clearly not an editable input. */
.wp-readonly {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: var(--wp-bg-soft);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-sm);
    color: var(--wp-ink-2);
    font-size: 14px;
    cursor: default;
}
.wp-readonly-ico { color: var(--wp-ink-4); flex-shrink: 0; }
.wp-readonly-val {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wp-toggle-form { display: block; }
.wp-toggle-form + .wp-toggle-form { margin-top: 14px; }
.wp-toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.wp-toggle-info { min-width: 0; }
.wp-toggle-label {
    display: block;
    font-weight: 600;
    color: var(--wp-ink);
    font-size: 14px;
}
.wp-toggle-desc {
    display: block;
    color: var(--wp-ink-3);
    font-size: 12px;
    margin-top: 2px;
}

/* ── Upgrade page ── */
.wp-upgrade-hero {
    text-align: center;
    margin: 32px auto 28px;
    max-width: 640px;
}
.wp-upgrade-plans-head {
    text-align: center;
    margin: 32px 0 14px;
}
.wp-upgrade-plans-head .wp-h-eyebrow {
    justify-content: center;
}
.wp-upgrade-plans-sub {
    margin: 4px 0 0;
    font-style: italic;
}
.wp-upgrade-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 24px;
}
@media (max-width: 720px) {
    .wp-upgrade-plans { grid-template-columns: 1fr; }
}
.wp-upgrade-card {
    position: relative;
}
.wp-upgrade-card.is-featured {
    border-color: var(--wp-rose);
    box-shadow: 0 0 0 1px var(--wp-rose) inset;
}
.wp-upgrade-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 6px 0 8px;
}
.wp-upgrade-price-num {
    font-family: var(--wp-serif);
    font-size: 32px;
    font-weight: 700;
    color: var(--wp-ink);
    letter-spacing: -.02em;
}
.wp-upgrade-price-unit {
    font-family: var(--wp-serif);
    font-style: italic;
    color: var(--wp-ink-3);
    font-size: 16px;
}
.wp-upgrade-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 28px;
    margin-top: 18px;
}
@media (max-width: 720px) {
    .wp-upgrade-features { grid-template-columns: 1fr; }
}
.wp-upgrade-feature {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    align-items: start;
}
.wp-upgrade-feature > div { display: block; min-width: 0; }
.wp-upgrade-feature strong {
    display: block;
    font-family: var(--wp-serif);
    font-size: 15px;
    color: var(--wp-ink);
    margin-bottom: 2px;
}
.wp-upgrade-feature .wp-meta { display: block; }
.wp-upgrade-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 999px;
    background: var(--wp-rose-soft);
    color: var(--wp-rose-text);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}
.wp-upgrade-feature.is-coming { opacity: .6; }
.wp-upgrade-feature.is-coming .wp-upgrade-check {
    background: transparent;
    color: var(--wp-ink-4);
    border: 1px dashed var(--wp-line);
}

/* ── Upgrade success ── */
.wp-upgrade-success {
    text-align: center;
    max-width: 520px;
    margin: 60px auto;
}
.wp-upgrade-success-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--wp-rose-soft);
    color: var(--wp-rose);
    margin-bottom: 18px;
}
.wp-upgrade-success-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* ── Edge state (404/500/unsubscribe) ── */
.wp-state {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 60px 22px;
    position: relative;
    z-index: 1;
}
.wp-state-card {
    position: relative;
    max-width: 560px;
    width: 100%;
    text-align: center;
    padding: 60px 40px;
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-lg);
    box-shadow: var(--wp-shadow-card);
    overflow: hidden;
}
.wp-state-code {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--wp-serif);
    font-style: italic;
    font-size: 240px;
    font-weight: 700;
    color: var(--wp-rose);
    opacity: .07;
    letter-spacing: -.07em;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}
.wp-state-content {
    position: relative;
    z-index: 1;
}
.wp-state .wp-h1 {
    font-size: 44px;
    margin-bottom: 8px;
}
.wp-state-kicker {
    color: var(--wp-rose);
    font-style: italic;
    font-family: var(--wp-serif);
    font-size: 18px;
    margin-bottom: 12px;
}
.wp-state-body {
    color: var(--wp-ink-2);
    font-size: 14px;
    margin-bottom: 22px;
    line-height: 1.55;
}
.wp-state-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ── Lobby two-column ── */
.wp-lobby {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 20px;
}
@media (max-width: 720px) {
    .wp-lobby { grid-template-columns: 1fr; }
}
.wp-lobby .wp-card { padding: 24px 26px; }
.wp-lobby h3.wp-h3 { margin-bottom: 6px; }
.wp-lobby .wp-meta { margin-bottom: 18px; }
.wp-token {
    font-family: var(--wp-mono);
    background: var(--wp-input);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-sm);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--wp-ink-2);
    word-break: break-all;
}

/* ── Activities list ── */
.wp-act-list {
    display: flex; flex-direction: column;
}
.wp-act-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 18px 22px;
    border-top: 1px solid var(--wp-line-soft);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.wp-act-row:first-child { border-top: 0; }
.wp-act-row:hover { background: var(--wp-card-2); }
.wp-act-row .wp-act-name {
    font-family: var(--wp-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--wp-ink);
    line-height: 1.3;
}
.wp-act-row .wp-act-desc {
    font-size: 12px; color: var(--wp-ink-3);
    margin-top: 2px;
}
.wp-act-row .wp-act-count {
    font-family: var(--wp-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--wp-ink-3);
}
.wp-act-row .wp-act-arrow {
    color: var(--wp-ink-3);
    display: inline-flex;
}

/* ── History (Our Dates) week + month layout ── */
.wp-month-group { margin-bottom: 28px; }
.wp-month-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 8px 4px 12px;
    border-bottom: 1px dashed var(--wp-line);
    margin-bottom: 14px;
}
.wp-month-head .wp-month-title {
    font-family: var(--wp-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--wp-ink);
}
.wp-month-head .wp-month-year {
    font-style: italic;
    font-weight: 400;
    color: var(--wp-ink-3);
}
.wp-month-head .wp-month-count {
    font-style: italic;
    color: var(--wp-ink-3);
    font-size: 13px;
}

/* ── Page-head helpers used across redesigned pages ── */
.wp-h1.is-italic { font-style: italic; margin-bottom: 18px; }
.wp-h1 em { color: var(--wp-rose); font-style: italic; }

.wp-h-eyebrow.is-spaced { margin-bottom: 6px; }
.wp-stats-summary { margin: 0 0 14px; font-size: 13px; color: var(--wp-ink-3); line-height: 1.5; }

.wp-tagline {
    font-style: italic;
    color: var(--wp-ink-3);
    font-size: 12px;
    margin-top: 6px;
    margin-bottom: 32px;
}
.wp-page-head .wp-tagline { margin-bottom: 0; }

.wp-corner-toggle {
    position: absolute;
    top: 24px;
    right: 24px;
}

.wp-tabs-aside {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 8px;
}

.wp-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 14px;
}

.wp-empty-state {
    text-align: center;
}
.wp-empty-state .wp-meta { font-style: italic; }

/* ── Month accordion (used by main history + section history) ──
   Two visual states. Open months use a typographic split:
       Apr  2026          ▾    4 weekends
   Closed months are quieter and slightly faded. */
.wp-month-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: baseline;
    gap: 12px;
    padding: 18px 4px 12px;
    border-bottom: 1px solid var(--wp-line);
    margin-bottom: 16px;
    color: inherit;
    font: inherit;
}
.wp-month-toggle .chevron {
    color: var(--wp-rose);
    transition: transform .15s;
    align-self: center;
}
.wp-month-toggle.expanded .chevron { transform: rotate(90deg); }
.wp-month-toggle .wp-month-title {
    font-family: var(--wp-serif);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--wp-ink);
}
.wp-month-toggle .wp-month-year {
    font-family: var(--wp-serif);
    font-style: italic;
    color: var(--wp-ink-3);
    font-size: 18px;
}
.wp-month-toggle .wp-month-count {
    justify-self: end;
    font-style: italic;
    font-size: 12px;
    color: var(--wp-ink-3);
}
.wp-month-toggle.is-collapsed {
    padding: 14px 4px 10px;
    border-bottom: 1px solid var(--wp-line-soft);
    margin-bottom: 0;
    opacity: .65;
}
.wp-month-toggle.is-collapsed .wp-month-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--wp-ink-2);
}
.wp-month-toggle.is-collapsed .wp-month-year {
    display: none;
}
.wp-month-toggle.is-collapsed .chevron { color: var(--wp-ink-3); }
.month-content { display: none; }
.month-content.expanded { display: block; margin-top: 14px; }

/* ── History "journal" week block ──
   No card stripe — the week reads as a journal entry. The header is the
   typographic anchor (date set big in serif, author + dot kicker, "Marked
   done" sits quietly on the right). Picks below are flat numbered rows with
   dashed dividers. Strikethrough is intentionally absent — the page context
   already says "this is history", so done items just read normally. */
.wp-week {
    margin-bottom: 28px;
}
.wp-week-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 16px;
    padding: 4px 4px 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--wp-line-soft);
}
.wp-week-date {
    font-family: var(--wp-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--wp-ink);
}
.wp-week-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wp-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--wp-ink-2);
}
.wp-week-author .wp-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--wp-rose);
}
.wp-week-author strong {
    color: var(--wp-ink);
    font-weight: 600;
    font-style: italic;
}
.wp-week-author .wp-sep {
    color: var(--wp-ink-4);
    margin: 0 2px;
}
.wp-week-status {
    font-style: italic;
    font-size: 11px;
    color: var(--wp-ink-3);
}

.wp-week-plan {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--wp-serif);
    font-style: italic;
    font-size: 12px;
    color: var(--wp-rose);
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 6px 0;
}
.wp-week-plan + .wp-week-row { margin-top: 2px; }
.wp-week-plan .wp-week-plan-rule {
    flex: 1; height: 1px;
    background: var(--wp-line-soft);
}

.wp-week-row {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 14px;
    align-items: baseline;
    padding: 12px 4px 14px;
    border-bottom: 1px dashed var(--wp-line-soft);
    transition: background .12s;
    border-radius: 6px;
    position: relative;
}
.wp-week-row:last-child { border-bottom: 0; }
.wp-week-row-num {
    font-family: var(--wp-serif);
    font-style: italic;
    font-size: 18px;
    font-weight: 500;
    color: var(--wp-ink-3);
    letter-spacing: -.01em;
}
.wp-week-row-title {
    font-family: var(--wp-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--wp-ink);
    line-height: 1.35;
}
.wp-week-row.is-skipped .wp-week-row-title {
    color: var(--wp-ink-3);
    font-style: italic;
}
.wp-week-row .wp-pill.is-skipped {
    margin-left: 10px;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 2px 7px;
    color: var(--wp-ink-4);
    background: transparent;
    border-color: var(--wp-line);
    vertical-align: 1px;
}
.wp-week-row .wp-pill.is-surprise {
    margin-left: 10px;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 2px 7px;
    background: var(--wp-rose-soft);
    color: var(--wp-rose-text);
    border-color: rgba(232,163,168,.3);
    vertical-align: 1px;
}
.wp-week-row-note {
    font-size: 13px;
    color: var(--wp-ink-2);
    margin-top: 4px;
    line-height: 1.45;
    font-style: italic;
}
.wp-week-row-note .wp-author {
    font-family: var(--wp-serif);
    color: var(--wp-ink-3);
    margin-right: 4px;
}
.wp-week-row-note + .wp-week-row-note { margin-top: 2px; }
.wp-week-row-alts {
    margin-top: 6px;
    font-family: var(--wp-serif);
    font-style: italic;
    font-size: 12px;
    color: var(--wp-ink-3);
}
.wp-week-row-alts .wp-alt + .wp-alt::before {
    content: "·";
    color: var(--wp-ink-4);
    margin: 0 8px;
}
.wp-week-row-alts .wp-alt-sep {
    color: var(--wp-ink-4);
    margin-right: 6px;
}
.wp-week-row-alts .wp-alt-title {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--wp-ink-4);
    text-underline-offset: 3px;
}
.wp-week-row-alts .wp-alt.is-skipped .wp-alt-title {
    text-decoration: none;
    color: var(--wp-ink-4);
}

/* Hover-reveal action cluster.
   Action buttons hide until the row is hovered, and the whole row pads out
   slightly to acknowledge focus. On touch devices (no hover capability)
   actions stay always visible — the design is desktop-first, but we don't
   want to strand mobile users with no way to edit. */
.wp-week-row-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s;
}
.wp-week-row-actions .wp-icon-btn {
    width: 26px; height: 26px;
}
@media (hover: hover) {
    .wp-week-row:hover {
        background: var(--wp-card-2);
        margin: 0 -10px;
        padding-left: 14px;
        padding-right: 14px;
    }
    .wp-week-row:hover .wp-week-row-actions { opacity: 1; }
}
@media (hover: none) {
    .wp-week-row-actions { opacity: 1; }
}

/* ── Movie-night history "journal" entry ──
   Same anatomy as a weekend pick row, but the right column carries two
   rating chips (mine interactive, partner's display-only) instead of
   per-pick status buttons. */
.wp-history-row {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px 4px;
    border-bottom: 1px dashed var(--wp-line-soft);
}
.wp-history-row:last-child { border-bottom: 1px solid var(--wp-line); }
.wp-history-row-num {
    font-family: var(--wp-serif);
    font-style: italic;
    font-size: 16px;
    font-weight: 600;
    color: var(--wp-rose);
    align-self: baseline;
    padding-top: 4px;
}
.wp-history-row-title {
    font-family: var(--wp-serif);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -.005em;
    color: var(--wp-ink);
}
.wp-history-row-meta {
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--wp-ink-3);
}
.wp-history-row-meta .wp-avatar {
    width: 14px; height: 14px;
    font-size: 8px;
    border-width: 1.5px;
}
.wp-history-row-meta .wp-sep {
    color: var(--wp-ink-4);
    margin: 0 2px;
}
.wp-history-row-meta .wp-when {
    font-style: italic;
}
.wp-history-row-meta > span + span { margin-left: 2px; }
.wp-history-row-note {
    margin-top: 6px;
    font-family: var(--wp-serif);
    font-style: italic;
    font-size: 13px;
    color: var(--wp-ink-2);
    line-height: 1.5;
}
.wp-history-row-note + .wp-history-row-note { margin-top: 2px; }
.wp-history-row-note .wp-author {
    color: var(--wp-ink-3);
    margin-right: 4px;
}

.wp-rating-chips {
    display: flex;
    gap: 8px;
    align-items: center;
}
.wp-rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    background: var(--wp-card-2);
    border: 1px solid var(--wp-line-soft);
    transition: background-color 150ms ease, border-color 150ms ease;
}
.wp-rating-chip .wp-avatar {
    width: 24px; height: 24px;
    font-size: 11px;
    font-weight: 600;
    border-width: 1.5px;
    flex-shrink: 0;
}
.wp-rating-chip .wp-rating-btn {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wp-ink-4);
    border-radius: 999px;
    transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
}
.wp-rating-chip .wp-rating-btn[disabled] { cursor: default; }
.wp-rating-chip .wp-rating-btn.is-up { color: var(--wp-success); }
.wp-rating-chip .wp-rating-btn.is-down { color: var(--wp-danger); }
/* Muted = a thumb the user *could* click but hasn't. Faded enough to step
   out of the way visually, but still readable on hover. */
.wp-rating-chip .wp-rating-btn.is-muted {
    color: var(--wp-ink-4);
    opacity: .35;
}
.wp-rating-chip.is-mine .wp-rating-btn.is-muted:hover { opacity: 1; }
.wp-rating-chip.is-mine .wp-rating-btn:hover {
    background: color-mix(in oklab, var(--wp-ink) 8%, transparent);
}
.wp-rating-chip.is-mine .wp-rating-btn.is-up:hover {
    color: var(--wp-success);
    background: color-mix(in oklab, var(--wp-success) 18%, transparent);
}
.wp-rating-chip.is-mine .wp-rating-btn.is-down:hover {
    color: var(--wp-danger);
    background: color-mix(in oklab, var(--wp-danger) 18%, transparent);
}
/* "Empty" slot = partner hasn't rated yet. An em-dash, not a faded thumb. */
.wp-rating-chip .wp-rating-btn.is-empty {
    color: var(--wp-ink-4);
    opacity: .55;
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
    user-select: none;
}
/* Tinted-fill states when a chip carries a rating (either user). The :has()
   selector pulls the rating up from the inner button so the whole pill
   reads as "liked"/"disliked" at a glance, not just the icon. */
.wp-rating-chip:has(.wp-rating-btn.is-up) {
    background: color-mix(in oklab, var(--wp-success) 14%, var(--wp-card-2));
    border-color: color-mix(in oklab, var(--wp-success) 40%, var(--wp-line-soft));
}
.wp-rating-chip:has(.wp-rating-btn.is-down) {
    background: color-mix(in oklab, var(--wp-danger) 14%, var(--wp-card-2));
    border-color: color-mix(in oklab, var(--wp-danger) 40%, var(--wp-line-soft));
}
/* Both thumbs remain interactive after a rating is set so users can
   actually change their mind. The store handles all three transitions:
     • click the other thumb  → switch rating
     • click the active thumb → clear (Slack-reaction-style toggle)
     • click in an empty slot → set initial rating
   The unselected thumb stays visually dimmed (.is-muted, opacity .35
   from above) so the active rating still reads as the headline. */

/* ── Insights (editorial) ── */
.wp-ins-hero {
    text-align: center;
    margin: 16px 0 32px;
}
.wp-ins-number {
    font-family: var(--wp-serif);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(96px, 16vw, 156px);
    line-height: 1;
    color: var(--wp-rose);
    letter-spacing: -.04em;
    margin: 0;
    word-break: keep-all;
}
.wp-ins-desc {
    color: var(--wp-ink-2);
    font-size: 16px;
    max-width: 460px;
    margin: 12px auto 0;
}
.wp-ins-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px dashed var(--wp-line);
    border-bottom: 1px dashed var(--wp-line);
    padding: 24px 0;
    margin-bottom: 32px;
}
.wp-ins-stat {
    text-align: center;
    border-right: 1px solid var(--wp-line-soft);
    padding: 0 10px;
}
.wp-ins-stat:last-child { border-right: 0; }
.wp-ins-stat-num {
    font-family: var(--wp-serif);
    font-size: 44px;
    font-weight: 700;
    color: var(--wp-ink);
    line-height: 1;
}
.wp-ins-stat-label {
    margin-top: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--wp-rose);
}

/* ── Footer ── */
.wp-footer {
    margin-top: 48px;
    padding: 32px 22px 48px;
    text-align: center;
    color: var(--wp-ink-3);
    font-size: 12px;
    border-top: 1px solid var(--wp-line);
}
.wp-footer a { color: var(--wp-ink-2); text-decoration: none; margin: 0 10px; }
.wp-footer a:hover { color: var(--wp-ink); }

/* ── Decorative rule (used in landing/blog/edge states) ── */
.wp-rule {
    display: flex; align-items: center; gap: 12px;
    color: var(--wp-rose);
}
.wp-rule::before, .wp-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wp-line);
}

/* ── Print ── */
@media print {
    .wp-hearts { display: none; }
    .wp-header, .wp-footer { display: none; }
    .wp-app, body { background: white; color: black; }
    .wp-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ════════════════════════════════════════════════════════════════
   Legacy class overrides — map old dashboard/section markup onto
   the new design vocabulary visually. The HTML structure stays intact
   so HTMX swap targets and the wp.js delegated dispatch
   (data-action="menu-toggle" / "pace-menu-toggle" / "plan-switch" /
   "modal-open" etc.) keep working.
   ════════════════════════════════════════════════════════════════ */

/* Theme toggle still used on public landing / blog pages (no wp-header partial there).
   Other legacy chrome rules (.header, .header-title, .nav-*, .badge-plus, .logout-form) deleted —
   wp-header partial owns all authenticated chrome now. */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: transparent; border: 0;
    color: var(--wp-rose);
    cursor: pointer;
    border-radius: 6px;
    text-decoration: none;
}
.theme-toggle:hover { background: var(--wp-card-2); color: var(--wp-ink); }

/* Legacy main container */
main {
    display: block;
    max-width: 880px;
    margin: 0 auto;
    padding: 28px 22px 64px;
    position: relative;
    z-index: 1;
}

.upcoming-dates-inline {
    display: inline-flex; gap: 8px; align-items: center;
    margin-left: auto;
    padding-bottom: 8px;
}
.upcoming-badge {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    background: var(--wp-rose-soft);
    border: 1px solid rgba(232,163,168,.3);
    border-radius: var(--wp-r-pill);
    font-size: 11px;
    color: var(--wp-rose-text);
    text-decoration: none;
    letter-spacing: .02em;
}
.upcoming-badge:hover { background: var(--wp-rose); color: var(--wp-rose-ink); }

/* Legacy standalone buttons (.btn-text / .btn-text-danger / .btn-icon /
   .btn-kebab / .btn-edit-notes / .btn-and / .btn-new-group) — still
   referenced by dashboard-content.html and section-content.html state
   branches that haven't been rewritten yet. The base .btn / .btn-primary /
   .btn-cancel / .btn-link / .btn-small / .btn-danger rules were deleted
   alongside their template references in the chrome migration slice. */
.btn-text {
    background: transparent; border: 0;
    color: var(--wp-rose);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0;
}
.btn-text-danger { color: var(--wp-danger); }
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: transparent; border: 0;
    color: var(--wp-ink-3);
    cursor: pointer;
    border-radius: 6px;
}
.btn-icon:hover { background: var(--wp-card-2); color: var(--wp-ink); }
.btn-and {
    border: 1px dashed var(--wp-line);
    background: transparent;
    color: var(--wp-ink-3);
    padding: 14px 24px;
    width: 100%;
    border-radius: var(--wp-r);
    font-style: italic;
    font-family: var(--wp-serif);
    font-size: 15px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    /* keep the dashed border from sitting flush against the last item */
    margin-top: var(--spacing-xs);
}
.btn-and:hover {
    border-color: var(--wp-rose);
    color: var(--wp-rose);
}

/* "All done!" sits below the "New group..." ghost button — give it a
   clear gap so the primary action doesn't look glued to the secondary one. */
.btn-new-group + .wp-btn-primary {
    margin-top: var(--spacing);
}

/* Legacy turn-indicator → centered card */
.turn-indicator {
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    padding: 44px 32px;
    text-align: center;
    margin-bottom: 22px;
    box-shadow: var(--wp-shadow-card);
}
.turn-indicator h2 {
    font-family: var(--wp-serif);
    font-style: italic;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--wp-ink);
    margin: 0 0 8px;
}
.turn-indicator p {
    color: var(--wp-ink-3);
    font-size: 14px;
    margin: 0 0 22px;
}
.turn-indicator.your-turn { background: var(--wp-card); }
.turn-indicator.waiting   { background: var(--wp-bg-soft); }

/* Ambient "while-you-wait" widgets: stats strip + one of memory/prompt. */
.waiting-extras {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
    margin-bottom: 22px;
}
.waiting-stats {
    display: flex;
    gap: 8px;
}
.waiting-stat {
    flex: 1;
    text-align: center;
    padding: 14px 8px;
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    box-shadow: var(--wp-shadow-card);
}
.waiting-stat-num {
    display: block;
    font-family: var(--wp-serif);
    font-style: italic;
    font-size: 26px;
    font-weight: 700;
    color: var(--wp-ink);
    letter-spacing: -.02em;
    line-height: 1;
}
.waiting-stat-label {
    display: block;
    font-size: 12px;
    color: var(--wp-ink-3);
    margin-top: 6px;
}
.waiting-card {
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    padding: 20px 22px;
    text-align: center;
    box-shadow: var(--wp-shadow-card);
}
.waiting-card-label {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wp-ink-3);
    margin: 0 0 10px;
}
.waiting-card-text {
    font-family: var(--wp-serif);
    font-style: italic;
    font-size: 18px;
    color: var(--wp-ink);
    margin: 0;
    line-height: 1.45;
}
.waiting-memory-notes {
    font-size: 13px;
    color: var(--wp-ink-3);
    margin: 8px 0 0;
}
@media (max-width: 480px) {
    .waiting-stat-num { font-size: 22px; }
    .waiting-card-text { font-size: 16px; }
    .waiting-stat-label { font-size: 11px; }
}

.your-turn-actions {
    display: flex; justify-content: center; gap: 10px;
    margin-top: -10px;
    margin-bottom: 22px;
}
.your-turn-actions .btn {
    padding: 12px 22px;
    font-size: 14px;
    background: var(--wp-rose);
    color: var(--wp-rose-ink);
    border-color: transparent;
}

/* Legacy planned-weekend → wp-card pad-lg */
.planned-weekend {
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    padding: 26px 28px;
    box-shadow: var(--wp-shadow-card);
    border-left: 4px solid var(--wp-rose);
    margin-bottom: 22px;
}
.planned-weekend-title {
    font-family: var(--wp-serif);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--wp-ink);
    margin: 0;
    line-height: 1.1;
}
.planned-weekend-when {
    color: var(--wp-ink-3);
    font-size: 13px;
    letter-spacing: .01em;
    margin: 6px 0 0;
}
.planned-by {
    color: var(--wp-ink-3);
    font-size: 12px;
    font-style: italic;
    margin: 4px 0 18px;
}

/* Plan tabs */
.plan-tabs {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    margin: 18px 0 16px;
}
.plan-tab {
    padding: 7px 16px;
    border-radius: var(--wp-r-pill);
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    color: var(--wp-ink-3);
    border: 1px solid var(--wp-line);
    cursor: pointer;
    font-family: inherit;
}
.plan-tab:hover { color: var(--wp-ink); border-color: var(--wp-ink-3); }
.plan-tab.active {
    background: var(--wp-rose);
    color: var(--wp-rose-ink);
    border-color: transparent;
}
.plan-tab-add {
    border-style: dashed;
    color: var(--wp-rose);
}

/* Plan panel + activities */
.plan-panel { margin-top: 6px; }
.activity-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}
.activity-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: start;
    gap: 4px 14px;
    padding: 16px 20px 16px 16px;
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    counter-increment: pickcount;
    position: relative;
    /* Smooth the un-fade when a kebab dropdown opens on a completed item
       (the :has() override above flips opacity 0.7 → 1). Short enough that
       it doesn't lag the menu open; long enough to glide rather than snap. */
    transition: opacity .12s ease;
}
/* counter-reset lives on the plan container so numbering is continuous across
   groups (item 01 in Saturday, item 02 in Sunday, etc.). Resetting per-list
   produced confusing duplicate "01"s when a plan had multiple groups. */
#plan-items-list { counter-reset: pickcount; }
.activity-item + .activity-item { margin-top: 10px; }
.activity-item::before {
    content: counter(pickcount, decimal-leading-zero);
    font-family: var(--wp-serif);
    font-style: italic;
    font-size: 22px;
    color: var(--wp-rose);
    letter-spacing: -.02em;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    text-align: right;
    line-height: 1;
    opacity: .85;
}
.activity-item-content {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-width: 0;
}
.activity-details {
    display: flex; flex-direction: column; gap: 4px;
}
.activity-title-row {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.activity-details strong, .activity-title-row strong {
    font-family: var(--wp-serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--wp-ink);
    line-height: 1.3;
}
.activity-item .notes {
    font-size: 13px;
    color: var(--wp-ink-2);
    padding-left: 12px;
    border-left: 2px solid var(--wp-rose);
    margin: 4px 0 0;
    line-height: 1.5;
    opacity: .9;
}
.activity-item .notes-author {
    font-style: italic;
    color: var(--wp-rose);
    font-weight: 500;
    margin-right: 6px;
}
.activity-menu {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    display: flex; align-items: center; gap: 6px;
    position: relative;
}
.activity-item.activity-completed strong,
.activity-item.activity-completed .activity-details strong {
    text-decoration: line-through;
    text-decoration-color: var(--wp-ink-4);
    color: var(--wp-strike);
}
.activity-item.activity-completed::before {
    color: var(--wp-ink-4);
}
.activity-item.activity-completed .notes {
    border-left-color: var(--wp-line);
    opacity: .7;
}
.activity-item.activity-completed .notes-author { color: var(--wp-ink-3); }

/* OR divider for alternatives */
.alternative-item {
    display: block;
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 8px;
}
.alt-divider {
    display: flex; align-items: center; gap: 14px;
    margin: 6px 0;
    font-family: var(--wp-serif); font-style: italic;
    font-size: 13px;
    color: var(--wp-rose);
    letter-spacing: .04em;
}
.alt-divider::before, .alt-divider::after {
    content: "";
    flex: 1;
    border-top: 1px dotted var(--wp-rose);
    opacity: .35;
}
.alt-divider span { padding: 0 4px; }
.alt-content {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: start;
    gap: 4px 14px;
    padding: 14px 20px 14px 16px;
    background: var(--wp-bg-soft);
    border: 1px solid var(--wp-line-soft);
    border-radius: var(--wp-r);
}
.alt-content::before {
    content: "↳";
    color: var(--wp-rose);
    font-size: 18px;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    text-align: right;
    opacity: .6;
}
.alt-content .activity-details, .alt-content .activity-surprise {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}
.alt-content .activity-menu {
    grid-column: 3;
    grid-row: 1;
}

/* Add-activity dashed prompt */
.add-activity {
    margin-top: 14px;
}

/* Plan secret bar (surprise toggle) */
.plan-secret-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: var(--wp-bg-soft);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    margin-bottom: 14px;
    cursor: pointer;
}
.plan-secret-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--wp-ink);
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px; height: 20px;
    flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; inset: 0;
    background: var(--wp-card-2);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-pill);
    transition: background .2s;
    cursor: pointer;
}
.toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    background: var(--wp-ink-3);
    border-radius: 50%;
    transition: left .2s, background .2s;
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--wp-rose);
    border-color: transparent;
}
.toggle-switch input:checked + .toggle-slider::before {
    left: 18px;
    background: var(--wp-rose-ink);
}

/* Surprise badge */
.activity-surprise {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}
.surprise-badge {
    display: inline-flex; align-items: center;
    padding: 4px 12px;
    background: var(--wp-rose-soft);
    border: 1px solid rgba(232,163,168,.3);
    border-radius: var(--wp-r-pill);
    font-size: 12px;
    font-weight: 500; /* preserved from the deduplicated older block — keeps the badge slightly bolder than other rose pills */
    color: var(--wp-rose-text);
    font-style: italic;
    font-family: var(--wp-serif);
}

/* Bonus + extension + swap notices */
.bonus-notice {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 18px;
    background: var(--wp-rose-soft);
    border: 1px solid rgba(232,163,168,.3);
    border-radius: var(--wp-r);
    color: var(--wp-rose-text);
    font-size: 13px;
    font-style: italic;
    margin-bottom: 14px;
}
.swap-request-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: var(--wp-bg-soft);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    margin-bottom: 14px;
}
.swap-request-banner p {
    margin: 0; flex: 1;
    font-size: 14px;
    color: var(--wp-ink);
}
.swap-actions { display: flex; gap: 8px; }
.swap-pending-text {
    font-size: 13px;
    color: var(--wp-ink-3);
    font-style: italic;
    margin-top: 14px;
}
.extension-notice {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 18px;
    background: var(--wp-bg-soft);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    margin-bottom: 14px;
    font-size: 13px;
}
.extension-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.extension-switch { font-size: 12px; color: var(--wp-ink-3); font-style: italic; }

/* Dashboard toolbar (extend select + pace pill) */
.dashboard-toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.dashboard-toolbar .extend-select {
    width: auto;
    min-width: 200px;
    padding: 7px 32px 7px 12px;
    font-size: 13px;
    background: var(--wp-input);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-sm);
    color: var(--wp-ink);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239e8f81' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.pace-setting { position: relative; margin-left: auto; }
.pace-trigger {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 14px;
    background: var(--wp-card-2);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-pill);
    font-size: 12px;
    color: var(--wp-ink-2);
    cursor: pointer;
    font-family: inherit;
}
.pace-trigger:hover { color: var(--wp-ink); }
.pace-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    box-shadow: var(--wp-shadow-pop);
    padding: 6px;
    min-width: 180px;
    display: none;
}
.pace-menu.open { display: block; }
.pace-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    color: var(--wp-ink-2);
    border-radius: var(--wp-r-sm);
    cursor: pointer;
}
.pace-option:hover { background: var(--wp-card-2); color: var(--wp-ink); }
.pace-option.active {
    background: var(--wp-rose-soft);
    color: var(--wp-rose-text);
}

/* Kebab dropdown (activity item action menu) */
.btn-kebab {
    color: var(--wp-ink-3);
    opacity: 0;
    transition: opacity .15s;
}
.activity-item:hover .btn-kebab,
.activity-item:focus-within .btn-kebab,
.btn-kebab:focus { opacity: 1; }
.kebab-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r);
    box-shadow: var(--wp-shadow-pop);
    padding: 6px;
    min-width: 200px;
    display: none;
}
.kebab-dropdown.open { display: block; }
.kebab-dropdown.drop-up { top: auto; bottom: 100%; margin-bottom: 6px; }
.kebab-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    background: transparent; border: 0;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    color: var(--wp-ink-2);
    border-radius: var(--wp-r-sm);
    cursor: pointer;
    text-align: left;
}
.kebab-item:hover { background: var(--wp-card-2); color: var(--wp-ink); }
.kebab-item-danger { color: var(--wp-danger); }
.kebab-item-danger:hover { background: rgba(200,120,120,.1); }

/* Drag handle — base styles + hover reveal live in the older "Drag & Drop"
   block above. A duplicate ruleset used to live here with display:none which
   broke pick reordering entirely (cascade-overrode the working rule). It was
   removed; do NOT re-introduce a competing .drag-handle definition here. */

/* Plan controls + delete */
.plan-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.plan-controls .btn { padding: 7px 14px; }
.plan-delete { margin-top: 16px; text-align: right; }

/* Form group inside legacy inline-form */
.form-group { margin-bottom: 14px; }
.form-group label, .login-form label, .inline-form label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--wp-ink-2);
    margin-bottom: 6px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="url"],
.form-group input[type="date"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group select,
.form-group textarea,
.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"],
.login-form input,
.login-form select,
.login-form textarea,
.inline-form input,
.inline-form select,
.inline-form textarea {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--wp-input);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-sm);
    color: var(--wp-ink);
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
/* Native select arrow — apply theme-aware chevron and prevent tiling */
.form-group select,
.login-form select,
.inline-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239e8f81' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}
[data-theme="light"] .form-group select,
[data-theme="light"] .login-form select,
[data-theme="light"] .inline-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23786b5e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.login-form input:focus,
.inline-form input:focus,
.inline-form textarea:focus {
    border-color: var(--wp-rose);
    box-shadow: 0 0 0 3px rgba(232,163,168,.15);
}
.modal-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 16px;
}
.modal-actions .btn { padding: 8px 16px; font-size: 13px; }

/* Edit notes button */
.btn-edit-notes {
    background: transparent; border: 0;
    color: var(--wp-ink-3);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .15s;
    display: inline-flex;
    align-items: center;
}
.activity-item:hover .btn-edit-notes,
.btn-edit-notes:focus { opacity: 1; color: var(--wp-rose); }

/* Auth styles legacy fallback (for any page still using them) */
.login-container { max-width: 420px; margin: 0 auto; padding: 32px 30px; background: var(--wp-card); border: 1px solid var(--wp-line); border-radius: var(--wp-r-lg); }
.login-container h1 { text-align: center; margin: 0 0 4px; font-family: var(--wp-serif); font-style: italic; font-weight: 700; font-size: 28px; color: var(--wp-ink); }
.login-container h2 { text-align: center; font-family: var(--wp-serif); font-size: 20px; color: var(--wp-ink); margin: 0 0 18px; }
.auth-tagline { text-align: center; color: var(--wp-ink-3); font-size: 13px; margin-bottom: 20px; }
.auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 22px; position: relative; z-index: 1; }
.auth-theme-toggle { position: absolute; top: 24px; right: 24px; }
.auth-footer { text-align: center; margin-top: 18px; color: var(--wp-ink-3); font-size: 13px; }
.error { background: rgba(200,120,120,.1); color: var(--wp-danger); padding: 10px 14px; border-radius: var(--wp-r-sm); border: 1px solid rgba(200,120,120,.3); font-size: 13px; margin-bottom: 14px; }
.success { background: rgba(141,180,129,.1); color: var(--wp-success); padding: 10px 14px; border-radius: var(--wp-r-sm); border: 1px solid rgba(141,180,129,.3); font-size: 13px; margin-bottom: 14px; }
.alert { padding: 12px 16px; border-radius: var(--wp-r-sm); font-size: 14px; }
.alert-success { background: rgba(141,180,129,.1); color: var(--wp-success); border: 1px solid rgba(141,180,129,.3); }
.alert-error { background: rgba(200,120,120,.1); color: var(--wp-danger); border: 1px solid rgba(200,120,120,.3); }
.text-muted { color: var(--wp-ink-3); }

.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%);
    background: var(--wp-ink);
    color: var(--wp-bg);
    padding: 12px 20px;
    border-radius: var(--wp-r-pill);
    font-size: 14px;
    box-shadow: var(--wp-shadow-pop);
    transition: transform .25s ease, opacity .25s ease;
    z-index: 1100;
    /* Hidden default: translateY(120%) alone isn't enough when the toast
       container is empty — 120% of nearly-zero height is nearly zero, so
       the empty pill stays visible at the viewport bottom. opacity + no
       pointer events do the real hiding; transform handles the slide
       animation when toast-visible flips. */
    opacity: 0;
    pointer-events: none;
}
.toast.toast-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
/* Level variants — WP.toast(msg, "error" | "success") applies these classes
   so failure feedback ("Failed to delete") is visually distinct from success
   ("Date deleted"). Default (no class) keeps the dark-ink look used by
   neutral notifications like clipboard copies. */
.toast.toast-error   { background: var(--wp-danger);  color: #fff; }
.toast.toast-success { background: var(--wp-success); color: #fff; }

/* Per-step alternative status */
.alternative-item.activity-completed strong { text-decoration: line-through; color: var(--wp-strike); }

/* Tooltip pseudo — appears above .has-tooltip[data-tooltip] elements on hover */
.has-tooltip { position: relative; }
.has-tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--wp-ink);
    color: var(--wp-bg);
    padding: 4px 8px;
    border-radius: var(--wp-r-sm);
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 60;
}

/* ════════════════════════════════════════════════════════════════
   Mobile responsiveness (≤720px)
   The redesign was originally desktop-only; this block adds the
   layout adjustments that make the app usable on phones and small
   tablets without rewriting any markup. Each section overrides the
   default desktop rule with a phone-friendly variant.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

    /* ── Header: stack brand and nav, hide pair label (secondary on phone) ── */
    .wp-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 16px;
        margin: 12px 14px 0;
        max-width: none;
    }
    .wp-header-brand {
        font-size: 18px;
        line-height: 1.1;
    }
    .wp-header-brand::before { font-size: 13px; }
    /* Show the pair name + swap toggle on phones too, as its own centered row.
       (Previously display:none — the toggle was unreachable on mobile.) The
       desktop connector lines stay hidden; long combined names ellipsis instead
       of forcing horizontal scroll. */
    .wp-header-pair {
        display: flex;
        justify-content: center;
        min-width: 0;
    }
    .wp-header-pair::before,
    .wp-header-pair::after { display: none; }
    .wp-header-pair .wp-pair-toggle { max-width: 100%; }
    .wp-header-pair .wp-pair-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .wp-header-nav {
        gap: 14px;
        flex-wrap: wrap;
        font-size: 13px;
        row-gap: 8px;
        justify-content: flex-start;
    }
    .wp-header-nav a { font-size: 13px; }

    /* ── Container: tighter side padding ── */
    .wp-container {
        max-width: none;
        padding: 18px 16px 48px;
    }
    .wp-container.is-narrow { padding: 28px 18px 56px; }
    .wp-container.is-wide   { padding: 18px 16px 48px; }

    /* ── Tabs: horizontally scrollable so 4+ tabs never overflow ── */
    .wp-tabs {
        gap: 22px;
        margin-bottom: 18px;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 1px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .wp-tabs::-webkit-scrollbar { display: none; }
    .wp-tabs a, .wp-tabs .wp-tab {
        white-space: nowrap;
        font-size: 13px;
        flex-shrink: 0;
        padding: 10px 0;
    }
    .wp-tabs-aside {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: 4px;
        padding-bottom: 0;
        order: 2;
    }

    /* ── Page heads: stack title block and CTA ── */
    .wp-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .wp-page-head .wp-btn,
    .wp-page-head a.wp-btn { align-self: flex-start; }

    /* ── Headline scale ── */
    .wp-h1 { font-size: 30px; line-height: 1.1; padding-bottom: .06em; }
    .wp-h2 { font-size: 22px; }
    .wp-h3 { font-size: 17px; }
    .wp-h-eyebrow { font-size: 10px; }
    .wp-tagline { margin-bottom: 22px; }

    /* ── Cards: lighter padding so content breathes ── */
    .wp-card-pad-lg { padding: 20px 18px; }
    .wp-btn-lg { padding: 10px 18px; font-size: 14px; }

    /* ── Auth / state pages: full-width form column ── */
    .wp-auth-card,
    .wp-state-card { padding: 28px 20px; }
    .wp-corner-toggle { top: 14px; right: 14px; }

    /* ── History journal week: compact head, action cluster wraps below ── */
    .wp-week { margin-bottom: 24px; }
    .wp-week-head {
        grid-template-columns: 1fr auto;
        gap: 6px 14px;
    }
    .wp-week-date { font-size: 19px; }
    .wp-week-author {
        grid-column: 1 / -1;
        font-size: 13px;
    }
    .wp-week-status { font-size: 11px; align-self: start; }

    .wp-week-row {
        grid-template-columns: 26px 1fr;
        gap: 10px;
        padding: 12px 0 14px;
    }
    .wp-week-row-num { font-size: 16px; }
    .wp-week-row-title { font-size: 15px; }
    .wp-week-row-actions {
        grid-column: 1 / -1;
        opacity: 1; /* always visible on touch */
        justify-content: flex-end;
        margin-top: 4px;
    }
    .wp-week-row:hover {
        background: transparent;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* ── Activities section list ── */
    .wp-section-row {
        grid-template-columns: auto 1fr auto;
        gap: 10px;
        padding: 14px 16px;
    }
    .wp-section-row-actions { gap: 4px; }
    .wp-section-row .wp-icon-btn { opacity: 1; }
    .wp-section-name { font-size: 17px; }
    .wp-section-row-tags { gap: 4px; }
    .wp-section-row-tags .wp-pill { font-size: 9px; padding: 2px 6px; }

    /* ── Movie history journal row: rating chips wrap to second line ── */
    .wp-history-row {
        grid-template-columns: 36px 1fr auto;
        gap: 8px 14px;
        padding: 14px 4px;
    }
    .wp-history-row-num { font-size: 14px; padding-top: 2px; }
    .wp-history-row-title { font-size: 16px; }
    .wp-history-row > .wp-rating-chips {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 4px;
    }
    .wp-history-row > .wp-icon-btn { align-self: start; }

    /* ── Settings (profile) ── */
    .wp-settings-grid { grid-template-columns: 1fr; }
    .wp-settings-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .wp-settings-card { padding: 18px 16px; }
    .wp-settings-actions { flex-wrap: wrap; }

    /* ── Idea row ── */
    .wp-idea-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 16px 14px 24px;
        align-items: start;
    }
    .wp-idea-actions { justify-content: flex-end; }
    .idea-drag-handle { opacity: 0.5; }

    /* ── Upgrade page ── */
    .wp-upgrade-hero { margin: 16px 0 18px; }
    .wp-upgrade-card { padding: 18px 16px; }
    .wp-upgrade-features { gap: 14px 16px; }
    .wp-upgrade-feature strong { font-size: 14px; }

    /* ── Modal sizing ── */
    .modal-dialog,
    .confirm-dialog {
        width: calc(100vw - 24px);
        max-width: none;
        margin: 12px;
    }
    .modal-actions {
        flex-wrap: wrap;
    }
    .modal-actions .wp-btn { flex: 1 1 auto; min-width: 0; }

    /* ── Picks (dashboard centerpiece) ── */
    .wp-pick {
        grid-template-columns: 30px 1fr;
        gap: 10px;
    }
    .wp-pick-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin-top: 4px;
        opacity: 1;
    }
    .wp-pick-num { font-size: 17px; }
    .wp-pick-title { font-size: 15px; }

    /* ── Plan tabs (Plan A / + Plan B) ── */
    .wp-plan-tabs {
        gap: 4px;
        flex-wrap: wrap;
    }
    .wp-plan-tab { padding: 6px 12px; font-size: 12px; }

    /* ── Insights numerals ── */
    .wp-ins-number { font-size: clamp(72px, 18vw, 96px); }

    /* Floating hearts: full size at every viewport. A previous attempt at
       `transform: scale(.7)` here clobbered the per-heart keyframe transforms
       (rotate/translate3d) that drive wp-heart-drift, freezing the animation. */

    /* ── Banner / pill ── */
    .wp-banner {
        padding: 12px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ── Wrapping for tags-aside (dashboard upcoming dates) ── */
    .wp-tabs-aside .wp-pill { font-size: 10px; padding: 2px 8px; }
}

@media (max-width: 480px) {
    /* Phones: tighter still */
    .wp-h1 { font-size: 26px; }
    .wp-h2 { font-size: 20px; }
    .wp-card-pad-lg { padding: 18px 16px; }
    .wp-container { padding: 14px 12px 40px; }
    .wp-header { padding: 12px 14px; margin: 10px 10px 0; }
    .wp-header-nav { gap: 12px; font-size: 12px; }
    .wp-week-date { font-size: 18px; }
    .wp-week-row-title { font-size: 14px; }

    /* Hide tabs-aside (upcoming dates) on tiny phones — duplicates info from /us/dates */
    .wp-tabs-aside { display: none; }
}

/* Skip-link for keyboard users — hidden until focused. */
.wp-skip-link {
    position: absolute;
    top: -40px;
    left: 8px;
    background: var(--wp-rose, #b14a5c);
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    z-index: 10000;
    transition: top 120ms ease-out;
}
.wp-skip-link:focus {
    top: 8px;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════
   Utilities — minimal, token-backed spacing and display helpers.
   Added in the Phase 9 refactor so high-frequency inline styles
   (e.g. style="margin-top:14px") can be replaced with a class.
   ════════════════════════════════════════════════════════════════ */

/* Margin-top scale. The plain `.wp-mt` matches the historical 14px
   value that appeared 22+ times in templates. */
.wp-mt-xs { margin-top: 4px; }
.wp-mt-sm { margin-top: 8px; }
.wp-mt    { margin-top: 14px; }
.wp-mt-md { margin-top: 18px; }
.wp-mt-lg { margin-top: 24px; }

/* Display helpers. */
.wp-d-inline       { display: inline; }
.wp-d-inline-flex  { display: inline-flex; }
.wp-d-none         { display: none; }

/* Alignment. */
.wp-text-center { text-align: center; }

/* Dynamic accents driven by a per-instance --picker-color variable
   (set via inline `style="--picker-color: …"` so the data binding
   stays in HTML while the rule lives here). */
.wp-picker-bordered { border-left-color: var(--picker-color); }

/* ───────────────────────────────────────────────────────────────────
   Us-tab modal rework (2026-05-14)
   ─────────────────────────────────────────────────────────────────── */

/* Empty-state CTA shown in place of an empty list. */
.wp-empty-state-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}
.wp-empty-state-text {
    color: var(--color-text-muted, #5d5550);
    margin: 0 auto 1rem;
    max-width: 32rem;
}

/* Card header row: section title left, primary CTA right. */
.wp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.wp-card-header .wp-h3 {
    margin: 0;
}

/* Per-row action button cluster (Edit + Delete) used by milestone-card,
   detail-row, wishlist-item. Aligned right within their parent row. */
.milestone-actions,
.detail-actions,
.wishlist-item-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* Wishlist sections within wishlist-items-list partial — each section
   (yours / partner's) is a visual subdivision of the same card. */
.wp-wishlist-section {
    margin-bottom: 1.5rem;
}
.wp-wishlist-section:last-child {
    margin-bottom: 0;
}

/* Modal form body shared by add/edit forms inside #form-modal.
   Direct-child selectors (`>`) keep this from cascading into nested
   form-groups inside a .form-row — those nested siblings must not get
   a margin-top or the row's columns visually shear apart. */
.wp-modal-form > .form-group + .form-group,
.wp-modal-form > .form-row + .form-group,
.wp-modal-form > .form-group + .form-row,
.wp-modal-form > .form-row + .form-row {
    margin-top: 0.75rem;
}

/* Top-align flex children inside .form-row when it's inside a
   .wp-modal-form, so columns of different intrinsic height (e.g. when
   one column adds a hint or wraps) keep their labels and inputs lined
   up at the top. Scoped to .wp-modal-form so the rule doesn't impose
   an alignment opinion on .form-rows that may appear in other contexts
   (dashboard pick-form, section forms, etc.). */
.wp-modal-form .form-row {
    align-items: flex-start;
}

/* The "Remind me" row when the user is on free tier — replaces the
   disabled <select> with a single Plus-required hint. */
.wp-remind-locked {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-card-2, #f0e9dd);
    border-radius: 0.5rem;
}

/* Upgrade fragment shown inside the form-modal when a free-tier user
   has reached the 3-date limit. Title + body + action row. */
.wp-modal-upgrade {
    text-align: center;
    padding: 0.5rem 0.25rem 0;
}
.wp-modal-upgrade-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}
.wp-modal-upgrade-text {
    color: var(--color-text-muted, #5d5550);
    margin: 0 0 1.25rem;
}

/* Modal entrance polish: backdrop blur + scale-fade dialog. Respects
   reduced-motion preference. */
@keyframes wpModalIn {
    from { opacity: 0; transform: scale(0.96) translateY(0.5rem); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-overlay {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.modal-overlay .modal-dialog {
    animation: wpModalIn 0.18s ease-out;
}

/* Neutral placeholder inside the modal body — used for the "Loading…"
   state while HTMX fetches the form, and for the friendly "Something
   went wrong" message when that fetch fails. Same visual treatment for
   both (centered muted text); the JS swaps the inner content + adds
   `role="alert"` on the error variant so screen readers announce it. */
.wp-modal-placeholder {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-muted, #5d5550);
}

/* Mobile sheet variant: below 640px the modal becomes a bottom sheet
   that slides up. The base overlay has padding (60px top / 22px sides /
   40px bottom) for desktop comfort; we zero it out here so the sheet
   sits flush against viewport edges and bottom. */
@media (max-width: 640px) {
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .modal-overlay .modal-dialog {
        width: 100%;
        max-width: 100%;
        margin: 0;
        max-height: 90vh;
        border-radius: 1rem 1rem 0 0;
        animation: wpSheetIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    @keyframes wpSheetIn {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

/* Honor user's reduced-motion preference for both desktop and mobile. */
@media (prefers-reduced-motion: reduce) {
    .modal-overlay .modal-dialog { animation: none !important; }
    .toast { transition: none !important; }
    /* Suppress the kebab-open un-fade glide for users who prefer instant UI. */
    .activity-item,
    .alternative-item { transition: none !important; }
}

/* ───────────────────────────────────────────────────────────────────
   About Us suggestion-chip rework (2026-05-17)
   ─────────────────────────────────────────────────────────────────── */

/* In-modal Quick Start chip row — eyebrow framing above the Label/
   Value form-row with a faint separator below. Lives ONLY inside the
   Add Detail modal; page-side chips were removed in a follow-up to
   avoid duplication (chips and the +Add Detail button do the same
   thing). */
.quickstart-section {
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--wp-line);
}
.quickstart-section .wp-h-eyebrow {
    margin-bottom: 0.5rem;
}
.quickstart-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Mobile: keep chips visible without forcing tall wrap — let them
   wrap naturally; the modal already shrinks to fit. */
@media (max-width: 640px) {
    .quickstart-chips {
        gap: 0.35rem;
    }
}