/* The retired inline app's stylesheet, verbatim, in one cascade layer (the boot splash keeps
   its own inline block in the shell so it paints before JS). React rules stay unlayered, so
   they win over anything here exactly as they did when wickette.css loaded after the inline
   styles. */
@layer legacy {
  /* Wickette palette. A wicket is a small garden gate, so the accent is sage and the
     ground stays warm cream. Gold is demoted to a secondary: it survives only where it
     is doing a job sage can't — the journey progress rings, the check-off confetti, and
     the plan-strength ramp (whose "strong" step is already a dark green).
     The hexes are still written out literally throughout the file; these vars are the
     canonical reference for new work, so reach for var(--accent) rather than a hex. */
  /* ====================================================================
     Wickette color system — raw scales, then semantic roles. Components
     reference the semantic --color-* roles (or the legacy aliases at the
     bottom, repointed here), never the raw scales directly. */
  :root {
    /* Raw scales (paint; unchanged between light and dark) */
    --chartreuse-wash: #f1efd8; --chartreuse-light: #dbd36a; --chartreuse-base: #d5cc51;
    --chartreuse-muted: #b9b06a; --chartreuse-ink: #6f661a;
    --pink-wash: #f1dee7; --pink-light: #c1698f; --pink-marketing: #9b3c60;
    --pink-base: #7a2e4d; --pink-pressed: #5e2138;
    --navy-50: #e8edf5; --navy-300: #a8bedc; --navy-600: #34537f;
    --navy-700: #2c4668; --navy-800: #1f3049; --navy-900: #16233a;
    --green-50: #edf0e4; --green-200: #afbe93; --green-400: #8ca368;
    --green-500: #74904f; --green-700: #4c6635; --green-900: #2a3d26;
    --greige-50: #fdfbf7; --greige-100: #f7f4ed; --greige-200: #efebe1; --greige-300: #e3ded4;
    --greige-400: #cfc9bc; --greige-500: #ada69a; --greige-600: #8a8378; --greige-700: #635c55;
    --greige-800: #423d38; --greige-900: #2a2724;
    --status-success: #3f7a55; --status-success-light: #6bae80; --status-success-wash: #e6f0e9;
    --status-warning: #96600c; --status-warning-light: #e0a340; --status-warning-wash: #f9eeda;
    --status-danger: #c0424c; --status-danger-light: #e8737e; --status-danger-wash: #f8e6e7;
    --dark-canvas: #161a22; --dark-surface: #1f2634; --dark-raised: #262e3e;
    --dark-border: #2c3140; --dark-border-strong: #3d4354; --dark-ink: #f2eee6; --dark-secondary: #b4ada2;

    /* Semantic roles — light */
    --color-bg: var(--greige-50); --color-bg-surface: var(--greige-100); --color-bg-raised: var(--greige-200);
    --color-border: var(--greige-300); --color-border-strong: var(--greige-400);
    --color-text: var(--greige-900); --color-text-secondary: var(--greige-700);
    --color-text-muted: var(--greige-600); --color-text-disabled: var(--greige-500);
    --color-brand: var(--chartreuse-base); --color-brand-ink: var(--chartreuse-ink);
    --color-brand-wash: var(--chartreuse-wash); --color-on-brand: var(--greige-900);
    --color-primary: var(--pink-base); --color-primary-hover: var(--pink-pressed);
    --color-primary-wash: var(--pink-wash); --color-on-primary: var(--greige-50);
    --color-chrome: var(--navy-800); --color-on-chrome: var(--greige-50);
    --color-link: var(--navy-600); --color-link-wash: var(--navy-50);
    --color-accent-green: var(--green-700); --color-accent-green-wash: var(--green-50);
    --color-success: var(--status-success); --color-success-wash: var(--status-success-wash);
    --color-warning: var(--status-warning); --color-warning-wash: var(--status-warning-wash);
    --color-danger: var(--status-danger); --color-danger-wash: var(--status-danger-wash);
    --color-on-status: var(--greige-50);

    /* Legacy aliases, repointed to the new roles (older code still uses these) */
    --ink: var(--color-text); --body: var(--greige-800); --muted: var(--color-text-secondary);
    --faint: var(--color-text-disabled); --ground: var(--color-bg); --line: var(--color-border);
    --accent: var(--color-primary); --accent-deep: var(--color-primary-hover);
    --accent-soft: var(--color-primary-wash); --gold: var(--color-brand); --gold-bright: var(--color-brand);
  }

  /* Semantic roles — dark (only the role layer is reassigned) */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --color-bg: var(--dark-canvas); --color-bg-surface: var(--dark-surface); --color-bg-raised: var(--dark-raised);
      --color-border: var(--dark-border); --color-border-strong: var(--dark-border-strong);
      --color-text: var(--dark-ink); --color-text-secondary: var(--dark-secondary);
      --color-text-muted: var(--greige-600); --color-text-disabled: var(--greige-700);
      --color-brand: var(--chartreuse-light); --color-brand-ink: var(--chartreuse-light);
      --color-brand-wash: #2e2b1c; --color-on-brand: var(--dark-canvas);
      --color-primary: var(--pink-light); --color-primary-hover: var(--pink-marketing);
      --color-primary-wash: #331f29; --color-on-primary: var(--dark-canvas);
      --color-chrome: var(--dark-surface); --color-on-chrome: var(--dark-ink);
      --color-link: var(--navy-300); --color-link-wash: #1c2635;
      --color-accent-green: var(--green-200); --color-accent-green-wash: #232a1d;
      --color-success: var(--status-success-light); --color-success-wash: #1b2a20;
      --color-warning: var(--status-warning-light); --color-warning-wash: #2d2417;
      --color-danger: var(--status-danger-light); --color-danger-wash: #2e1b1d;
      --color-on-status: var(--dark-canvas);
    }
  }
  [data-theme='dark'] {
    --color-bg: var(--dark-canvas); --color-bg-surface: var(--dark-surface); --color-bg-raised: var(--dark-raised);
    --color-border: var(--dark-border); --color-border-strong: var(--dark-border-strong);
    --color-text: var(--dark-ink); --color-text-secondary: var(--dark-secondary);
    --color-text-muted: var(--greige-600); --color-text-disabled: var(--greige-700);
    --color-brand: var(--chartreuse-light); --color-brand-ink: var(--chartreuse-light);
    --color-brand-wash: #2e2b1c; --color-on-brand: var(--dark-canvas);
    --color-primary: var(--pink-light); --color-primary-hover: var(--pink-marketing);
    --color-primary-wash: #331f29; --color-on-primary: var(--dark-canvas);
    --color-chrome: var(--dark-surface); --color-on-chrome: var(--dark-ink);
    --color-link: var(--navy-300); --color-link-wash: #1c2635;
    --color-accent-green: var(--green-200); --color-accent-green-wash: #232a1d;
    --color-success: var(--status-success-light); --color-success-wash: #1b2a20;
    --color-warning: var(--status-warning-light); --color-warning-wash: #2d2417;
    --color-danger: var(--status-danger-light); --color-danger-wash: #2e1b1d;
    --color-on-status: var(--dark-canvas);
  }

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

  .serif { font-family: 'Cormorant Garamond', Georgia, serif; }

  /* The standing (closed) wicket — the logotype's companion mark. Strokes inherit
     currentColor, so it takes the colour of whatever it sits in. Same drawing the boot
     overlay splits in half and swings open. */
  .gate-mark { flex: none; display: block; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #fdfbf7;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #2a2724;
    overflow-x: hidden;
  }

  /* App surface — mobile-first column, fills the viewport on any screen */
  .phone {
    width: 100%;
    max-width: 420px;
    min-width: 0;
    height: 100dvh;
    background: white;
    box-shadow: 0 0 60px rgba(24,36,32,0.08);
    overflow: hidden;
    position: relative;
  }

  /* Scroll region inside the app surface */
  .viewport {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .viewport::-webkit-scrollbar { width: 0; }

  /* Screen */
  .screen { display: none; padding: 0 0 90px; min-height: 100%; }
  .screen.active { display: block; }

  /* Content padding */
  /* 88px bottom: the nav is absolutely positioned over this scroll area, so the
     last element needs room to clear it (66px nav + 22px breathing space). */
  .content { padding: 16px 20px 88px; }

  /* ── Desktop shell ─────────────────────────────────────────── */
  @media (min-width: 860px) {
    body { flex-direction: row; align-items: stretch; }
    .phone {
      max-width: none;
      flex: 1;
      height: 100dvh;
      box-shadow: none;
    }
    /* Content sits in a centered, readable column within the wide surface */
    .screen { max-width: 960px; margin: 0 auto; padding-bottom: 48px; }
  }

  /* Cards */
  .card {
    background: #fdfbf7;
    border: 1px solid #e3ded4;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 12px;
  }
  .card-title {
    font-size: 13px;
    font-weight: 600;
    color: #2a2724;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .card-title i { font-size: 16px; }

  .stat {
    background: #FFFFFF;
    border: 1px solid #e3ded4;
    border-radius: 16px;
    padding: 14px 16px;
  }

  /* Inbox */
  .thread { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #e3ded4; align-items: flex-start; cursor: pointer; }
  .thread:last-child { border-bottom: none; }
  .thread:first-child { padding-top: 0; }
  .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: #e3ded4;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color: #635c55;
    flex-shrink: 0;
  }

  /* Vendor rows */

  /* Badges */

  /* Category labels */
  .cat-label {
    font-size: 11px; font-weight: 600; color: #635c55;
    letter-spacing: 0.06em; text-transform: uppercase;
    margin: 4px 2px 8px;
  }

  /* Saved grid */

  /* Price / confirm-with-vendor block */
  .price-block { margin-top: 12px; background: #f7f4ed; border: 1px solid #e3ded4; border-radius: 12px; padding: 10px 12px; }

  .act {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 12px 8px; border-radius: 16px; border: none; cursor: pointer;
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em; transition: transform 0.12s;
  }
  .act:hover { transform: translateY(-2px); }
  .act:disabled { opacity: 0.4; cursor: default; transform: none; }
  .act i { font-size: 24px; }
  .act.back  { background: #fdfbf7; color: #635c55; }
  .act.no    { background: #f8e6e7; color: #c0424c; }

  .act.yes   { background: #e6f0e9; color: #3f7a55; }
  .deck-empty { text-align: center; color: #635c55; font-size: 13px; padding: 48px 26px; line-height: 1.6; }

  /* Global loading circle: shown whenever any api() request is in flight (see _apiLoad). */
  /* No disc behind it — just the gate. The element shrink-to-fits the SVG, so the
     translate still centres on the mark itself. */
  .app-loader { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4000;
    display: none; align-items: center; justify-content: center; pointer-events: none; }
  .app-loader.on { display: flex; }
  /* The loader builds the gate instead of spinning a ring: the posts slide in from either side,
     the rails grow out of them, the W pops into place, it holds a beat, then fades and goes again.
     Distances are in the logo's own units, so it scales with whatever size the loader is drawn at. */
  .gate-load { overflow: visible; flex: none; }
  .app-loader .gate-load { width: 27px; height: 25px; color: var(--wk-lime); }   /* no shadow: it muddied the lime */
  .gate-load path, .gate-load .w { transform-box: fill-box; animation: 2.2s cubic-bezier(.3,.7,.3,1) infinite; }
  .gate-load .posts path:nth-child(1) { animation-name: gate-post-l; }
  .gate-load .posts path:nth-child(2) { animation-name: gate-post-r; }
  .gate-load .rails path { animation-name: gate-rail; transform-origin: left center; }
  .gate-load .rails path:nth-child(even) { transform-origin: right center; }
  .gate-load .w { animation-name: gate-w; transform-origin: center; }
  .gate-load .w path { animation: none; }
  @keyframes gate-post-l {
    0% { opacity: 0; transform: translateX(-70px); } 20%, 80% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; }
  }
  @keyframes gate-post-r {
    0% { opacity: 0; transform: translateX(70px); } 20%, 80% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; }
  }
  @keyframes gate-rail {
    0%, 15% { transform: scaleX(0); } 38%, 80% { opacity: 1; transform: scaleX(1); } 95%, 100% { opacity: 0; transform: scaleX(1); }
  }
  @keyframes gate-w {
    0%, 32% { opacity: 0; transform: scale(.4); } 46% { opacity: 1; transform: scale(1.1); }
    54%, 80% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .gate-load path, .gate-load .w { animation: none; opacity: .85; }
  }

  @keyframes coachIn  { from { opacity:0 } to { opacity:1 } }
  @keyframes coachOut { from { opacity:1 } to { opacity:0 } }

  /* A soft ring drawn on the control we're pointing at, and a caption attached to it.
     Both are pointer-events:none — the thing underneath stays tappable, and tapping it
     is what dismisses the coach. */
  .coach-ring { position:fixed; z-index:118; pointer-events:none; border-radius:16px;
    border:2px solid #d5cc51; box-shadow:0 0 0 3px rgba(213,204,81,.22), 0 0 0 9999px rgba(24,28,38,.30);
    animation:coachRing 2s ease-in-out infinite; }
  @keyframes coachRing {
    0%,100% { box-shadow:0 0 0 3px rgba(213,204,81,.20), 0 0 0 9999px rgba(24,28,38,.30) }
    50%     { box-shadow:0 0 0 9px rgba(213,204,81,.06), 0 0 0 9999px rgba(24,28,38,.30) }
  }
  .coach-tap { position:fixed; z-index:119; pointer-events:none; width:34px; height:34px;
    margin:-17px 0 0 -17px; border-radius:50%; border:2px solid rgba(213,204,81,.9);
    animation:coachTap 2s ease-out infinite; }
  @keyframes coachTap {
    0%   { transform:scale(.35); opacity:0 }
    22%  { opacity:.95 }
    70%  { transform:scale(1.5); opacity:0 }
    100% { transform:scale(1.5); opacity:0 }
  }

  /* One-time pointer at the bottom nav, so the tabs get named once. */
  .nav-coach { position:fixed; left:12px; right:12px; z-index:120; display:flex; align-items:flex-start; gap:10px;
    background:#1f3049; color:#fdfbf7; border-radius:14px; padding:12px 14px;
    box-shadow:0 10px 30px rgba(24,36,32,.28); animation:coachIn .4s ease both; }
  .nav-coach.out { animation:coachOut .3s ease both; }
  .nav-coach i.lead { color:#d5cc51; font-size:17px; flex-shrink:0; margin-top:1px; }
  .nav-coach .nc-txt { flex:1; font-size:12.5px; line-height:1.5; }
  .nav-coach .nc-txt b { font-weight:700; }
  .nav-coach .nc-x { background:none; border:none; color:rgba(253,251,247,.6); font-size:13px;
    cursor:pointer; padding:2px 0 0 4px; flex-shrink:0; font-family:inherit; }
  .nav-coach::after { content:''; position:absolute; bottom:-6px; left:50%; margin-left:-6px;
    width:12px; height:12px; background:#1f3049; transform:rotate(45deg); }
  .nav-coach.below::after { bottom:auto; top:-6px; }

  /* screen 1: category grid */

  /* screen 2: saved masonry */
  /* "Your vendor" hero — the booked pick, pulled to the top of the category and highlighted */
  /* screen 3: vendor detail */


  /* Editable budget rows */

  .pay-status { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: #edf0e4; color: #34537f; white-space: nowrap; }
  .pay-status.partially_refunded { background: #fdf3df; color: #96600c; }
  .pay-status.refunded { background: #f1efeb; color: #635c55; }
  .be-refund { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 99px; border: 1px solid #cfc9bc; background: #fff; color: #635c55; cursor: pointer; white-space: nowrap; }
  .be-refund:hover { border-color: #96600c; color: #96600c; }
  .rcpt-line { border-top: 1px solid #e3ded4; padding-top: 8px; margin-top: 8px; }
  .rcpt-line:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

  /* Buttons */
  /* Primary action carries the sage accent — the one place the brand colour has to
     land, since it's what every screen's main CTA looks like. */
  .btn {
    display: block; width: 100%; padding: 12px 16px;
    background: #7a2e4d; color: #edf0e4;
    border: none; border-radius: 14px;
    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
    cursor: pointer; text-align: center;
    margin-top: 10px; transition: background 0.2s, opacity 0.2s;
  }
  .btn:hover { background: #5e2138; }
  .btn.green { background: #7a2e4d; }
  .btn.green:hover { background: #5e2138; }
  /* Opt-out for the few places that still want the dark ink button (e.g. on a sage fill). */
  .btn.ink { background: #1f3049; color: #fdfbf7; }
  .btn.ink:hover { background: #16233a; }
  .btn-ghost {
    display: block; width: 100%; padding: 12px 16px;
    background: none; color: #635c55;
    border: 1px solid #e3ded4; border-radius: 14px;
    font-size: 13px; font-weight: 500;
    cursor: pointer; text-align: center;
    margin-top: 8px; transition: all 0.2s;
  }
  .btn-ghost:hover { background: #fdfbf7; border-color: #cfc9bc; }
  .btn-sm { padding: 7px 12px; font-size: 12px; width: auto; display: inline-block; margin-top: 0; }

  /* Section header */
  .screen-header { padding: 16px 20px 8px; }
  .screen-title { font-size: 24px; font-weight: 600; color: #2a2724; font-family: 'Cormorant Garamond', Georgia, serif; letter-spacing: -0.2px; }
  .screen-sub { font-size: 13px; color: #635c55; margin-top: 2px; }

  /* Small pill actions on card headers. These were bare <button>s with no background
     rule, so they fell back to the browser's native chrome. */
  .btn-pill {
    background: #FFFFFF; border: 1px solid #e3ded4; border-radius: 20px;
    padding: 6px 13px; font-size: 11px; font-weight: 500; color: #423d38;
    cursor: pointer; transition: border-color .18s ease, color .18s ease;
    font-family: inherit; white-space: nowrap;
  }
  .btn-pill:hover { border-color: #34537f; color: #34537f; }

  .cmp-back-link { background: none; border: none; color: #635c55; font-weight: 600; font-size: 13px; cursor: pointer; padding: 4px 0; display: inline-flex; align-items: center; gap: 2px; margin-bottom: 10px; }

}


.site-step+.site-step{border-top:1px solid rgba(255,255,255,.55)}
/* The Wickette palette from the designers' Figma file (the same values as landing.css), for the
   surfaces moved to it so far: the tab bar, the sidebar, Explore and the kit.css pieces. Dark mode follows the
   legacy roles: the OS setting unless data-theme says otherwise. Olive is for marks and bars,
   never text; moss is the accent that holds AA as text. The main button is navy with lime words;
   in dark mode, where ink turns light, it flips to lime with navy words. Edge is the 3:1 outline
   of a control (a field, a check); cards keep the hairline. The Plan tab's frames add white pages,
   cool gray tracks and hairlines, cream note cards and the person tints (sky, sand), Manrope for
   the words, white on navy, and the deep blue of the selected tab. An off switch's track is
   darker than the frames' so it reads as tappable: 3:1 against every surface a switch sits on. */
:root {
  --wk-ground: #F7F4EC; --wk-card: #FFFFFF; --wk-ink: #141B3C; --wk-body: #3A4060; --wk-muted: #62667A;
  --wk-line: #E4E0D3; --wk-grip: #D3CFC2; --wk-lime: #CFE83A; --wk-on-lime: #141B3C; --wk-olive: #9BB51E;
  --wk-moss: #5C6B12; --wk-wash: #EEF6C4; --wk-plum: #8E1F5A; --wk-plum-wash: #F4E8EE;
  --wk-btn: #141B3C; --wk-on-btn: #CFE83A; --wk-dot: #A9A69B; --wk-edge: #8A8E9F;
  --wk-serif: 'Cormorant Garamond', Georgia, serif; --wk-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wk-on-navy: #FFFFFF; --wk-tab-on: #1F2E8A;
  --wk-paper: #FFFFFF; --wk-track: #F3F3F6; --wk-hair: #ECECF0; --wk-stroke: #DEDFE6; --wk-bar: #E4E4EA;
  --wk-note: #FBF8EE; --wk-note-edge: #EFE8D2; --wk-off: #ECE8DC;
  --wk-sky: #E6ECF7; --wk-on-sky: #2F4A7A; --wk-sand: #F6EED9; --wk-on-sand: #7A5B12;
  --wk-shadow: 0 6px 20px rgba(20, 26, 61, .06); --wk-shadow-sm: 0 1px 3px rgba(20, 26, 61, .08);
  --wk-switch-off: #85817A; --wk-knob-shadow: 0 1px 3px rgba(20, 26, 61, .18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --wk-ground: #161a22; --wk-card: #1f2634; --wk-ink: #f2eee6; --wk-body: #d9d4ca; --wk-muted: #b4ada2;
    --wk-line: #2c3140; --wk-grip: #3d4354; --wk-olive: #b9d23a; --wk-moss: #CFE83A; --wk-wash: #2b311a;
    --wk-plum: #e391b8; --wk-plum-wash: #3a2230; --wk-btn: #CFE83A; --wk-on-btn: #141B3C; --wk-dot: #7d786d; --wk-edge: #7a8094;
    --wk-paper: #161a22; --wk-track: #262c3a; --wk-hair: #2c3140; --wk-stroke: #3d4354; --wk-bar: #343a4a;
    --wk-note: #24261f; --wk-note-edge: #3a3a2c; --wk-off: #3d4354;
    --wk-sky: #22304a; --wk-on-sky: #b9cdf0; --wk-sand: #3a311c; --wk-on-sand: #ead39a;
    --wk-shadow: 0 6px 20px rgba(0, 0, 0, .35); --wk-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --wk-on-navy: #141B3C; --wk-tab-on: #f2eee6;
    --wk-switch-off: #80869A; --wk-knob-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  }
}
[data-theme='dark'] {
  --wk-ground: #161a22; --wk-card: #1f2634; --wk-ink: #f2eee6; --wk-body: #d9d4ca; --wk-muted: #b4ada2;
  --wk-line: #2c3140; --wk-grip: #3d4354; --wk-olive: #b9d23a; --wk-moss: #CFE83A; --wk-wash: #2b311a;
  --wk-plum: #e391b8; --wk-plum-wash: #3a2230; --wk-btn: #CFE83A; --wk-on-btn: #141B3C; --wk-dot: #7d786d; --wk-edge: #7a8094;
  --wk-paper: #161a22; --wk-track: #262c3a; --wk-hair: #2c3140; --wk-stroke: #3d4354; --wk-bar: #343a4a;
  --wk-note: #24261f; --wk-note-edge: #3a3a2c; --wk-off: #3d4354;
  --wk-sky: #22304a; --wk-on-sky: #b9cdf0; --wk-sand: #3a311c; --wk-on-sand: #ead39a;
  --wk-shadow: 0 6px 20px rgba(0, 0, 0, .35); --wk-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --wk-on-navy: #141B3C; --wk-tab-on: #f2eee6;
  --wk-switch-off: #80869A; --wk-knob-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
/* The tab bar and the desktop sidebar, from the Figma "Tab bar" component: Plan, Explore, the
   Ask Wickette button in the middle, Vendors, Guests. The bar is 72px tall, which the screens'
   bottom padding already clears; the button rides above it. Labels that aren't selected stay at
   --wk-muted, where the frame's lighter gray would fail AA at 12px. */
.nav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: stretch;
  padding: 12px 0 calc(8px + env(safe-area-inset-bottom)); background: var(--wk-card); border-top: 1px solid var(--wk-line);
  font-family: var(--wk-sans);
}
.nav-item, .nav-ask {
  flex: 1 1 0; min-width: 0; position: relative; border: 0; background: none; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 52px; padding: 2px 0 0; box-sizing: border-box;
  color: var(--wk-muted); transition: color .15s;
}
.nav-item i { font-size: 24px; line-height: 1; }
.nav-label { font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.nav-item.active { color: var(--wk-tab-on); }
.nav-item.active .nav-label { font-weight: 700; }
.nav-ask { padding: 0; }
.nav-ask-disc {
  position: absolute; top: -20px; left: 50%; width: 56px; height: 56px; margin-left: -28px; box-sizing: border-box; border-radius: 50%;
  display: grid; place-items: center; background: var(--wk-lime); color: var(--wk-on-lime);
  border: 4px solid var(--wk-card); box-shadow: 0 6px 14px rgba(92, 107, 18, .28); transition: transform .12s ease;
}
.nav-ask:active .nav-ask-disc { transform: scale(.95); }
.nav-item:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: -3px; border-radius: 12px; }
.nav-ask:focus-visible { outline: none; }
.nav-ask:focus-visible .nav-ask-disc { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

.sidebar { display: none; font-family: var(--wk-sans); }
.side-brand {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 20px; font-family: var(--wk-serif); font-size: 22px;
  font-weight: 600; color: var(--color-text);
}
.side-brand .gate-mark { color: var(--wk-olive); }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-item, .side-foot {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px;
  background: none; font: inherit; font-size: 14px; font-weight: 500; text-align: left; color: var(--color-text-secondary);
  cursor: pointer; transition: background .15s, color .15s;
}
.side-item i, .side-foot i { font-size: 20px; }
.side-item:hover, .side-foot:hover { background: var(--color-bg-surface); color: var(--color-text); }
.side-item.active { background: var(--wk-lime); color: var(--wk-on-lime); }
.side-item:focus-visible, .side-foot:focus-visible { outline: 3px solid var(--color-text); outline-offset: 2px; }
.side-foot { margin-top: auto; }
.side-ask { margin: 0 0 14px; border: 1px solid var(--color-border); color: var(--color-text); }
.side-ask-disc {
  flex: none; width: 28px; height: 28px; margin: -4px 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--wk-lime); color: var(--wk-on-lime);
}
.side-ask.active .side-ask-disc { background: var(--wk-card); }

@media (min-width: 860px) {
  .sidebar {
    display: flex; flex-direction: column; flex-shrink: 0; width: 240px; height: 100dvh; padding: 24px 16px;
    background: var(--color-bg); color: var(--color-text); border-right: 1px solid var(--color-border);
  }
  #bottom-nav { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-item, .nav-ask-disc, .side-item, .side-foot { transition: none; }
}
/* The pieces the designers' Figma frames repeat on every screen, for surfaces moved to them after
   Explore: a back link over a serif title, small eyebrows, white 16px cards with hairline rows,
   lime and plum notes with an italic label, pills (navy with lime words, white outlined), dot
   badges and fields with the label inside the box. On the palette.css tokens, so dark mode follows. */
.viewport:has(> #s-knows.active) { background: var(--wk-ground); }

.k-page { padding: 16px 20px 96px; color: var(--wk-ink); }
.k-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--wk-ink); cursor: pointer;
}
.k-back i { font-size: 15px; }
.k-title {
  margin: 2px 0 6px; font-family: var(--wk-serif); font-size: 34px; line-height: 1.08; font-weight: 500;
  letter-spacing: -.01em; color: var(--wk-ink); text-wrap: balance;
}
.k-lead { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--wk-body); }
.k-section { margin-top: 26px; }
.k-eyebrow { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--wk-muted); }
.k-sub { margin: 2px 0 10px; font-size: 13px; line-height: 1.45; color: var(--wk-muted); }
.k-map-credit { align-self: stretch; margin: 0; font-size: 12px; line-height: 16px; text-align: right; color: var(--wk-muted); }
.k-map-credit[hidden] { display: none; }
.k-map-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.k-group { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--wk-body); }
.k-group.flush { margin-top: 0; }
.k-quiet { color: var(--wk-muted); }
.k-status { margin: 0; font-size: 14px; font-weight: 600; color: var(--wk-moss); }
.k-status.bad { color: var(--wk-plum); }
.k-status:not(:empty) { margin: 0 0 14px; }
.k-callout .k-status { color: var(--wk-moss); }
.k-callout .k-status.bad { color: var(--wk-plum); }
.k-callout .k-status:not(:empty) { margin: 10px 0 0; }

.k-card { margin: 0; padding: 0 16px; list-style: none; border: 1px solid var(--wk-line); border-radius: 16px; background: var(--wk-card); }
.k-card.pad { padding: 14px 16px; }
.k-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-top: 1px solid var(--wk-line); }
.k-row:first-child { border-top: 0; }
.k-row-main { flex: 1; min-width: 0; }
.k-pair { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.k-label { flex: none; max-width: 48%; font-size: 15px; color: var(--wk-ink); }
.k-value { min-width: 0; font-size: 15px; color: var(--wk-ink); text-align: right; overflow-wrap: anywhere; }
.k-value.quiet { color: var(--wk-muted); }
.k-text { font-size: 15px; line-height: 1.45; color: var(--wk-ink); overflow-wrap: anywhere; }
.k-note { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--wk-muted); overflow-wrap: anywhere; }
.k-row-tools { display: flex; align-items: center; flex: none; margin: -10px -10px -10px 0; }

/* Notes: lime for what Wickette offers, plum for what needs care. */
.k-callout { padding: 16px 18px; border-radius: 16px; background: var(--wk-wash); color: var(--wk-ink); }
.k-callout.plum { background: var(--wk-plum-wash); }
.k-callout .k-callout-label { margin: 0 0 2px; font-family: var(--wk-serif); font-style: italic; font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--wk-plum); }
.k-asks { margin: 0; padding: 0; }
.k-ask { padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--wk-ink) 12%, transparent); list-style: none; }
.k-ask:first-child { padding-top: 4px; border-top: 0; }
.k-ask:last-child { padding-bottom: 0; }
.k-ask .k-question { margin: 0; font-family: var(--wk-serif); font-size: 20px; line-height: 1.3; font-weight: 500; color: var(--wk-ink); overflow-wrap: anywhere; }
.k-ask .k-note { color: var(--wk-body); }

.k-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.k-actions.flush { margin-top: 0; }
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-btn);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer;
  transition: transform .12s ease, background-color .15s, border-color .15s;
}
.k-btn.line { border-color: var(--wk-grip); background: var(--wk-card); color: var(--wk-ink); }
.k-btn.sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.k-btn:active:not(:disabled) { transform: scale(.97); }
.k-btn:disabled { opacity: .5; cursor: wait; }
.k-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 2px; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--wk-ink); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.k-link.go { text-decoration: none; }
.k-link.go i { font-size: 15px; }
.k-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--wk-muted); font-size: 17px; cursor: pointer;
}
.k-icon:hover { color: var(--wk-ink); }
:is(.k-back, .k-btn, .k-link, .k-icon):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* The status badge: a dot and a word. */
.k-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--wk-line); background: var(--wk-ground); color: var(--wk-body);
  font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; vertical-align: 1px;
}
.k-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--wk-dot); }

/* Fields: the label sits inside the white box, above the value. */
.k-field {
  display: block; margin: 0 0 10px; padding: 9px 14px 10px; border: 1px solid var(--wk-edge); border-radius: 14px;
  background: var(--wk-card); transition: border-color .15s, box-shadow .15s;
}
.k-field:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.k-field label { display: block; font-size: 13px; font-weight: 500; color: var(--wk-muted); }
.k-field :is(input, select, textarea) {
  display: block; width: 100%; box-sizing: border-box; min-height: 28px; margin: 2px 0 0; padding: 0; border: 0;
  background: transparent; color: var(--wk-ink); font: inherit; font-size: 16px; line-height: 1.45; outline: none;
}
.k-field select { cursor: pointer; }
.k-field[aria-invalid='true'], .k-field:has([aria-invalid='true']) { border-color: var(--wk-plum); box-shadow: 0 0 0 1px var(--wk-plum); }

/* What Wickette kept from a chat reply, under it: quiet, with the means to take it back. */
.k-kept {
  align-self: flex-start; max-width: 88%; margin: 0 0 2px 6px; padding: 2px 0 2px 12px; border-left: 2px solid var(--wk-line);
  font-size: 13px; line-height: 1.5; color: var(--wk-muted); overflow-wrap: anywhere;
}
.k-kept ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.k-kept .k-link { min-height: 24px; font-size: 13px; }
.k-kept-said { margin-left: 8px; font-weight: 600; color: var(--wk-ink); }
.k-kept .k-actions { margin-top: 6px; }

@media (min-width: 860px) {
  .k-page { max-width: 640px; margin: 0 auto; padding-top: 28px; }
  .k-title { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .k-btn, .k-field { transition: none; }
}

/* ui/ListMenu: a button and its listbox, the chosen choice on a lime wash with a tick. */
.lm { position: relative; }
.lm-menu {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; margin: 0; padding: 6px; list-style: none;
  border-radius: 18px; border: 1px solid var(--wk-stroke); background: var(--wk-card); box-shadow: 0 12px 32px rgba(20, 26, 61, .16);
  overflow-y: auto; overscroll-behavior: contain; display: none; opacity: 0; transform: translateY(-4px) scale(.98);
  transform-origin: top left; transition: opacity .12s ease-out, transform .12s ease-out, display .12s allow-discrete;
}
.lm-menu.open {
  display: block; opacity: 1; transform: none;
  transition: opacity .18s cubic-bezier(.23, 1, .32, 1), transform .18s cubic-bezier(.23, 1, .32, 1), display .18s allow-discrete;
}
@starting-style { .lm-menu.open { opacity: 0; transform: translateY(-4px) scale(.98); } }
.lm-opt {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 12px; font-size: 14px;
  font-weight: 500; color: var(--wk-ink); cursor: pointer; outline: none;
}
.lm-opt[aria-selected='true'] { background: var(--wk-wash); font-weight: 600; }
.lm-opt:focus-visible { box-shadow: inset 0 0 0 2px var(--wk-ink); }
.lm-name { flex: 1; min-width: 0; }
.lm-meta { font-size: 13px; font-weight: 500; color: var(--wk-muted); }
.lm-opt .ti-check { font-size: 16px; color: var(--wk-moss); }
@media (hover: hover) and (pointer: fine) {
  .lm-opt:not([aria-selected='true']):hover { background: var(--wk-track); }
}
@media (prefers-reduced-motion: reduce) {
  .lm-menu, .lm-menu.open { transition: none; transform: none; }
}
/* Sign-in and onboarding on the designers' Oct 9 frames: cream sign-in screens (garden gate, Email
   first, Check your inbox, Got an invite code?) and white steps with a progress bar, lime buttons
   and round checks. Measurements are the frames'; line heights are pinned in px because Chrome
   draws Manrope's `normal` a pixel taller than Figma. Field and check outlines use the 3:1 edge
   (WCAG 1.4.11) where the frames have a hairline, and text the frames set in #6b800d or #9497a6
   uses moss and muted, which hold AA. */
#s-onboard { padding: 0; max-width: none; margin: 0; }
.ob { min-height: 100dvh; background: var(--wk-paper); color: var(--wk-ink); font-family: var(--wk-sans); }
.ob.cream { background: var(--wk-ground); }
.ob-col { width: 100%; max-width: 390px; margin: 0 auto; }
.ob :focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.ob h1:focus { outline: none; }
.ob p { margin: 0; }
.ob-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ob button { font-family: inherit; }

/* ── Cream sign-in: one column centred a little above the middle (y≈381 of 844) ──────────────── */
.ob-sign {
  min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 32px; padding: 24px 24px 106px;
}
.ob-sign.code { gap: 28px; }
.ob-h {
  margin: 0; width: 100%; font: 500 40px/36px var(--wk-serif); letter-spacing: -.8px; text-align: center; color: var(--wk-ink);
}
.ob-sign-text { width: 100%; font: 400 15px/1.45 var(--wk-sans); text-align: center; color: var(--wk-body); }
.ob-email-shown { overflow-wrap: anywhere; }
.ob-sign-form { width: 100%; display: flex; flex-direction: column; gap: 32px; }
.ob-line-field { display: flex; flex-direction: column; }
.ob-line {
  box-sizing: border-box; width: 100%; margin: 0; padding: 10px 0 12px; border: 0; border-bottom: 1.5px solid var(--wk-ink);
  border-radius: 0; background: transparent; color: var(--wk-ink); font: 400 18px/25px var(--wk-sans); text-align: center;
  caret-color: var(--wk-ink); outline: none;
}
.ob-line::placeholder { color: var(--wk-muted); opacity: 1; }
.ob-line:focus-visible { outline: none; box-shadow: 0 1.5px 0 var(--wk-ink); }
.ob-line[aria-invalid='true'] { border-bottom-color: var(--wk-plum); }
.ob-navy {
  width: 100%; min-height: 54px; padding: 16px 20px; border: 0; border-radius: 999px; background: var(--wk-btn); color: var(--wk-on-btn);
  font: 500 16px/22px var(--wk-sans); cursor: pointer;
}
.ob-text-link {
  padding: 0; border: 0; background: none; color: var(--wk-ink); font: 500 14px/1.45 var(--wk-sans);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ob-text-link.small { align-self: flex-start; font-size: 13px; font-weight: 600; line-height: 18px; }
.ob-text-link:disabled { color: var(--wk-muted); cursor: default; }
a.ob-text-link { display: inline-block; }
.ob .ob-error { font: 500 13px/18px var(--wk-sans); color: var(--wk-plum); text-align: center; }
.ob .ob-error:empty { display: none; }
.ob-line-field .ob-error { margin-top: 8px; }
.ob-step .ob-error { text-align: left; }

/* "You're invited" over Email first, and the kicker on Join a wedding. */
.ob-invited {
  box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px;
  background: color-mix(in srgb, var(--wk-lime) 25%, transparent);
}
.ob-invited-kicker { font: 600 12px/16px var(--wk-sans); color: var(--wk-moss); }
.ob-invited-line { font: 500 14px/19px var(--wk-sans); color: var(--wk-ink); }
.ob-sign.invited { gap: 32px; }

/* Check your inbox: six underlines over one real input. */
.ob-code-field { position: relative; display: flex; flex-direction: column; align-items: center; }
.ob-code { display: flex; gap: 10px; }
.ob-digit {
  position: relative; display: grid; place-items: center; width: 42px; height: 54px; box-sizing: border-box;
  border-bottom: 1.25px solid var(--wk-ink); font: 500 26px/1 var(--wk-sans); color: var(--wk-ink);
}
.ob-digit.now { border-bottom-width: 2px; }
.ob-digit.now:empty::after { content: ''; width: 2px; height: 24px; background: var(--wk-ink); animation: ob-caret 1.1s steps(1) infinite; }
@keyframes ob-caret { 50% { opacity: 0; } }
.ob-code-input {
  position: absolute; inset: 0 0 auto 0; width: 100%; height: 54px; margin: 0; padding: 0; border: 0; background: transparent;
  color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 40px; opacity: 0; cursor: text;
}
.ob-code-field .ob-error { margin-top: 10px; }
.ob-code-help { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ob-code-help > p:first-child { font: 400 13px/1.45 var(--wk-sans); color: var(--wk-body); }
.ob-code-links { display: flex; gap: 20px; }

/* The gate's own frames ("Onboarding: garden gate 1"): a line over the gate and Step inside. */
.ob-gate-line { font: 500 19px/1.15 var(--wk-serif); color: var(--wk-ink); }
.ob-gate-btn {
  padding: 12px 30px; border: 1.25px solid var(--wk-ink); border-radius: 999px; background: transparent; color: var(--wk-ink);
  font: 500 14px/19px var(--wk-sans); letter-spacing: .28px; cursor: pointer; transition: background-color .2s ease-out, color .2s ease-out;
}

/* ── White steps ─────────────────────────────────────────────────────────────────────────── */
.ob-step { display: flex; flex-direction: column; gap: 16px; padding: 60px 24px 48px; }
.ob-step.tight { gap: 12px; padding-bottom: 40px; }
.ob-step.join { padding-top: 56px; }
.ob-loading { min-height: 100dvh; display: flex; align-items: center; justify-content: center; color: var(--wk-lime); }
.ob-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ob-title { margin: 0; font: 500 38px/36px var(--wk-serif); letter-spacing: -.76px; color: var(--wk-ink); }
.ob-title.loose { line-height: 46px; letter-spacing: 0; }
.ob-head { display: flex; flex-direction: column; gap: 4px; }
.ob-sub { font: 400 13px/19px var(--wk-sans); color: var(--wk-body); }
.ob-lead { font: 500 14px/19px var(--wk-sans); color: var(--wk-muted); }
.ob-body { font: 400 14px/19px var(--wk-sans); color: var(--wk-body); }
.ob-kicker { font: 600 12px/16px var(--wk-sans); color: var(--wk-muted); }
.ob-label { font: 500 13px/18px var(--wk-sans); color: var(--wk-muted); }
.ob-help { font: 400 13px/19px var(--wk-sans); color: var(--wk-muted); }
.ob-fine { font: 400 12px/16px var(--wk-sans); color: var(--wk-muted); text-align: center; }

.ob-prog { display: flex; flex-direction: column; gap: 10px; }
.ob-prog-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ob-prog-name { font: 600 13px/18px var(--wk-sans); color: var(--wk-ink); }
.ob-prog-hint { font: 500 12px/16px var(--wk-sans); color: var(--wk-muted); }
.ob-prog-hint.last { color: var(--wk-moss); }
.ob-bar { display: flex; gap: 6px; }
.ob-bar span { flex: 1; height: 6px; border-radius: 3px; background: var(--wk-bar); }
.ob-bar span.on { background: var(--wk-ink); }

.ob-note { padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--wk-lime) 22%, transparent); font: 400 13px/18px var(--wk-sans); color: var(--wk-body); }
.ob-note b { font-weight: 600; color: var(--wk-ink); }

/* Names: the label above the value in one box. */
.ob-names { display: flex; gap: 10px; }
.ob-glass {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; border: 1px solid var(--wk-edge);
  border-radius: 18px; background: var(--wk-card);
}
.ob-glass label { font: 500 13px/18px var(--wk-sans); color: var(--wk-muted); }
.ob-glass input { min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--wk-ink); font: 400 16px/22px var(--wk-sans); outline: none; }
.ob-glass input::placeholder, .ob-field input::placeholder { color: var(--wk-muted); opacity: 1; }
:is(.ob-glass, .ob-field):focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }

/* A single choice: a soft card, its words, and the round check on the right. */
.ob-choices { display: flex; flex-direction: column; gap: 16px; }
.ob-choice {
  position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 14px 54px 14px 16px;
  border: 1px solid transparent; border-radius: 24px; background: transparent; color: var(--wk-ink); text-align: left; cursor: pointer;
}
.ob-choice-title { font: 500 15px/20px var(--wk-sans); }
.ob-choice-text { font: 400 13px/19px var(--wk-sans); color: var(--wk-body); }
.ob-check {
  position: absolute; top: 15px; right: 19px; display: grid; place-items: center; width: 26px; height: 26px; box-sizing: border-box;
  border: 1.5px solid var(--wk-edge); border-radius: 50%; background: var(--wk-card); color: transparent;
  font: 600 12px/1 var(--wk-sans); transition: background-color .15s, border-color .15s;
}
.ob-check.on { border-color: var(--wk-lime); background: var(--wk-lime); color: var(--wk-on-lime); }
@media (hover: hover) and (pointer: fine) { .ob-choice:hover { background: var(--wk-track); } }

.ob-lime {
  width: 100%; min-height: 50px; padding: 15px 20px; border: 0; border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime);
  font: 600 15px/20px var(--wk-sans); cursor: pointer; transition: transform .12s ease;
}
.ob-lime:active:not(:disabled), .ob-navy:active:not(:disabled), .ob-line-btn:active:not(:disabled) { transform: scale(.98); }
.ob-skip {
  align-self: stretch; min-height: 24px; padding: 2px 0; border: 0; background: none; color: var(--wk-muted);
  font: 600 14px/19px var(--wk-sans); text-align: center; cursor: pointer;
}
.ob-line-btn {
  width: 100%; min-height: 50px; padding: 15px 20px; border: 1px solid var(--wk-stroke); border-radius: 999px; background: var(--wk-card);
  color: var(--wk-ink); font: 600 15px/20px var(--wk-sans); cursor: pointer;
}
.ob :is(.ob-lime, .ob-navy, .ob-line-btn, .ob-skip):disabled { opacity: .55; cursor: wait; }

/* Tell me about your wedding: label-inside fields, two to a row, and the priority chips. */
.ob-field {
  box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--wk-edge);
  border-radius: 14px; background: var(--wk-card);
}
.ob-field label { font: 500 12px/16px var(--wk-sans); color: var(--wk-muted); }
.ob-field input { width: 100%; min-width: 0; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: transparent; color: var(--wk-ink); font: 400 14px/19px var(--wk-sans); outline: none; }
.ob-row { display: flex; gap: 10px; }
.ob-row > .ob-field { flex: 1; }
.ob-field-links { display: flex; gap: 8px; padding-top: 4px; }
#ob-when::placeholder { letter-spacing: -.3px; }
.ob-field-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ob-field-link {
  padding: 0; border: 0; background: none; color: var(--wk-muted); font: 600 12px/16px var(--wk-sans); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; white-space: nowrap;
}
.ob-field-link.on { color: var(--wk-ink); }
.ob-pick-date {
  position: relative; flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: -4px -6px -4px 0; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--wk-muted); font-size: 15px; cursor: pointer;
}
.ob-date-native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ob-range { display: flex; align-items: center; gap: 4px; }
.ob-range span { color: var(--wk-muted); font-size: 14px; }
.ob-priorities { display: flex; flex-direction: column; gap: 8px; }
.ob-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ob-chip {
  min-height: 35px; padding: 8px 14px; border: 1px solid var(--wk-grip); border-radius: 999px; background: transparent; color: var(--wk-ink);
  font: 500 14px/19px var(--wk-sans); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.ob-chip[aria-pressed='true'] { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-btn); }
.ob-chip:disabled { opacity: .45; cursor: default; }
.ob-chip.wide { grid-column: 1 / -1; }

/* Before you continue: the plum "In plain language" card. */
.ob-plain { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 20px; background: var(--wk-plum-wash); }
.ob-plain p { font: 400 13px/18px var(--wk-sans); color: var(--wk-ink); }
.ob-plain b { font-weight: 700; }
.ob-plain .ob-plain-label { font: italic 500 17px/21px var(--wk-serif); color: var(--wk-plum); }
.ob-agree { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 24px; }
.ob-agree .ob-check { position: static; flex: none; }
.ob-agree-box { position: absolute; top: 14px; left: 16px; width: 26px; height: 26px; margin: 0; opacity: 0; cursor: pointer; }
.ob-agree-box:focus-visible + .ob-check { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.ob-agree label { flex: 1; font: 400 13px/19px var(--wk-sans); color: var(--wk-ink); }
.ob-agree a { color: var(--wk-ink); text-underline-offset: 2px; }
/* The optional email box sits right under the agreement, as one group. */
.ob-agree + .ob-agree { margin-top: -28px; }

/* Join a wedding and Ask the couple to invite you. */
.ob-lockup { display: flex; align-items: center; gap: 9px; color: var(--wk-ink); }
.ob-lockup svg { flex: none; }
.ob-lockup span { font: 600 27px/1 var(--wk-serif); letter-spacing: -.27px; }
.ob-step.join .ob-invited-kicker { font: 500 12.5px/17px var(--wk-sans); }
.ob-join-line { font: 400 14px/21px var(--wk-sans); color: var(--wk-body); }
.ob-access { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 24px; }
.ob-access-head { font: 600 13px/19px var(--wk-sans); color: var(--wk-muted); }
.ob-access ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ob-access li { display: flex; gap: 10px; font: 400 14px/20px var(--wk-sans); color: var(--wk-ink); }
.ob-access li span { font-weight: 600; color: var(--wk-moss); }
.ob-access ul.off li, .ob-access ul.off li span { color: var(--wk-muted); }
.ob-access hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--wk-line); }
.ob-changed { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 20px; background: var(--wk-ground); }
.ob-changed .p-avatar { margin-top: 2px; }
.ob-changed-title { font: 600 14px/19px var(--wk-sans); color: var(--wk-ink); }
.ob-changed-text { margin-top: 2px; font: 400 13px/18px var(--wk-sans); color: var(--wk-body); }
.ob-ask-email { font: 600 17px/23px var(--wk-sans); color: var(--wk-ink); overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .ob-lime, .ob-gate-btn, .ob-check, .ob-chip { transition: none; }
  .ob-digit.now:empty::after { animation: none; }
}
/* The Plan tab's shared pieces, from the designers' Plan frames (2026-10-06): white pages with a
   round back button or the Plan header, a segmented track, 13px section labels, hairline cards,
   lime and navy pills, chips, the selection circle, the switch, person avatars, progress dashes
   and the bottom sheet. Screens add their own files on top (overview, checklist, budget…). On the
   palette.css tokens, so dark mode follows. Maroon (plum) only marks what needs attention. */
.viewport:has(> :is(#s-home, #s-timeline-detail, #s-budget, #s-spend, #s-waystosave, #s-notes, #s-account,
  #s-details, #s-settings, #s-task, #s-task-add, #s-completed, #s-tailor, #s-budget-explain, #s-allocation, #s-notifications,
  #s-inbox, #s-email-detail, #s-email-compose, #s-vision, #s-vendors, #s-site-rsvps).active) { background: var(--wk-paper); }

.p-page { padding: 20px 16px 104px; color: var(--wk-ink); }
.p-page, .p-sheet, .ck-celebrate { font-family: var(--wk-sans); }
.p-stack { display: flex; flex-direction: column; gap: 28px; }

/* Header: avatar and the inbox on top, then a serif title and one line under it. */
.p-head { display: flex; flex-direction: column; gap: 20px; }
.p-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p-actions { display: flex; gap: 10px; }
.p-round {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--wk-paper); border-radius: 50%; background: color-mix(in srgb, var(--wk-paper) 60%, transparent);
  box-shadow: 0 2px 4px rgba(20, 26, 61, .05); color: var(--wk-ink); font: inherit; cursor: pointer;
}
.p-round i { font-size: 20px; }
.p-count {
  position: absolute; top: -4px; left: 28px; display: grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 4px; box-sizing: border-box; border: 2px solid var(--wk-paper); border-radius: 9px; background: var(--wk-plum);
  color: #fff; font-size: 10px; font-weight: 600; line-height: 1;
}
.p-hello { margin: 0; font-family: var(--wk-serif); font-size: 38px; line-height: 44px; font-weight: 500; text-wrap: balance; }
.p-hello em { font-style: italic; color: var(--wk-plum); }
.p-sub { margin: 6px 0 0; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--wk-muted); }

/* Titles on pages under the header: a round back button, an optional eyebrow, the serif title. */
.p-back { margin: 0 0 20px; }
.p-eyebrow { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--wk-muted); }
.p-title { margin: 0 0 8px; font-family: var(--wk-serif); font-size: 38px; line-height: 1.1; font-weight: 500; text-wrap: balance; }
.p-lead { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-body); }

/* The segmented track: the Plan sub-tabs and any two- or three-way switch. */
.p-seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--wk-track); }
.p-seg > button {
  flex: 1 1 0; min-width: 0; min-height: 37px; padding: 9px 8px; border: 0; border-radius: 999px; background: none;
  color: var(--wk-muted); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.p-seg > button[aria-current='page'], .p-seg > button[aria-checked='true'] {
  background: var(--wk-card); color: var(--wk-ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(20, 26, 61, .04), 0 1px 3px rgba(20, 26, 61, .08);
}
.p-seg.fit { display: inline-flex; }
.p-seg.fit > button { flex: none; padding: 9px 16px; }

/* Sections: a 13px label, sometimes with a link or a count on the right. */
.p-section { display: flex; flex-direction: column; gap: 12px; }
.p-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p-label { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--wk-muted); }
.p-label-row .p-label + :is(span, p) { font-size: 12px; font-weight: 600; color: var(--wk-muted); }
.p-more {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--wk-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Cards and the rows in them. */
.p-card { border: 1px solid var(--wk-hair); border-radius: 20px; background: var(--wk-card); }
.p-card.pad { padding: 16px 18px; }
.p-card.lift { box-shadow: var(--wk-shadow); }
.p-card.soft { border: 0; background: var(--wk-track); }
.p-list { margin: 0; padding: 0 18px; list-style: none; }
.p-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid var(--wk-hair);
  background: none; color: inherit; font: inherit; text-align: left;
}
.p-list > :first-child > .p-row, .p-list > .p-row:first-child, .p-row.first { border-top: 0; }
button.p-row { cursor: pointer; }
.p-row-main { flex: 1; min-width: 0; }
.p-row-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--wk-ink); overflow-wrap: anywhere; }
.p-row-sub { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--wk-muted); overflow-wrap: anywhere; }
.p-row-end { flex: none; display: flex; align-items: center; gap: 8px; color: var(--wk-muted); font-size: 14px; }
.p-row-end i { font-size: 18px; }
.p-icon-disc {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--wk-track);
  color: var(--wk-ink);
}
.p-icon-disc i { font-size: 18px; }

/* Buttons: lime for the next step, navy for a confirm, outlined for the rest, dashed to add. */
.p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--wk-lime); border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer;
  transition: transform .12s ease, background-color .15s, border-color .15s;
}
.p-btn.navy { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
.p-btn.line { border-color: var(--wk-stroke); background: var(--wk-card); color: var(--wk-ink); }
.p-btn.dash { border: 1px dashed var(--wk-edge); background: none; color: var(--wk-body); border-radius: 14px; }
.p-btn.wide { width: 100%; }
.p-btn.sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.p-btn i { font-size: 16px; }
.p-btn:active:not(:disabled) { transform: scale(.97); }
.p-btn:disabled { opacity: .5; cursor: wait; }
.p-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.p-btns > .p-btn { flex: 1 1 0; padding-inline: 12px; }
.p-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; font: inherit;
  font-size: 14px; font-weight: 600; color: var(--wk-ink); cursor: pointer;
}
.p-link.under { text-decoration: underline; text-underline-offset: 3px; }

/* Chips (39px to see, 44px to hit), tags and the plum urgency pill. */
.p-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.p-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--wk-stroke);
  border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500;
  line-height: normal; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.p-chip::after { content: ''; position: absolute; inset: -3px 0; }
.p-chip[aria-pressed='true'], .p-chip[aria-checked='true'] {
  border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); font-weight: 600;
}
.p-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--wk-track);
  color: var(--wk-body); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.p-tag.urgent { background: var(--wk-plum-wash); color: var(--wk-plum); }
.p-tag.urgent::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.p-tag.good { background: var(--wk-wash); color: var(--wk-moss); }

/* The selection circle (a check), the radio, and the switch (navy with a lime knob when on).
   Outlines meet 3:1 (--wk-edge). */
.p-check-hit {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -9px; padding: 0; border: 0;
  border-radius: 50%; background: none; cursor: pointer;
}
.p-check {
  display: grid; place-items: center; width: 26px; height: 26px; box-sizing: border-box; border: 1.5px solid var(--wk-edge);
  border-radius: 50%; background: var(--wk-card); color: transparent; transition: background-color .15s, border-color .15s;
}
.p-check i { font-size: 15px; }
[aria-checked='true'] > .p-check { border-color: var(--wk-lime); background: var(--wk-lime); color: var(--wk-on-lime); }
.p-radio {
  flex: none; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid var(--wk-edge); border-radius: 50%;
  background: var(--wk-card);
}
[aria-checked='true'] > .p-radio, .p-radio.on { border: 0; background: radial-gradient(circle, var(--wk-card) 3.5px, var(--wk-btn) 4px); }
.p-switch {
  position: relative; flex: none; width: 44px; height: 26px; padding: 0; border: 1px solid var(--wk-switch-off); border-radius: 13px;
  background: var(--wk-switch-off); cursor: pointer; transition: background-color .18s, border-color .18s;
}
.p-switch::after {
  content: ''; position: absolute; top: 1px; left: 1px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: var(--wk-knob-shadow); transition: transform .18s ease;
}
.p-switch[aria-checked='true'] { border-color: var(--wk-btn); background: var(--wk-btn); }
.p-switch[aria-checked='true']::after { background: var(--wk-lime); }
.p-switch[aria-checked='true']::after { transform: translateX(18px); }
.p-switch:disabled { cursor: default; opacity: .55; }

/* People: initials on a tint picked from the name (the owner is always plum). */
.p-avatar {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--wk-plum-wash); color: var(--wk-plum); font-size: 13px; font-weight: 600; line-height: 1;
}
.p-avatar.lg { width: 44px; height: 44px; font-size: 15px; color: var(--wk-ink); }
button.p-avatar { padding: 0; border: 0; font-family: inherit; cursor: pointer; }
.p-avatar.sm { width: 26px; height: 26px; font-size: 10px; }
.p-avatar.xs { width: 18px; height: 18px; font-size: 8px; }
.p-avatar.t1 { background: var(--wk-wash); color: var(--wk-moss); }
.p-avatar.t2 { background: var(--wk-sky); color: var(--wk-on-sky); }
.p-avatar.t3 { background: var(--wk-sand); color: var(--wk-on-sand); }
.p-avatar.add { border: 1px dashed var(--wk-edge); background: none; color: var(--wk-body); }

/* Progress dashes: navy done, plum the current one, gray what's left. */
.p-dashes { display: flex; gap: 4px; height: 4px; }
.p-dashes > span { flex: 1 1 0; min-width: 6px; border-radius: 2px; background: var(--wk-bar); }
.p-dashes > span.done { background: var(--wk-ink); }
.p-dashes > span.now { background: var(--wk-plum); }

/* Notes and callouts. */
.p-callout { padding: 16px 18px; border-radius: 20px; background: var(--wk-wash); color: var(--wk-ink); }
.p-callout.plum { background: var(--wk-plum-wash); }
.p-callout-label { margin: 0 0 4px; font-family: var(--wk-serif); font-style: italic; font-size: 18px; font-weight: 500; color: var(--wk-plum); }
.p-callout p { margin: 0; font-size: 14px; line-height: 1.45; }

/* Fields: the label inside a soft gray box (sheets and forms). */
.p-field {
  display: block; margin: 0; padding: 10px 16px 12px; border: 1px solid var(--wk-edge); border-radius: 16px;
  background: var(--wk-track); transition: border-color .15s, box-shadow .15s;
}
.p-field:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.p-field label, .p-field .p-field-label { display: block; font-size: 13px; font-weight: 500; color: var(--wk-muted); }
.p-field :is(input, textarea, select) {
  display: block; width: 100%; box-sizing: border-box; min-height: 28px; margin: 2px 0 0; padding: 0; border: 0;
  background: transparent; color: var(--wk-ink); font: inherit; font-size: 16px; line-height: 1.45; outline: none;
}
.p-field textarea { resize: vertical; min-height: 72px; }
.p-field[aria-invalid='true'], .p-field:has([aria-invalid='true']) { border-color: var(--wk-plum); box-shadow: 0 0 0 1px var(--wk-plum); }
.p-error { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--wk-plum); }

/* Check the vendor (ui/VendorCheck): a printed business name confirmed before it's filed. */
.p-vcheck { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 20px; background: var(--wk-plum-wash); }
.p-vcheck p { margin: 0; }
.p-vcheck-eyebrow { font-family: var(--wk-serif); font-size: 17px; font-style: italic; font-weight: 500; color: var(--wk-plum); }
.p-vcheck-q { font-family: var(--wk-serif); font-size: 19.5px; font-weight: 500; line-height: normal; color: var(--wk-ink); }
.p-vcheck-why { font-size: 13px; color: var(--wk-muted); }
.p-vcheck-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.p-vcheck-btns button {
  min-height: 40px; padding: 10px 16px; border: 1px solid var(--wk-stroke); border-radius: 999px; background: var(--wk-card); color: var(--wk-ink);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.p-vcheck-btns .yes { border-color: var(--wk-lime); background: var(--wk-lime); color: var(--wk-on-lime); }
.p-vcheck-btns button:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* The bottom sheet: a native modal dialog with a grip, a round close button and a serif title. */
.p-sheet {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 480px; max-height: calc(100dvh - 48px); margin: 0 auto;
  padding: 12px 16px calc(32px + env(safe-area-inset-bottom)); box-sizing: border-box; overflow: auto; border: 0;
  border-radius: 32px 32px 0 0; background: var(--wk-paper); color: var(--wk-ink);
  box-shadow: 0 -8px 20px rgba(20, 26, 61, .18);
}
.p-sheet::backdrop { background: rgba(20, 27, 60, .35); }
.p-sheet[open] { animation: p-sheet-in .24s cubic-bezier(.2, .8, .2, 1); }
.p-sheet-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin-bottom: 28px; }
.p-sheet-grip { grid-column: 2; justify-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--wk-grip); }
.p-sheet-top .p-round { grid-column: 3; }
.p-sheet-title { margin: 0; font-family: var(--wk-serif); font-size: 34px; line-height: normal; font-weight: 500; outline: none; }
.p-sheet-lead { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--wk-muted); }
.p-sheet-body { display: flex; flex-direction: column; gap: 28px; margin-top: 28px; }
@keyframes p-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

:is(.p-round, .p-seg > button, .p-more, .p-row, .p-btn, .p-link, .p-chip, .p-check-hit, .p-switch, .p-avatar):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}

@media (min-width: 860px) {
  .p-page { max-width: 640px; margin: 0 auto; padding-top: 32px; }
  .p-sheet { bottom: auto; top: 50%; transform: translateY(-50%); border-radius: 28px; }
  .p-sheet[open] { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .p-sheet[open] { animation: none; }
  .p-btn, .p-seg > button, .p-chip, .p-check, .p-switch, .p-switch::after { transition: none; }
}
/* The RSVP tab (Figma 12a, 12b and 12d, Oct 13), on the plan.css kit. Manrope `normal` sits 1px
   taller in Chrome than in Figma, so the frames' line heights are pinned in px. */
.rs-page, .rs-stack { display: flex; flex-direction: column; gap: 22px; }
.rs-set-date { min-height: 32px; font-size: 14px; font-weight: 600; }

.rs-card {
  display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--wk-hair); border-radius: 24px;
  background: var(--wk-card);
}
.rs-card-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
/* "Replies" with the event picker at the far end (12b "Welcome party ⌄", 13px in the frame). */
.rs-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.rs-card-head .ev-pick { font-size: 13px; line-height: 18px; }
.rs-card-sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--wk-muted); }

/* Replies: the ring beside its legend. */
.rs-glance { display: flex; align-items: center; gap: 16px; }
.rs-ring { position: relative; flex: none; width: 152px; height: 152px; }
.rs-ring svg { display: block; }
.rs-arc { fill: none; stroke-width: 18.24; }
.rs-arc.coming { stroke: var(--wk-lime); }
.rs-arc.regrets { stroke: var(--wk-plum); }
.rs-arc.waiting { stroke: var(--wk-grip); }
.rs-ring-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0;
  font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-body);
}
/* The frame sets the count in lining figures; Cormorant's default old-style ones drop below "of N". */
.rs-ring-num {
  font-family: var(--wk-serif); font-size: 48px; font-weight: 600; line-height: 46px; font-variant-numeric: lining-nums;
  color: var(--wk-ink);
}
.rs-legend { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
.rs-legend > li { display: flex; align-items: center; gap: 8px; padding: 10px 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-ink); }
.rs-legend > li + li { border-top: 1px solid var(--wk-hair); }
.rs-legend > li > span:nth-child(2) { flex: 1; min-width: 0; }
.rs-legend b { font-size: 15px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; }
.rs-plum { color: var(--wk-plum); }
.rs-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.rs-dot.coming { background: var(--wk-lime); }
.rs-dot.regrets { background: var(--wk-plum); }
.rs-dot.waiting { background: var(--wk-grip); }

/* "New since Tuesday: 4 RSVPs, 1 change ›" under the ring (1974:14683). */
.rs-news {
  align-self: flex-start; min-height: 24px; margin: -3px 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 13px; font-weight: 600; line-height: 18px; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Meal counts: a cream drawer inside the card. */
.rs-meals { padding: 4px 14px; border-radius: 16px; background: color-mix(in srgb, var(--wk-ground) 60%, var(--wk-card)); }
.rs-meals-head, .rs-caterer {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; text-align: left; cursor: pointer;
}
.rs-meals-head { min-height: 39px; }
.rs-meals-head i { font-size: 14px; }
.rs-meal-rows { margin: 0; padding: 0; list-style: none; }
.rs-meal-rows > li {
  display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--wk-note-edge);
  font-size: 13px; line-height: 18px; color: var(--wk-ink);
}
.rs-meal-rows > li > :first-child { min-width: 0; overflow-wrap: anywhere; }
.rs-meal-n { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.rs-caterer { justify-content: flex-start; border-top: 1px solid var(--wk-note-edge); text-decoration: underline; text-underline-offset: 3px; }

/* Still to reply: the plum note, with a navy pill; after the reply-by date, larger words and two pills. */
.rs-still {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; border-radius: 16px;
  background: var(--wk-plum-wash); color: var(--wk-body);
}
.rs-still-head { display: flex; align-items: center; justify-content: space-between; align-self: stretch; min-height: 22px; }
.rs-still h2 { margin: 0; font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-plum); }
.rs-still p { margin: 0; font-size: 13px; line-height: 1.45; letter-spacing: -.01em; }
.rs-dismiss {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -11px -14px -11px 0; padding: 0; border: 0;
  border-radius: 50%; background: none; color: var(--wk-plum); font: inherit; cursor: pointer;
}
.rs-dismiss i { font-size: 18px; }
.rs-pill { min-height: 39px; padding: 0 16px; font-weight: 500; }
.rs-still .rs-pill { margin-top: 2px; }
.rs-still.closed { gap: 12px; }
.rs-still.closed h2 { font-size: 17px; line-height: 23px; color: var(--wk-ink); }
.rs-still.closed .rs-dismiss { color: var(--wk-ink); }
.rs-still.closed p { font-size: 15px; line-height: 1.5; color: var(--wk-ink); }
.rs-still.closed b { font-weight: 600; }
.rs-still.closed .rs-pill { margin-top: 0; }
.rs-still .p-btn.line { border-color: var(--wk-stroke); }

/* Households: search, the Show pick and the rows. */
.rs-households { gap: 12px; padding-bottom: 8px; }
.rs-search {
  width: 100%; box-sizing: border-box; min-height: 41px; padding: 10px 14px; border: 1px solid transparent; border-radius: 14px;
  background: var(--wk-track); color: var(--wk-ink); font: inherit; font-size: 14px; line-height: 19px; outline: none;
}
.rs-search::placeholder { color: var(--wk-muted); opacity: 1; }
.rs-search:focus-visible { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.rs-show {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 11px;
  border: 1px solid var(--wk-grip); border-radius: 14px; background: var(--wk-card); color: var(--wk-ink);
  font-size: 13px; font-weight: 500; line-height: 18px;
}
.rs-show > span { min-width: 0; overflow-wrap: anywhere; }
.rs-show i { flex: none; font-size: 14px; }
.rs-show select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; font-size: 16px; cursor: pointer; }
.rs-show:has(select:focus-visible) { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.rs-hh-list { margin: 0; padding: 0; list-style: none; }
.rs-hh {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--wk-note-edge);
  background: none; color: inherit; font: inherit; text-align: left;
}
button.rs-hh { cursor: pointer; }
.rs-hh-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rs-hh-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.rs-hh-line { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.rs-hh-line.yes { color: var(--wk-moss); }
.rs-hh-line.wait { color: var(--wk-on-sand); }
.rs-new { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--wk-plum); }
.rs-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rs-chev { flex: none; font-size: 18px; line-height: 25px; color: var(--wk-muted); }
.rs-none { margin: 0; padding: 12px 0; border-top: 1px solid var(--wk-note-edge); font-size: 13px; line-height: 1.45; color: var(--wk-muted); }
.rs-show-more {
  display: flex; width: 100%; min-height: 39px; padding: 12px 0 8px; border: 0; border-top: 1px solid var(--wk-note-edge); background: none;
  color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; text-align: left; cursor: pointer;
}
.rs-guest-view, .rs-add {
  align-self: flex-start; padding: 4px 0 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px;
  font-weight: 500; line-height: 19px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.rs-guest-view { min-height: 32px; }

/* No replies yet (12a). */
.rs-empty { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.rs-empty h2 { margin: 0; font-family: var(--wk-serif); font-size: 34px; font-weight: 500; line-height: 1.1; color: var(--wk-ink); }
.rs-empty h2 + p { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--wk-body); }
.rs-empty-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.rs-review { min-height: 48px; padding: 0 22px; font-size: 16px; font-weight: 500; }
.rs-cards { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: 14px; line-height: 19px; color: var(--wk-muted); }
.rs-cards .rs-add { padding: 0; font-weight: 600; }

:is(.rs-meals-head, .rs-caterer, .rs-dismiss, .rs-news, .rs-hh, .rs-show-more, .rs-guest-view, .rs-add):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}

/* Review bounced (BouncedSheet). */
.rs-body { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--wk-body); }
.rs-bounces { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.rs-bounce form { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--wk-hair); border-radius: 20px; }
.rs-bounce form > p { margin: 0; }
.rs-bounce .p-error { margin: -4px 0 0; }
.rs-reason { font-size: 13px; line-height: 1.4; color: var(--wk-plum); overflow-wrap: anywhere; }
/* Updates (Figma 12e) and Send an update (12f), on the plan.css kit. Manrope's `normal` line
   height is a pixel taller in Chrome than in Figma, so single lines pin theirs. */
.viewport:has(> :is(#s-rsvp-updates, #s-rsvp-update).active) { background: var(--wk-paper); }

.ru-page { display: flex; flex-direction: column; gap: 22px; padding-inline: 20px; }
.ru-back {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 44px; margin: -12px 0 -12px -4px;
  padding: 0 4px; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500;
  line-height: 19px; cursor: pointer;
}
.ru-head { display: flex; flex-direction: column; gap: 4px; }
.ru-title {
  margin: 0; padding: 2px 0 4px; font-family: var(--wk-serif); font-size: 38px; font-weight: 500; line-height: 40px;
  letter-spacing: -.76px; color: var(--wk-ink); text-wrap: balance;
}
.ru-title.tight { padding: 0; line-height: 36px; }
.ru-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--wk-body); }
.ru-sub.sm { font-size: 13px; line-height: 18px; }
.ru-cta { min-height: 46px; padding-block: 13px; font-size: 15px; line-height: 20px; }

/* Start from a template: the lime card with a 2×2 grid of tiles. */
.ru-templates { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; border-radius: 24px; background: var(--wk-lime); }
.ru-templates-title { margin: 0; font-family: var(--wk-serif); font-size: 24px; font-weight: 500; line-height: 29px; color: var(--wk-on-lime); }
.ru-templates-lead { margin: 0; font-size: 14px; line-height: 1.5; color: #2B3410; }
.ru-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ru-tiles > li { display: flex; }
.ru-tile {
  display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border: 0; border-radius: 14px;
  background: rgba(255, 255, 255, .7); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s, transform .12s ease;
}
.ru-tile:hover { background: rgba(255, 255, 255, .85); }
.ru-tile:active { transform: scale(.98); }
.ru-tile-title { font-size: 15px; font-weight: 600; line-height: 20px; color: #141B3C; }
.ru-tile-sub { font-size: 13px; line-height: 1.45; color: #2B3410; }

/* Waiting on the mail service. */
.ru-pending { display: flex; flex-direction: column; gap: 10px; background: var(--wk-sand); }
.ru-pending .p-callout-label { margin: 0; color: var(--wk-on-sand); }
.ru-batch { display: flex; flex-direction: column; gap: 10px; }
.ru-batch p { font-size: 13px; color: var(--wk-ink); }

/* Drafts, Scheduled, Sent: a 15px label over a hairline card of rows. */
.ru-section { display: flex; flex-direction: column; gap: 22px; }
.ru-label { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-body); }
.ru-card { margin: 0; padding: 4px 16px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); list-style: none; }
.ru-card > li + li { border-top: 1px solid var(--wk-hair); }
.ru-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left;
}
button.ru-row { cursor: pointer; }
.ru-row-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.ru-row-title { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }
.ru-row-sub { font-size: 13px; line-height: 1.45; color: var(--wk-muted); overflow-wrap: anywhere; }
.ru-row-end { flex: none; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--wk-ink); }
.ru-sent { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--wk-moss); }
.ru-end-btn {
  min-height: 32px; margin: -6px 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ru-end-btn.ru-bounced { color: var(--wk-plum); }
.ru-failed { font-weight: 600; color: var(--wk-plum); }
.ru-empty { margin: 0; font-size: 14px; line-height: 1.5; color: var(--wk-muted); }

/* The editor's numbered steps. */
.ru-step { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.ru-step-head { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 600; line-height: 22px; color: var(--wk-ink); }
.ru-step-n {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--wk-lime);
  color: var(--wk-on-lime); font-size: 13px; font-weight: 600; line-height: 1;
}
.ru-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--wk-muted); }
.ru-inline {
  display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ru-hint .ru-inline { padding-block: 6px; }

.ru-who {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px;
  background: var(--wk-ground); color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.ru-who-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.ru-who-title { font-size: 15px; font-weight: 500; line-height: 20px; }
.ru-who-sub { font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.ru-who-change { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 13px; font-weight: 600; line-height: 18px; }
.ru-who-change i { font-size: 14px; }

/* Two side-by-side choices: lime wash with a check when chosen. */
.ru-options { display: flex; gap: 10px; }
.ru-option {
  display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--wk-grip); border-radius: 16px; background: var(--wk-card); color: var(--wk-ink); font: inherit; text-align: left;
}
button.ru-option { cursor: pointer; }
.ru-option.on { padding: 11.5px 13.5px; border: 1.5px solid var(--wk-lime); background: var(--wk-wash); }
.ru-option-title { display: flex; gap: 8px; font-size: 15px; font-weight: 600; line-height: 20px; }
.ru-option-sub { font-size: 13px; line-height: 18px; color: var(--wk-body); }
#s-rsvp-update [aria-labelledby='ru-step-4'] .ru-option-sub { font-size: 12px; line-height: 16px; }
.ru-option.off { border-style: dashed; border-color: var(--wk-edge); }
.ru-option.off .ru-option-title { color: var(--wk-body); }
.ru-option.off .ru-option-sub { color: var(--wk-muted); }

.ru-from { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.ru-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.p-chip.ru-chip { padding: 7px 12px; border-color: var(--wk-grip); font-size: 13px; line-height: 18px; }

/* Fields: a white box with the label above the value; the 3:1 edge, ink when focused. */
.ru-field, .ru-select {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--wk-edge);
  border-radius: 16px; background: var(--wk-card); transition: border-color .15s, box-shadow .15s;
}
.ru-field:focus-within, .ru-select:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 .5px var(--wk-ink); }
.ru-field-label { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.ru-field :is(input, textarea) {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: transparent; color: var(--wk-ink);
  font: inherit; font-size: 15px; line-height: 1.6; outline: none;
}
.ru-field textarea { min-height: 160px; font-size: 16px; resize: vertical; field-sizing: content; }
.ru-field:has(textarea) { padding-bottom: 18px; }
.ru-select { flex: 1 1 0; min-width: 0; gap: 4px; padding: 10px 14px; }
.ru-select select {
  width: 100%; margin: 0; padding: 0 20px 0 0; border: 0; background: transparent; color: var(--wk-ink); font: inherit; font-size: 15px;
  font-weight: 500; line-height: 20px; appearance: none; outline: none; cursor: pointer;
}
.ru-select i { position: absolute; right: 14px; bottom: 12px; font-size: 14px; color: var(--wk-ink); pointer-events: none; }
.ru-select:has([aria-invalid='true']) { border-color: var(--wk-plum); box-shadow: 0 0 0 1px var(--wk-plum); }
#s-rsvp-update .p-error { margin: -4px 0 0; }

.ru-meta { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.ru-count { flex: none; font-weight: 500; color: var(--wk-moss); font-variant-numeric: tabular-nums; }
.ru-count.over, .ru-hint.ru-over { color: var(--wk-plum); }
.ru-hint.ru-over { margin-top: -6px; font-weight: 500; }

/* The text: the grey prefix and suffix every text gets, around the couple's words (13e). */
.ru-text-part { display: flex; flex-direction: column; gap: 12px; }
.ru-text { gap: 2px; cursor: text; }
.ru-text .ru-field-label { margin-bottom: 4px; }
.ru-locked { font-size: 15px; line-height: 1.6; color: var(--wk-muted); overflow-wrap: anywhere; user-select: none; }
.ru-field.ru-text textarea { min-height: 72px; }
.ru-preview {
  align-self: flex-start; min-height: 32px; margin: -6px 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 13px; font-weight: 600; line-height: 18px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.ru-summary { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--wk-ground); }
.ru-summary-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.ru-summary p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--wk-body); }
.ru-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: -8px; }
.ru-primary, .ru-secondary { min-height: 46px; padding-block: 13px; font-size: 15px; line-height: 20px; }
.ru-secondary { border-color: #CFCFD8; font-weight: 500; }
.ru-primary:disabled, .ru-secondary:disabled { cursor: not-allowed; }
.ru-delete { align-self: center; min-height: 44px; margin-top: 4px; font-size: 14px; }

/* The preview: the email as a household gets it. */
.ru-mail { display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px solid var(--wk-hair); border-radius: 20px; background: var(--wk-card); }
.ru-mail p { margin: 0; }
.ru-mail-label { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.ru-mail-subject { font-size: 16px; font-weight: 600; line-height: 22px; color: var(--wk-ink); }
.ru-mail-body { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--wk-ink); }
.ru-mail-body p { white-space: pre-line; overflow-wrap: anywhere; }
.ru-mail-btn {
  align-self: flex-start; margin-top: 18px; padding: 13px 30px; border-radius: 999px; background: #2A2724; color: #FDFBF7;
  font-size: 15px; font-weight: 600; line-height: 20px;
}

/* Who’s getting it. Review bounced keeps its rsvps.css styles, shared with the RSVP tab. */
.ru-choices .p-row { gap: 14px; }
.ru-choices .p-row-main { display: flex; flex-direction: column; }
.ru-choices-label { margin: 20px 0 8px; }

:is(.ru-back, .ru-tile, .ru-row, .ru-end-btn, .ru-inline, .ru-who, .ru-option, .ru-preview):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.ru-templates .ru-tile:focus-visible { outline-color: #141B3C; }

@media (min-width: 860px) {
  .ru-page { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ru-tile, .ru-field, .ru-select { transition: none; }
}
/* A household's reply (Figma 12g "RSVPs — Household reply"), on the plan.css kit. Manrope's
   `normal` line height runs a pixel taller in Chrome than in Figma, so text lines are pinned. */
.viewport:has(> #s-rsvp-household.active) { background: var(--wk-paper); }

.rh-page { display: flex; flex-direction: column; gap: 22px; }
.rh-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -12px 0 -10px;
  padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500;
  line-height: 19px; cursor: pointer;
}
.rh-back span { font-size: 18px; line-height: 1; margin-top: -2px; }

.rh-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rh-title { margin: 0; line-height: 36px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.rh-sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }
.rh-chip {
  margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--wk-wash); color: var(--wk-moss);
  font-size: 12px; font-weight: 500; line-height: 16px;
}

/* What changed in the app: plum, with Revert all. */
.rh-callout {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: 18px;
  background: var(--wk-plum-wash); color: color-mix(in srgb, var(--wk-plum) 70%, var(--wk-ink));
}
.rh-callout h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-plum); }
.rh-callout p { margin: 0; font-size: 14px; line-height: 1.45; }
.rh-revert-all, .rh-revert {
  min-height: 32px; margin: -7px 0; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.rh-revert-all { font-size: 14px; line-height: 19px; }

.rh-intro { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-muted); }

/* A card per person, then From them and History: a 16px name over hairline rows. */
.rh-card { display: flex; flex-direction: column; padding: 14px 16px 6px; border-radius: 24px; }
.rh-name { margin: 0; padding-bottom: 4px; font-size: 16px; font-weight: 600; line-height: 22px; color: var(--wk-ink); overflow-wrap: anywhere; }
.rh-field { display: flex; flex-direction: column; gap: 6px; padding: 11px 0; border-top: 1px solid var(--wk-off); }
.rh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.rh-label { flex: none; font-size: 14px; line-height: 19px; color: var(--wk-body); }
.rh-changed { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.4; color: var(--wk-plum); }
.rh-revert { flex: none; font-size: 13px; line-height: 18px; }

/* The tappable value: a cream pill, plum when it isn't what they sent. A select laid over it picks. */
.rh-pill {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 70%; padding: 5px 10px;
  border: 0; border-radius: 999px; background: var(--wk-ground); color: var(--wk-ink); font: inherit; font-size: 13px;
  font-weight: 500; line-height: 18px; text-align: left; cursor: pointer;
}
.rh-pill > span, button.rh-pill { overflow-wrap: anywhere; }
.rh-pill i { flex: none; font-size: 12px; }
.rh-pill.changed { background: var(--wk-plum-wash); color: var(--wk-plum); }
.rh-pill::after { content: ''; position: absolute; inset: -8px 0; }
.rh-pill select {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; font-size: 16px; cursor: pointer;
}
/* Staying at before the wedding has any places: say so, and lead to adding them. */
.rh-none {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 12px; font-size: 13px;
  line-height: 18px; color: var(--wk-muted);
}
.rh-add {
  min-height: 32px; margin: -7px 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.rh-input {
  width: min(240px, 62%); min-height: 28px; box-sizing: border-box; padding: 4px 10px; border: 1px solid var(--wk-edge);
  border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 16px; line-height: 20px;
}

.rh-note { display: flex; flex-direction: column; gap: 4px; padding: 11px 0; border-top: 1px solid var(--wk-off); }
.rh-note-label { font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.rh-note blockquote { margin: 0; font-size: 15px; line-height: 1.5; color: var(--wk-ink); overflow-wrap: anywhere; }
.rh-note-field { margin: 4px 0 11px; }
.rh-email { gap: 10px; }
.rh-email .p-error { margin: 0; }
.rh-email .p-btns { justify-content: flex-end; }
.rh-email .p-btns > .p-btn { flex: none; }
.rh-link { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--wk-off); }
.rh-link > span { font-size: 13px; line-height: 1.4; color: var(--wk-muted); }
.rh-link .p-btn { flex: none; }

.rh-history { margin: 0; padding: 0; list-style: none; }
.rh-history > li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--wk-off); }
.rh-history time { flex: none; min-width: 38px; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--wk-muted); }
.rh-history span { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--wk-ink); overflow-wrap: anywhere; }

.rh-error { margin: 0; }
.rh-btns { display: flex; flex-direction: column; gap: 8px; }
.rh-btns .p-btn { min-height: 46px; font-size: 15px; line-height: 20px; }
.rh-btns .p-btn.line { font-weight: 500; }
.rh-btns .p-btn:disabled:not([aria-busy]) { cursor: default; }

:is(.rh-back, .rh-revert-all, .rh-revert, .rh-add, button.rh-pill):focus-visible, .rh-pill:has(select:focus-visible) {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}
.rh-input:focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 1px; }
/* Send to your caterer (Figma 12h, Oct 13): a back link over the serif title, the event line, the
   meal totals, a preview of the spreadsheet, the file, lime Email and outlined Download. On plan.css
   and the palette.css tokens, so dark mode follows. Line heights are pinned in px because Chrome
   sets Manrope's normal one 1px taller than Figma. Amber is --wk-on-sand (6:1 on white). */
.viewport:has(> #s-caterer.active) { background: var(--wk-paper); }

.ct-page { display: flex; flex-direction: column; gap: 22px; padding-inline: 20px; }
.ct-back {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0; border: 0;
  background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; white-space: pre; cursor: pointer;
}
.ct-head { display: flex; flex-direction: column; gap: 4px; }
.ct-title { margin: 0; font-family: var(--wk-serif); font-size: 38px; line-height: 36px; font-weight: 500; letter-spacing: -.76px; color: var(--wk-ink); }
.ct-sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }

.ct-for { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.ct-for .ev-pick { font-size: 13px; line-height: 18px; }
.ct-pill { padding: 6px 12px; border: 1px solid var(--wk-grip); border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font-weight: 500; }

.ct-card { display: flex; flex-direction: column; padding: 14px 16px 8px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.ct-card-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 22px; color: var(--wk-ink); }
.ct-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.ct-card-head > span { font-size: 12px; line-height: 16px; color: var(--wk-muted); }

/* Meal totals: name left, count right, on warm hairlines. */
.ct-rows { margin: 0; padding: 0; list-style: none; }
.ct-rows > li {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--wk-off);
  font-size: 14px; line-height: 19px; color: var(--wk-ink);
}
.ct-rows > li > span { min-width: 0; overflow-wrap: anywhere; }
.ct-rows b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.ct-rows .ct-total { font-weight: 600; }
.ct-warn, .ct-rows > li.ct-warn { color: var(--wk-on-sand); }

/* What's in the file: the first rows of the spreadsheet, as a table. */
.ct-file-card { padding-inline: 14px; }
.ct-table {
  width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; overflow: hidden; border-radius: 12px;
  background: color-mix(in srgb, var(--wk-off) 30%, var(--wk-card)); font-size: 12px; line-height: 16px; color: var(--wk-ink); text-align: left;
}
.ct-table th, .ct-table td { padding: 8px 4px; vertical-align: top; overflow-wrap: anywhere; }
.ct-table :is(th, td):first-child { padding-left: 10px; }
.ct-table :is(th, td):last-child { padding-right: 10px; }
.ct-table th { background: var(--wk-off); color: var(--wk-body); font-weight: 600; }
.ct-table td { border-top: 1px solid var(--wk-off); font-weight: 400; }
.ct-table :is(th, td):nth-child(1) { width: 38%; }
.ct-table :is(th, td):nth-child(2) { width: 33%; }
.ct-table.ct-no-meal :is(th, td):nth-child(1) { width: 50%; }
.ct-table.ct-no-meal :is(th, td):nth-child(2) { width: auto; }
.ct-more { margin: 0; padding: 10px 0 6px; font-size: 12px; line-height: 1.45; color: var(--wk-muted); }

/* The file. */
.ct-file { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--wk-ground); }
.ct-badge {
  flex: none; padding: 6px 8px; border-radius: 8px; background: var(--wk-moss); color: var(--wk-paper); font-size: 11px; font-weight: 600;
  line-height: 15px;
}
.ct-file-main { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ct-file-name { max-width: 100%; font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.ct-file-meta { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.ct-retry {
  display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

.ct-empty { gap: 6px; padding: 18px 18px 20px; }
.ct-empty-title { margin: 0; font-family: var(--wk-serif); font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--wk-ink); }
.ct-empty p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-muted); }

.ct-btns { display: flex; flex-direction: column; gap: 8px; }
.ct-btn { min-height: 46px; padding-block: 13px; font-size: 15px; line-height: 20px; }
.ct-btn.line { border-color: var(--wk-stroke); font-weight: 500; }
.ct-btn:disabled { cursor: default; }
.ct-foot { margin: 0; font-size: 12px; line-height: 1.45; color: var(--wk-muted); }

:is(.ct-back, .ct-retry):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
/* site-rsvp-form: the RSVP form's settings (9g), its sheets (change your reply-by date, meal options, add a question),
   Add a reply · pick the household and the RSVP tab's Updates for guests card, from the Oct 14 frames, on the
   palette.css tokens. Line heights pinned in px (Manrope runs 1px tall in Chrome). */
:root { --rf-rule: #EEEAE0; --rf-tag: #EEF3CF; --rf-on-tag: #4A5A10; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --rf-rule: var(--wk-line); --rf-tag: var(--wk-wash); --rf-on-tag: var(--wk-moss); } }
[data-theme='dark'] { --rf-rule: var(--wk-line); --rf-tag: var(--wk-wash); --rf-on-tag: var(--wk-moss); }

.viewport:has(> #s-site-section.active .rf-page) { background: var(--wk-paper); }
.rf-page {
  display: flex; flex-direction: column; gap: 22px; padding: 20px 20px 104px; color: var(--wk-ink); font-family: var(--wk-sans);
}
:where(.rf-page, #rf-reply-by, #rf-meals, #rf-question, #rf-add-reply, .rf-updates) :where(h1, h2, p, ul) { margin: 0; }
:where(.rf-page, #rf-meals, #rf-question, #rf-add-reply) ul { padding: 0; list-style: none; }
.rf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.rf-back {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 44px; margin: -12px 0; padding: 0;
  border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.rf-head { display: flex; flex-direction: column; gap: 4px; }
.rf-title { font-family: var(--wk-serif); font-size: 38px; font-weight: 500; line-height: 36px; letter-spacing: -.76px; }
.rf-lead { font-size: 13px; line-height: 19px; color: var(--wk-body); }
.rf-label { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.rf-help, .rf-foot { font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.rf-foot { line-height: 1.45; }

.rf-card { border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.rf-row { display: flex; align-items: center; gap: 12px; }
.rf-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rf-row-title { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.rf-row-title.strong { font-size: 15px; font-weight: 600; line-height: 20px; }
.rf-row-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.rf-reply-by .rf-row-sub { font-size: 13px; line-height: 18px; }
.rf-link {
  display: inline-flex; align-items: center; min-height: 32px; margin: -6px 0; padding: 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; white-space: nowrap; cursor: pointer;
}
.rf-q .rf-link { margin: -3px 0 -7px; }

/* Message above the form */
.rf-message { display: flex; flex-direction: column; gap: 6px; }
.rf-msg-field {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 64px; padding: 12px 14px;
  border: 1px solid var(--wk-stroke); border-radius: 14px; background: var(--wk-card); color: var(--wk-ink); font: inherit; text-align: left;
  cursor: pointer;
}
label.rf-msg-field { flex-direction: column; align-items: stretch; gap: 3px; cursor: text; }
.rf-msg-field.on, .rf-msg-field:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 .5px var(--wk-ink); }
.rf-msg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rf-msg-label { font-size: 11px; font-weight: 600; line-height: 15px; color: var(--wk-muted); }
.rf-msg-text { font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.rf-msg-text.empty { color: var(--wk-muted); }
.rf-msg-edit { flex: none; font-size: 13px; font-weight: 600; line-height: 18px; text-decoration: underline; text-underline-offset: 3px; }
.rf-msg-field textarea {
  width: 100%; min-height: 40px; margin: 0; padding: 0; border: 0; outline: none; resize: none; background: none; color: var(--wk-ink);
  font: inherit; font-size: 15px; line-height: 20px; field-sizing: content;
}

/* How guests reply */
.rf-modes { display: flex; flex-direction: column; padding: 4px 16px; }
.rf-mode {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 12px 0; border: 0;
  border-top: 1px solid var(--rf-rule); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.rf-mode:first-child { border-top: 0; }
.rf-tick { flex: none; width: 16px; font-size: 16px; font-weight: 600; line-height: 22px; text-align: center; }

.rf-reply-by { padding: 14px 16px; }

/* Questions we ask */
.rf-questions { display: flex; flex-direction: column; padding: 4px 16px; }
.rf-card-head { padding-top: 12px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.rf-q { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rf-rule); }
.rf-card-head + ul > .rf-q:first-child { margin-top: 12px; }
.rf-add-row {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 12px 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 19px; text-align: left; cursor: pointer;
}
.rf-questions .rf-add-row { padding: 14px 0 12px; }

.rf-actions, .rf-sheet-actions { display: flex; flex-direction: column; gap: 10px; }
.rf-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 20px; border: 1.5px solid var(--wk-lime);
  border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime); font: inherit; font-size: 15px; font-weight: 600;
  line-height: 20px; cursor: pointer; transition: transform .12s ease;
}
.rf-btn.line { border-color: var(--wk-ink); background: var(--wk-card); color: var(--wk-ink); }
.rf-btn:active:not(:disabled) { transform: scale(.97); }
.rf-btn:disabled { opacity: .5; cursor: default; }

/* The sheets */
:is(#rf-reply-by, #rf-meals, #rf-question, #rf-add-reply) { padding: 12px 20px calc(28px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: var(--wk-card); }
:is(#rf-reply-by, #rf-meals, #rf-question, #rf-add-reply) .p-sheet-top { margin-bottom: 16px; }
:is(#rf-reply-by, #rf-meals, #rf-question, #rf-add-reply) .p-sheet-grip { height: 4px; border-radius: 2px; }
:is(#rf-reply-by, #rf-meals, #rf-question, #rf-add-reply) .p-sheet-title { font-size: 30px; line-height: 33px; overflow-wrap: anywhere; }
:is(#rf-reply-by, #rf-meals, #rf-question, #rf-add-reply) .p-sheet-lead { margin-top: 6px; line-height: 20px; color: var(--wk-body); }
:is(#rf-reply-by, #rf-meals, #rf-question, #rf-add-reply) .p-sheet-body { gap: 16px; margin-top: 16px; }
.rf-lead-note { display: block; margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--wk-muted); }

.rf-field {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 12px; border: 1.5px solid var(--wk-ink);
  border-radius: 14px; background: var(--wk-card); cursor: text;
}
.rf-field-label { font-size: 11px; font-weight: 600; line-height: 15px; color: var(--wk-muted); }
.rf-field input, .rf-date-text {
  width: 100%; min-height: 20px; margin: 0; padding: 0; border: 0; outline: none; background: none; color: var(--wk-ink);
  font: inherit; font-size: 15px; line-height: 20px;
}
.rf-field input::placeholder, .rf-inline-field input::placeholder, .rf-choice::placeholder, .rf-search::placeholder { color: var(--wk-muted); opacity: 1; }
.rf-field:focus-within { box-shadow: 0 0 0 1.5px var(--wk-ink); }
/* The date field shows "May 15, 2027"; the native date input lies over it to take taps and typing. */
.rf-date { cursor: pointer; }
.rf-date input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.rf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-chip {
  position: relative; min-height: 32px; padding: 6px 12px; border: 1px solid var(--wk-grip); border-radius: 999px; background: var(--wk-card);
  color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer;
}
.rf-chip::after { content: ''; position: absolute; inset: -6px 0; }
.rf-chip[aria-pressed='true'] { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
.rf-tell { padding-top: 4px; }
.rf-required { padding: 12px 14px; border-radius: 20px; }
.rf-required .rf-row-title { font-size: 14px; line-height: 19px; }
.rf-tell .rf-row-title { font-size: 13px; line-height: 18px; }

/* Meal options and a question's choices: rows with a handle */
.rf-list { padding: 2px 14px; border-radius: 20px; }
.rf-item { border-bottom: 1px solid var(--wk-hair); background: var(--wk-card); }
.rf-item.held { box-shadow: 0 6px 16px rgba(20, 28, 61, .16); }
.rf-item-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; }
.rf-handle {
  position: relative; display: grid; place-items: center; flex: none; width: 10px; height: 16px; margin: 0; padding: 0; border: 0;
  background: none; color: var(--wk-muted); fill: currentColor; cursor: grab; touch-action: none;
}
.rf-handle::after { content: ''; position: absolute; inset: -14px -12px; }
.held .rf-handle { cursor: grabbing; }
.rf-item-name { flex: 1; min-width: 0; padding: 12px 0; font-size: 14px; font-weight: 600; line-height: 19px; overflow-wrap: anywhere; }
.rf-choice {
  flex: 1; min-width: 0; min-height: 43px; margin: 0; padding: 0; border: 0; outline: none; background: none; color: var(--wk-ink);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 19px;
}
.rf-item-row:focus-within:has(.rf-choice:focus) { box-shadow: inset 0 -2px 0 var(--wk-ink); }
.rf-remove, .rf-remove-q, .rf-tag-add, .rf-tag-text, .rf-tag-x, .rf-pick, .rf-inline-add {
  position: relative; flex: none; padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
}
.rf-remove { color: var(--wk-muted); font-size: 12px; font-weight: 600; line-height: 16px; text-decoration: underline; text-underline-offset: 2px; }
.rf-remove::after, .rf-tag-add::after, .rf-tag-text::after, .rf-tag-x::after, .rf-pick::after { content: ''; position: absolute; inset: -12px -4px; }
.rf-tag-add { padding: 3px 8px; border: 1px dashed var(--wk-edge); border-radius: 999px; color: var(--wk-muted); font-size: 11px; font-weight: 600; line-height: 15px; }
.rf-tag {
  display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 8px; border-radius: 999px; background: var(--rf-tag);
  color: var(--rf-on-tag); font-size: 11px; font-weight: 600; line-height: 15px;
}
.rf-tag-text { color: inherit; font-size: 11px; font-weight: 600; line-height: 15px; }
.rf-tag-x { color: inherit; font-size: 12px; font-weight: 600; line-height: 15px; }
.rf-tagging { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 12px 22px; }
.rf-adding { padding: 12px 0; }
.rf-inline-field {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1.5px solid var(--wk-ink); border-radius: 12px; background: var(--wk-card);
}
.rf-inline-field input { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; outline: none; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; line-height: 19px; }
.rf-inline-add { min-height: 24px; color: var(--wk-ink); font-size: 13px; font-weight: 600; line-height: 18px; text-decoration: underline; text-underline-offset: 2px; }
.rf-inline-add::after { content: ''; position: absolute; inset: -10px -8px; }
.rf-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-pick { padding: 4px 9px; border-radius: 999px; background: var(--wk-track); color: var(--wk-ink); font-size: 11px; font-weight: 600; line-height: 15px; }
.rf-list .rf-add-row { padding: 12px 0; }

.rf-option { display: flex; flex-direction: column; gap: 8px; }
.rf-option-label { font-size: 14px; font-weight: 600; line-height: 19px; }
.rf-seg > button { line-height: 19px; }
.rf-error { font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-plum); }
.rf-remove-q {
  align-self: center; min-height: 44px; color: var(--wk-plum); font-size: 14px; font-weight: 600; line-height: 19px;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Add a reply · pick the household */
.rf-search {
  width: 100%; box-sizing: border-box; min-height: 44px; margin: 0; padding: 12px 14px; border: 1px solid var(--wk-stroke);
  border-radius: 14px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 14px; line-height: 19px; outline: none;
}
.rf-search:focus-visible { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.rf-count { font-size: 12px; font-weight: 600; line-height: 16px; color: var(--wk-muted); }
.rf-picklist { padding: 2px 14px; border-radius: 20px; }
.rf-picklist > li + li { border-top: 1px solid var(--wk-hair); }
.rf-pickrow {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 12px 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.rf-pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rf-pick-name { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.rf-pick-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.rf-chev { flex: none; font-size: 18px; font-weight: 600; line-height: 24px; color: var(--wk-muted); }
.rf-none { font-size: 13px; line-height: 18px; color: var(--wk-muted); }

/* Updates for guests, on the RSVP tab (12b, 1966:14637) */
.rf-updates { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; color: var(--wk-ink); font-family: var(--wk-sans); }
.rf-updates-title { font-size: 14px; font-weight: 600; line-height: 19px; }
.rf-updates-lead { font-size: 13px; line-height: 1.45; letter-spacing: -.13px; color: var(--wk-muted); }
.rf-updates-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.rf-send { min-height: 39px; padding: 0 16px; font-weight: 500; line-height: 19px; }
.rf-see-all {
  min-height: 39px; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 14px; font-weight: 500; line-height: 19px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

:is(.rf-back, .rf-msg-field, .rf-mode, .rf-link, .rf-add-row, .rf-btn, .rf-chip, .rf-handle, .rf-remove, .rf-remove-q, .rf-tag-add,
  .rf-tag-text, .rf-tag-x, .rf-pick, .rf-inline-add, .rf-pickrow, .rf-see-all):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 4px; }
/* The event picker (screens/rsvp/EventPicker.tsx): a pill with a native select laid over it. */
.ev-pick {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 6px 12px;
  border: 1px solid var(--wk-grip); border-radius: 999px; background: var(--wk-card); color: var(--wk-ink);
  font-size: 14px; font-weight: 500; line-height: 19px;
}
.ev-pick > span { overflow-wrap: anywhere; }
.ev-pick i { flex: none; font-size: 12px; }
.ev-pick::after { content: ''; position: absolute; inset: -6px 0; }
.ev-pick select { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; font-size: 16px; cursor: pointer; }
.ev-pick:has(select:focus-visible) { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
/* Where guests stay (Figma 1734:13511, the Accommodations sheet) on the plan.css kit, and its row on
   the Guests screen. Manrope `normal` sits 1px taller in Chrome than in Figma, so the frame's line
   heights are pinned in px. */
#acc-sheet .p-sheet-top { margin-bottom: 12px; }
#acc-sheet .p-sheet-title { font-size: 34px; line-height: 41px; letter-spacing: 0; }
#acc-sheet .p-sheet-lead { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--wk-body); }
#acc-sheet .p-sheet-body { gap: 12px; margin-top: 12px; }

.acc-card { padding: 4px 16px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.acc-places { margin: 0; padding: 0; list-style: none; }
.acc-place { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.acc-place-text { flex: 1; min-width: 0; }
.acc-place-name { margin: 0; font-size: 15px; font-weight: 500; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }
.acc-place-line { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.acc-edit {
  position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px;
  font-weight: 500; line-height: 18px; cursor: pointer;
}
.acc-edit::after { content: ''; position: absolute; inset: -13px -10px; }

.acc-add {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; font-size: 14px; line-height: 19px; text-align: left; cursor: pointer;
}
.acc-add > span:first-child { flex: 1; }
.acc-chev { font-size: 18px; line-height: 25px; color: var(--wk-muted); }

/* No places yet: what this is for, above the same add row. */
.acc-empty { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0 13px; border-bottom: 1px solid var(--wk-hair); }
.acc-empty .p-icon-disc { color: var(--wk-moss); background: var(--wk-wash); }
.acc-empty p { margin: 0; }
.acc-empty-title { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--wk-ink); }
.acc-empty .acc-empty-text { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--wk-muted); }

.acc-help { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-body); }
.acc-btns { display: flex; padding-top: 4px; }
.acc-done { min-height: 39px; padding: 0 16px; font-weight: 500; }
.p-btn.acc-danger { border-color: var(--wk-plum); background: var(--wk-plum); color: var(--wk-paper); }

/* Adding or editing a place. */
.acc-form { display: flex; flex-direction: column; gap: 12px; }
.acc-part { display: flex; flex-direction: column; gap: 6px; }
.acc-kinds { display: flex; flex-direction: column; gap: 8px; }
.acc-label { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.acc-hint { margin: 0 4px; font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.acc-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.acc-dates .p-field { min-width: 0; }
.acc-form .p-btns { padding-top: 4px; }
.acc-remove { align-self: center; color: var(--wk-plum); }

:is(.acc-edit, .acc-add):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 6px; }
/* The Guests screens' shared pieces (Figma Guests stages 1, 3, 5, 6, Oct 13), on the plan.css kit:
   tag chip groups, sheet buttons and the address box with its suggestions. Each screen group adds its
   own file (guests-list, guests-detail, guests-add, guests-settings). Manrope `normal` sits 1px taller
   in Chrome than in Figma, so line heights are pinned in px. */
.g-tags { display: flex; flex-direction: column; gap: 14px; }
.g-tag-group { display: flex; flex-direction: column; gap: 8px; }
.g-tag-label { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.g-tag-hint { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.g-tags .p-chip { padding: 8px 12px; font-size: 13px; line-height: 18px; }
.g-tags .p-chip > span[aria-hidden] { margin-right: -2px; }
.g-tag-more { align-self: flex-start; font-size: 13px; }

.g-sheet-actions { display: flex; gap: 10px; }
.g-sheet-actions > .p-btn { min-width: 88px; }

.g-address { position: relative; display: flex; flex-direction: column; gap: 8px; }
.g-address-list {
  margin: 0; padding: 4px 12px; list-style: none; border-radius: 14px; background: var(--wk-note);
}
.g-address-list[hidden] { display: none; }
.g-address-list > li {
  padding: 11px 0; font-size: 14px; line-height: 19px; color: var(--wk-ink); cursor: pointer;
}
.g-address-list > li + li { border-top: 1px solid var(--wk-note-edge); }
.g-address-list > li[aria-selected='true'] { font-weight: 600; }
/* The guest list and Need more details (Figma Guests 1a-1i, 3g, 5a, Oct 13), on the plan.css kit and
   the shared guests.css pieces. Manrope `normal` sits 1px taller in Chrome than in Figma, so the frames'
   line heights are pinned in px. */
.viewport:has(> :is(#s-guests, #s-guests-needs).active) { background: var(--wk-paper); }
.gl-page, .gn-page { display: flex; flex-direction: column; gap: 22px; }
.gl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gl-card { border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.gl-text-btn {
  position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px;
  font-weight: 500; line-height: 18px; cursor: pointer;
}
.gl-text-btn::after { content: ''; position: absolute; inset: -13px -6px; }
.gl-text-btn.muted { font-size: 12px; font-weight: 400; line-height: 17px; color: var(--wk-muted); }

/* 1a: no guests yet. */
.gl-start { display: flex; flex-direction: column; gap: 10px; }
.gl-section-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.gl-way {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border: 1px solid var(--wk-hair); border-radius: 24px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.gl-way.lead {
  border-color: color-mix(in srgb, var(--wk-lime) 45%, var(--wk-card)); background: color-mix(in srgb, var(--wk-wash) 55%, var(--wk-card));
}
.gl-tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--wk-track); }
.gl-way.lead .gl-tile { background: var(--wk-card); }
.gl-tile i { font-size: 22px; color: var(--wk-ink); }
.gl-way-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gl-way-name { font-size: 15px; font-weight: 500; line-height: 20px; }
.gl-way-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gl-way-go { flex: none; font-size: 18px; color: var(--wk-muted); }
.gl-or { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.gl-or::before, .gl-or::after { content: ''; flex: 1; height: 1px; background: var(--wk-line); }
.gl-none { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-muted); }

/* 1b/1c: Upload sheet · Add here. */
.gl-add-more { display: flex; gap: 8px; }
.gl-tile-btn {
  display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 14px 10px;
  border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-card); color: var(--wk-ink); font: inherit;
  font-size: 12px; font-weight: 500; line-height: 17px; cursor: pointer;
}
.gl-tile-btn i { font-size: 22px; }

/* The guest count. */
.gl-count { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.gl-break { display: flex; align-items: center; gap: 8px; }
.gl-break-label { font-size: 12px; font-weight: 500; line-height: 17px; color: var(--wk-muted); }
.gl-pill {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--wk-grip);
  border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 12px; font-weight: 600;
  line-height: 17px; cursor: pointer;
}
.gl-pill::after { content: ''; position: absolute; inset: -9px -4px; }
.gl-pill i { font-size: 12px; }
.gl-glance { display: flex; align-items: center; gap: 16px; }
.gl-ring { position: relative; flex: none; width: 152px; height: 152px; }
.gl-ring svg { display: block; }
.gl-arc { fill: none; stroke-width: 18.24; }
.gl-ring-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0;
  font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-body);
}
.gl-ring-num {
  font-family: var(--wk-serif); font-size: 48px; font-weight: 600; line-height: 46px; font-variant-numeric: lining-nums; color: var(--wk-ink);
}
.gl-total .gl-ring-mid { position: static; align-items: flex-start; }
.gl-legend { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
.gl-legend > li + li { border-top: 1px solid var(--wk-hair); }
.gl-legend-row {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; text-align: left;
}
button.gl-legend-row { cursor: pointer; }
.gl-legend-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gl-legend b { font-size: 15px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; }
.gl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
/* The ring's colors in order (lime, navy, sand grey, olive, sky); Not set is the light grey. */
.gl-count { --gl-navy: #141B3C; --gl-sky: #8FAEDC; --gl-unset: var(--wk-bar); }
:root[data-theme='dark'] .gl-count { --gl-navy: #8E9BD0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .gl-count { --gl-navy: #8E9BD0; } }
.gl-arc.lime { stroke: var(--wk-lime); } .gl-dot.lime { background: var(--wk-lime); }
.gl-arc.navy { stroke: var(--gl-navy); } .gl-dot.navy { background: var(--gl-navy); }
.gl-arc.sand { stroke: var(--wk-grip); } .gl-dot.sand { background: var(--wk-grip); }
.gl-arc.olive { stroke: var(--wk-olive); } .gl-dot.olive { background: var(--wk-olive); }
.gl-arc.sky { stroke: var(--gl-sky); } .gl-dot.sky { background: var(--gl-sky); }
.gl-arc.plum { stroke: var(--wk-plum); } .gl-dot.plum { background: var(--wk-plum); }
.gl-arc.unset { stroke: var(--gl-unset); } .gl-dot.unset { background: var(--gl-unset); }
.gl-bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--wk-track); }
.gl-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--wk-lime); }
.gl-bar.over > span { background: var(--wk-plum); }
.gl-count-line { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.gl-count-line.over { color: var(--wk-plum); }
.gl-count-line.maybe { color: var(--wk-on-sand); }

/* Dropdown menus: Break down by and the Edit multiple choices. */
.gl-pop { position: relative; }
.gl-dim { position: fixed; inset: 0; z-index: 30; background: rgba(20, 27, 60, .12); }
.gl-menu {
  position: absolute; top: calc(100% + 8px); z-index: 31; display: flex; flex-direction: column; width: max-content; min-width: 200px;
  max-width: min(300px, calc(100vw - 32px)); padding: 6px 0; border: 1px solid var(--wk-hair); border-radius: 16px;
  background: var(--wk-card); box-shadow: 0 8px 28px rgba(20, 26, 61, .16); overflow-y: auto; overscroll-behavior: contain;
}
.gl-menu.up { top: auto; bottom: calc(100% + 8px); }
.gl-break-menu { width: 300px; }
.gl-menu-group + .gl-menu-group, .gl-menu-foot { border-top: 1px solid var(--wk-hair); }
.gl-menu-label { margin: 0; padding: 8px 16px 4px; font-size: 12px; font-weight: 600; line-height: 17px; color: var(--wk-muted); }
.gl-menu-item, .gl-menu-foot {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 9px 16px; border: 0; background: none;
  color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.gl-menu-item.on { background: color-mix(in srgb, var(--wk-wash) 60%, var(--wk-card)); }
.gl-menu-item i { font-size: 16px; }
.gl-menu-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.gl-menu-name { font-size: 14px; font-weight: 500; line-height: 19px; }
.gl-menu-item.on .gl-menu-name { font-weight: 600; }
.gl-menu-meta { font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.gl-menu-foot { padding: 10px 16px; font-size: 13px; font-weight: 500; line-height: 18px; }
:is(.gl-menu-item, .gl-menu-foot):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: -3px; }

/* Search, Filter and the chips it leaves. */
.gl-search-row { display: flex; gap: 8px; }
.gl-search {
  flex: 1; min-width: 0; box-sizing: border-box; min-height: 46px; padding: 13px 14px; border: 1px solid var(--wk-hair);
  border-radius: 18px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 14px; line-height: 19px; outline: none;
}
.gl-search::placeholder { color: var(--wk-muted); opacity: 1; }
.gl-search:focus-visible { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.gl-filter-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 46px; padding: 0 12px 0 14px; border: 0; border-radius: 18px;
  background: var(--wk-btn); color: var(--wk-on-navy); font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.gl-filter-btn i { font-size: 13px; }
.gl-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gl-active-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border: 0; border-radius: 999px;
  background: var(--wk-track); color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer;
}
.gl-active-chip::after { content: ''; position: absolute; inset: -7px 0; }
.gl-active-chip i { font-size: 12px; color: var(--wk-muted); }
.gl-cancel { margin-left: auto; }

/* The line over the list. */
.gl-head { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; }
.gl-head-row { display: flex; align-items: center; gap: 16px; }
.gl-head-row:last-child { gap: 8px; }
.gl-head-count { flex: 1; min-width: 0; margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.gl-spacer { flex: 1; }
.gl-badge {
  position: relative; padding: 4px 10px; border: 0; border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime);
  font: inherit; font-size: 12px; font-weight: 600; line-height: 17px; cursor: pointer;
}
.gl-badge::after { content: ''; position: absolute; inset: -9px 0; }
.gl-edit-multi {
  position: relative; flex: none; padding: 6px 12px; border: 1px solid var(--wk-stroke); border-radius: 999px; background: var(--wk-card);
  color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer;
}
.gl-edit-multi::after { content: ''; position: absolute; inset: -7px 0; }
.gl-edit-multi.on { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }

/* Households. */
.gl-list { padding: 0 16px; }
.gl-homes { margin: 0; padding: 0; list-style: none; }
.gl-home + .gl-home { border-top: 1px solid var(--wk-note-edge); }
.gl-home-row { display: flex; align-items: flex-start; gap: 10px; }
.gl-chev {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 3px -14px 0 -14px; padding: 0; border: 0;
  background: none; color: var(--wk-muted); cursor: pointer;
}
.gl-chev i { font-size: 16px; }
.gl-home-main {
  display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; padding: 13px 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-touch-callout: none; user-select: none;
}
.gl-home-top { display: flex; align-items: baseline; gap: 8px; }
.gl-home-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }
.gl-reply { flex: none; font-size: 12px; font-weight: 500; line-height: 17px; color: var(--wk-muted); }
.gl-reply.coming { color: var(--wk-moss); }
.gl-reply.regrets { color: var(--wk-plum); }
.gl-home-line { font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.gl-no-address { color: var(--wk-plum); }
.gl-pills { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 4px; }
.gl-mail {
  padding: 2px 7px; border: 1px solid var(--wk-grip); border-radius: 999px; background: var(--wk-card); font-size: 12px; font-weight: 500;
  line-height: 17px; color: var(--wk-muted); white-space: nowrap;
}
.gl-mail.sent { border-color: var(--wk-wash); background: var(--wk-wash); color: var(--wk-ink); }
.gl-home:has(.gl-members) .gl-home-main { padding-bottom: 8px; }

.gl-members { padding: 0 0 12px 26px; }
.gl-also { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; font-size: 12px; font-weight: 500; line-height: 17px; color: var(--wk-plum); }
.gl-people { margin: 0; padding: 0; list-style: none; border-radius: 14px; background: color-mix(in srgb, var(--wk-ground) 55%, var(--wk-card)); }
.gl-people > li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.gl-people > li + li { border-top: 1px solid color-mix(in srgb, var(--wk-line) 70%, var(--wk-card)); }
.gl-person { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gl-person-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.gl-person-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.gl-flag {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--wk-plum-wash);
  color: var(--wk-plum); font-weight: 500;
}
.gl-flag i, .gl-also i { font-size: 11px; }
.gl-edit {
  position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 12px;
  font-weight: 500; line-height: 17px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.gl-edit::after { content: ''; position: absolute; inset: -14px -12px; }
.gl-add-to { display: flex; gap: 6px; margin: 0; padding-top: 8px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-ink); }
.gl-add-to button {
  position: relative; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.gl-add-to button::after { content: ''; position: absolute; inset: -13px -3px; }

/* Select mode (1d, 3g). */
.gl-group { display: flex; align-items: center; gap: 8px; padding: 16px 0 8px; }
.gl-group p { flex: 1; min-width: 0; margin: 0; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink); }
.gl-home.selecting { padding: 0 8px; border-radius: 14px; }
.gl-home.selecting + .gl-home.selecting { border-top: 0; }
.gl-home.picked { background: color-mix(in srgb, var(--wk-wash) 60%, var(--wk-card)); }
.gl-home.selecting .p-check-hit { margin: 2px -11px 0; }
.gl-home.selecting .p-check { width: 22px; height: 22px; border-radius: 7px; }
.gl-home.selecting [aria-checked='true'] > .p-check { border-color: #141B3C; background: #141B3C; color: #fff; }
.gl-home.selecting .p-check i { font-size: 14px; }
.gl-list > .gl-homes:last-child .gl-home.selecting:last-child { margin-bottom: 8px; }

.gl-more, .gl-nobody { border-top: 1px solid var(--wk-note-edge); }
.gl-more {
  display: block; width: 100%; min-height: 44px; padding: 13px 0; border-right: 0; border-bottom: 0; border-left: 0; background: none;
  color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; text-align: center; cursor: pointer;
}
.gl-homes:first-child + .gl-more, .gl-group + .gl-nobody, .gl-nobody:first-child { border-top: 0; }
.gl-nobody { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 16px 0; }
.gl-nobody p { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }

/* The Edit multiple bar: navy in both themes, riding above the tab bar. */
.gl-bulk {
  position: sticky; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 5; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border-radius: 22px; background: #141B3C; box-shadow: 0 24px 30px -12px rgba(20, 27, 60, .35);
}
.gl-bulk-head { display: flex; align-items: flex-start; gap: 8px; }
.gl-bulk-count { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; line-height: 19px; color: #fff; }
.gl-bulk-clear {
  position: relative; padding: 0; border: 0; background: none; color: #CFE83A; font: inherit; font-size: 13px; font-weight: 500;
  line-height: 18px; cursor: pointer;
}
.gl-bulk-clear::after { content: ''; position: absolute; inset: -13px -8px; }
.gl-bulk-done { color: #fff; font-weight: 600; }
.gl-bulk-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-bulk-chip {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 0; border-radius: 999px;
  background: #2A3258; color: #fff; font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer;
}
.gl-bulk-chip::after { content: ''; position: absolute; inset: -5px 0; }
.gl-bulk-chip.lime { background: #CFE83A; color: #141B3C; }
.gl-bulk-chip i { font-size: 12px; }
.gl-bulk :is(button:disabled) { opacity: .55; cursor: default; }
.gl-bulk :is(.gl-bulk-chip, .gl-bulk-clear):focus-visible { outline: 3px solid #CFE83A; outline-offset: 2px; }
.gl-danger { border-color: var(--wk-plum); background: var(--wk-plum); color: #fff; }

/* Footer links. */
.gl-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 4px; }
.gl-link {
  min-height: 27px; padding: 4px 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500;
  line-height: 19px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Filter your list (1e). */
:is(#gl-filter, #gl-merge, [id^='gl-remove']) .p-sheet-top { margin-bottom: 12px; }
:is(#gl-filter, #gl-merge, [id^='gl-remove']) .p-sheet-title { font-size: 30px; line-height: 41px; }
#gl-filter .p-sheet-title { padding-right: 80px; }
#gl-filter .p-sheet-body { gap: 14px; margin-top: 14px; }
.gl-clear-all {
  position: absolute; top: 34px; right: 20px; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 13px; font-weight: 500; line-height: 18px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.gl-clear-all::after { content: ''; position: absolute; inset: -13px -6px; }
.gl-filter-part { display: flex; flex-direction: column; gap: 14px; }
.gl-filter-label { margin: 0; font-size: 12px; font-weight: 500; line-height: 17px; color: var(--wk-muted); }
.gl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--wk-grip);
  border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px;
  cursor: pointer;
}
.gl-chip::after { content: ''; position: absolute; inset: -4px 0; }
.gl-chip-n { font-size: 12px; font-weight: 400; color: var(--wk-muted); }
.gl-chip[aria-pressed='true'] { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
.gl-chip[aria-pressed='true'] .gl-chip-n { color: inherit; opacity: .85; }
.gl-cats { padding: 0 14px; border: 1px solid var(--wk-hair); border-radius: 18px; }
.gl-cat { display: flex; flex-direction: column; gap: 10px; padding: 11px 0; }
.gl-cat + .gl-cat { border-top: 1px solid var(--wk-note-edge); }
.gl-cat-top {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 22px; padding: 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer; position: relative;
}
.gl-cat-top::after { content: ''; position: absolute; inset: -11px 0; }
.gl-cat-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; line-height: 19px; }
.gl-cat-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--wk-lime); }
.gl-cat-value { max-width: 60%; overflow: hidden; font-size: 13px; line-height: 18px; color: var(--wk-muted); text-overflow: ellipsis; white-space: nowrap; }
.gl-cat-value.on { font-weight: 600; color: var(--wk-ink); }
.gl-cat-top i { font-size: 13px; color: var(--wk-muted); }
.gl-preview { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--wk-wash); }
.gl-preview-head { margin: 0; font-size: 15px; font-weight: 700; line-height: 20px; color: var(--wk-ink); }
.gl-preview-line { margin: 0; font-size: 12px; line-height: 1.45; color: var(--wk-body); }
.gl-show { min-height: 48px; font-size: 15px; }
.gl-show:disabled { cursor: default; }

/* Make one household? (1i). */
#gl-merge .p-sheet-lead { margin-top: 4px; font-size: 13px; color: var(--wk-body); }
#gl-merge .p-sheet-body { margin-top: 12px; }
.gl-merge { display: flex; flex-direction: column; gap: 12px; }
.gl-merge-field { display: flex; flex-direction: column; gap: 6px; }
.gl-merge-field label, .gl-merge-address legend { padding: 0; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink); }
.gl-merge-input {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px 11px 14px; border: 1.5px solid var(--wk-edge); border-radius: 14px;
  background: var(--wk-card);
}
.gl-merge-input:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.gl-merge-input input {
  flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 16px; line-height: 22px; outline: none;
}
.gl-merge-input i { font-size: 15px; color: var(--wk-muted); }
.gl-merge-people { margin: 0; padding: 0 14px; list-style: none; border: 1px solid var(--wk-hair); border-radius: 16px; }
.gl-merge-people > li { display: flex; align-items: center; gap: 8px; padding: 9px 0; font-size: 14px; font-weight: 500; line-height: 19px; }
.gl-merge-people > li + li { border-top: 1px solid var(--wk-note-edge); }
.gl-merge-people > li > :first-child { flex: 1; min-width: 0; }
.gl-merge-tags { font-size: 12px; font-weight: 400; line-height: 17px; color: var(--wk-muted); }
.gl-merge-note { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.gl-merge-address { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.gl-merge-address legend { margin-bottom: 6px; }
.gl-radios { padding: 0 14px; border: 1px solid var(--wk-hair); border-radius: 16px; }
.gl-radio { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; }
.gl-radio + .gl-radio { border-top: 1px solid var(--wk-note-edge); }
.gl-radio input {
  flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--wk-edge); border-radius: 50%; background: var(--wk-card);
  appearance: none; cursor: pointer;
}
.gl-radio input:checked { border: 6px solid var(--wk-ink); }
.gl-radio input:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.gl-radio > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gl-radio-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); }
.gl-radio input:checked + span .gl-radio-name { font-weight: 600; }
.gl-radio-line { font-size: 12px; line-height: 17px; color: var(--wk-muted); overflow-wrap: anywhere; }
.gl-merge .g-sheet-actions, .gl-remove-actions { margin-top: 4px; }
.gl-merge .p-btn, .gl-remove-actions .p-btn { min-height: 46px; font-size: 15px; }
.gl-merge .p-btn.line, .gl-remove-actions .p-btn.line { border-color: var(--wk-stroke); font-weight: 500; }
.gl-grow { flex: 1; }

/* Need more details (5a). */
.gn-back {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; margin: -12px 0 -12px -2px; padding: 0;
  border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.gn-back i { font-size: 14px; }
.gn-title { display: flex; flex-direction: column; gap: 4px; }
.gn-title h1 { margin: 0; font-family: var(--wk-serif); font-size: 38px; font-weight: 500; line-height: 40px; letter-spacing: -.02em; color: var(--wk-ink); }
.gn-title p { margin: 0; font-size: 13px; line-height: 19px; color: var(--wk-body); }
.gn-section { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gn-head { display: flex; align-items: center; gap: 8px; align-self: stretch; }
.gn-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.gn-count { padding: 3px 9px; border-radius: 999px; background: var(--wk-wash); font-size: 12px; font-weight: 600; line-height: 17px; color: var(--wk-ink); }
.gn-why { margin: 0; font-size: 12px; line-height: 1.45; color: var(--wk-muted); }
.gn-card { align-self: stretch; margin: 0; padding: 0 14px; list-style: none; border: 1px solid var(--wk-hair); border-radius: 18px; }
.gn-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; }
.gn-row + .gn-row { border-top: 1px solid var(--wk-note-edge); }
.gn-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gn-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.gn-line { font-size: 12px; line-height: 17px; color: var(--wk-muted); overflow-wrap: anywhere; }
.gn-act {
  position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px;
  font-weight: 500; line-height: 18px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.gn-act::after { content: ''; position: absolute; inset: -13px -10px; }
.gn-group { min-height: 40px; padding: 0 16px; border-color: var(--wk-stroke); font-weight: 500; }

:is(.gl-text-btn, .gl-way, .gl-tile-btn, .gl-pill, .gl-legend-row, .gl-filter-btn, .gl-active-chip, .gl-badge, .gl-edit-multi, .gl-chev,
  .gl-home-main, .gl-edit, .gl-add-to button, .gl-more, .gl-link, .gl-clear-all, .gl-chip, .gl-cat-top, .gn-back, .gn-act):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .gl-menu { animation: gl-menu-in .14s ease-out; }
}
@keyframes gl-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* One guest's detail (Figma 6a, add-ons on, 1738:13591) and a household's screen with its sheets (5c
   1298:10534, 5d Move 1286:10331, 5f Add to a household 1737:13844), on the plan.css kit. Their sheets
   sit tighter than the kit's: 14px between pieces (12px on 5c's). Manrope `normal` sits 1px taller in
   Chrome than in Figma, so line heights are pinned in px. */
.p-sheet:is(#guest-detail, [id^='gd-'], [id^='gh-']) .p-sheet-top { margin-bottom: 14px; }
.p-sheet:is(#guest-detail, [id^='gd-'], [id^='gh-']) .p-sheet-lead { margin-top: 12px; font-size: 13px; line-height: 18px; }
.p-sheet:is(#guest-detail, [id^='gd-']) .p-sheet-body { gap: 14px; margin-top: 14px; }
.p-sheet[id^='gh-'] .p-sheet-body { gap: 12px; margin-top: 12px; }
.p-sheet[id^='gh-'] .p-sheet-lead { color: var(--wk-body); }
#gh-add .p-sheet-title { font-size: 30px; line-height: 44px; }

.gd-who { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.gd-section { display: flex; flex-direction: column; gap: 14px; }
.gd-label { margin: 0; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-muted); }
.gd-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.gd-ask { color: var(--wk-plum); }

/* Cards of rows: a 14px label on the left (a 12px line under it), the value and › on the right. */
.gd-card { border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.gd-list { margin: 0; padding: 4px 16px; list-style: none; }
#guest-detail .gd-list:not(.gd-more) { padding-bottom: 12px; }
.gd-li + .gd-li, .gd-list > li + li { border-top: 1px solid var(--wk-off); }
.gd-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 12px 0; box-sizing: border-box;
  border: 0; background: none; color: inherit; font: inherit; text-align: left;
}
button.gd-row { cursor: pointer; }
.gd-row-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.gd-row-label { font-size: 14px; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.gd-more .gd-row-label, .gh-card .gd-row-label { font-weight: 500; }
.gd-row-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.gd-row-sub.same { color: var(--wk-moss); }
.gd-row-value { flex: none; max-width: 58%; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); text-align: right; }
.gd-chev { flex: none; font-size: 18px; line-height: 25px; color: var(--wk-muted); }
.gd-status { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 18px; }
.gd-status.yes { background: var(--wk-wash); color: var(--wk-moss); }
.gd-status.no { background: var(--wk-plum-wash); color: var(--wk-plum); }
.gd-status.waiting { background: var(--wk-track); color: var(--wk-muted); }
/* Texts from Wickette under Contact: the status pills' colours at the size of .gd-now. */
.gd-texts-line { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 6px; }
.gd-texts { padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 16px; }
.gd-texts.on { background: var(--wk-wash); color: var(--wk-moss); }
.gd-texts.off { background: var(--wk-track); color: var(--wk-muted); }
.gd-texts.stopped { background: var(--wk-plum-wash); color: var(--wk-plum); }

/* Add-ons: a 14px head with Turn on or off, then a 12px label over Invited / Not invited per add-on. */
.gd-addons { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 20px; }
.gd-addons-head { display: flex; align-items: center; gap: 8px; }
.gd-addons-head h3 { flex: 1; margin: 0; font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); }
.gd-addons-link {
  position: relative; padding: 0; border: 0; background: none; color: var(--wk-muted); font: inherit; font-size: 12px;
  font-weight: 500; line-height: 16px; cursor: pointer;
}
.gd-addons-link::after { content: ''; position: absolute; inset: -14px -8px; }
.gd-addon { display: flex; flex-direction: column; gap: 6px; }
.gd-addon-label, .gd-addon-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gd-addon-label { font-weight: 500; }
.gd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-chip {
  position: relative; padding: 8px 12px; border: 1px solid var(--wk-grip); border-radius: 999px; background: var(--wk-card);
  color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer;
}
.gd-chip::after { content: ''; position: absolute; inset: -4px 0; }
.gd-chip[aria-checked='true'] { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
.gd-chip:disabled { cursor: default; }
.gd-chip:disabled:not([aria-checked='true']) { color: var(--wk-muted); }
.gd-addons .p-field { margin-top: -4px; }

.gd-buttons { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.gd-btn {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--wk-stroke); border-radius: 999px; background: var(--wk-card);
  color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.gd-btn.gd-remove { color: var(--wk-plum); }

/* The pickers and small forms. */
.gd-form { display: flex; flex-direction: column; gap: 14px; }
.p-sheet[id^='gh-'] .gd-form { gap: 12px; }
.gd-actions { display: flex; gap: 10px; }
.gd-actions .p-btn { min-width: 88px; }
.gd-actions.wide .p-btn:last-child { flex: 1; }
.gd-radios { display: flex; flex-direction: column; }
.gd-radio {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 11px 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.gd-radio + .gd-radio { border-top: 1px solid var(--wk-line); }
.gd-radio:disabled { cursor: default; color: var(--wk-muted); }
.gd-radio:disabled .gd-radio-label { color: var(--wk-muted); }
.gd-radio-label { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }
.gd-now { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--wk-track); color: var(--wk-muted); font-size: 12px; font-weight: 600; line-height: 16px; }

/* 5c Household: a page of 12px steps under the back link. */
.viewport:has(> #s-guest-household.active) { background: var(--wk-paper); }
.gh-page { display: flex; flex-direction: column; gap: 12px; }
.gh-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -12px 0 -12px;
  padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.gh-back span { font-size: 16px; line-height: 1; }
.gh-title-row { display: flex; align-items: baseline; gap: 12px; }
.gh-title { margin: 0; font-family: var(--wk-serif); font-size: 34px; font-weight: 500; line-height: 49px; overflow-wrap: anywhere; }
.gh-edit {
  position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px;
  font-weight: 500; line-height: 18px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.gh-edit::after { content: ''; position: absolute; inset: -13px -8px; }
.gh-name { display: flex; flex-direction: column; gap: 10px; }
.gh-sub { margin: 0; font-size: 13px; line-height: 19px; color: var(--wk-body); }
.gh-who, .gh-help { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.gh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gh-chip .lm-btn, span.gh-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--wk-grip);
  border-radius: 999px; background: var(--wk-card); color: var(--wk-moss); font: inherit; font-size: 13px; font-weight: 500;
  line-height: 18px; cursor: pointer;
}
span.gh-chip { cursor: default; }
.gh-chip .lm-btn::after { content: ''; position: absolute; inset: -7px 0; }
.gh-chip.sent .lm-btn, span.gh-chip.sent { border-color: var(--wk-lime); background: var(--wk-wash); }
.gh-caret { margin-top: -6px; font-size: 13px; }
.gh-chip .lm-btn:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

.gh-review {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: 18px;
  background: var(--wk-sand); color: var(--wk-on-sand);
}
.gh-review h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.gh-review p { margin: 0; font-size: 13px; line-height: 19px; }

.gh-card { border: 1px solid var(--wk-hair); border-radius: 18px; background: var(--wk-card); }
.gh-card.gd-list { padding: 0 14px; }
.gh-card .gd-row { gap: 10px; min-height: 44px; }
.gh-card .gd-row-value { font-size: 14px; font-weight: 400; line-height: 19px; color: var(--wk-body); }
.gh-card .gd-row-value .gh-coming { color: var(--wk-moss); }
.gh-card .gd-chev { font-size: 20px; }
.gh-label { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
#s-guest-household .gd-section { gap: 12px; }

/* A person: the whole row opens their detail; Move sits above it. */
.gh-member { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 11px 0; box-sizing: border-box; }
.gh-person {
  display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.gh-person::after { content: ''; position: absolute; inset: 0; }
.gh-person-name { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }
.gh-move {
  position: relative; z-index: 1; flex: none; min-height: 44px; margin: -11px 0; padding: 0 4px; border: 0; background: none;
  color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer;
}
.gh-add {
  width: 100%; min-height: 44px; padding: 12px 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px;
  font-weight: 500; line-height: 19px; text-align: left; cursor: pointer;
}
:is(.gd-row, .gd-chip, .gd-btn, .gd-radio, .gd-addons-link, .gh-back, .gh-edit, .gh-person, .gh-move, .gh-add, .gh-pick, .gh-link, .gh-new):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}

/* 5d and 5f: a search box, then the households or people to pick. */
.gh-search {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 11px 14px; border: 1px solid var(--wk-edge); border-radius: 14px;
  background: var(--wk-track); color: var(--wk-ink); font: inherit; font-size: 16px; line-height: 21px;
}
.gh-search.line { border-radius: 18px; background: var(--wk-card); }
.gh-search::placeholder { color: var(--wk-muted); }
.gh-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.gh-box {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; box-sizing: border-box; border: 1.5px solid var(--wk-edge);
  border-radius: 7px; background: var(--wk-card); color: var(--wk-on-navy); font-size: 12px; font-weight: 600; line-height: 1;
}
[aria-checked='true'] > .gh-box { border-color: var(--wk-btn); background: var(--wk-btn); }
.gh-link {
  align-self: flex-start; min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 13px; font-weight: 500; line-height: 18px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.gh-new {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--wk-ground);
  color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.gh-new-title { font-size: 14px; font-weight: 600; line-height: 19px; }
#gh-add .gd-section { gap: 12px; }
#gh-add .gd-list { padding: 0 14px; border-radius: 18px; }
#gh-move .gd-radio + .gd-radio { border-top-color: var(--wk-line); }
/* Add guests, Start with your contacts, Paste a list and Check your new guests (Figma Guests stage 3,
   Oct 13), on the plan.css kit. Manrope's `normal` line height runs a pixel taller in Chrome than in
   Figma, so text lines are pinned in px. Control outlines use --wk-edge to hold 3:1. */
.viewport:has(> :is(#s-guests-add, #s-guests-check, #s-guests-contacts, #s-guests-paste).active) { background: var(--wk-paper); }

.ga-page { display: flex; flex-direction: column; gap: 22px; }
.ga-page p, .ga-page h1, .ga-page h2, .ga-page h3, .ga-page h4 { margin: 0; }
.ga-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -12px 0 -10px;
  padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500;
  line-height: 19px; cursor: pointer;
}
.ga-back span { font-size: 18px; line-height: 1; margin-top: -2px; }
.ga-head { display: flex; flex-direction: column; gap: 4px; }
.ga-title { margin: 0; line-height: 36px; letter-spacing: -.02em; }
.ga-lead { font-size: 13px; line-height: 19px; color: var(--wk-body); }
.ga-lead-lg { margin-top: 12px; font-size: 15px; line-height: 22px; }
.ga-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ga-ways { display: flex; gap: 8px; }
.ga-ways > .p-btn { flex: 1 1 0; padding-inline: 12px; border-color: var(--wk-stroke); font-weight: 500; }

/* Tip from Wickette: neutral, it explains. */
.ga-tip { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--wk-line); border-radius: 18px; background: var(--wk-ground); }
.ga-tip-head { display: flex; align-items: center; gap: 8px; }
.ga-tip-head p { flex: 1; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink); }
.ga-tip-x {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -14px -14px -14px 0; padding: 0; border: 0;
  border-radius: 50%; background: none; color: var(--wk-muted); cursor: pointer;
}
.ga-tip-x i { font-size: 16px; }
.ga-tip-body { font-size: 14px; line-height: 20px; color: var(--wk-body); }

.ga-count { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: -10px; }
.ga-count p { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.ga-count p + p { font-size: 12px; }

/* The household being typed. */
.ga-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--wk-hair); border-radius: 20px; background: var(--wk-card); }
.ga-combo { display: flex; flex-direction: column; gap: 8px; }
.ga-combo-label { font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink); }
.ga-combo-box {
  display: flex; align-items: center; gap: 8px; padding: 0 0 0 14px; border: 1.5px solid var(--wk-edge); border-radius: 14px;
  background: var(--wk-card);
}
.ga-combo-box:focus-within { border-color: var(--wk-ink); }
.ga-combo-box input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 16px; line-height: 22px; outline: none;
}
.ga-combo-box input::placeholder { color: var(--wk-muted); }
.ga-new { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime); font-size: 12px; font-weight: 500; line-height: 16px; }
.ga-combo-open {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none;
  color: var(--wk-muted); cursor: pointer;
}
.ga-combo-open i { font-size: 16px; }
.ga-menu { overflow: hidden; border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-card); box-shadow: var(--wk-shadow); }
.ga-menu[hidden] { display: none; }
.ga-menu ul { margin: 0; padding: 0; list-style: none; }
.ga-menu-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; cursor: pointer; }
.ga-menu-option.on { background: var(--wk-wash); }
.ga-menu-option.active { box-shadow: inset 0 0 0 2px var(--wk-ink); }
.ga-menu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ga-menu-name { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }
.ga-menu-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.ga-menu-option.on .ga-menu-sub { color: var(--wk-body); }
.ga-menu-tick { font-size: 15px; color: var(--wk-ink); }
.ga-menu-head { padding: 10px 14px 2px; border-top: 1px solid var(--wk-hair); font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.ga-menu-foot { padding: 10px 14px 12px; font-size: 12px; line-height: 16px; color: var(--wk-muted); }

.ga-twin { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--wk-note); }
.ga-twin p { font-size: 13px; line-height: 18px; color: var(--wk-body); }
.ga-twin-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ga-twin-btns .p-btn { min-height: 44px; font-weight: 500; }

.ga-who { margin-top: 2px !important; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.ga-who-sub { margin-top: -2px !important; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.ga-people { display: flex; flex-direction: column; gap: 12px; }
.ga-person { display: flex; flex-direction: column; gap: 12px; }
.ga-person .g-tags { gap: 12px; }
.ga-name { display: flex; flex-direction: column; gap: 6px; }

/* A field with its label inside: cream at rest, white with an ink outline while typing. */
.ga-field {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 1.5px solid transparent; border-radius: 12px;
  background: var(--wk-ground); cursor: text;
}
.ga-field:focus-within { border-color: var(--wk-ink); background: var(--wk-card); }
.ga-field > span { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.ga-field input {
  width: 100%; min-height: 22px; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 16px; line-height: 21px; outline: none;
}
.ga-field input::placeholder { color: var(--wk-muted); opacity: 1; }

/* A folded person, or a folded household (3b's "The Okafors"). */
.ga-folded { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--wk-ground); }
.ga-folded-home { padding: 14px 16px; border: 1px solid var(--wk-hair); border-radius: 18px; background: var(--wk-card); }
.ga-tick {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--wk-lime);
  color: var(--wk-on-lime); font-size: 12px; font-weight: 600; line-height: 1;
}
.ga-folded-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ga-folded-name { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }
.ga-folded-tags { font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.ga-edit {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: flex-end; min-width: 44px;
  min-height: 44px; margin: -10px 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 13px; font-weight: 500; line-height: 18px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.ga-person-btns { display: flex; flex-direction: column; gap: 10px; }
.ga-save, .ga-another {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--wk-lime); border-radius: 999px; background: var(--wk-lime);
  color: var(--wk-on-lime); font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.ga-save:disabled { border-color: var(--wk-track); background: var(--wk-track); color: var(--wk-muted); cursor: default; }
.ga-another { border-color: var(--wk-stroke); background: var(--wk-card); color: var(--wk-ink); }

/* More for this household. */
.ga-more {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px; border: 0; border-radius: 16px; background: var(--wk-note);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ga-more-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ga-more-title { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); }
.ga-more-sub { font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.ga-more-end { flex: none; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.ga-more-open { display: flex; flex-direction: column; }
.ga-more-head {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0; border: 0;
  border-bottom: 1px solid var(--wk-hair); background: none; color: var(--wk-ink); font: inherit; font-size: 15px; font-weight: 600;
  line-height: 20px; text-align: left; cursor: pointer;
}
.ga-more-hide { font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.ga-more-body { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.ga-more-row { display: flex; align-items: baseline; justify-content: space-between; }
.ga-more-row h4 { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.ga-more-row span { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.ga-more-lead { margin-top: -4px !important; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.ga-more-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ga-more-body .g-address .p-field { padding: 9px 12px; border: 1.5px solid transparent; border-radius: 12px; background: var(--wk-ground); box-shadow: none; }
.ga-more-body .g-address .p-field:focus-within { border-color: var(--wk-ink); background: var(--wk-card); }
.ga-more-body .g-address .p-field label { font-size: 12px; line-height: 16px; }
.ga-more-body .g-address .p-field input { min-height: 22px; font-size: 16px; line-height: 21px; }
.ga-more-body .g-address .p-field input::placeholder { color: var(--wk-muted); opacity: 1; }

/* The lime save, the dashed next household. */
.ga-done {
  width: 100%; min-height: 44px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--wk-lime);
  color: var(--wk-on-lime); font: inherit; font-size: 15px; font-weight: 500; line-height: 20px; cursor: pointer;
}
.ga-done:disabled { opacity: .55; cursor: default; }
.ga-next { display: flex; flex-direction: column; gap: 6px; }
.ga-next p { font-size: 12px; line-height: 17px; color: var(--wk-muted); text-align: center; }
.ga-next-btn {
  width: 100%; min-height: 44px; padding: 14px; border: 1.5px dashed var(--wk-edge); border-radius: 18px; background: none;
  color: var(--wk-ink); font: inherit; font-size: 15px; font-weight: 500; line-height: 20px; cursor: pointer;
}

/* Start with your contacts. */
.ga-points {
  display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px 18px; list-style: none; border: 1px solid var(--wk-hair);
  border-radius: 20px; background: var(--wk-card);
}
.ga-points p { font-size: 13px; line-height: 19px; color: var(--wk-muted); }
.ga-points .ga-point-title { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); }
.ga-contacts-btns { display: flex; flex-direction: column; gap: 22px; }
.ga-link, .ga-plain {
  align-self: center; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer;
}
.ga-plain { font-size: 14px; color: var(--wk-muted); }

/* Paste a list. */
.ga-paste { padding-top: 40px; }
.ga-paste-field { display: flex; flex-direction: column; gap: 8px; }
.ga-paste-field label { font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.ga-paste-field p:not(.p-error) { margin-top: 4px !important; font-size: 11px; line-height: 16px; color: var(--wk-muted); }
.ga-paste-field textarea {
  min-height: 136px; padding: 14px; border: 1px solid var(--wk-edge); border-radius: 18px; background: var(--wk-card);
  color: var(--wk-ink); font: inherit; font-size: 14px; line-height: 22px; resize: vertical;
}
.ga-paste-field textarea::placeholder { color: var(--wk-muted); opacity: 1; }
.ga-paste-field textarea:focus { outline: none; border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.ga-paste-btns { display: flex; flex-direction: column; gap: 12px; margin-top: 38px; }

/* Check your new guests. */
.ga-picked { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--wk-btn); color: var(--wk-on-navy); }
.ga-picked p { font-size: 13px; line-height: 19px; color: color-mix(in srgb, var(--wk-on-navy) 82%, var(--wk-btn)); }
.ga-picked .ga-picked-title { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-on-navy); }
.ga-picked-btns { display: flex; align-items: center; gap: 10px; }
.ga-picked-btns .ga-done { flex: 1; font-weight: 600; box-shadow: 0 0 0 1px var(--wk-on-navy); }
.ga-picked-clear {
  min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--wk-on-navy); font: inherit;
  font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ga-joined { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--wk-lime); border-radius: 18px; background: var(--wk-wash); }
.ga-joined-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ga-joined-main p { font-size: 12px; line-height: 17px; color: var(--wk-body); }
.ga-joined-main .ga-joined-title { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.ga-joined .ga-tick { width: 26px; height: 26px; background: var(--wk-lime); }

.ga-start { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--wk-ground); }
.ga-start-head { display: flex; align-items: center; justify-content: space-between; }
.ga-start-head p { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.ga-start-head .ga-edit { font-size: 12px; }
.ga-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.ga-tag {
  position: relative; display: inline-flex; padding: 3px 8px; border: 0; border-radius: 999px; background: var(--wk-track);
  color: var(--wk-body); font: inherit; font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap;
}
.ga-tag.side { background: var(--wk-wash); }
.ga-tag.pick { border: 1.2px dashed var(--wk-edge); background: none; color: var(--wk-ink); cursor: pointer; }
.ga-tag.pick::after { content: ''; position: absolute; inset: -12px -3px; }

.ga-search input {
  width: 100%; box-sizing: border-box; min-height: 47px; padding: 0 14px; border: 1px solid var(--wk-edge); border-radius: 18px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 16px; line-height: 21px;
}
.ga-search input::placeholder { color: var(--wk-muted); opacity: 1; }
.ga-search input:focus { outline: none; border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.ga-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: -10px; }
.ga-list-head p { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.ga-homes { display: flex; flex-direction: column; gap: 10px; }
.ga-home { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--wk-hair); border-radius: 18px; background: var(--wk-card); }
.ga-home.joined { border: 1.5px solid var(--wk-lime); }
.ga-home-top { display: flex; align-items: center; gap: 8px; }
.ga-home-top h2 { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.ga-home-top p { flex: none; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.ga-envelope { border-radius: 12px; }
.ga-row { display: flex; align-items: center; gap: 10px; }
.ga-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ga-row-main > p { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.ga-row .ga-edit { font-size: 12px; }
.ga-box {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -11px; padding: 0; border: 0; background: none; cursor: pointer;
}
.ga-box > span {
  display: grid; place-items: center; width: 22px; height: 22px; box-sizing: border-box; border: 1.5px solid var(--wk-edge);
  border-radius: 7px; background: var(--wk-card); color: var(--wk-on-navy); font-size: 12px; font-weight: 600; line-height: 1;
}
.ga-box[aria-checked='true'] > span { border-color: var(--wk-btn); background: var(--wk-btn); }
.ga-home-why { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.ga-home-why.on-list { color: var(--wk-moss); }
.ga-foot { font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.ga-check-btns { display: flex; gap: 10px; }
.ga-check-btns .p-btn { padding: 0 20px; font-size: 15px; font-weight: 500; }
.ga-check-btns .p-btn.line { border-color: var(--wk-stroke); }

:is(.ga-back, .ga-tip-x, .ga-combo-open, .ga-edit, .ga-save, .ga-another, .ga-more, .ga-more-head, .ga-done, .ga-next-btn, .ga-link,
  .ga-plain, .ga-picked-clear, .ga-tag.pick, .ga-box):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 8px; }
.ga-picked :is(.ga-done, .ga-picked-clear):focus-visible { outline-color: var(--wk-on-navy); }
/* T1·6 Guest settings (Figma 1367:11150) and its editors on the plan.css kit. Manrope `normal` sits
   1px taller in Chrome than in Figma, so the frame's line heights are pinned in px. */
#gs-sheet .p-sheet-top { margin-bottom: 12px; }
#gs-sheet .p-sheet-title { font-size: 34px; line-height: 41px; letter-spacing: 0; }
#gs-sheet .p-sheet-lead { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--wk-body); }
#gs-sheet .p-sheet-body { gap: 12px; margin-top: 12px; }

.gs-section { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); outline: none; scroll-margin-top: 16px; }
.gs-intro { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }

.gs-card { margin: 0; padding: 4px 16px; list-style: none; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.gs-row {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 51px; padding: 13px 0; border: 0;
  background: none; color: var(--wk-ink); font: inherit; font-size: 14px; line-height: 19px; text-align: left;
}
button.gs-row { cursor: pointer; }
.gs-row + .gs-row, .gs-addon + .gs-addon { border-top: 1px solid var(--wk-line); }
.gs-row-label { flex: 1 0 auto; }
.gs-row-value {
  min-width: 0; overflow: hidden; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted);
  text-overflow: ellipsis; white-space: nowrap;
}
.gs-chev { flex: none; font-size: 18px; line-height: 25px; color: var(--wk-muted); }
button.gs-row.gs-danger { color: var(--wk-plum); font-weight: 500; cursor: pointer; }

/* Add-ons: a row per add-on, its switch on the right and "Ask on the RSVP" under its name. */
.gs-addon { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.gs-addon-text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.gs-addon-open {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.gs-addon-label { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--wk-ink); }
.gs-addon-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gs-addon-state { flex: none; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.gs-ask {
  position: relative; display: flex; align-items: flex-start; gap: 8px; margin-top: 2px; padding: 4px 0 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; font-size: 12px; font-weight: 500; line-height: 16px; text-align: left; cursor: pointer;
}
.gs-ask::after { content: ''; position: absolute; inset: -10px -4px -12px -12px; }
.gs-ask:disabled { cursor: default; opacity: .6; color: var(--wk-muted); }
.gs-box {
  display: grid; place-items: center; flex: none; width: 16px; height: 16px; box-sizing: border-box; border: 1.5px solid var(--wk-edge);
  border-radius: 4px; background: var(--wk-card); color: transparent;
}
.gs-box i { font-size: 12px; }
.gs-ask[aria-checked='true'] .gs-box { border: 0; background: var(--wk-btn); color: var(--wk-on-navy); }
span.gs-ask { cursor: default; }

.gs-btns { display: flex; padding-top: 4px; }
.gs-done { min-height: 39px; padding: 0 16px; font-weight: 500; }

/* The editors. */
.gs-chips .p-chip { min-height: 44px; }
.gs-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.gs-tip { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid #e7e4da; border-radius: 18px; background: #f6f5f1; }
.gs-tip p { margin: 0; }
.gs-tip-title { font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink); }
.gs-tip-text { font-size: 14px; line-height: 20px; color: var(--wk-body); }
.gs-form { display: flex; flex-direction: column; gap: 12px; }
.gs-names { display: flex; flex-direction: column; gap: 16px; }
.gs-name { display: flex; align-items: center; gap: 4px; }
.gs-input {
  flex: 1; min-width: 0; box-sizing: border-box; min-height: 50px; padding: 14px 12px; border: 1px solid var(--wk-edge); border-radius: 14px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 16px; line-height: 21px;
}
.gs-input:focus { outline: none; border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.gs-remove {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--wk-muted); cursor: pointer;
}
.gs-remove i { font-size: 18px; }
.gs-links { display: flex; flex-direction: column; align-items: flex-start; }
.gs-link { min-height: 36px; font-weight: 500; }
.gs-options .gs-row { cursor: default; }

:is(.gs-row, .gs-addon-open, .gs-ask, .gs-remove):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 6px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .gs-tip { border-color: var(--wk-line); background: var(--wk-track); }
}
:root[data-theme='dark'] .gs-tip { border-color: var(--wk-line); background: var(--wk-track); }
/* Guests setup (Figma T1·1–T1·5, T2·1–T2·9): the step frame shared by both tracks. Steps add their own
   rules below their section comments. Line heights pinned in px (Manrope runs 1px tall in Chrome). Links
   and chips keep 44px to hit with negative margins, so the frame's spacing holds. */
.viewport:has(> #s-guests-setup.active) { background: var(--wk-paper); }
/* The screen fills the viewport (its own bottom padding clears the tab bar) so the buttons sit at the bottom. */
#s-guests-setup.active { display: flex; flex-direction: column; box-sizing: border-box; }
.gsu-page { flex: 1 0 auto; display: flex; flex-direction: column; gap: 24px; box-sizing: border-box; width: 100%;
  padding-inline: 24px; padding-bottom: 20px; }
.gsu-page p { margin: 0; }
.gsu-back { align-self: flex-start; display: inline-flex; gap: 8px; min-height: 44px; margin: -12px 0; align-items: center; padding: 0;
  border: 0; background: none; font: inherit; font-size: 14px; line-height: 19px; font-weight: 500; color: var(--wk-ink); cursor: pointer; }
.gsu-progress { display: flex; flex-direction: column; gap: 10px; }
.gsu-progress-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; line-height: 18px;
  font-weight: 600; color: var(--wk-ink); }
.gsu-progress-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--wk-muted); }
.gsu-bar { height: 6px; border-radius: 3px; background: var(--wk-bar); overflow: hidden; }
.gsu-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--wk-ink); transition: width .3s ease; }
.gsu-head { display: flex; flex-direction: column; gap: 10px; }
.gsu-title { margin: 0; font-family: var(--wk-serif); font-size: 38px; line-height: 44px; font-weight: 500; color: var(--wk-ink); }
.gsu-title:focus { outline: none; }
.gsu-lead { font-size: 15px; line-height: 22px; color: var(--wk-body); }
.gsu-note { font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.gsu-body { display: flex; flex-direction: column; gap: 16px; }
.gsu-foot { display: flex; flex-direction: column; gap: 24px; margin-top: auto; padding-top: 24px; }
.gsu-foot .p-error { margin: 0 0 -12px; }
.gsu-primary { min-height: 50px; font-size: 15px; line-height: 20px; }
.gsu-primary .av-spin { width: 16px; height: 16px; border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }
.gsu-skip { align-self: center; min-height: 44px; margin: -12px 0; padding: 0 12px; border: 0; background: none; font: inherit;
  font-size: 14px; line-height: 19px; font-weight: 600; color: var(--wk-muted); cursor: pointer; }
.gsu-tip { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid #e7e4da; border-radius: 18px; background: #f6f5f1; }
.gsu-tip-title { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--wk-ink); }
.gsu-tip-text { font-size: 14px; line-height: 20px; color: var(--wk-body); }
.gsu-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gsu-chip { min-height: 44px; box-sizing: border-box; padding: 11px 18px; border: 1px solid var(--wk-grip); border-radius: 999px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 15px; line-height: 20px; font-weight: 500; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s; }
.gsu-chip[aria-pressed='true'] { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-btn); }
:is(.gsu-back, .gsu-skip, .gsu-chip, .gsu-link):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 6px; }
.gsu-chip:focus-visible { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .gsu-bar > span, .gsu-chip { transition: none; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .gsu-tip { border-color: var(--wk-line); background: var(--wk-track); }
}
:root[data-theme='dark'] .gsu-tip { border-color: var(--wk-line); background: var(--wk-track); }

/* T1·2 / T2·2 relationships: a plain field per name, or on Track 2 the side it stands for above it. */
.gsu-input { display: block; width: 100%; box-sizing: border-box; min-height: 52px; padding: 14px 12px; border: 1px solid var(--wk-edge);
  border-radius: 14px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 16px; line-height: 22px; }
.gsu-input:focus { outline: none; border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.gsu-field { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border: 1px solid var(--wk-edge); border-radius: 14px;
  background: var(--wk-card); cursor: text; }
.gsu-field:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.gsu-field-label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--wk-muted); }
.gsu-field .gsu-input { min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.gsu-links { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.gsu-link { min-height: 44px; margin: -12.5px 0; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 19px;
  font-weight: 500; color: var(--wk-ink); text-decoration: underline; text-underline-position: from-font; cursor: pointer; }
.gsu-small { font-size: 13px; line-height: 18px; color: var(--wk-muted); }

/* T1·4 / T2·4 sending: a labelled row of chips per mailing. */
.gsu-group { display: flex; flex-direction: column; gap: 10px; }
.gsu-group-label { font-size: 14px; line-height: 19px; font-weight: 500; color: var(--wk-muted); }

/* T1·5 All set: three numbered first steps. */
.gsu-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.gsu-step { display: flex; gap: 14px; align-items: flex-start; }
.gsu-step-n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 14px; background: var(--wk-track);
  font-size: 13px; line-height: 18px; font-weight: 600; color: var(--wk-ink); }
.gsu-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gsu-step-title { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--wk-ink); }
.gsu-step-sub { font-size: 13px; line-height: 18px; color: var(--wk-muted); }

/* Check: Check a few matches, Check your list and Your list is in (T2·7–T2·9). The frames' #cfcfd8 chip
   outline and #f6fae3 note are mixed from tokens so dark mode follows. The chip outline is a shadow: in
   the frame it sits outside the chip and takes no room. */
.gsc-body { --gsc-outline: color-mix(in srgb, var(--wk-edge) 40%, var(--wk-card)); display: flex; flex-direction: column; gap: 16px; }
.gsc-section { display: flex; flex-direction: column; gap: 16px; }
.gsc-label { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--wk-muted); }
.gsc-card { margin: 0; padding: 4px 16px; list-style: none; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.gsc-match { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--wk-hair); }
.gsc-match:last-child, .gsc-row:last-child { border-bottom: 0; }
.gsc-names { margin: 0; font-size: 14px; line-height: 19px; font-weight: 500; color: var(--wk-ink); overflow-wrap: anywhere; }
.gsc-names:focus { outline: none; }
.gsc-line { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.gsc-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.p-chip.gsc-chip { padding: 7px 14px; border: 0; box-shadow: 0 0 0 1px var(--gsc-outline); font-size: 13px; line-height: 18px; font-weight: 500; }
.p-chip.gsc-chip[aria-pressed='true'] { box-shadow: none; font-weight: 500; }
.p-chip.gsc-chip::after { inset: -6px 0; }
.gsc-more {
  position: relative; align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; line-height: 18px;
  font-weight: 500; color: var(--wk-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.gsc-more::after { content: ''; position: absolute; inset: -13px 0; }
.gsc-more:focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; border-radius: 4px; }
.gsc-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--wk-hair); font-size: 14px; line-height: 19px; color: var(--wk-ink); }
.gsc-row > :first-child { flex: 1; min-width: 0; }
.gsc-count { flex: none; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--wk-plum); }
.gsc-note { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--wk-wash) 52%, var(--wk-card)); }
.gsc-note p { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }
.gsc-note .gsc-note-title { font-size: 14px; line-height: 19px; font-weight: 600; color: var(--wk-ink); }
.gsc-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.gsc-steps > li { display: flex; align-items: flex-start; gap: 14px; }
.gsc-step-n {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--wk-track);
  font-size: 13px; line-height: 18px; font-weight: 600; color: var(--wk-ink);
}
.gsc-step-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gsc-step-title { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--wk-ink); }
.gsc-step-line { font-size: 13px; line-height: 18px; color: var(--wk-muted); }
@media (forced-colors: active) { .p-chip.gsc-chip { border: 1px solid; } }

/* Upload */
.gsu-up-card { display: flex; flex-direction: column; padding: 0 16px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.gsu-up-option { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--wk-hair); cursor: pointer; }
.gsu-up-card > .gsu-up-option:first-child { border-top: 0; }
.gsu-up-option:has(.gsu-up-file:focus-visible) { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 12px; }
.gsu-up-file { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.gsu-up-tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--wk-track); color: var(--wk-ink); }
.gsu-up-tile i { font-size: 22px; }
.gsu-up-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gsu-up-title { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--wk-ink); }
.gsu-up-help { font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.gsu-up-go { flex: none; font-size: 20px; line-height: 27px; color: var(--wk-muted); }
.gsu-up-rows { margin: 0; padding: 0 0 6px; list-style: none; }
.gsu-up-row { display: flex; align-items: center; gap: 12px; padding: 0 0 0 54px; min-height: 52px; }
.gsu-up-mark { flex: none; display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: var(--wk-lime);
  color: var(--wk-on-lime); font-size: 12px; line-height: 16px; font-weight: 700; }
.gsu-up-mark.reading { background: var(--wk-track); color: var(--wk-muted); }
.gsu-up-mark.reading .av-spin { width: 14px; height: 14px; border-color: var(--wk-hair); border-top-color: var(--wk-ink); }
.gsu-up-mark.failed { background: var(--wk-plum-wash); color: var(--wk-plum); }
.gsu-up-name { overflow: hidden; font-size: 14px; line-height: 19px; font-weight: 500; color: var(--wk-ink); text-overflow: ellipsis; white-space: nowrap; }
.gsu-up-line { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gsu-up-row.failed .gsu-up-line { color: var(--wk-plum); }
.gsu-up-remove { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0;
  background: none; color: var(--wk-muted); cursor: pointer; }
.gsu-up-remove span { font-size: 13px; line-height: 18px; }
.gsu-up-same { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.gsu-up-paste-label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--wk-muted); }
.gsu-up-paste { box-sizing: border-box; width: 100%; min-height: 136px; margin: -6px 0 0; padding: 12px 14px; border: 1px solid var(--wk-edge);
  border-radius: 18px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 16px; line-height: 22px; resize: vertical; }
.gsu-up-paste::placeholder { color: var(--wk-muted); opacity: 1; }
.gsu-up-paste:focus { outline: none; border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }

/* Match your columns */
.gsu-mt-vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gsu-mt-lists { display: flex; flex-direction: column; gap: 8px; }
.gsu-mt-eyebrow { margin: 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--wk-muted); }
.gsu-mt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gsu-mt-chip { position: relative; display: inline-flex; align-items: center; max-width: 100%; box-sizing: border-box; padding: 8px 12px;
  border: 1px solid var(--wk-grip); border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 12px;
  line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsu-mt-chip.now { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
button.gsu-mt-chip { cursor: pointer; }
button.gsu-mt-chip::after { content: ''; position: absolute; inset: -6px 0; }
.gsu-mt-key { display: flex; align-items: flex-start; gap: 0; padding: 4px 17px 0; }
.gsu-mt-key-us { flex: none; display: flex; align-items: center; gap: 8px; width: 165px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--wk-ink); }
.gsu-mt-key-file { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding-left: 12px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--wk-ink); }
.gsu-mt-key-file i { flex: none; font-size: 16px; color: var(--wk-muted); }
.gsu-mt-key-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsu-mt-group { display: flex; flex-direction: column; gap: 16px; }
.gsu-mt-title { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--wk-muted); }
.gsu-mt-card { margin: 0; padding: 4px 16px; list-style: none; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.gsu-mt-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--wk-hair); }
.gsu-mt-row:first-child { border-top: 0; }
.gsu-mt-field { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 130px; }
.gsu-mt-label { font-size: 14px; line-height: 19px; font-weight: 600; color: var(--wk-ink); }
.gsu-mt-hint { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gsu-mt-sort { position: relative; margin-top: 2px; padding: 2px 8px; border: 0; border-radius: 999px; background: var(--wk-track); color: var(--wk-ink);
  font: inherit; font-size: 12px; line-height: 16px; font-weight: 600; cursor: pointer; }
.gsu-mt-sort.open { background: var(--wk-plum-wash); color: var(--wk-plum); }
.gsu-mt-sort::after { content: ''; position: absolute; inset: -12px -6px; }
.gsu-mt-arrow { flex: none; width: 15px; font-size: 14px; line-height: 19px; font-weight: 500; color: var(--wk-dot); }
.gsu-select { position: relative; flex: 1; min-width: 0; display: block; }
.gsu-select select { appearance: none; display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 10px 30px 10px 12px;
  border: 1px solid var(--wk-line); border-radius: 12px; background: var(--wk-ground); color: var(--wk-ink); font: inherit; font-size: 13px;
  line-height: 18px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; }
.gsu-select::after { content: ''; position: absolute; top: 50%; right: 13px; width: 7px; height: 7px; margin-top: -6px; border: solid var(--wk-ink);
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.gsu-select.empty select, .gsu-select select.empty { border-style: dashed; color: var(--wk-muted); font-weight: 400; }
.gsu-select select:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 1px; }
.gsu-mt-offer { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--wk-line); border-radius: 16px; background: var(--wk-ground); }
.gsu-mt-offer h3, .gsu-mt-left h3 { margin: 0; font-size: 14px; line-height: 19px; font-weight: 600; color: var(--wk-ink); }
.gsu-mt-offer p { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gsu-mt-offer-btns { display: flex; align-items: center; gap: 12px; }
.gsu-mt-offer-btns .p-link { font-size: 13px; font-weight: 500; }
.gsu-mt-done { margin: 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--wk-moss); }
.gsu-mt-left { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--wk-ground); }
.gsu-mt-left div { display: flex; flex-direction: column; gap: 2px; }
.gsu-mt-left p { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-body); }
.gsu-mt-left .gsu-mt-left-name { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--wk-ink); }
.gsu-mt-remember { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }
.gsu-sort { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.gsu-sort-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--wk-hair); }
.gsu-sort-row:first-child { border-top: 0; }
.gsu-sort-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gsu-sort-raw { font-size: 14px; line-height: 19px; font-weight: 600; color: var(--wk-ink); overflow-wrap: anywhere; }
.gsu-sort-n { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gsu-sort-row .gsu-select { flex: 0 0 52%; }
/* The mailing (7a–7e), address link sheets (1h, 3h): each section owned by its screen group. */

/* Mailing: the list's card (1b, 1c) and the mailing sheet (7a, 7b, 7e). Line heights pinned in px. */
.gm-ready { display: flex; flex-direction: column; gap: 10px; }
.gm-ready-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.gm-ready-card {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 19px 17px; border: 1px solid var(--wk-hair); border-radius: 24px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.gm-tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--wk-track); }
.gm-tile i { font-size: 22px; color: var(--wk-ink); }
.gm-ready-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gm-ready-name { font-size: 14px; font-weight: 500; line-height: 19px; }
.gm-ready-sub { font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.gm-ready-go { flex: none; font-size: 20px; line-height: 27px; color: var(--wk-muted); }
.gm-ready-card:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

.p-sheet.gm-sheet { padding-right: 20px; padding-left: 20px; }
.gm-sheet .p-sheet-top { margin-bottom: 8px; }
.gm-nav { display: flex; align-items: center; gap: 12px; min-height: 18px; }
.gm-step { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.gm-back, .gm-cancel {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.gm-back span { font-size: 16px; }
.gm-cancel { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
.gm-back::after, .gm-cancel::after { content: ''; position: absolute; inset: -13px -8px; }
.gm-sheet .p-sheet-title { margin-top: 12px; font-size: 30px; line-height: 41px; }
.gm-sheet .p-sheet-lead { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--wk-body); }
.gm-sheet .p-sheet-body { gap: 12px; margin-top: 12px; }

.gm-card { margin: 0; padding: 0 17px; list-style: none; border: 1px solid var(--wk-hair); border-radius: 20px; background: var(--wk-card); }
.gm-who { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; }
.gm-question { margin-bottom: 12px; padding: 0; font-size: 16px; font-weight: 600; line-height: 22px; color: var(--wk-ink); }
.gm-choice { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; }
.gm-choice + .gm-choice { border-top: 1px solid var(--wk-note-edge); }
.gm-choice input {
  flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--wk-edge); border-radius: 50%; background: var(--wk-card);
  appearance: none; cursor: pointer;
}
.gm-choice input:checked { border: 6px solid var(--wk-ink); }
.gm-choice input:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.gm-choice-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gm-choice-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); cursor: pointer; }
.gm-choice-line { font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.gm-choice-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gm-cat .lm-btn {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--wk-edge);
  border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 12px; font-weight: 500;
  line-height: 16px; cursor: pointer;
}
.gm-cat .lm-btn::after { content: ''; position: absolute; inset: -9px -4px; }
.gm-cat .lm-btn i { font-size: 11px; }
.gm-cat .lm-btn:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.gm-cat .lm-menu { min-width: 220px; }
.gm-pick { max-height: 264px; overflow-y: auto; }
.gm-pick > li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0 8px 9px; }
.gm-pick > li + li { border-top: 1px solid var(--wk-note-edge); }
.gm-pick-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gm-pick-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); }
.gm-note { margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--wk-ground); font-size: 12px; line-height: 16px; color: var(--wk-body); }
.gm-actions { display: flex; gap: 10px; }
.gm-actions > .p-btn { min-width: 63px; padding: 0 16px; }
.gm-split > .p-btn { flex: 1 1 0; }

.gm-row { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; }
.gm-row + .gm-row { border-top: 1px solid var(--wk-note-edge); }
.gm-row-top { display: flex; align-items: center; gap: 12px; }
.gm-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gm-row-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.gm-row-line { font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.gm-row-line.waiting { color: var(--wk-moss); }
.gm-row-go {
  position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px;
  font-weight: 500; line-height: 18px; cursor: pointer;
}
.gm-row-go::after { content: ''; position: absolute; inset: -13px -6px; }
.gm-row-add { display: flex; flex-direction: column; gap: 12px; }
.gm-row-add .p-field { padding: 8px 14px 10px; border-radius: 14px; background: var(--wk-card); }
.gm-row-add .p-field label { font-size: 12px; line-height: 16px; }
.gm-row-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-body); }
.gm-more { padding: 12px 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gm-ask { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 20px; background: var(--wk-wash); }
.gm-ask p { margin: 0; }
.gm-ask-title { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); }
.gm-ask-text { font-size: 12px; line-height: 17px; color: var(--wk-body); }
.gm-ask-go {
  margin-top: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--wk-card); color: var(--wk-ink);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; cursor: pointer;
}
.gm-foot { display: flex; flex-direction: column; gap: 14px; }
.gm-foot-note { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.gm-big { font-weight: 500; }
.gm-qr { display: flex; align-items: center; gap: 12px; padding: 16px; }
.gm-qr > i { flex: none; font-size: 36px; color: var(--wk-ink); }
.gm-qr-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gm-qr-title { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); }
.gm-qr-text { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gm-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 18px; background: var(--wk-wash); }
.gm-mark p { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-body); }
.gm-mark-go {
  position: relative; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600;
  line-height: 18px; cursor: pointer;
}
.gm-mark-go::after { content: ''; position: absolute; inset: -13px -6px; }
:is(.gm-back, .gm-cancel, .gm-row-go, .gm-ask-go, .gm-mark-go):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
:is(.gm-ask-go, .gm-mark-go):disabled { opacity: .55; cursor: default; }

/* Address links (1h, 3h) */
#al-sheet { padding-inline: 20px; }
#al-sheet .p-sheet-top { margin-bottom: 12px; }
#al-sheet .p-sheet-title { font-size: 30px; line-height: 41px; }
#al-sheet .p-sheet-lead { margin-top: 4px; font-size: 13px; line-height: 19px; color: var(--wk-body); }
#al-sheet .p-sheet-body { gap: 14px; margin-top: 14px; }
.al-card { margin: 0; padding: 0 14px; list-style: none; border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-card); }
.al-card > li + li { border-top: 1px solid var(--wk-off); }
.al-home, .al-option { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.al-home { padding: 11px 0; }
.al-option {
  width: 100%; padding: 12px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.al-option:disabled { cursor: default; }
.al-option:disabled .al-name, .al-option:disabled .al-chev { color: var(--wk-muted); }
.al-option[aria-busy='true'] { cursor: wait; }
.al-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.al-option .al-main { gap: 3px; }
.al-name { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }
.al-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.al-end { flex: none; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.al-chev { flex: none; font-size: 20px; line-height: 20px; color: var(--wk-body); }
.al-text {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--wk-ink);
  font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.al-note { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.al-link { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--wk-ground); }
.al-link-label { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.al-link-url { font-size: 15px; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }
.al-link-url.none { color: var(--wk-muted); }
.al-link-note { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.al-done { width: 100%; font-size: 15px; }
:is(.al-option, .al-text):focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; border-radius: 8px; }
/* Texts from the couple's phone (7b, 3350:18383 and 3350:18709): the lime note, the plain links under the
   list, the progress bar, the message as a bubble, Up next, and the computer line, which shows from 860px. */
.al-why { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--wk-wash); color: var(--wk-ink); font-size: 13px; line-height: 19px; }
.al-quiet {
  position: relative; align-self: flex-start; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 13px; font-weight: 500; line-height: 18px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.al-quiet::after { content: ''; position: absolute; inset: -13px -6px; }
.al-quiet[aria-busy='true'] { cursor: wait; }
.al-big { min-height: 48px; font-size: 15px; font-weight: 500; }
.al-progress { display: flex; flex-direction: column; gap: 8px; }
.al-step { margin: 0; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink); overflow-wrap: anywhere; }
.al-bar { display: flex; gap: 4px; }
.al-bar > span { flex: 1; height: 4px; border-radius: 2px; background: var(--wk-bar); }
.al-bar > span.on { background: var(--wk-ink); }
.al-preview { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px; border-radius: 16px; background: var(--wk-ground); }
.al-preview-label, .al-preview-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.al-bubble {
  align-self: flex-end; max-width: 82%; margin: 0; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--wk-tab-on);
  color: var(--wk-on-navy); font-size: 14px; line-height: 20px; white-space: pre-line; overflow-wrap: anywhere;
}
.al-go { display: flex; flex-direction: column; gap: 14px; }
.al-desk { display: none; margin: -4px 0 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.al-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.al-pair .al-quiet { align-self: auto; }
.al-again { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.al-again .al-quiet { font-size: 12px; line-height: 17px; }
.al-next { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--wk-hair); border-radius: 14px; background: var(--wk-card); }
.al-next-label { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.al-next-name { font-size: 15px; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }
.al-quiet:focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; border-radius: 4px; }
@media (min-width: 860px) { .al-desk { display: block; } }
.gn-ask { min-height: 40px; padding: 0 16px; font-weight: 500; }   /* Need more details' way in, sized like its Group them */
.al-later {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border: 0;
  border-radius: 12px; background: var(--wk-ground); color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500;
  line-height: 18px; text-align: left; cursor: pointer;
}
.al-later > [aria-hidden] { font-size: 18px; color: var(--wk-muted); }
.al-later:focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; }
/* The schedule section editor (Figma 9f): Who's invited and Ask on the RSVP per event, and the picker sheet. */
.sc-editor { font-family: var(--wk-sans); color: var(--wk-ink); }
.sc-lead { margin: 2px 2px 14px; font-size: 13px; line-height: 19px; color: var(--wk-body); }
.sc-empty { margin: 0 2px; font-size: 13px; color: var(--wk-muted); }
.sc-card { margin: 0; padding: 4px 16px; list-style: none; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.sc-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.sc-row + .sc-row { border-top: 1px solid var(--wk-hair); }
.sc-head { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.sc-main { display: flex; flex-direction: column; gap: 2px; margin-top: -8px; }
.sc-title { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.sc-when { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }

.sc-tools { display: flex; align-items: center; gap: 2px; flex: none; margin-right: -6px; }
.sc-tool, .sc-tool-gap { width: 30px; height: 30px; flex: none; }
.sc-tool {
  display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--wk-muted); cursor: pointer;
}
.sc-tool i { font-size: 16px; }
.sc-tool:hover { background: var(--wk-track); color: var(--wk-ink); }
.sc-tool.danger:hover { color: var(--wk-plum); }

.sc-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sc-label { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.sc-pill {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px 5px 10px; border: 0; border-radius: 999px;
  background: var(--wk-track); color: var(--wk-ink); font: inherit; font-size: 12px; font-weight: 500; line-height: 16px; cursor: pointer;
  transition: background-color .15s, transform .12s ease;
}
.sc-pill::after { content: ''; position: absolute; inset: -9px -2px; }
.sc-pill.some { background: var(--wk-wash); }
.sc-pill i { font-size: 12px; }
.sc-pill:active:not(:disabled) { transform: scale(.97); }
.sc-pill:disabled { cursor: default; color: var(--wk-muted); }
.sc-save {
  padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 12px; font-weight: 600; line-height: 16px;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.sc-ask { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 16px; color: var(--wk-body); }

.sc-foot { margin: 14px 2px 0; font-size: 12px; line-height: 1.45; color: var(--wk-muted); }
.sc-add { margin: 10px 2px 0; }

.sc-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 16px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.sc-form-title { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--wk-ink); }
.sc-form-row { display: flex; gap: 10px; }
.sc-form-row > .p-field { flex: 1 1 0; min-width: 0; }
.sc-form .p-field { padding: 9px 14px 10px; border-radius: 14px; }
.sc-form .p-field-label { font-size: 12px; line-height: 16px; }
.sc-form .p-field input::placeholder { color: var(--wk-muted); opacity: 1; }
.sc-form .p-field input[type='date'] { min-height: 28px; }
.sc-form .p-btns { margin-top: 4px; }
.sc-optional { font-weight: 400; }

.sc-eyebrow { margin: 18px 2px 8px; font-size: 12px; font-weight: 600; color: var(--wk-muted); }
.sc-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-preset {
  position: relative; padding: 6px 12px; border: 1px solid var(--wk-stroke); border-radius: 999px; background: var(--wk-card);
  color: var(--wk-ink); font: inherit; font-size: 13px; line-height: 18px; cursor: pointer;
}
.sc-preset::after { content: ''; position: absolute; inset: -6px 0; }

.p-btn.sc-danger { border-color: var(--wk-plum); background: var(--wk-plum); color: var(--wk-paper); }

:is(.sc-tool, .sc-pill, .sc-save, .sc-preset, .wi-opt):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* The Who's invited sheet: Everyone or Only some, then the households and the people on them. */
#who-invited .p-sheet-body { gap: 18px; }
.wi-pick { display: flex; flex-direction: column; gap: 6px; }
.wi-list, .wi-people { margin: 0; padding: 0; list-style: none; }
.wi-hh { border-top: 1px solid var(--wk-hair); }
.wi-hh:first-child { border-top: 0; }
.wi-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.wi-opt[aria-checked='mixed'] > .p-check { border-color: var(--wk-lime); background: var(--wk-lime); color: var(--wk-on-lime); }
.wi-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wi-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.wi-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.wi-people { margin: -4px 0 6px 38px; }
.wi-people .wi-opt { min-height: 44px; padding: 6px 0; }
.wi-people .p-check { width: 22px; height: 22px; }
.wi-people .p-check i { font-size: 13px; }
.wi-none { margin: 6px 0; font-size: 13px; line-height: 1.45; color: var(--wk-muted); }
.wi-foot {
  position: sticky; bottom: calc(-32px - env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px;
  margin: 0 -16px calc(-32px - env(safe-area-inset-bottom)); padding: 12px 16px calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--wk-hair); background: var(--wk-paper);
}
.wi-count { margin: 0; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink); }

@media (prefers-reduced-motion: reduce) {
  .sc-pill { transition: none; }
}
/* The Plan tab's Overview (Figma "Plan — Overview" and "· all caught up"), the New note sheet
   and the Notes screen. Built on plan.css; tokens only, so dark mode follows. */

/* Up next: the count, with arrows on desktop for a mouse; then the front card with up to two
   edges peeking out below, thinning as the deck shrinks. */
.ov-head .p-label { margin-right: auto; }
.ov-pager { display: none; gap: 10px; }
.ov-pager .p-round:disabled { opacity: .4; cursor: default; }
.ov-deck { position: relative; }
.ov-deck[data-edges='1'] { padding-bottom: 10px; }
.ov-deck[data-edges='2'] { padding-bottom: 20px; }
.ov-edge {
  position: absolute; bottom: 0; border: 1px solid var(--wk-hair); border-radius: 24px;
  box-shadow: 0 4px 12px rgba(20, 26, 61, .04);
}
.ov-edge.e1 { top: 10px; left: 12px; right: 12px; background: color-mix(in srgb, var(--wk-card) 60%, var(--wk-track)); }
.ov-deck[data-edges='2'] .ov-edge.e1 { bottom: 10px; }
.ov-edge.e2 { top: 20px; left: 24px; right: 24px; background: var(--wk-track); }
.ov-front { position: relative; touch-action: pan-y; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.ov-front.dragging { transition: none; user-select: none; cursor: grabbing; }

.ov-card {
  display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--wk-hair); border-radius: 24px;
  background: var(--wk-card); box-shadow: var(--wk-shadow); color: var(--wk-ink);
}
.ov-step { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ov-parent { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ov-crumb { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.ov-crumb strong { font-weight: 600; color: var(--wk-ink); }
.ov-parent .p-dashes { width: 132px; max-width: 100%; }
.ov-effort {
  display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 5px 10px 5px 8px; border-radius: 999px;
  background: var(--wk-track); color: var(--wk-body); font-size: 12px; font-weight: 600; line-height: 16px;
}
.ov-effort i { font-size: 14px; }
.ov-tag { align-self: flex-start; margin: 0; white-space: normal; }
.ov-headline {
  margin: 0; font-family: var(--wk-serif); font-size: 28px; font-weight: 600; line-height: 32px; color: var(--wk-ink);
  overflow-wrap: anywhere; outline: none;
}
/* Card text is never cut off: the card grows to fit the whole sentence. */
.ov-body { margin: 0; font-size: 14px; line-height: 20px; color: var(--wk-body); }
.ov-small { margin: 0; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }

/* The small links on a card keep a 44px target without adding to the card's rhythm. */
.ov-source, .ov-notnow, .ov-more, .ov-hint button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none;
  font: inherit; text-align: left; cursor: pointer;
}
.ov-source { align-self: flex-start; gap: 0; margin: -14px 0; font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.ov-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -13px 0; }
.ov-notnow { font-size: 13px; font-weight: 600; color: var(--wk-body); }
.ov-notnow i { font-size: 16px; }
.ov-more { gap: 0; font-size: 13px; font-weight: 600; color: var(--wk-ink); text-align: right; }
.ov-hint { margin: -14px 0; text-align: center; }
.ov-hint button { vertical-align: top; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.ov-status { min-height: 0; margin: 0; text-align: center; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-moss); }
.ov-status.bad { color: var(--wk-plum); }
.ov-status:empty { margin-top: -12px; }
:is(.ov-source, .ov-notnow, .ov-more):disabled { opacity: .5; cursor: wait; }

/* All caught up, and the stage card's sibling look. */
.ov-caught { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 24px; background: var(--wk-track); }
.ov-check {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--wk-lime);
  color: var(--wk-on-lime);
}
.ov-check i { font-size: 22px; }
.ov-caught .p-btns { padding-top: 4px; }

/* Your inspiration. */
.ov-inspo { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 22px; background: var(--wk-track); }
.ov-inspo-top { display: flex; align-items: center; gap: 16px; }
button.ov-inspo-top {
  width: 100%; padding: 0; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.ov-inspo-top > i { flex: none; font-size: 18px; color: var(--wk-muted); }
.ov-inspo-text { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.ov-inspo-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 22px; color: var(--wk-ink); }
.ov-inspo-sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); overflow-wrap: anywhere; }
.ov-fan { position: relative; display: block; flex: none; width: 76px; height: 68px; }
/* The frame strokes the photos outside their 40×52, so the white border adds 2px all round. */
.ov-thumb {
  position: absolute; display: block; width: 40px; height: 52px; box-sizing: content-box; overflow: hidden;
  border: 2px solid var(--wk-card); border-radius: 12px; box-shadow: 0 2px 6px rgba(20, 26, 61, .08);
}
.ov-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ov-thumb.t1 { left: 3.4px; top: 9px; transform: rotate(-8deg); background: var(--wk-sky); }
.ov-thumb.t2 { left: 16px; top: 4px; background: var(--wk-sand); }
.ov-thumb.t3 { left: 28.2px; top: 4.5px; transform: rotate(8deg); background: var(--wk-plum-wash); }
/* Two equal buttons to a row at 390 wide, as in the frame; narrower, they stack. */
.ov-inspo .p-btns > .p-btn { padding-inline: 6px; font-size: 13px; white-space: nowrap; }
.ov-upload { margin: -8px 0 0; font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.ov-upload:empty { margin-top: -16px; }

/* Your notes: cream cards, two side by side. The All notes link keeps its target without making
   the label row taller than the frame's, and takes the font's own underline as the frame does. */
.ov .p-label-row > .p-more {
  margin-block: -7px; text-underline-offset: auto; text-underline-position: from-font; text-decoration-thickness: from-font;
}
/* Your notes: one row, the whole card opens Notes; + New sits above the card's own button. */
.ov-notes-card {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 14px 14px 16px;
  border: 1px solid var(--wk-hair); border-radius: 20px; background: var(--wk-card);
}
.ov-notes-open { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; border-radius: 20px; background: none; cursor: pointer; }
.ov-notes-text, .ov-notes-chev { position: relative; flex: 1; min-width: 0; pointer-events: none; }
.ov-notes-chev { flex: none; font-size: 16px; color: var(--wk-muted); }
.ov-notes-count { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.ov-notes-latest { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.ov-notes-latest:empty { display: none; }
.ov-notes-new {
  position: relative; flex: none; min-height: 36px; padding: 7px 14px 7px 12px; border: 1px solid var(--wk-stroke);
  border-radius: 999px; background: var(--wk-card); font: inherit; font-size: 13px; font-weight: 600; color: var(--wk-ink);
  cursor: pointer;
}
.ov-note-body { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }
.ov-note-meta { font-size: 11px; font-weight: 500; line-height: 15px; color: var(--wk-muted); }
.ov-empty { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-body); }

/* The New note and Pinterest sheets. */
.ov-form { display: flex; flex-direction: column; gap: 16px; }
.ov-on { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-body); }
.ov-on strong { font-weight: 600; color: var(--wk-ink); }
.ov-left { margin: -8px 0 0; text-align: right; font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.ov-about .p-label { margin-bottom: 8px; }
.ov-form .p-error { margin: -4px 0 0; }

/* The Notes screen. */
.ov-notes-add { margin: 24px 0 20px; }
.ov-notes-page > .ck-chip { margin-top: 4px; }
.ov-notes-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.ov-notes-error .p-error { margin: 0; }
.ov-note-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ov-note-list:empty { display: none; }
.ov-note-row {
  display: flex; align-items: flex-start; gap: 8px; padding: 14px 8px 14px 16px; border: 1px solid var(--wk-note-edge);
  border-radius: 20px; background: var(--wk-note);
}
.ov-note-text { flex: 1; min-width: 0; padding-right: 8px; }
.ov-note-row .ov-note-body { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.ov-note-row .ov-note-meta { margin: 6px 0 0; font-size: 12px; line-height: 16px; }
.ov-note-row:not(:has(.ov-note-remove)) { padding-right: 16px; }
.ov-note-remove { flex: none; margin: -8px 0; border: 0; background: none; box-shadow: none; color: var(--wk-muted); }
.ov-note-remove:disabled { opacity: .5; cursor: wait; }

:is(.ov-source, .ov-notnow, .ov-more, .ov-hint button, button.ov-inspo-top, .ov-notes-open, .ov-notes-new, .ov-note-remove):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}

@media (min-width: 860px) {
  .ov-pager { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-front { transition: none; }
}
/* Home's "Finish setting up" (Figma "Home · after onboarding"), Settings' "This wedding" card and
   the Leave this wedding sheet. Built on plan.css; tokens only, so dark mode follows. The cards'
   outline is the 3:1 edge, and line heights are pinned because Chrome draws Manrope's normal one
   1px taller than Figma. */
.su-head .p-label { font-weight: 500; line-height: 18px; }
.su-head .p-label + p { margin: 0; font-weight: 500; line-height: 16px; }
.su-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.su-card {
  display: flex; flex-direction: column; gap: 8px; padding: 15px 16px; border: 1px solid var(--wk-edge); border-radius: 20px;
  background: var(--wk-card); color: var(--wk-ink);
}
.su-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.su-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; outline: none; overflow-wrap: anywhere; }
/* The frame's 24px ✕ (a 10px cross) with a 44px target that doesn't make the title row taller.
   Tabler's cross is 12/24 of its size, so 20px draws the frame's 10px. */
.su-x {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -10px -10px -10px 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--wk-muted); cursor: pointer;
}
.su-x i { font-size: 20px; }
.su-text { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }

.su-rows { margin: 0; padding: 0; list-style: none; }
.su-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.su-row + .su-row { border-top: 1px solid var(--wk-bar); }
.su-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.su-row-name { font-size: 14px; font-weight: 500; line-height: 19px; overflow-wrap: anywhere; }
.su-row-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }

.su-note {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--wk-plum-wash);
}
.su-note p { margin: 0; }
.su-note-title { font-size: 14px; font-weight: 600; line-height: 19px; }
.su-note-text { font-size: 13px; line-height: 1.5; }

/* Navy and outlined pills, 38px (32px small) to see and 44px to hit. */
.su-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.su-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 9px 15px;
  border: 1px solid var(--wk-btn); border-radius: 999px; background: var(--wk-btn); color: var(--wk-on-navy);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .12s ease;
}
.su-btn::after { content: ''; position: absolute; inset: -4px 0; }
.su-btn.line { border-color: var(--wk-edge); background: var(--wk-card); color: var(--wk-ink); }
.su-btn.sm { padding: 7px 13px; font-size: 12px; line-height: 16px; }
.su-btn.sm::after { inset: -7px 0; }
.su-btn:active:not(:disabled) { transform: scale(.97); }
:is(.su-btn, .su-x):disabled { opacity: .5; cursor: wait; }
:is(.su-btn, .su-x):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* Settings: "This wedding". */
.st-leave { color: var(--wk-plum); }

/* Leave this wedding: the frame's smaller sheet, with no grip or close button. */
#leave-sheet { padding: 28px 24px calc(40px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; }
#leave-sheet::backdrop { background: rgba(20, 27, 60, .45); }
#leave-sheet .p-sheet-top { display: none; }
#leave-sheet .p-sheet-title { font-size: 30px; line-height: 36px; }
#leave-sheet .p-sheet-lead { margin-top: 14px; font-size: 14px; line-height: 19px; color: var(--wk-muted); }
#leave-sheet .p-sheet-body { gap: 14px; margin-top: 14px; }
.lv-btns { display: flex; flex-direction: column; gap: 14px; }
.lv-btns .p-btn { width: 100%; min-height: 50px; font-size: 15px; line-height: 20px; }
.lv-btns .p-btn.line { border-color: var(--wk-edge); }
.lv-btns .p-error { margin: 0; }

@media (min-width: 860px) {
  #leave-sheet { border-radius: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .su-btn { transition: none; }
}
/* The Plan tab: the checklist (Figma "Plan — Checklist" and everything a task opens): months of
   step cards with swipe actions, the task page, Add a task, Completed tasks, Tailor your
   checklist and the celebrations. On plan.css and the palette.css tokens, so dark mode follows.
   Small text stays at --wk-muted or darker, where the frames draw a lighter gray; the unticked
   circle keeps the 3:1 --wk-edge outline. Rows the frames draw under 44px tall take a 44px hit
   area from padding and an equal negative margin, so the drawn spacing holds. */
.ck-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* The checklist. */
.ck-page { padding-inline: 16px; }
.ck-screen { gap: 22px; }
.ck-list, .ck-month, .ck-month-body { display: flex; flex-direction: column; gap: 22px; }
.ck-progress {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px; border-radius: 24px; font: inherit;
  color: var(--wk-ink); line-height: normal; text-align: left; cursor: pointer;
}
.ck-progress-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ck-progress-count { font-size: 20px; font-weight: 600; }
.ck-progress-sub { font-size: 15px; color: var(--wk-muted); }
.ck-progress > i { font-size: 20px; color: var(--wk-muted); }
.ck-ring { flex: none; }
.ck-ring circle { fill: none; }
.ck-ring .track { stroke: var(--wk-hair); }
.ck-ring .fill { stroke: var(--wk-lime); }

.ck-month-head {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: -5px 0; padding: 11px 0; border: 0;
  background: none; color: var(--wk-ink); font: inherit; line-height: normal; text-align: left; cursor: pointer;
}
.ck-month-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; }
.ck-month-note { font-size: 13px; font-weight: 500; color: var(--wk-muted); white-space: pre-wrap; }
.ck-month-count { font-size: 13px; font-weight: 500; color: var(--wk-muted); }
.ck-month-head > i { font-size: 18px; color: var(--wk-muted); }
:is(.ck-done-row, .ck-removed) .ck-month-title { color: var(--wk-muted); }
.ck-month.closed { gap: 0; }
.ck-month.closed .ck-month-head, .ck-done-row { margin: 0; padding: 16px 0; }
.ck-month.closed + :is(.ck-month.closed, .ck-done-row) { margin-top: -22px; border-top: 1px solid var(--wk-hair); }

/* Step cards: one task's step, or a task's subtasks due in the same month under its name. */
.ck-card { border-radius: 24px; }
.ck-group { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; overflow: hidden; }
.ck-group.one { gap: 8px; }
.ck-parent { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.ck-parent p { margin: 0; font-size: 13px; font-weight: 500; line-height: normal; color: var(--wk-muted); }
.ck-parent b { font-weight: 600; color: var(--wk-ink); }
.ck-parent .p-dashes { flex: none; gap: 3px; }
.ck-parent .p-dashes > span { flex: none; width: 12px; min-width: 0; }
.ck-row { display: flex; align-items: center; gap: 12px; }
.ck-row-main {
  flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
}
button.ck-row-main { cursor: pointer; }
.ck-row-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--wk-ink); }
.ck-row-title > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ck-row-title .p-tag { padding: 2px 8px; font-size: 11px; }
.ck-row-sub { font-size: 13px; line-height: 1.35; color: var(--wk-muted); }
.ck-row.late .ck-row-sub { color: var(--wk-plum); font-weight: 600; }
.ck-row.late .p-check { border-color: var(--wk-plum); }
.ck-row.done .ck-row-title { color: var(--wk-muted); }
.ck-row.done .ck-row-title > span:first-child { text-decoration: line-through; }
.ck-handled { display: flex; align-items: flex-start; gap: 5px; padding-top: 2px; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--wk-on-sand); }
.ck-handled i { margin-top: 1px; font-size: 13px; }
.ck-handled.big { margin: 0; font-size: 13px; }
button.ck-handled { min-height: 40px; padding: 0; font-weight: 500; text-align: left; }
.ck-smart { margin-right: 3px; font-size: 13px; color: var(--wk-olive); }
.ck-owner {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -9px; padding: 0; border: 0;
  border-radius: 50%; background: none; font: inherit; cursor: pointer;
}

/* A row on the checklist itself, at the frame's sizes: a 22px circle, 15px title and 13px line,
   the owner's initials on a white ring, and the contract's line in sand. */
.ck-list .p-check-hit { margin: -11px; }
.ck-list .p-check { width: 22px; height: 22px; }
.ck-list .p-check i { font-size: 14px; }
.ck-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ck-list .ck-row-main { min-height: 0; margin: -2px 0; padding: 2px 0; }
.ck-list .ck-row-title, .ck-list .ck-row-sub { line-height: normal; }
.ck-list .ck-row-title .p-tag { line-height: normal; }
.ck-list .ck-row-title .p-tag::before { content: none; }
.ck-list .ck-owner .p-avatar { box-sizing: border-box; border: 1.5px solid var(--wk-card); }
.ck-list .ck-handled { align-items: center; margin: 0; line-height: normal; }
.ck-list .ck-handled i { margin-top: 0; }
.ck-list button.ck-handled {
  width: 100%; min-height: 0; margin: -5px 0; padding: 7px 0 5px; border: 0; background: none; font: inherit;
  font-size: 12px; font-weight: 500; line-height: normal; color: var(--wk-on-sand); cursor: pointer;
}
.ck-add { min-height: 45px; }

/* Swipe left for Edit and Delete: the row slides over a gray strip. */
.ck-swipe { position: relative; overflow: hidden; }
.ck-swipe-strip {
  position: absolute; top: 0; right: 0; bottom: 0; width: 137px; box-sizing: border-box; display: flex; align-items: center;
  justify-content: center; gap: 16px; border-left: 1px solid var(--wk-bar); background: var(--wk-track);
}
.ck-swipe-strip.one { width: 73px; }
.ck-swipe-strip button {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--wk-muted); cursor: pointer;
}
.ck-swipe-strip button i { font-size: 22px; }
.ck-swipe-strip .del { color: var(--wk-plum); }
.ck-swipe-face {
  position: relative; z-index: 1; background: var(--wk-card); box-shadow: 4px 0 5px rgba(20, 26, 61, .08);
  transition: transform .2s ease; touch-action: pan-y;
}
.ck-swipe-face.dragging { transition: none; }
.ck-card.ck-swipe > .ck-swipe-face { padding: 14px 16px; border-radius: 24px; }
.ck-sub + .ck-sub > .ck-swipe-face { padding-top: 10px; border-top: 1px solid var(--wk-hair); }

/* Removed tasks, and the bar that offers Undo. */
.ck-removed { display: flex; flex-direction: column; gap: 10px; }
.ck-removed-list { margin: 0; padding: 4px 16px; list-style: none; border-radius: 24px; background: var(--wk-track); }
.ck-removed-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.ck-removed-list li + li { border-top: 1px solid var(--wk-hair); }
.ck-removed-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: normal; color: var(--wk-muted); }
.ck-removed-title { margin: 0; font-size: 15px; font-weight: 500; text-decoration: line-through; overflow-wrap: anywhere; }
.ck-removed-sub { margin: 0; font-size: 12px; }
.ck-pill {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px 7px 10px;
  border: 1px solid var(--wk-stroke); border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit;
  font-size: 12px; font-weight: 600; line-height: normal; white-space: nowrap; cursor: pointer;
}
.ck-pill i { font-size: 14px; }
.ck-pill::after { content: ''; position: absolute; inset: -7px 0; }
.ck-tailor { margin-top: 4px; padding-block: 12px; font-weight: 500; line-height: normal; }
.ck-undo-slot { position: fixed; left: 50%; bottom: 96px; z-index: 70; width: min(calc(100% - 32px), 420px); transform: translateX(-50%); pointer-events: none; }
.ck-undo {
  display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 16px; border-radius: 16px; background: var(--wk-btn);
  color: var(--wk-card); box-shadow: var(--wk-shadow); font-size: 14px; pointer-events: auto;
}
.ck-undo span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ck-undo button {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: var(--wk-on-btn);
  font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ck-empty { margin: 0; }
.ck-empty p { margin: 0 0 12px; font-size: 14px; color: var(--wk-body); }
.ck-empty p:last-child { margin: 0; }

/* Completed tasks: month labels over hairline cards of ticked, struck-through rows. */
.ck-done > .p-back { margin: 0; }
.ck-done-head { display: flex; flex-direction: column; gap: 8px; line-height: normal; }
.ck-done-head :is(.p-eyebrow, .p-title, .p-lead) { margin: 0; line-height: normal; }
.ck-done-head .p-eyebrow { font-weight: 600; }
.ck-done-head .p-lead { font-weight: 500; color: var(--wk-muted); }
.ck-done .p-label-row .p-label + span { font-weight: 500; }
.ck-done-card { padding: 4px 18px; border-radius: 24px; }
.ck-done-card > .ck-row { padding: 12px 0; }
.ck-done-card > .ck-row + .ck-row { border-top: 1px solid var(--wk-hair); }
.ck-done-card .p-check-hit { margin: -11px; }
.ck-done-card .p-check { width: 22px; height: 22px; }
.ck-done-card .p-check i { font-size: 14px; }
.ck-done-card .ck-row-main { min-height: 0; gap: 2px; }
.ck-done-card :is(.ck-row-title, .ck-row-sub) { line-height: normal; }
.ck-show-all { align-self: center; min-height: 44px; margin: -6px 0; }

/* The celebrations: a card over the dimmed page, with confetti falling behind it. */
.ck-celebrate {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px;
  box-sizing: border-box; border: 0; background: transparent; overflow: hidden;
}
.ck-celebrate[open] { display: grid; place-items: center; }
.ck-celebrate::backdrop { background: rgba(20, 27, 60, .4); }
.ck-cele-card {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(100%, 342px);
  padding: 28px 24px 24px; box-sizing: border-box; border: 1px solid var(--wk-hair); border-radius: 28px; background: var(--wk-card);
  box-shadow: 0 16px 20px rgba(20, 26, 61, .18); color: var(--wk-ink); line-height: normal; text-align: center;
  animation: ck-pop .32s cubic-bezier(.2, .9, .3, 1.2);
}
.ck-cele-card.whole { gap: 12px; }
.ck-tick {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--wk-lime); color: var(--wk-on-lime);
  box-shadow: 0 8px 18px rgba(92, 107, 18, .25);
}
.ck-tick i { font-size: 30px; }
.ck-tick.big { position: relative; width: 84px; height: 84px; background: none; box-shadow: none; }
.ck-tick.big::before {
  content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--wk-lime); box-shadow: 0 8px 18px rgba(92, 107, 18, .25);
}
.ck-tick.big i { position: relative; }
.ck-segments { position: absolute; inset: 0; }
.ck-segments circle { fill: none; stroke: var(--wk-olive); }
.ck-cele-eyebrow { margin: 0; font-size: 12px; font-weight: 600; color: var(--wk-moss); }
.ck-cele-title { margin: 0; font-family: var(--wk-serif); font-size: 34px; font-weight: 500; }
.ck-cele-lead { margin: 0; font-size: 15px; color: var(--wk-body); }
.ck-cele-progress { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; box-sizing: border-box; border-radius: 16px; background: var(--wk-track); }
.ck-cele-progress p { margin: 0; font-size: 13px; font-weight: 500; color: var(--wk-muted); }
.ck-cele-progress b { font-weight: 600; color: var(--wk-ink); }
.ck-cele-progress .p-dashes { width: 132px; }
.ck-cele-tally { margin: 0; font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.ck-cele-card .p-more { position: relative; }
.ck-cele-card .p-more::after { content: ''; position: absolute; inset: -6px 0; }
.ck-cele-contract {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; box-sizing: border-box; border-radius: 18px;
  background: var(--wk-track); text-align: left;
}
.ck-cele-contract .p-icon-disc { width: 40px; height: 40px; background: var(--wk-card); }
.ck-cele-contract .p-icon-disc i { font-size: 20px; }
.ck-cele-contract-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ck-cele-contract-text p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--wk-muted); }
.ck-cele-contract-text .ck-cele-contract-title { font-size: 14px; font-weight: 600; line-height: normal; color: var(--wk-ink); }
.ck-cele-contract .ck-pill { padding: 6px 10px; }
.ck-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ck-confetti span {
  position: absolute; top: -24px; width: 4px; border-radius: 1.5px; animation-name: ck-fall; animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.25, .6, .45, 1);
}
/* As drawn: lime, plum, white, a gray-blue and olive (the gray-blue has no palette token). */
.ck-confetti .t0 { background: var(--wk-lime); }
.ck-confetti .t1 { background: var(--wk-plum); }
.ck-confetti .t2 { background: #fff; }
.ck-confetti .t3 { background: #9aa1bb; }
.ck-confetti .t4 { background: var(--wk-olive); }
@keyframes ck-fall {
  from { transform: translateY(0) rotate(var(--turn)); opacity: 1; }
  80% { opacity: 1; }
  to { transform: translateY(75vh) rotate(calc(var(--turn) + 300deg)); opacity: 0; }
}
@keyframes ck-pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

:is(.ck-progress, .ck-month-head, .ck-row-main, .ck-owner, .ck-swipe-strip button, .ck-undo button, .ck-pill,
  button.ck-handled):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}
.ck-swipe :is(.ck-row-main, .ck-owner, .ck-expand, .p-check-hit, .p-link, .p-btn, button.ck-handled, .ck-swipe-strip button):focus-visible { outline-offset: -3px; }
.ck-undo button:focus-visible { outline-color: var(--wk-on-btn); }

@media (prefers-reduced-motion: reduce) {
  .ck-confetti { display: none; }
  .ck-cele-card, .ck-swipe-face { animation: none; transition: none; }
}

/* Who changed what (Oct 13 frames): "Priya joined your wedding", Only my tasks and the Changed by
   chip, the hint over a row's initials, and a tick shown without a control (Can view, not theirs). */
.ck-joined { display: flex; align-items: flex-start; gap: 12px; padding: 14px 6px 14px 14px; border-radius: 16px; background: var(--wk-wash); }
.ck-joined .p-avatar { background: var(--wk-moss); color: var(--wk-wash); }
.ck-joined-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.ck-joined-text h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--wk-ink); }
.ck-joined-text p { margin: 0; font-size: 13px; line-height: 1.35; color: var(--wk-body); }
.ck-joined-x {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px 0; padding: 0; border: 0;
  border-radius: 50%; background: none; color: var(--wk-body); cursor: pointer;
}
.ck-joined-x i { font-size: 18px; }
.ck-filters { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; margin: -8px 0; }
.ck-mine { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-size: 13px; font-weight: 500; color: var(--wk-body); }
.ck-mine .p-switch::before { content: ''; position: absolute; inset: -9px -4px; }
.ck-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 14px; border: 1px solid var(--wk-stroke);
  border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ck-chip i { font-size: 15px; color: var(--wk-muted); }
.ck-none { margin: 0; font-size: 14px; color: var(--wk-body); }
.ck-hint {
  position: fixed; z-index: 80; transform: translateY(-100%); padding: 8px 12px; border-radius: 10px; background: var(--wk-ink);
  color: var(--wk-card); box-shadow: var(--wk-shadow); font-size: 13px; font-weight: 500; line-height: normal; white-space: nowrap;
  pointer-events: none;
}
.ck-static { cursor: default; }
.ck-static > .p-check { border-style: dashed; }
.ck-static.on > .p-check { border: 0; background: var(--wk-wash); color: var(--wk-moss); }
:is(.ck-joined-x, .ck-chip):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* Select (frames m-d1, d-d1): a task per card with a checkbox, and the bar that groups or merges;
   the Group and Merge sheets (m-d2, m-e1). */
.ck-select-btn { min-height: 44px; }
.ck-select-header { gap: 20px; }
.ck-select-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.ck-select-top > :last-child { justify-self: end; }
.ck-select-count { font-size: 15px; font-weight: 600; }
.ck-select-head { cursor: default; }
.ck-select-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid transparent; cursor: pointer; }
.ck-select-card.on { border-color: var(--wk-ink); background: color-mix(in srgb, var(--wk-track) 40%, var(--wk-card)); }
.ck-select-card .ck-row-title { font-weight: 600; }
.ck-select-card .p-check-hit { margin: -11px; }
.ck-select-card .p-check { width: 22px; height: 22px; }
.ck-select-card [aria-checked='true'] > .p-check { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
.ck-picking { padding-bottom: 180px; }
.ck-select-bar {
  position: fixed; left: 50%; bottom: 96px; z-index: 60; display: flex; flex-direction: column; gap: 6px;
  width: min(calc(100% - 32px), 460px); box-sizing: border-box; padding: 10px 10px 10px 18px; transform: translateX(-50%);
  border: 1px solid var(--wk-hair); border-radius: 22px; background: var(--wk-card); box-shadow: var(--wk-shadow);
}
.ck-select-row { display: flex; align-items: center; gap: 8px; }
.ck-select-why { margin: 0; font-size: 13px; line-height: 1.35; color: var(--wk-plum); }
.ck-select-n { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.ck-select-bar .p-btn { min-height: 44px; }
.ck-select-cancel { padding: 0 6px; }
.ck-picking .ck-undo-slot { bottom: 170px; }
.ck-group-list { display: flex; flex-direction: column; margin: 0; padding: 6px 18px; list-style: none; border-radius: 20px; }
.ck-group-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; }
.ck-group-list li + li { border-top: 1px solid var(--wk-hair); }
.ck-group-list li > i { flex: none; font-size: 16px; color: var(--wk-olive); }
.ck-group-list li > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ck-group-date { flex: none; font-size: 13px; color: var(--wk-muted); }
.ck-under { padding: 4px 18px; border-radius: 24px; }
.ck-under-opt { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.ck-under-opt + .ck-under-opt { border-top: 1px solid var(--wk-hair); }
.ck-under-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ck-under-row > .p-row-title { flex: 1; }
.ck-under-hint { margin: 0; font-size: 12px; color: var(--wk-muted); }
.ck-under-list { padding: 0; max-height: 280px; overflow: auto; }
@media (min-width: 860px) {
  .ck-select-bar { margin-left: 120px; }
  .ck-select-bar { bottom: 32px; }
  .ck-picking .ck-undo-slot { bottom: 110px; }
}

/* Search (frames PL-63–PL-65; on a phone, m-s1–m-s3): a field over the list that finds tasks and subtasks in
   every month, Done and Removed. On a phone it has a visible label and a Search button. */
.ck-find { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ck-find-label { font-size: 13px; font-weight: 600; color: var(--wk-ink); }
.ck-find-box {
  position: relative; display: flex; align-items: center; min-height: 48px; border: 1px solid var(--wk-stroke);
  border-radius: 14px; background: var(--wk-card);
}
.ck-find-box:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.ck-find input {
  flex: 1; min-width: 0; height: 46px; padding: 0 8px 0 16px; border: 0; border-radius: 14px; background: none;
  color: var(--wk-ink); font: inherit; font-size: 15px; outline: none;
}
.ck-find input::placeholder { color: var(--wk-muted); }
.ck-find input::-webkit-search-cancel-button { display: none; }
.ck-find-x {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 4px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--wk-body); cursor: pointer;
}
.ck-find-x i { font-size: 18px; }
.ck-find-x:focus-visible, .ck-find-go:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.ck-find-key {
  margin-right: 12px; padding: 1px 7px; border: 1px solid var(--wk-stroke); border-radius: 6px; color: var(--wk-muted);
  font: inherit; font-size: 12px; font-weight: 600;
}
/* A phone: a taller box, 16px text so the page doesn't zoom, and a Search button that's plainly the way to go. */
.ck-find-phone .ck-find-box { min-height: 56px; border-radius: 16px; padding-right: 6px; border-width: 1.5px; }
.ck-find-phone input { height: 52px; font-size: 16px; }
.ck-find-go {
  flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--wk-btn); color: var(--wk-on-btn);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.ck-found-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; scroll-margin-top: 16px; }
.ck-found { font-weight: 600; color: var(--wk-ink); min-width: 0; }
.ck-found-clear { flex: none; }
.ck-found-head { cursor: default; }
.ck-select > .ck-find { margin-bottom: 16px; }
.ck-select > .ck-none { margin-bottom: 12px; }
/* A task's page (Figma "Task — Book your caterer" and "Task — Lock your guest count") and the
   Task owner sheet. On plan.css and the palette.css tokens, so dark mode follows; the frames'
   #cfcfd8 outline and #f7f7f9 tips panel are mixed from tokens for the same reason. */
.ck-task { --ck-outline: color-mix(in srgb, var(--wk-edge) 40%, var(--wk-card)); }
.ck-task > .p-back { margin: 0; }
.ck-task-head { display: flex; flex-direction: column; gap: 8px; line-height: normal; }
.ck-task-head .p-eyebrow { margin: 0; font-weight: 600; }
.ck-task-head .p-title { margin: 0; line-height: normal; }
.ck-task-head .p-lead { font-weight: 500; line-height: normal; color: var(--wk-muted); }
.ck-task-progress { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.ck-task-progress .p-dashes { height: 6px; }
.ck-task-progress .p-dashes > span { border-radius: 3px; }
.ck-task-progress p { margin: 0; font-size: 12px; font-weight: 600; color: var(--wk-muted); }
.ck-owner-card {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-radius: 24px; font: inherit;
  color: var(--wk-ink); text-align: left; cursor: pointer;
}
.ck-owner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: normal; }
.ck-owner-label { font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.ck-owner-name { font-size: 15px; font-weight: 600; }
.ck-owner-go { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.ck-owner-go i { font-size: 16px; color: var(--wk-muted); }

/* Subtasks, and a single task's status: a 22px circle, the next subtask in bold, its owner and the
   chevron that opens its action. The status ticks with the same circle; its action sits below. */
.ck-subcard { padding: 4px 18px; border-radius: 24px; }
.ck-subrow + .ck-subrow { border-top: 1px solid var(--wk-hair); }
.ck-subrow .ck-row { padding: 14px 0; }
.ck-subrow.open .ck-row { padding-bottom: 12px; }
.ck-task .ck-row-main { min-height: 0; gap: 2px; }
.ck-task .ck-row :is(.ck-row-title, .ck-row-sub) { line-height: normal; }
.ck-task .ck-row.next .ck-row-title { font-weight: 600; }
.ck-task :is(.ck-subrow, .ck-status) .p-check-hit { margin: -11px; }
.ck-task :is(.ck-subrow, .ck-status) .p-check { width: 22px; height: 22px; }
.ck-task :is(.ck-subrow, .ck-status) .p-check i { font-size: 14px; }
.ck-status .ck-row { padding: 16px 0 12px; }
.ck-status:not(:has(.ck-sub-more)) .ck-row { padding-bottom: 16px; }
.ck-status .ck-row-title { font-weight: 600; }
.ck-status .ck-sub-more { flex-flow: row wrap; gap: 8px; padding-left: 0; }
.ck-expand {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -14px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--wk-muted); cursor: pointer;
}
.ck-expand i { font-size: 16px; }
.ck-sub-more { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 0 16px 34px; }
.ck-sub-more[hidden] { display: none; }
/* A subtask's own notes, open under it: the task page's note rows, tighter. */
.ck-sub-notes { align-self: stretch; display: flex; flex-direction: column; }
.ck-sub-notes .ck-note { padding: 10px 0; }
.ck-sub-notes .ck-add-note { align-self: flex-start; }
.ck-task .ck-pill { gap: 6px; padding: 0 14px 0 12px; border-color: var(--ck-outline); font-size: 12px; line-height: normal; }
.ck-task .ck-pill i { font-size: 14px; }
.ck-edit { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ck-edit-note { margin: 0; font-size: 13px; color: var(--wk-muted); }
.ck-task-actions { gap: 10px; }
.ck-task-actions > .p-btn { min-height: 45px; padding: 0 12px; line-height: normal; white-space: nowrap; }
.ck-task-actions > .p-btn.line { border-color: var(--ck-outline); color: var(--wk-body); }

/* Tips, the vendors and related tasks as plain rows, and the notes card. */
.ck-task .ck-tips {
  display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px 18px; list-style: none; border-radius: 24px;
  background: color-mix(in srgb, var(--wk-track) 60%, var(--wk-card));
}
.ck-tips li { position: relative; padding-left: 13px; font-size: 13px; line-height: 1.4; color: var(--wk-body); }
.ck-tips li::before { content: ''; position: absolute; left: 0; top: 6.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--wk-olive); }
.ck-rows { gap: 4px; }
.ck-rows .p-more { position: relative; min-height: 0; }
.ck-rows .p-more::after { content: ''; position: absolute; inset: -13px 0; }
.ck-links { margin: 0; padding: 0; list-style: none; }
.ck-links > li:first-child > .p-row { border-top: 0; }
.ck-links :is(.p-row-title, .p-row-sub) { line-height: normal; }
.ck-chev { flex: none; font-size: 18px; color: var(--wk-muted); }
.ck-photo {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; overflow: hidden; border-radius: 50%;
  background: var(--wk-sand); color: var(--wk-on-sand); font-size: 13px; font-weight: 600;
}
.ck-photo img { width: 100%; height: 100%; object-fit: cover; }
.ck-notes { display: flex; flex-direction: column; padding: 4px 18px; border-radius: 24px; }
.ck-note { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--wk-hair); }
.ck-note p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-ink); overflow-wrap: anywhere; }
.ck-note .ck-note-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: normal; color: var(--wk-muted); }
.ck-note-error { margin: 14px 0 0; font-size: 13px; color: var(--wk-plum); }
.ck-add-note { min-height: 47px; gap: 8px; }

/* The Task owner sheet: 28px between its parts, rows of people with a radio. */
.p-sheet:has(.ck-people) { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.ck-people > .p-list { padding: 4px 18px; }
.ck-people .ck-person { padding: 12px 0; }
.ck-people :is(.p-row-title, .p-row-sub) { line-height: normal; }
.ck-invite { align-self: flex-start; gap: 8px; min-height: 44px; margin: -10px 0; padding-top: 4px; }
/* Save at the foot of the sheet; its spinner takes the button's own text colour. */
.ck-save .av-spin { width: 16px; height: 16px; border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }

/* Small buttons keep a 44px target around a smaller pill. */
.ck-sub-more .p-btn.sm { position: relative; }
.ck-sub-more .p-btn.sm::after { content: ''; position: absolute; inset: -5px 0; }
.ck-person { cursor: pointer; }
/* Row text inside buttons is spans, so they stack the way plan.css's paragraphs do. */
:is(.ck-links, .ck-person) :is(.p-row-title, .p-row-sub) { display: block; }
:is(.ck-owner-card, .ck-expand):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* The "…" menus, Rename, Move into a task and the Due date calendar (frames m-b2, m-c1, m-c2, m-f1,
   m-f2). Sheets are bottom sheets on a phone and centred dialogs on a wide screen (plan.css). */
.ck-task-top { display: flex; align-items: center; justify-content: space-between; }
.ck-task-top .p-back { margin: 0; }
.ck-edit-link { min-height: 0; color: var(--wk-plum); text-decoration: none; position: relative; }
.ck-edit-link::after { content: ''; position: absolute; inset: -12px -8px; }
.ck-row-more {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--wk-stroke);
  border-radius: 50%; background: var(--wk-card); color: var(--wk-ink); cursor: pointer; position: relative;
}
.ck-row-more::after { content: ''; position: absolute; inset: -8px; }
.ck-row-more i { font-size: 16px; }
.ck-moved { align-self: flex-start; padding: 2px 8px; font-size: 11px; }
.ck-menu { border-radius: 24px; }
.ck-menu :is(.p-row-title, .p-row-sub), .ck-under-row :is(.p-row-title, .p-row-sub) { display: block; line-height: normal; }
.ck-menu .p-row:disabled { cursor: default; opacity: .55; }
.ck-menu-row.danger .p-row-title { color: var(--wk-plum); }
.ck-menu-row.danger .p-icon-disc { background: var(--wk-plum-wash); color: var(--wk-plum); }
.ck-menu-value { flex: none; font-size: 13px; color: var(--wk-muted); }
.ck-sheet-note { display: flex; gap: 8px; margin: 0; font-size: 13px; line-height: 1.4; color: var(--wk-muted); }
.ck-sheet-note i { flex: none; margin-top: 1px; font-size: 16px; }
.ck-sheet-actions { display: flex; flex-direction: column; gap: 10px; }
.ck-sheet-cancel { display: none; }
@media (min-width: 860px) {
  .ck-sheet-actions { flex-direction: row-reverse; justify-content: flex-start; }
  .ck-sheet-actions > .p-btn.wide { width: auto; }
  .ck-sheet-cancel { display: inline-flex; }
}

.ck-due-picks { gap: 8px; }
.ck-due-picks .p-chip { padding: 7px 12px; font-size: 13px; }
.ck-cal { padding: 14px 16px 10px; border-radius: 24px; }
.ck-cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.ck-cal-month { flex: 1; margin: 0; font-size: 17px; font-weight: 600; }
.ck-cal-nav {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--wk-ink); cursor: pointer;
}
.ck-cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ck-cal-grid th { padding: 4px 0; font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.ck-cal-grid td { padding: 2px 0; text-align: center; }
.ck-cal-day {
  position: relative; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--wk-ink); font: inherit; font-size: 15px; cursor: pointer;
}
.ck-cal-day.today { font-weight: 700; }
.ck-cal-day.wk { box-shadow: inset 0 0 0 1.5px var(--wk-olive); }
.ck-cal-day.parent::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--wk-plum); }
.ck-cal-day[aria-pressed='true'] { background: var(--wk-btn); color: var(--wk-on-navy); font-weight: 600; box-shadow: none; }
.ck-cal-day:disabled { color: var(--wk-edge); cursor: default; }
.ck-cal-day:focus-visible, .ck-cal-nav:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 1px; }
.ck-cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 12px; color: var(--wk-muted); }
.ck-cal-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ck-cal-ring { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--wk-olive); }
.ck-cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wk-plum); }
.ck-cal-move { padding: 14px 18px; border-radius: 24px; }
.ck-cal-move-head { display: flex; align-items: center; gap: 12px; }
.ck-cal-move-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-cal-move-title { font-size: 15px; font-weight: 600; }
.ck-cal-move-sub { font-size: 13px; color: var(--wk-muted); }
.ck-cal-shifts { margin: 10px 0 0; padding: 0; list-style: none; }
.ck-cal-shifts li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--wk-hair); font-size: 14px; }
.ck-cal-shift-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ck-cal-shift-dates { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ck-cal-shift-dates s { color: var(--wk-muted); text-decoration: none; }
.ck-cal-shift-dates i { font-size: 14px; }

.ck-search {
  display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 999px; background: var(--wk-track);
}
.ck-search:focus-within { box-shadow: 0 0 0 2px var(--wk-ink); }
.ck-search i { font-size: 18px; color: var(--wk-muted); }
.ck-search input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 15px; outline: none; }
.ck-move-list { border-radius: 24px; }
.ck-move-list .ck-move-all { padding: 14px 18px; border-top: 1px solid var(--wk-hair); }
.ck-move-none { margin: 0; padding: 16px 18px; font-size: 14px; color: var(--wk-muted); }
.ck-move-new { align-self: flex-start; }
.ck-move-problem { margin: 0; font-size: 14px; line-height: 1.45; }
.ck-tips-from { display: flex; flex-direction: column; gap: 6px; }
.ck-tips-label { margin: 0; font-size: 12px; font-weight: 600; color: var(--wk-muted); }
/* Add a task (Figma "Plan — Checklist · add a task", "… with steps" and "… add a subtask"), and
   the page pieces Tailor shares with it. On plan.css and the palette.css tokens, so dark mode
   follows. Small controls keep the frames' size and get an invisible 44px target. */
.ck-form > .p-back { margin: 0; }
.ck-form-head { display: flex; flex-direction: column; gap: 8px; }
.ck-form-head .p-eyebrow { margin: 0; font-weight: 600; }
.ck-form-head .p-title { margin: 0; line-height: normal; }
.ck-form-head .p-lead { font-weight: 500; line-height: normal; color: var(--wk-muted); }
.ck-form .p-label-row .p-label + span { font-weight: 500; }
.ck-panel { border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); box-shadow: 0 6px 10px rgba(20, 26, 61, .06); }

/* The Smart add and add-on switches are olive with a white knob in these frames. */
.ck-form .p-switch { width: 46px; height: 28px; border-radius: 14px; }
.ck-form .p-switch::before { content: ''; position: absolute; inset: -9px -1px; }
.ck-form .p-switch::after { width: 24px; height: 24px; }
.ck-form .p-switch[aria-checked='true'] { border-color: var(--wk-olive); background: var(--wk-olive); }
.ck-form .p-switch[aria-checked='true']::after { background: #fff; }

.ck-kinds { display: flex; gap: 8px; }
.ck-kind {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px;
  border: 1px solid var(--wk-track); border-radius: 18px; background: var(--wk-track); color: var(--wk-ink); font: inherit;
  line-height: normal; text-align: left; cursor: pointer;
}
.ck-kind[aria-checked='true'] { border: 1.5px solid var(--wk-ink); background: var(--wk-card); box-shadow: 0 4px 6px rgba(20, 26, 61, .06); }
.ck-kind-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.ck-kind-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--wk-card); }
.ck-kind-icon i { font-size: 18px; }
.ck-kind-icon .ti-circle { font-size: 14px; }
.ck-kind[aria-checked='true'] .ck-kind-icon { background: var(--wk-wash); }
.ck-kind .p-radio { width: 18px; height: 18px; }
.ck-kind[aria-checked='true'] .p-radio { border: 0; background: radial-gradient(circle, var(--wk-card) 3px, var(--wk-btn) 3.5px); }
.ck-kind-title { font-size: 14px; font-weight: 600; }
.ck-kind-sub { font-size: 12px; color: var(--wk-muted); }

/* A name that grows: the textarea and a hidden copy of its text share one grid cell. */
.ck-grow { display: grid; }
.ck-grow::after { content: attr(data-value) ' '; visibility: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.ck-grow > textarea, .ck-grow::after { grid-area: 1 / 1; min-width: 0; margin: 0; padding: 0; border: 0; font: inherit; }
.ck-grow > textarea { resize: none; overflow: hidden; background: none; color: var(--wk-ink); outline: none; }
.ck-grow > textarea::placeholder { color: var(--wk-muted); }

.ck-name { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; }
.ck-name:has(> .ck-grow > textarea:focus) { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.ck-name > .ck-grow { align-self: stretch; font-size: 18px; font-weight: 500; line-height: normal; }
.ck-name > :is(.p-error, .p-field) { align-self: stretch; margin: 0; }
.ck-quiet {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  color: var(--wk-muted); font: inherit; font-size: 13px; font-weight: 500; line-height: normal; cursor: pointer;
}
.ck-quiet i { font-size: 14px; }
.ck-quiet::after { content: ''; position: absolute; inset: -8px -8px -18px; }

.ck-drafts { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 4px; }
.ck-drafts.filled { gap: 0; padding: 4px 18px; }
.ck-explain { margin: 0; font-size: 13px; line-height: normal; color: var(--wk-muted); }
.ck-add-row {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 600; line-height: normal; text-align: left; cursor: pointer;
}
.ck-add-row i { font-size: 16px; }
.ck-drafts.filled .ck-add-row { border-top: 1px solid var(--wk-hair); }
.ck-draft-list { margin: 0; padding: 0; list-style: none; }
.ck-draft { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.ck-draft + .ck-draft { border-top: 1px solid var(--wk-hair); }
.ck-draft > .ck-grow { flex: 1; margin: -12px 0; font-size: 14px; font-weight: 500; line-height: normal; }
.ck-draft > .ck-grow > textarea, .ck-draft > .ck-grow::after { padding: 12px 0; }
.ck-draft > .ck-grow > textarea:focus-visible { outline: 2px solid var(--wk-ink); outline-offset: -6px; border-radius: 8px; }
.ck-num {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wk-wash);
  color: var(--wk-moss); font-size: 12px; font-weight: 600; line-height: normal;
}
.ck-date-chip {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px 6px 8px; border: 0;
  border-radius: 999px; background: var(--wk-track); color: var(--wk-ink); font: inherit; font-size: 12px; font-weight: 600;
  line-height: normal; cursor: pointer;
}
.ck-date-chip::after { content: ''; position: absolute; inset: -8px 0; }
.ck-date-chip.picked { padding: 5px 9px 5px 7px; border: 1px solid var(--wk-ink); background: var(--wk-card); }
.ck-date-chip .ck-smart { margin: 0; font-size: 11px; color: var(--wk-olive); }
.ck-date-chip > .ti-calendar { font-size: 13px; }
.ck-chip-date { flex: none; min-height: 44px; border: 1px solid var(--wk-edge); border-radius: 12px; padding: 0 8px; font: inherit; font-size: 13px; color: var(--wk-ink); background: var(--wk-card); }

.ck-which { padding: 4px 18px; }
.ck-which-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; line-height: normal; text-align: left; cursor: pointer;
}
.ck-which-row + .ck-which-row, .ck-which .ck-add-row { border-top: 1px solid var(--wk-hair); }
.ck-which-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-which-title { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.ck-which-row[aria-checked='true'] .ck-which-title { font-weight: 600; }
.ck-which-sub { font-size: 12px; color: var(--wk-muted); }
.ck-which .ck-add-row { gap: 6px; }
.ck-which .ck-add-row i { color: var(--wk-muted); }

/* Where does it go: hairlines between every row, the new one dashed olive on a pale wash. */
.ck-order { margin: 0; padding: 4px 18px; list-style: none; }
.ck-order li {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 14px; font-weight: 500;
  line-height: normal; color: var(--wk-ink);
}
.ck-order li + li { margin-top: 1px; }
.ck-order li + li::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--wk-hair); }
.ck-order li + li.new::before { top: -2px; left: -1px; right: -1px; }
.ck-order li .ck-num { background: var(--wk-track); color: var(--wk-muted); }
.ck-order-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ck-order li.done .ck-order-text { color: var(--wk-muted); text-decoration: line-through; }
.ck-order li.new {
  padding: 11px 10px; border: 1px dashed var(--wk-olive); border-radius: 14px;
  background: color-mix(in srgb, var(--wk-wash) 50%, var(--wk-card));
}
.ck-order li.new .ck-num { background: var(--wk-lime); color: var(--wk-on-lime); }
.ck-order-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-order-title { font-weight: 600; overflow-wrap: anywhere; }
.ck-order-sub { font-size: 12px; color: var(--wk-moss); }
.ck-grip {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -12px; border-radius: 12px;
  color: var(--wk-moss); cursor: grab; touch-action: none;
}
.ck-grip i { font-size: 20px; }

.ck-details { padding: 4px 18px; }
.ck-detail { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.ck-detail + .ck-detail, .ck-detail-field + .ck-detail { border-top: 1px solid var(--wk-hair); }
.ck-detail-field { margin: 0 0 12px; }
.ck-detail .p-icon-disc.lime { background: var(--wk-wash); }
.ck-detail .p-icon-disc.plum { background: var(--wk-plum-wash); }
.ck-detail .p-icon-disc.smart { color: var(--wk-moss); }
.ck-detail .p-icon-disc.smart i { font-size: 20px; }
.ck-detail-title { flex: 1; font-size: 15px; font-weight: 500; line-height: normal; }
.ck-detail-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-detail-main .ck-detail-title { flex: none; }
.ck-detail-sub { font-size: 12px; line-height: normal; color: var(--wk-muted); }
/* The value's button covers its whole row. */
.ck-detail-value {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--wk-body);
  font: inherit; font-size: 14px; font-weight: 600; line-height: normal; text-align: right; cursor: pointer;
}
.ck-detail-value::after { content: ''; position: absolute; inset: 0; }
.ck-detail-value .ck-smart { margin: 0; font-size: 13px; color: var(--wk-olive); }
.ck-detail-value .p-avatar { width: 22px; height: 22px; font-size: 10px; }
.ck-detail-value > :is(.ti-chevron-right, .ti-chevron-down) { margin-left: 6px; font-size: 18px; color: var(--wk-muted); }

.ck-form-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ck-form-actions .p-link { min-height: 44px; margin: -13px 0; font-size: 13px; line-height: normal; }

:is(.ck-kind, .ck-quiet, .ck-add-row, .ck-date-chip, .ck-which-row, .ck-detail-value):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.ck-grip:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: -6px; }

/* Edit subtasks (frames m-b1, d-b1) and Wickette's suggestions in Break into subtasks (m-g1, m-g2):
   rows with a grip, the name, a date chip and an owner chip, and a remove cross. */
.ck-ed-name { flex-direction: row; align-items: center; }
.ck-ed-name > .ck-grow { flex: 1; }
.ck-ed-name > i { flex: none; font-size: 18px; color: var(--wk-muted); }
.ck-ed-panel { padding: 4px 18px; }
.ck-ed-list { margin: 0; padding: 0; list-style: none; }
.ck-ed-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; }
.ck-ed-row + .ck-ed-row { border-top: 1px solid var(--wk-hair); }
.ck-ed-row > .ck-grip { margin: 0 -10px 0 -14px; height: 36px; color: var(--wk-muted); }
.ck-ed-row.new { margin: 6px -8px; padding: 12px 8px; border: 1px dashed var(--wk-olive); border-radius: 14px;
  background: color-mix(in srgb, var(--wk-wash) 50%, var(--wk-card)); }
.ck-ed-row.new + .ck-ed-row, .ck-ed-row + .ck-ed-row.new { border-top: 0; }
.ck-ed-row.done { align-items: center; }
.ck-ed-row.done .p-check-hit { margin: -11px; }
.ck-ed-row.done .p-check { width: 22px; height: 22px; border-color: var(--wk-lime); background: var(--wk-lime); color: var(--wk-on-lime); }
.ck-ed-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ck-ed-main > .ck-grow { align-self: stretch; font-size: 15px; font-weight: 600; line-height: normal; }
.ck-ed-main > .ck-grow > textarea:focus-visible { outline: 2px solid var(--wk-lime); outline-offset: 4px; border-radius: 6px; }
.ck-ed-done-text { font-size: 15px; font-weight: 500; color: var(--wk-muted); text-decoration: line-through; }
.ck-ed-sub { font-size: 12px; color: var(--wk-muted); }
.ck-ed-new { padding: 2px 8px; font-size: 11px; }
.ck-ed-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-owner-chip {
  position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 5px; border: 0; border-radius: 999px;
  background: var(--wk-track); color: var(--wk-ink); font: inherit; font-size: 12px; font-weight: 600; line-height: normal; cursor: pointer;
}
.ck-owner-chip::after { content: ''; position: absolute; inset: -8px 0; }
.ck-owner-chip > i { margin-left: 3px; font-size: 14px; }
.ck-ed-x {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -4px -8px 0 0; padding: 0; border: 0;
  border-radius: 50%; background: none; color: var(--wk-muted); cursor: pointer;
}
.ck-ed-x i { font-size: 18px; }
.ck-ed .ck-sheet-note { margin-top: -12px; }
.ck-draft-rich { align-items: flex-start; }
.ck-draft-rich > .ck-num { margin-top: 2px; }
.ck-draft-rich .ck-ed-main > .ck-grow { margin: 0; font-weight: 600; }
.ck-draft-rich .ck-ed-main > .ck-grow > textarea, .ck-draft-rich .ck-ed-main > .ck-grow::after { padding: 0; }
.ck-suggested { font-size: 12px; font-weight: 600; color: var(--wk-moss); }
.ck-suggest { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border-radius: 24px; }
.ck-suggest-title { margin: 0; font-size: 17px; font-weight: 600; }
.ck-suggest p { font-size: 14px; color: var(--wk-body); }
.ck-suggest .p-btn { margin-top: 4px; }
.ck-suggest-done { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
.ck-suggest-again { min-height: 36px; font-size: 13px; color: var(--wk-moss); }
/* Tailor your checklist (Figma "Tailor my checklist"), on the page pieces in addtask.css. On
   plan.css and the palette.css tokens, so dark mode follows. */
.ck-packs { padding: 4px 18px; }
.ck-pack + .ck-pack { border-top: 1px solid var(--wk-hair); }
.ck-pack-head { display: flex; align-items: center; gap: 12px; padding: 14px 0 12px; }
.ck-pack-icon.beauty { background: var(--wk-plum-wash); }
.ck-pack-icon.weekend { background: var(--wk-wash); }
/* Tabler draws these glyphs larger in their box than the frame's icons. */
.ck-pack-icon.beauty i { font-size: 14px; }
.ck-pack-icon.weekend i { font-size: 16px; }
.ck-pack-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: normal; }
.ck-pack-title { margin: 0; font-size: 15px; font-weight: 600; }
.ck-pack-offer { margin: 0; font-size: 13px; color: var(--wk-muted); }
.ck-pack-count { margin: 0; font-size: 12px; font-weight: 600; color: var(--wk-moss); }
.ck-pack-items {
  margin: 2px 0 16px; padding: 6px 16px; list-style: none; border-radius: 18px;
  background: color-mix(in srgb, var(--wk-track) 70%, var(--wk-card));
}
.ck-pack-items li + li { border-top: 1px solid var(--wk-hair); }
.ck-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: normal; text-align: left; cursor: pointer;
}
.ck-pick[aria-checked='false'] { color: var(--wk-muted); }
.ck-box {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; box-sizing: border-box; border: 1.5px solid var(--wk-edge);
  border-radius: 7px; background: var(--wk-card); color: transparent;
}
.ck-box i { font-size: 14px; }
.ck-pick[aria-checked='true'] > .ck-box { border-color: var(--wk-olive); background: var(--wk-olive); color: var(--wk-card); }

.ck-tailor .p-label-row .p-label + span { font-size: 13px; font-weight: 600; }
.ck-tailor .p-field { padding: 11px 15px; }
.ck-tailor .p-field-label { font-size: 12px; line-height: normal; }
.ck-tailor .p-field input { min-height: 0; line-height: normal; }
.ck-tailor .p-field input::placeholder { color: var(--wk-muted); }

.ck-pick:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
/* The Plan tab: budget. The Budget sub-tab, Adjust allocation and the budget sheets, from the
   designers' "Ready for dev · Oct 8" Budget frames; Where your money goes and How these numbers
   were set keep the Plan tab's shared pieces. Category hues come from the frames; money status
   (spent, contracted, remaining) has its own rust-to-peach set and never reuses a category hue. A
   hue is never the only way to tell things apart: every slice and bar is named in text. Hint
   text uses --wk-muted rather than the frames' #9A9DB0, which fails AA on white, and fields keep
   the 3:1 --wk-edge outline. */
:root {
  --fin-rose: #c98aa6; --fin-sage: #6f9a7a; --fin-iris: #6c7fae; --fin-ochre: #b89a63; --fin-sky: #6fa6c6;
  --fin-clay: #c4805f; --fin-lilac: #9d8bc6; --fin-teal: #4f8f8a; --fin-sand: #d2b766; --fin-held: #a9a493;
  --fin-spent: #9c4a2e; --fin-contracted: #e39b76; --fin-remaining: #f6e3d6; --fin-track: #f0f0f4; --fin-grey: #9a9db0;
  --fin-grey-wash: #efeff4; --fin-good: #3e7a2a; --fin-good-wash: #e9f4e3; --fin-alert: #a1283c; --fin-alert-wash: #fbe9ec;
  --fin-alert-ink: #7a1f30; --fin-locked: #efebe0; --fin-after: #f7fbe3; --fin-lime-edge: #dde8a0; --fin-slider: #e4e0d3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --fin-rose: #a0738b; --fin-sage: #86b393; --fin-iris: #8798c7; --fin-ochre: #c9ab73; --fin-sky: #84b8d6;
    --fin-clay: #d4936f; --fin-lilac: #b0a0d8; --fin-teal: #68aaa4; --fin-sand: #dcc47c; --fin-held: #8f8a7b;
    --fin-spent: #d27a59; --fin-contracted: #b8775a; --fin-remaining: #4a3a33; --fin-track: #2c3140; --fin-grey: #7a8094;
    --fin-grey-wash: #262c3a; --fin-good: #9fd38a; --fin-good-wash: #24341f; --fin-alert: #f19aab; --fin-alert-wash: #3d2229;
    --fin-alert-ink: #f6c1cb; --fin-locked: #34312a; --fin-after: #252b18; --fin-lime-edge: #4a5520; --fin-slider: #3d4354;
  }
}
[data-theme='dark'] {
  --fin-rose: #a0738b; --fin-sage: #86b393; --fin-iris: #8798c7; --fin-ochre: #c9ab73; --fin-sky: #84b8d6;
  --fin-clay: #d4936f; --fin-lilac: #b0a0d8; --fin-teal: #68aaa4; --fin-sand: #dcc47c; --fin-held: #8f8a7b;
  --fin-spent: #d27a59; --fin-contracted: #b8775a; --fin-remaining: #4a3a33; --fin-track: #2c3140; --fin-grey: #7a8094;
  --fin-grey-wash: #262c3a; --fin-good: #9fd38a; --fin-good-wash: #24341f; --fin-alert: #f19aab; --fin-alert-wash: #3d2229;
  --fin-alert-ink: #f6c1cb; --fin-locked: #34312a; --fin-after: #252b18; --fin-lime-edge: #4a5520; --fin-slider: #3d4354;
}
.fin-hue-ink { --hue: var(--wk-ink); }
.fin-hue-olive { --hue: var(--wk-olive); }
.fin-hue-plum { --hue: var(--wk-plum); }
.fin-hue-rose { --hue: var(--fin-rose); }
.fin-hue-sage { --hue: var(--fin-sage); }
.fin-hue-iris { --hue: var(--fin-iris); }
.fin-hue-ochre { --hue: var(--fin-ochre); }
.fin-hue-sky { --hue: var(--fin-sky); }
.fin-hue-clay { --hue: var(--fin-clay); }
.fin-hue-lilac { --hue: var(--fin-lilac); }
.fin-hue-teal { --hue: var(--fin-teal); }
.fin-hue-sand { --hue: var(--fin-sand); }
.fin-hue-held { --hue: var(--fin-held); }
.fin-hue-misc, .fin-hue-rest { --hue: var(--fin-grey); }

/* Shared bits. */
.fin-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fin-stack { margin-top: 24px; }
.fin-stack-12 { display: flex; flex-direction: column; gap: 12px; }
.fin-stack-16 { display: flex; flex-direction: column; gap: 16px; }
.fin-stack-22 { display: flex; flex-direction: column; gap: 22px; }
.fin-card-label { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--wk-muted); }
.fin-body { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-body); }
.fin-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-status { margin: 0; font-size: 13px; line-height: 1.45; color: var(--wk-body); }
.fin-status:empty { display: none; }
.fin-status.error { color: var(--wk-plum); font-weight: 600; }
.fin-empty { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-body); }
.fin-doors .p-row-title, .fin-doors .p-row-sub { display: block; }
.fin-section-label { margin: 0; font-size: 13px; font-weight: 600; line-height: normal; color: var(--wk-muted); }
.fin-text-link {
  position: relative; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.fin-text-link::after { content: ''; position: absolute; inset: -12px -6px; }
.fin-chev { flex: none; font-size: 18px; color: var(--wk-muted); }

/* Pills: navy, lime (Ask Wickette, the one lime button on the tab) and outline. */
.fin-pill-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 45px; padding: 12px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; line-height: normal; cursor: pointer;
}
.fin-pill-btn.tall { min-height: 50px; font-size: 14px; }
.fin-pill-btn.navy { background: var(--wk-btn); color: var(--wk-on-navy); }
.fin-pill-btn.lime { background: var(--wk-lime); color: var(--wk-on-lime); }
.fin-pill-btn.line { border-color: #cfcfd8; background: var(--wk-card); color: var(--wk-ink); }
.fin-pill-btn:disabled { opacity: .55; cursor: default; }
.fin-pill-btn:active:not(:disabled) { transform: scale(.98); }

/* Cards: white, hairline, soft shadow. */
.fin-page { padding-bottom: 96px; }
.fin-card {
  box-sizing: border-box; width: 100%; margin: 0; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card);
  box-shadow: 0 6px 10px rgba(20, 26, 61, .06); color: var(--wk-ink);
}
.fin-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fin-card-head { margin: 0; font-size: 13px; font-weight: 600; line-height: normal; color: var(--wk-muted); }
.fin-card-hint { font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.fin-icon-disc { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--wk-ink); }
.fin-icon-disc i { font-size: 20px; }
.fin-icon-disc.sm { width: 36px; height: 36px; }
.fin-icon-disc.white { background: var(--wk-card); color: var(--wk-plum); }
.fin-icon-disc.lime { background: var(--wk-wash); }
.fin-icon-disc.plum { background: var(--wk-plum-wash); }

/* How your total is split: the ring, its centre and a slice's pop-up. */
.fin-split { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.fin-donut-area { position: relative; height: 250px; }
.fin-donut { position: absolute; left: 50%; top: 20px; width: 210px; height: 210px; margin-left: -105px; overflow: visible; }
.fin-slice { cursor: pointer; transition: transform .18s ease; }
.fin-slice.actual { fill: var(--hue); stroke: var(--wk-card); stroke-width: 1; }
.fin-slice.est { fill: color-mix(in srgb, var(--hue) 28%, transparent); stroke: var(--hue); stroke-width: 1.5; stroke-dasharray: 5 3; }
.fin-slice.misc { fill: color-mix(in srgb, var(--fin-grey) 12%, transparent); stroke: var(--fin-grey); stroke-width: 1.5; stroke-dasharray: 5 3; }
.fin-slice.buffer { fill: none; stroke: var(--fin-grey); stroke-width: 1.5; stroke-dasharray: 5 3; }
.fin-slice:focus { outline: none; }
.fin-slice:focus-visible { stroke: var(--wk-ink); stroke-width: 3; stroke-dasharray: none; }
.fin-donut-mid {
  position: absolute; left: 50%; top: 125px; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%);
  pointer-events: none; white-space: nowrap;
}
.fin-donut-big { font-family: var(--wk-serif); font-size: 32px; font-weight: 500; line-height: normal; color: var(--wk-ink); }
.fin-donut-cap { font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.fin-pop {
  position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px;
  background: #141b3c; color: #fff; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .18)); white-space: nowrap;
}
.fin-pop.left { left: 0; } .fin-pop.right { right: 0; }
.fin-pop.low { bottom: 0; } .fin-pop.high { top: 0; }
.fin-pop-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.fin-pop-amt { font-family: var(--wk-serif); font-size: 20px; font-weight: 500; }
.fin-pop-note { font-size: 12px; font-weight: 500; color: #c9cbd8; }
.fin-dot { flex: none; display: inline-block; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; background: var(--hue); }
.fin-dot.est { border: 1.5px solid var(--hue); background: color-mix(in srgb, var(--hue) 40%, transparent); }
.fin-dot.grey { width: 12px; height: 12px; border: 1px dashed var(--fin-grey); background: var(--fin-grey-wash); }
.fin-dot.sm { width: 9px; height: 9px; } .fin-dot.xs { width: 8px; height: 8px; }
.fin-pop .fin-dot { width: 8px; height: 8px; }
.fin-kinds { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.fin-kinds > span { display: inline-flex; align-items: center; gap: 6px; }
.fin-kind-swatch { display: inline-block; width: 20px; border-radius: 3px; }
.fin-kind-swatch.actual { height: 10px; background: #5f6377; }
.fin-kind-swatch.est { height: 7px; border: 1.2px dashed #5f6377; background: rgba(95, 99, 119, .15); }

/* Where the total stands: one bar, three parts. */
.fin-stands { display: flex; flex-direction: column; gap: 14px; padding: 18px; font: inherit; text-align: left; cursor: pointer; }
.fin-stands:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.fin-stand-bar { display: flex; gap: 2px; height: 16px; overflow: hidden; border-radius: 8px; background: var(--fin-track); }
.fin-stand-bar > span, .fin-row-bar > span { flex: none; width: var(--w); height: 100%; }
:is(.fin-stand-bar, .fin-row-bar) > .spent, .fin-stand-dot.spent { background: var(--fin-spent); }
:is(.fin-stand-bar, .fin-row-bar) > .contracted, .fin-stand-dot.contracted { background: var(--fin-contracted); }
:is(.fin-stand-bar, .fin-row-bar) > .remaining, .fin-stand-dot.remaining { background: var(--fin-remaining); }
.fin-stand-cols { display: flex; gap: 10px; }
.fin-stand { display: flex; flex: 1 1 0; flex-direction: column; gap: 4px; min-width: 0; }
.fin-stand-name { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--wk-muted); }
.fin-stand-dot { width: 8px; height: 8px; border-radius: 50%; }
.fin-stand-amt { font-family: var(--wk-serif); font-size: 22px; font-weight: 500; line-height: 26px; color: var(--wk-ink); }
.fin-stand-note { font-size: 11.5px; line-height: 16px; color: var(--wk-muted); }

/* Before there's a total. */
.fin-set { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.fin-set-big { margin: 4px 0 0; font-family: var(--wk-serif); font-size: 32px; font-weight: 500; line-height: 1.1; }
.fin-set-body { margin: 0 0 4px; font-size: 14px; line-height: 1.45; color: var(--wk-body); }

/* Ways to save, with the over-budget note on top while the plan runs over. */
.fin-save-ask { display: flex; flex-direction: column; gap: 10px; }
.fin-save-card { overflow: hidden; box-shadow: var(--wk-shadow); }
.fin-over { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-bottom: 1px solid var(--wk-hair); background: var(--wk-plum-wash); }
.fin-over-msg { display: flex; align-items: center; gap: 12px; }
.fin-over-title { display: block; font-size: 15px; font-weight: 600; color: var(--wk-plum); }
.fin-over-why { display: block; margin-top: 2px; font-size: 12.5px; color: var(--wk-body); }
.fin-save-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 14px 14px 16px; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.fin-save-text { flex: 1; min-width: 0; }
.fin-save-title { display: block; font-size: 15px; font-weight: 600; color: var(--wk-ink); }
.fin-save-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--wk-muted); }

/* Categories. */
.fin-cats { display: flex; flex-direction: column; gap: 12px; }
.fin-cats-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fin-rows-card { padding: 4px 18px; list-style: none; }
.fin-row + .fin-row { border-top: 1px solid var(--wk-hair); }
.fin-row-hit {
  display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 13px 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left;
}
button.fin-row-hit { cursor: pointer; }
.fin-row-top { display: flex; align-items: center; gap: 8px; width: 100%; }
.fin-row-name { display: inline-flex; flex: 1; align-items: center; gap: 6px; min-width: 0; font-size: 15px; font-weight: 600; color: var(--wk-ink); overflow-wrap: anywhere; }
.fin-row-lock { font-size: 13px; color: var(--wk-muted); }
.fin-kind {
  flex: none; padding: 1px 6px; border: 1px dashed var(--fin-grey); border-radius: 999px; font-size: 10.5px; font-weight: 600;
  line-height: normal; color: var(--wk-muted);
}
.fin-kind.actual { padding: 2px 7px; border: 0; background: var(--wk-ink); color: var(--wk-paper); }
.fin-row-amt { flex: none; font-family: var(--wk-serif); font-size: 18px; font-weight: 500; color: var(--wk-ink); }
.fin-row-status { display: flex; align-items: center; gap: 8px; padding-left: 20px; }
.fin-pill-tag { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: normal; }
.fin-pill-tag.paid, .fin-pill-tag.booked, .fin-pill-tag.ordered { background: var(--fin-good-wash); color: var(--fin-good); }
.fin-pill-tag.proposal { background: var(--fin-alert-wash); color: var(--fin-alert); }
.fin-pill-tag.not_booked { background: var(--wk-track); color: var(--wk-body); }
.fin-row-detail { flex: 1; min-width: 0; font-size: 12px; color: var(--wk-muted); }
.fin-row-split { display: flex; flex-direction: column; gap: 5px; padding-left: 20px; }
.fin-row-bar { display: flex; height: 6px; overflow: hidden; border-radius: 3px; background: var(--fin-remaining); }
.fin-row-bar:has(> span), .fin-row-bar.empty { background: var(--fin-track); }
.fin-row-note { font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.fin-row-hit:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 8px; }

/* Not in your budget yet, and Add a category. */
.fin-chips { display: flex; flex-direction: column; gap: 10px; }
.fin-chips-lead { margin: 0; font-size: 12.5px; color: var(--wk-muted); }
.fin-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-add-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #cfcfd8; border-radius: 999px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600; line-height: normal; cursor: pointer;
}
.fin-add-chip::after { content: ''; position: absolute; inset: -6px 0; }
.fin-add-chip i { font-size: 13px; }
.fin-add-link {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 44px; padding: 2px 0 0 4px; border: 0; background: none;
  color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.fin-add-link i { font-size: 16px; }

/* The two ways in. */
.fin-ways-in { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fin-ways-cap { margin: 0; font-size: 12px; font-weight: 500; text-align: center; color: var(--wk-muted); }

/* Adjust your allocation. */
.fin-back {
  position: relative; align-self: flex-start; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 14px; font-weight: 500; white-space: pre; cursor: pointer;
}
.fin-back::after { content: ''; position: absolute; inset: -12px -8px; }
.fin-page-title { margin: 0; font-family: var(--wk-serif); font-size: 38px; font-weight: 500; line-height: normal; text-wrap: balance; }
.fin-page-lead { margin: 0; font-size: 13px; line-height: normal; color: var(--wk-muted); }
.fin-buffer { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--wk-wash); }
.fin-buffer.over { background: var(--wk-plum-wash); }
.fin-buffer-sum { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }
.fin-buffer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fin-buffer-label { margin: 0; font-family: var(--wk-serif); font-size: 17px; font-style: italic; font-weight: 500; color: var(--wk-plum); }
.fin-buffer-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--wk-card);
  color: var(--wk-moss); font-size: 12px; font-weight: 600;
}
.fin-buffer-chip i { font-size: 14px; }
.fin-buffer.over .fin-buffer-chip { color: var(--wk-plum); }
.fin-buffer-big { margin: 0; font-family: var(--wk-serif); font-size: 44px; font-weight: 500; line-height: normal; color: var(--wk-ink); }
.fin-buffer.over .fin-buffer-big { color: var(--wk-plum); }
.fin-buffer-meta { margin: 0; font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.fin-buffer-rule { height: 1px; background: color-mix(in srgb, var(--wk-plum) 15%, transparent); }
.fin-buffer-sub { margin: 0; font-size: 12px; font-weight: 600; color: var(--wk-muted); }
.fin-changes { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fin-changes li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.fin-change-text { flex: 1; min-width: 0; color: var(--wk-ink); }
.fin-change-amt { flex: none; white-space: nowrap; }
.fin-change-amt.up { color: var(--wk-plum); } .fin-change-amt.down { color: var(--wk-moss); }
.fin-alloc-card {
  padding: 4px 16px; list-style: none; border-color: color-mix(in srgb, var(--wk-paper) 90%, transparent);
  background: color-mix(in srgb, var(--wk-card) 45%, transparent);
}
.fin-alloc-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.fin-alloc-row + .fin-alloc-row { border-top: 1px solid #eeeae0; }
.fin-alloc-row.total { border-bottom: 1px solid var(--wk-hair); }
.fin-alloc-row.total + .fin-alloc-row { border-top: 0; }
.fin-alloc-line { display: flex; align-items: center; gap: 8px; }
.fin-alloc-name { display: inline-flex; flex: 1; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 500; color: var(--wk-ink); }
.fin-alloc-name.strong { font-weight: 700; }
.fin-lock-filled { flex: none; color: var(--wk-ink); }
.fin-pct {
  flex: none; padding: 4px 10px; border-radius: 10px; background: color-mix(in srgb, var(--wk-card) 55%, transparent);
  font-size: 13px; font-weight: 600; color: var(--wk-ink);
}
.fin-pct.locked { border-radius: 8px; background: var(--fin-locked); color: var(--wk-muted); }
.fin-alloc-plain { flex: none; width: 64px; font-size: 14px; font-weight: 500; text-align: right; }
.fin-alloc-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--wk-muted); }
.fin-unlock {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.fin-unlock::after { content: ''; position: absolute; inset: -14px -6px; }
.fin-unlock i { font-size: 12px; }
.fin-amount {
  display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--wk-edge); border-radius: 10px;
  background: var(--wk-track); cursor: text;
}
.fin-amount input {
  width: 64px; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 600;
  text-align: right; outline: none;
}
.fin-amount i { font-size: 12px; color: var(--wk-muted); }
.fin-amount.on { padding: 5.5px 9.5px; border: 1.5px solid var(--wk-plum); background: var(--wk-card); }
.fin-amount.on input { caret-color: var(--wk-plum); }
.fin-slider {
  --fill: 0%; width: 100%; height: 16px; margin: 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.fin-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--hue) var(--fill), var(--fin-slider) var(--fill)); }
.fin-slider::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--hue) var(--fill), var(--fin-slider) var(--fill)); }
.fin-slider::-webkit-slider-thumb {
  width: 16px; height: 16px; margin-top: -6px; box-sizing: border-box; border: 2px solid var(--hue); border-radius: 50%; background: #fff;
  -webkit-appearance: none; appearance: none;
}
.fin-slider::-moz-range-thumb { width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--hue); border-radius: 50%; background: #fff; }
.fin-slider:focus { outline: none; }
.fin-slider:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.fin-slider:focus-visible::-moz-range-thumb { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.fin-alloc-delta { margin: 0; font-size: 12px; font-weight: 500; color: var(--wk-plum); }
.fin-balance { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--fin-lime-edge); border-radius: 20px; background: var(--wk-card); }
.fin-balance-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--wk-ink); }
.fin-balance-body { margin: -10px 0 0; font-size: 13px; color: var(--wk-body); }
.fin-balance-note { display: flex; gap: 8px; margin: 0; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--wk-muted); }
.fin-balance-note i { flex: none; margin-top: 2px; font-size: 14px; }
.fin-done { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fin-saved { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 500; color: var(--wk-moss); }
.fin-saved i { font-size: 14px; }
.fin-saved.warn { color: var(--wk-plum); }
.fin-done .fin-pill-btn { min-height: 48px; font-size: 15px; }

/* The sheets: Log a payment, Paid to, Category, Inbox, Add a category, Unlock. */
:is(#fin-payment, #fin-paidto, #fin-catpick, #fin-inbox) .p-sheet-top { margin-bottom: 16px; }
:is(#fin-payment, #fin-paidto, #fin-catpick, #fin-inbox) .p-sheet-body { gap: 16px; margin-top: 16px; }
#fin-unlock .p-sheet-top { margin-bottom: 18px; }
#fin-unlock .p-sheet-body { gap: 18px; margin-top: 18px; }
.p-sheet.lite { padding: 10px 20px calc(34px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
.p-sheet.lite .p-sheet-top { margin-bottom: 18px; }
.p-sheet.lite .p-sheet-grip { height: 4px; border-radius: 2px; }
.p-sheet.lite .p-sheet-title { font-size: 31px; line-height: 34px; letter-spacing: -0.62px; }
.p-sheet.lite .p-sheet-lead { margin-top: 18px; font-size: 13px; line-height: 19px; color: var(--wk-body); }
.p-sheet.lite .p-sheet-body { gap: 18px; margin-top: 18px; }
.fin-sheet-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fin-sheet-actions .fin-pill-btn { font-size: 15px; }
.fin-attach { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px dashed #cfcfd8; border-radius: 16px; }
.fin-attach-head { display: flex; align-items: center; gap: 12px; }
.fin-attach-head > i { flex: none; font-size: 18px; color: var(--wk-ink); }
.fin-attach-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; font-weight: 500; }
.fin-attach-title { font-size: 14px; color: var(--wk-ink); }
.fin-attach-sub { font-size: 12px; color: var(--wk-muted); }
.fin-sources { display: flex; gap: 8px; }
.fin-sources button {
  display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 9px 0; border: 0;
  border-radius: 999px; background: var(--wk-track); color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.fin-sources i { font-size: 16px; }
.fin-spin { flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid var(--wk-hair); border-top-color: var(--wk-ink); border-radius: 50%; animation: fin-spin .8s linear infinite; }
@keyframes fin-spin { to { transform: rotate(360deg); } }
.fin-field { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--wk-edge); border-radius: 16px; background: var(--wk-track); }
.fin-field:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.fin-field-label { font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.fin-field input { padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 16px; outline: none; }
.fin-field input::placeholder { color: var(--wk-muted); }
.fin-details { display: flex; flex-direction: column; padding: 4px 16px; border: 1px solid var(--wk-hair); border-radius: 22px; background: var(--wk-card); }
.fin-detail {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; text-align: left; cursor: pointer;
}
.fin-detail + .fin-detail { border-top: 1px solid var(--wk-hair); }
.fin-detail-name { flex: 1; font-size: 15px; font-weight: 500; }
.fin-detail-value { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--wk-body); }
.fin-detail .fin-chev { font-size: 16px; }
.fin-pays-form { display: flex; flex-direction: column; gap: 10px; }
.fin-lines-card { margin: 0; padding: 4px 16px; overflow: hidden; border: 1px solid var(--wk-hair); border-radius: 22px; background: var(--wk-card); list-style: none; }
.fin-line + .fin-line { border-top: 1px solid var(--wk-hair); }
.fin-line-hit {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; text-align: left; cursor: pointer;
}
.fin-line-main { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.fin-pay-tag { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: normal; }
.fin-pay-tag.paid { background: var(--fin-spent); color: #fff; }
.fin-pay-tag.due { border: 1.2px solid var(--fin-contracted); background: var(--wk-card); color: var(--fin-spent); }
.fin-line-amt { font-family: var(--wk-serif); font-size: 26px; font-weight: 500; line-height: normal; }
.fin-line-when { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; font-weight: 500; color: var(--wk-muted); white-space: nowrap; }
.fin-line-when b { font-size: 14px; font-weight: 600; color: var(--wk-body); }
.fin-line-hit .fin-chev { font-size: 16px; }
.fin-line-edit { display: flex; flex-direction: column; gap: 12px; padding: 14px 0; }
.fin-line-edit .p-field select { appearance: none; }
.fin-line-edit-end { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fin-add-pay {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 50px; padding: 14px 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
}
.fin-add-pay i { font-size: 16px; }
.fin-pays-total { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--wk-muted); }
.fin-read { display: flex; flex-direction: column; gap: 10px; }
.fin-read-lead { margin: 2px 0 0; font-size: 12.5px; font-weight: 500; color: var(--wk-muted); }
.fin-read-card { display: flex; flex-direction: column; padding: 8px 16px; border: 1px solid var(--wk-hair); border-radius: 22px; background: var(--wk-card); }
.fin-read-count { margin: 0; font-size: 13px; font-weight: 500; color: var(--wk-muted); }
.fin-read-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.fin-read-row + .fin-read-row { border-top: 1px solid #eeeae0; }
.fin-read-row input {
  min-width: 0; padding: 0; border: 0; border-bottom: 1px dashed transparent; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; outline: none;
}
.fin-read-row input:focus { border-bottom-color: var(--wk-edge); }
.fin-read-row input:not(.amt) { flex: 1; }
.fin-read-amt { display: inline-flex; align-items: baseline; font-size: 13px; color: var(--wk-muted); }
.fin-read-row input.amt { font-size: 13px; color: var(--wk-muted); }
.fin-read-amt:has(input:focus) { color: var(--wk-ink); }
.fin-read-row.total { font-size: 14px; }
.fin-read-row.total span:last-child { font-size: 13px; font-weight: 500; }
.fin-after { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--fin-after); }
.fin-after p { margin: 0; }
.fin-after-title { font-size: 12px; font-weight: 600; color: var(--wk-moss); }
.fin-after .fin-row-bar { background: var(--fin-track); }
.fin-after-line { font-size: 12px; font-weight: 500; color: var(--wk-body); }
.fin-pick { display: flex; flex-direction: column; gap: 16px; }
.fin-pick-card { margin: 0; padding: 4px 16px; border: 1px solid var(--wk-hair); border-radius: 22px; background: var(--wk-card); list-style: none; }
.fin-pick-card li + li { border-top: 1px solid var(--wk-hair); }
.fin-pick-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.fin-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--wk-track); font-size: 13px; font-weight: 600; }
.fin-pick-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.fin-pick-name { flex: 1; font-size: 15px; font-weight: 600; }
.fin-pick-cat { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--wk-muted); overflow-wrap: anywhere; }
.fin-picked { flex: none; font-size: 20px; color: var(--wk-ink); }
.fin-glass-field {
  display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; border: 1px solid var(--wk-edge); border-radius: 18px;
  background: color-mix(in srgb, var(--wk-card) 45%, transparent); box-shadow: 0 6px 10px rgba(20, 26, 61, .06);
}
.fin-glass-field > span { font-size: 13px; font-weight: 500; color: var(--wk-muted); }
.fin-glass-field input { padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 16px; outline: none; }
.fin-glass-field:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.fin-unlock-ask { display: flex; flex-direction: column; gap: 10px; }
.fin-heads-up {
  display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--fin-alert-wash);
  font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--fin-alert-ink);
}
.fin-heads-up i { flex: none; margin-top: 2px; font-size: 16px; color: var(--fin-alert); }
:is(.fin-pill-btn, .fin-save-row, .fin-add-chip, .fin-add-link, .fin-text-link, .fin-back, .fin-unlock, .fin-sources button, .fin-detail, .fin-line-hit, .fin-add-pay, .fin-pick-row):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* Ways to save. */
.fin-back.strong { font-weight: 600; }
.fin-save-titles { display: flex; flex-direction: column; gap: 4px; }
.fin-save-subtitle { margin: 0; font-size: 14px; font-weight: 500; color: var(--wk-muted); }
.fin-more { min-height: 40px; padding: 10px 14px; font-size: 15px; }
.fin-save-sum { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 20px; background: var(--wk-wash); font-weight: 500; }
.fin-save-sum p { margin: 0; }
.fin-save-sum-label { font-family: var(--wk-serif); font-size: 17px; font-style: italic; color: var(--wk-plum); }
.fin-save-sum-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--wk-moss); }
.fin-save-sum-big { font-family: var(--wk-serif); font-size: 34px; color: var(--wk-ink); }
.fin-save-sum-note { font-size: 13px; color: var(--wk-moss); }
.fin-board-link {
  position: relative; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.fin-board-link::after { content: ''; position: absolute; inset: -12px -6px; }
.fin-idea { display: flex; flex-direction: column; gap: 12px; padding: 18px; box-shadow: none; }
.fin-idea p, .fin-idea h3 { margin: 0; }
.fin-idea-top { display: flex; flex-direction: column; gap: 6px; }
.fin-idea-title { font-size: 16px; font-weight: 600; color: var(--wk-ink); }
.fin-idea-text { margin-top: -2px !important; font-size: 13px; color: var(--wk-body); }
.fin-idea-save { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--wk-muted); }
.fin-idea-save b { font-size: 13.5px; font-weight: 700; color: var(--wk-moss); }
.fin-board { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--wk-plum-wash); }
.fin-board-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--wk-plum); }
.fin-board-label i { font-size: 14px; }
.fin-board-tip { font-size: 13px; color: var(--wk-body); }
.fin-idea-links { display: flex; flex-direction: column; gap: 8px; }
.fin-idea-link {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 10px 14px; box-sizing: border-box; border: 1px solid #cfcfd8;
  border-radius: 999px; background: var(--wk-card); color: var(--wk-muted); font: inherit; font-size: 12px; font-weight: 600; text-align: left;
  text-decoration: none; cursor: pointer;
}
.fin-idea-link i { font-size: 14px; }
.fin-idea-link.out { justify-content: space-between; }
.fin-plan-link {
  position: relative; align-self: flex-start; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.fin-plan-link::after { content: ''; position: absolute; inset: -12px -6px; }
.fin-save-empty { margin: 0; padding: 18px; font-size: 14px; line-height: 1.45; color: var(--wk-body); box-shadow: none; }
.fin-worth { display: flex; flex-direction: column; gap: 12px; padding: 18px; box-shadow: none; }
.fin-worth p, .fin-worth h3 { margin: 0; }
.fin-worth-head { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--wk-ink); }
.fin-worth-head i { font-size: 18px; color: var(--wk-plum); }
.fin-worth-lead { font-size: 12.5px; color: var(--wk-muted); }
.fin-worth-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.fin-worth-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--wk-hair); }
.fin-worth-list li:last-child { padding-bottom: 0; }
.fin-worth-name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--wk-ink); }
.fin-worth-badge { padding: 2px 8px; border-radius: 999px; background: var(--wk-plum-wash); color: var(--wk-plum); font-size: 10.5px; font-weight: 600; }
.fin-worth-why { font-size: 12.5px; color: var(--wk-muted); }
:is(.fin-board-link, .fin-idea-link, .fin-plan-link):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* Payments: the ledger on Where your money goes. */
.fin-pays { padding: 4px 18px; }
.fin-pay-head { margin: 14px 0 0; font-size: 12px; font-weight: 600; color: var(--wk-muted); }
.fin-pay-list { margin: 0; padding: 0; list-style: none; }
.fin-pay { padding: 14px 0; border-top: 1px solid var(--wk-hair); }
.fin-pay-list > .fin-pay:first-child { border-top: 0; }
.fin-pay.review { padding-left: 10px; box-shadow: inset 3px 0 0 var(--wk-plum); }
.fin-pay-top { display: flex; align-items: flex-start; gap: 12px; }
.fin-pay-main { flex: 1; min-width: 0; }
.fin-pay-name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.fin-pay.canceled .fin-pay-name { text-decoration: line-through; color: var(--wk-muted); }
.fin-pay-sub { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--wk-muted); }
.fin-pay-amt {
  flex: none; min-height: 44px; margin: -12px 0; padding: 0 2px; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: underline dashed var(--wk-edge); text-underline-offset: 4px; cursor: pointer;
}
.fin-pay-amt.unknown { display: inline-flex; align-items: center; color: var(--wk-plum); text-decoration: none; cursor: default; }
.fin-pay-input {
  width: 110px; min-height: 40px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--wk-edge); border-radius: 12px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 16px; text-align: right;
}
.fin-pay-detail { margin: 8px 0 0; padding: 0; list-style: none; }
.fin-pay-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--wk-body); }
.fin-pay-line-amt { margin-left: auto; color: var(--wk-muted); }
.fin-pay-line.refund { justify-content: flex-end; }
.fin-pay-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.fin-pill, .fin-pays .be-refund {
  position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border: 1px solid var(--wk-stroke);
  border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.fin-pill::after, .fin-pays .be-refund::after { content: ''; position: absolute; inset: -4px 0; }
.fin-pill i { font-size: 15px; }
.fin-pill.on { border-color: var(--wk-wash); background: var(--wk-wash); color: var(--wk-moss); }
.fin-pays .pay-status { padding: 3px 10px; border-radius: 999px; background: var(--wk-wash); color: var(--wk-moss); font-size: 12px; font-weight: 600; }
.fin-pays .pay-status.partially_refunded { background: var(--wk-sand); color: var(--wk-on-sand); }
.fin-pays .pay-status.refunded { background: var(--wk-track); color: var(--wk-body); }
:is(.fin-pill, .fin-pays .be-refund, .fin-pay-amt):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* How these numbers were set: rows of label and amount, a city preview, hidden categories. */
.fin-rows { padding: 8px 16px; }
.fin-rows > .fin-card-label { padding-top: 4px; }
.fin-rows ul, .fin-rows-list { margin: 0; padding: 0; list-style: none; }
.fin-rows li, .fin-rows-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--wk-hair);
  font-size: 14px; color: var(--wk-ink);
}
.fin-rows li:first-child { border-top: 0; }
.fin-rows li > span:last-child, .fin-rows-list li > span:last-child { font-size: 13px; color: var(--wk-muted); text-align: right; white-space: nowrap; }
.fin-rows li > span.yours { color: var(--wk-moss); font-weight: 600; }
.fin-rows li > span.hot { color: var(--wk-plum); font-weight: 600; }
.fin-city-form { display: flex; align-items: flex-end; gap: 8px; }
.fin-city-form .p-field { flex: 1; }
.fin-stack-tight { display: flex; flex-direction: column; gap: 12px; }
.fin-preview { display: flex; flex-direction: column; gap: 6px; }
.fin-preview-big { margin: 0; font-family: var(--wk-serif); font-size: 28px; font-weight: 500; line-height: 1.15; }
.fin-hidden { display: flex; flex-direction: column; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .fin-slice { transition: none; }
  .fin-spin { animation-duration: 2.4s; }
}
/* The Plan tab's profile area, from the designers' frames (2026-10-06): the Profile, Privacy and
   terms, the Invite and wedding-fact sheets and the Inbox screens. Built on plan.css; tokens only,
   so dark mode follows. */

/* Shared: a column of sections, plain lists on the white page, label | value | chevron rows. */
.pf-stack { display: flex; flex-direction: column; gap: 30px; margin-top: 28px; }
.pf-section { display: flex; flex-direction: column; gap: 4px; }
/* Notifications takes focus when an email's Notification Settings link opens the Profile; a heading needs no ring. */
.pf-section > .p-label:focus { outline: none; scroll-margin-top: 16px; }
.pf-section[hidden] { display: none; }
.pf-section > .p-label + .p-btns, .pf-section > .p-label + .p-field { margin-top: 8px; }
.pf-lead { margin: 0 0 4px; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.pf-list { padding: 0; }
.pf-list > li:first-child > .p-row { border-top: 0; }
.pf-fact { min-height: 48px; padding: 13px 0; }
.pf-key { flex: none; width: 104px; font-size: 14px; color: var(--wk-muted); }
.pf-val {
  flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--wk-ink); overflow-wrap: anywhere;
}
.pf-val.empty { color: var(--wk-muted); }
.pf-chev { flex: none; font-size: 16px; color: var(--wk-ink); }
.pf-person { padding: 13px 0; }
.pf-stack .p-row-main > span { display: block; }
.pf-signout { font-size: 15px; font-weight: 600; color: var(--wk-muted); cursor: pointer; }
.pf-gap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 8px 0 4px; }
.pf-gap .p-callout-label { margin: 0; }
.pf-form { display: flex; flex-direction: column; gap: 14px; }
.pf-form .p-callout-label { margin: 0 0 4px; }
.pf-stack a.p-row { text-decoration: none; cursor: pointer; }
.pf-stack .p-row-end i { color: var(--wk-muted); }
:is(.pf-who, .ib-change, .pf-stack a.p-row):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}

/* The Profile, to the frame: the header (names, date and place, countdown), then rows of 13px
   padding with the frame's line heights, a muted 16px chevron and 36px gray discs. */
#s-account .p-back { margin-bottom: 30px; }
.pf-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pf-names { margin: 0; font-family: var(--wk-serif); font-size: 38px; line-height: 44px; font-weight: 500; text-wrap: balance; }
.pf-names em { font-style: italic; color: var(--wk-plum); }
.pf-when { margin: 0; font-size: 14px; font-weight: 500; line-height: normal; color: var(--wk-muted); }
.pf-count {
  margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--wk-track); color: var(--wk-body);
  font-size: 12px; font-weight: 600; line-height: normal;
}
.pf-hero + .pf-stack { margin-top: 30px; }
#s-account .pf-lead { margin-bottom: 0; }
#s-account :is(.pf-fact, .pf-link) { min-height: 0; padding: 13px 0; }
#s-account :is(.pf-key, .pf-val, .p-row-title) { line-height: normal; }
#s-account .p-row-sub { line-height: 18px; }
#s-account .pf-chev { color: var(--wk-muted); line-height: 1; }
#s-account .p-icon-disc { color: var(--wk-body); }
.pf-who {
  display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; border-radius: 12px;
  background: none; color: inherit; font: inherit; text-align: left;
}
button.pf-who { cursor: pointer; }
.pf-avatar {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%;
  background: var(--wk-track); color: var(--wk-ink); font-size: 13px; font-weight: 600; line-height: normal;
}
.pf-avatar.add { border: 1px dashed var(--wk-edge); background: none; color: var(--wk-body); }
.pf-avatar.add i { font-size: 16px; }
/* The pills and switches keep the frame's size and get a 44px tap area around them. */
.pf-person .p-btn.sm { position: relative; }
.pf-person .p-btn.sm::after { content: ''; position: absolute; inset: -5px 0; }
.pf-notify .p-switch::before { content: ''; position: absolute; inset: -10px -4px; }
#pf-gmail .p-row-sub + .p-row-sub { margin-top: 0; }

/* Privacy and terms: the build row turns plum when a newer version is waiting. */
.st-stale { color: var(--wk-plum); font-weight: 600; }

/* Invite someone and Change access, to their frames (Oct 13): filled fields (with the 3:1 outline),
   the two level cards (only the picked one opens, navy-edged), the Access budget card, and the
   grey Send invite until there's an email and a level. */
.iv-form { display: flex; flex-direction: column; gap: 28px; }
.iv-group { display: flex; flex-direction: column; gap: 10px; }
.iv-group > .p-error { margin: 0; }
.iv-label { margin: 0 0 2px; font-size: 15px; font-weight: 600; line-height: normal; color: var(--wk-muted); }
.iv-form .p-field { padding: 11px 15px; }
.iv-form .p-field-label { font-size: 12px; line-height: normal; }
.iv-form .p-field input { min-height: 0; line-height: normal; }
.iv-form .p-field input::placeholder { color: var(--wk-muted); opacity: 1; }
.iv-levels { display: flex; flex-direction: column; gap: 12px; }
.iv-level {
  border: 1px solid var(--wk-stroke); border-radius: 20px; background: var(--wk-card); box-shadow: 0 6px 10px rgba(20, 26, 61, .04);
}
.iv-level.on { border-color: var(--wk-ink); box-shadow: 0 0 0 .5px var(--wk-ink); }
.iv-level-pick { display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: var(--wk-ink); cursor: pointer; }
.iv-level:has(.iv-radio-input:focus-visible) { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.iv-radio-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.iv-level-pick .p-row-main > span { display: block; }
.iv-level-title { font-size: 15px; font-weight: 600; line-height: normal; }
.iv-level-sub { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--wk-body); }
.iv-radio { flex: none; width: 22px; height: 22px; box-sizing: border-box; border: 1.5px solid var(--wk-edge); border-radius: 50%; }
.iv-level.on .iv-radio { border: 1.5px solid var(--wk-btn); background: radial-gradient(circle, var(--wk-btn) 5px, var(--wk-card) 5.5px); }
.iv-level-more { display: flex; flex-direction: column; gap: 8px; margin: 0 18px; padding: 14px 0 18px; border-top: 1px solid var(--wk-hair); }
.iv-list-head { margin: 4px 0 0; font-size: 12px; font-weight: 600; line-height: normal; color: var(--wk-muted); }
.iv-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.iv-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 19px; color: var(--wk-ink); }
.iv-list i { flex: none; font-size: 16px; line-height: 19px; color: var(--wk-ink); }
.iv-list.off li, .iv-list.off i { color: var(--wk-muted); }
.iv-level-foot { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--wk-body); }
.iv-budget {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--wk-hair); border-radius: 20px;
  background: var(--wk-card); box-shadow: 0 6px 10px rgba(20, 26, 61, .04);
}
.iv-budget-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: normal; color: var(--wk-ink); }
.iv-budget-line { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-body); }
.iv-budget-line strong { font-weight: 600; color: var(--wk-ink); }
.iv-budget .p-switch { position: relative; }
.iv-budget .p-switch::before { content: ''; position: absolute; inset: -10px -4px; }
.iv-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.iv-actions .p-btn { gap: 8px; min-height: 48px; }
.iv-actions .p-btn i { font-size: 18px; }
.iv-actions .p-btn:disabled { opacity: 1; border-color: var(--wk-track); background: var(--wk-track); color: var(--wk-muted); cursor: default; }
.iv-actions > .p-error { margin: 0; text-align: center; }
.iv-foot { margin: 0; font-size: 12px; line-height: normal; color: var(--wk-muted); text-align: center; }
.iv-only { margin: 0; font-size: 15px; line-height: 1.45; color: var(--wk-body); }

/* Invite sent: a lime tick over the title, and a sample task carrying their initials. */
.iv-sent-tick {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%;
  background: var(--wk-lime); color: var(--wk-on-lime);
}
.iv-sent-tick i { font-size: 24px; }
.iv-sample { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; padding: 16px; border-radius: 20px; background: var(--wk-ground); }
.iv-sample-head { margin: 0; font-size: 14px; font-weight: 600; color: var(--wk-ink); }
.iv-sample-task { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--wk-hair); border-radius: 14px; background: var(--wk-card); }
.iv-sample-task .p-row-main > span { display: block; }
.iv-sample-check { flex: none; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid var(--wk-edge); border-radius: 50%; }
.iv-sample-text { font-size: 15px; font-weight: 500; color: var(--wk-ink); }
.iv-sample-due { margin-top: 2px; font-size: 12px; color: var(--wk-muted); }
.iv-sample-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--wk-body); }

/* Change access: what they've done (rows into each tab) and the plum way to remove them. */
.ca-done { padding: 0 18px; }
.ca-done-row { padding: 14px 0; }
.ca-done-row:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.ca-remove { min-height: 44px; margin: -6px 0 -12px; font-size: 13px; color: var(--wk-plum); }
.pf-bad { color: var(--wk-plum); }

/* A connection's error line under its row (Gmail, Pinterest). */
.ib-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--wk-muted); }
.ib-note.bad { color: var(--wk-plum); }
.ib-note:empty { display: none; }


/* Notifications: how they reach this person (iPhone, email) and which address the emails go to. */
.pf-sublabel { margin-top: 18px; }
.pf-choice:disabled { cursor: default; }
.pf-choice:disabled .p-row-title { color: var(--wk-muted); }

/* Your Pinterest boards (the Pinterest row's Change): no frame, so the Profile's own pieces. A list of
   boards to tick, each with its cover as Pinterest serves it, then Save, and the account below. */
#pf-pinterest-notice { margin: 4px 0 0; }
.pn-form { display: flex; flex-direction: column; gap: 18px; }
.pn-boards { margin: 0; padding: 0; border: 0; min-width: 0; }
.pn-legend { padding: 0; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--wk-muted); }
.pn-boards .p-list { max-height: 46vh; overflow-y: auto; padding: 0; }
.pn-board { gap: 12px; padding: 10px 0; cursor: pointer; }
.pn-boards li:first-child > .pn-board { border-top: 0; }
.pn-board input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--wk-ink); cursor: pointer; }
.pn-board input:disabled, .pn-board:has(input:disabled) { cursor: not-allowed; }
.pn-board:has(input:focus-visible) { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 8px; }
.pn-cover { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--wk-track); }
.pn-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; font-size: 14px; color: var(--wk-body); }
.pn-account { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 16px; border-top: 1px solid var(--wk-hair); }
.pn-account .p-link { font-size: 14px; }
.pn-disconnect { color: var(--wk-plum); }
.pn-note { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
/* The Inspiration board (Figma "Inspiration board", 367:3910). On plan.css and the palette.css
   tokens, so dark mode follows. Small controls keep the frame's size and take a 44px hit area. */
.vb-page { display: flex; flex-direction: column; gap: 28px; }
.vb-back {
  align-self: flex-start; min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; font-size: 15px; font-weight: 500; line-height: normal; white-space: pre; cursor: pointer;
}
.vb-head { display: flex; flex-direction: column; gap: 4px; }
.vb-head .p-title { margin: 0; line-height: normal; }
.vb-head .p-lead { line-height: 1.4; }

/* Your style. */
.vb-style {
  display: flex; flex-direction: column; gap: 16px; padding: 18px; border: 1px solid var(--wk-hair); border-radius: 22px;
  background: var(--wk-card); box-shadow: var(--wk-shadow);
}
.vb-style-head, .vb-palette { display: flex; align-items: center; gap: 12px; }
.vb-style-head { justify-content: space-between; }
.vb-label { margin: 0; font-size: 13px; font-weight: 600; line-height: normal; color: var(--wk-muted); }
.vb-link {
  position: relative; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px;
  font-weight: 600; line-height: normal; text-decoration: underline; text-underline-position: from-font; cursor: pointer;
}
.vb-link::before { content: ''; position: absolute; inset: -13px -10px; }
.vb-palette .vb-link { margin-left: auto; }
.vb-style-text { margin: 0; font-size: 16px; font-weight: 500; line-height: 23px; color: var(--wk-ink); }
.vb-note { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.vb-unread { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.vb-unread-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-body); }
.vb-form { display: flex; flex-direction: column; gap: 12px; }
.vb-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vb-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px 7px 12px; border-radius: 999px;
  background: var(--wk-track); color: var(--wk-ink); font-size: 13px; font-weight: 500; line-height: normal;
}
.vb-tag-x {
  position: relative; display: grid; place-items: center; width: 14px; height: 14px; padding: 0; border: 0; background: none;
  color: var(--wk-muted); cursor: pointer;
}
.vb-tag-x::before { content: ''; position: absolute; inset: -15px; }
/* The frame's icons are 2px strokes at 14px; the webfont's are 1.2px at that size. */
.vb-tag-x i, .vb-tag-add i { font-size: 14px; -webkit-text-stroke: .8px currentColor; }
.vb-tag-add {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px 6px 10px;
  border: 1px dashed var(--wk-edge); border-radius: 999px; background: none; color: var(--wk-body); font: inherit;
  font-size: 13px; font-weight: 500; line-height: normal; cursor: pointer;
}
.vb-tag-add::before { content: ''; position: absolute; inset: -7px 0; }
.vb-tag-add:disabled { opacity: .5; cursor: default; }
.vb-tag-form { display: flex; align-items: center; gap: 6px; }
.vb-tag-form input {
  width: 150px; min-height: 36px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--wk-edge); border-radius: 999px;
  background: var(--wk-track); color: var(--wk-ink); font: inherit; font-size: 14px;
}
.vb-tag-form input:focus { outline: 2px solid var(--wk-ink); outline-offset: 1px; }
.vb-swatches { display: flex; gap: 6px; }
.vb-swatch { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }

/* The board: a count, the two ways in, then two masonry columns in the frame's height rhythm. */
.vb-board { display: flex; flex-direction: column; gap: 14px; }
.vb-count { margin: 0; font-size: 13px; font-weight: 500; line-height: normal; color: var(--wk-muted); }
.vb-actions { display: flex; gap: 10px; }
.vb-btn {
  display: inline-flex; flex: 1 1 0; min-width: 0; align-items: center; justify-content: center; gap: 6px; padding: 12px;
  border: 1px solid var(--wk-stroke); border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit;
  font-size: 14px; font-weight: 600; line-height: normal; white-space: nowrap; cursor: pointer;
}
.vb-btn i { font-size: 16px; -webkit-text-stroke: .4px currentColor; }
@media (max-width: 374px) { .vb-btn { padding-inline: 8px; white-space: normal; } }
.vb-progress { margin: 0; font-size: 13px; color: var(--wk-muted); }
.vb-progress:empty { display: none; }
.vb-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1px; grid-auto-flow: dense; column-gap: 10px;
  margin: 0 0 -10px; padding: 0; list-style: none;
}
.vb-tile {
  position: relative; grid-column: 1; grid-row-end: span 180; height: 170px; box-sizing: border-box; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--wk-card) 90%, transparent); border-radius: 20px; background: var(--wk-track);
}
.vb-tile:nth-child(even) { grid-column: 2; }
.vb-tile:is(:nth-child(8n+1), :nth-child(8n+4)) { grid-row-end: span 240; height: 230px; }
.vb-tile:is(:nth-child(8n+5), :nth-child(8n+8)) { grid-row-end: span 220; height: 210px; }
.vb-tile:is(:nth-child(8n+6), :nth-child(8n+7)) { grid-row-end: span 160; height: 150px; }
.vb-open {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.vb-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vb-card { border-color: var(--wk-hair); background: var(--wk-card); }
.vb-card-body {
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 16px 14px 48px; box-sizing: border-box;
  color: var(--wk-ink);
}
.vb-card-body > i { font-size: 24px; }
.vb-card-text {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; padding-bottom: 4px;
  font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: break-word;
}
.vb-card-note { font-size: 12px; color: var(--wk-muted); }
.vb-source {
  position: absolute; left: 9px; bottom: 9px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--wk-card) 90%, transparent);
  border-radius: 999px; background: color-mix(in srgb, var(--wk-card) 75%, transparent); box-shadow: 0 2px 4px rgba(20, 26, 61, .05);
  color: var(--wk-ink); font-size: 11px; font-weight: 500; line-height: normal;
}
/* The × at a tile's top right: the source tag's frosted look, a 44px target around a 28px circle. */
.vb-remove {
  position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--wk-ink); cursor: pointer;
}
.vb-remove i {
  display: grid; place-items: center; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; font-size: 14px;
  border: 1px solid color-mix(in srgb, var(--wk-card) 90%, transparent); background: color-mix(in srgb, var(--wk-card) 75%, transparent);
  box-shadow: 0 2px 4px rgba(20, 26, 61, .05);
}
.vb-remove:disabled { opacity: .5; cursor: wait; }
.vb-remove:focus-visible { outline: none; }
.vb-remove:focus-visible i { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.vb-placeholder { border: 1px dashed var(--wk-edge); background: var(--wk-card); }
.vb-count:focus { outline: none; }
.vb-tag-x:disabled { opacity: .5; cursor: wait; }
:is(.vb-back, .vb-link, .vb-tag-x, .vb-tag-add, .vb-btn):focus-visible, .vb-tile:has(> .vb-open:focus-visible) {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}
.vb-open:focus-visible { outline: none; }

/* One upload in the sheet a tile opens. */
.vb-sheet-img {
  display: block; max-width: 100%; max-height: 56vh; margin: 0 auto; border: 1px solid var(--wk-hair); border-radius: 20px;
}
.vb-sheet-actions { display: flex; flex-direction: column; gap: 10px; }
.vb-sheet-actions a.p-btn { text-decoration: none; }
/* Notifications (Figma "Notifications" and the Overview's "Since you were last here"): a glass
   back button and Mark all as read pill, the serif title and one list. Unread rows have a
   semibold title and a plum dot; read ones a medium title. On plan.css and the palette.css
   tokens, so dark mode follows. */
.nt-page { display: flex; flex-direction: column; gap: 20px; }
.nt-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.nt-page .p-hello:focus { outline: none; }
.nt-mark {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--wk-paper); border-radius: 999px;
  background: color-mix(in srgb, var(--wk-paper) 60%, transparent); box-shadow: 0 2px 8px rgba(20, 26, 61, .05);
  color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.nt-empty { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-muted); }

.nt-list { margin: 0; padding: 0; list-style: none; }
.nt-list > li + li > .nt-row { border-top: 1px solid var(--wk-hair); }
.nt-row { border-top: 0; cursor: pointer; }
.nt-row .p-row-title, .nt-row .p-row-sub { display: block; }
.nt-row .p-row-title { font-weight: 500; }
.nt-row.unread .p-row-title { font-weight: 600; }
.nt-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; align-self: center; }
.nt-meta time { font-size: 12px; line-height: 1.35; color: var(--wk-muted); white-space: nowrap; }
.nt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wk-plum); }

.ov-since { gap: 4px; }
/* The one-time tips (Figma "Tip · …" frames, shell/tabcoach.tsx): a navy dim with a hole where the
   ring is, a 3px lime ring, a lime tap dot in its halo, and a white card 18px off the ring. The
   layer is a manual popover, so it takes the whole viewport in the top layer; only the dim and the
   card catch taps, and the hole lets them through to the control. Line heights are pinned: Chrome
   draws Manrope's `normal` a pixel taller than Figma. */
.tip-layer {
  position: fixed; inset: 0; z-index: 200; width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: visible; background: transparent; color: var(--wk-ink);
  pointer-events: none; touch-action: none; animation: tip-in .2s ease both;
}
.tip-layer.out { opacity: 0; transition: opacity .2s ease; }
.tip-layer.out * { pointer-events: none !important; }
.tip-dim { position: absolute; inset: 0; display: block; pointer-events: none; }
.tip-dim path { fill: rgba(20, 27, 60, .6); pointer-events: auto; }

.tip-ring {
  position: absolute; box-sizing: border-box; border: 3px solid var(--wk-lime); pointer-events: none;
  animation: tip-ring 2s ease-in-out infinite;
}
.tip-halo, .tip-dot { position: absolute; box-sizing: border-box; border-radius: 50%; pointer-events: none; }
.tip-halo { width: 34px; height: 34px; background: rgba(207, 232, 58, .35); animation: tip-halo 2s ease-in-out infinite; }
.tip-dot { width: 14px; height: 14px; border: 2px solid #fff; background: var(--wk-lime); }

.tip-card {
  position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  border-radius: 20px; background: var(--wk-card); box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  font-family: var(--wk-sans); text-align: left; overflow-wrap: break-word; pointer-events: auto; outline: none;
}
.tip-title { margin: 0; font-family: var(--wk-serif); font-size: 24px; line-height: 29px; font-weight: 500; color: var(--wk-ink); }
.tip-body { margin: 0; font-size: 14px; line-height: 19px; font-weight: 400; color: var(--wk-muted); }
.tip-action { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--wk-moss); }

@keyframes tip-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tip-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(207, 232, 58, .35); }
  50% { box-shadow: 0 0 0 7px rgba(207, 232, 58, 0); }
}
@keyframes tip-halo {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .tip-layer, .tip-ring, .tip-halo { animation: none; }
}
/* The Account page: the person's own login (plan, name, email, phone, password and sign-in) and
   deleting the account. No frame of its own, so it reads like the Profile frame: 13px section
   labels, plain rows on the white page with a 104px label column and hairlines between. On
   plan.css and the palette.css tokens, so dark mode follows. */
.ac-page { display: flex; flex-direction: column; gap: 30px; }
.ac-page > .p-back { margin: 0; }
.ac-head .p-title { margin: 0 0 6px; }
.ac-lead { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-body); }
.ac-section { display: flex; flex-direction: column; gap: 4px; }
.ac-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--wk-muted); }
.ac-list { margin: 0; padding: 0; list-style: none; }
.ac-list > li + li > .ac-row { border-top: 1px solid var(--wk-hair); }
.ac-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 13px 0; box-sizing: border-box;
  border: 0; background: none; color: var(--wk-ink); font: inherit; text-align: left;
}
button.ac-row { cursor: pointer; }
.ac-key { flex: none; width: 104px; font-size: 14px; color: var(--wk-muted); }
.ac-val { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.ac-val.empty { color: var(--wk-muted); }
.ac-note { font-size: 12px; font-weight: 400; line-height: 17px; color: var(--wk-muted); }
.ac-chev { flex: none; font-size: 16px; color: var(--wk-ink); }
.ac-end { margin-top: -6px; }
.ac-delete-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-delete-title { font-size: 15px; font-weight: 600; color: var(--wk-plum); }
.ac-leave-title { color: var(--wk-ink); }
.ac-delete-sub { font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.ac-form { display: flex; flex-direction: column; gap: 12px; }
.p-btn.ac-danger { border-color: var(--wk-plum); background: var(--wk-plum); color: var(--wk-paper); }
.ac-row:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
/* Talk to Wickette, from the designers' "Talk to Wickette" frames on the palette.css tokens: the full
   screen (11:1034, #s-braindump) and the sheet over the current screen (68:2718, #chat-sheet) share
   one conversation; Past chats (638:4476) is #s-pastchats. Frame values are kept as written: 34px mark
   and header buttons, lime bubbles with an 18/18/4/18 corner, serif replies at 21/30, outlined 14px
   suggestions. Two deliberate departures: the ask bar's edge is --wk-edge (3:1, WCAG 1.4.11, decided
   2026-10-05), and Past chats' lighter gray (#9a9db0) is --wk-muted, which the frame's would fail AA
   at 12-14px. Manrope line heights are pinned in px: Chrome draws "normal" 1px taller than Figma. */
.viewport:has(> :is(#s-braindump, #s-pastchats).active) { background: var(--wk-paper); }
#s-braindump { height: 100%; padding: 0; }
.cx { display: flex; flex-direction: column; color: var(--wk-ink); font-family: var(--wk-sans); }
#s-braindump .cx { height: 100%; max-width: 680px; margin: 0 auto; }
:where(#s-braindump, #chat-sheet) button { font: inherit; }

/* The header: the mark and name, then the round tools and close. */
.cx-head { flex: none; display: flex; align-items: center; gap: 10px; }
#s-braindump .cx-head { padding: calc(13px + env(safe-area-inset-top)) 20px 0; }
.cx-disc {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wk-lime); color: var(--wk-on-lime);
}
.cx-mark { transform: translateY(.84px); }
.cx-name { flex: 1; margin: 0; font-family: var(--wk-serif); font-size: 22px; font-weight: 600; line-height: 27px; letter-spacing: -.22px; color: var(--wk-ink); }
.cx-tools { flex: none; display: flex; align-items: center; gap: 12px; }
.cx-icon {
  flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--wk-track); color: var(--wk-ink); font-size: 18px; cursor: pointer;
}
.cx-icon[aria-pressed='false'] { color: var(--wk-muted); }
/* The close glyph keeps the frame's spot; the padding only widens what a finger can hit. */
.cx-x {
  padding: 8px; margin: -8px; border: 0; background: none; color: var(--wk-muted); font-size: 18px; line-height: 25px; cursor: pointer;
}

/* The conversation scrolls only between the header and the ask bar. */
.cx-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cx-thread { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
#s-braindump .cx-thread { padding: 14px 20px 16px; }
.cx-day { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.cx-about {
  margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--wk-track);
  font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-ink);
}
.cx-you {
  max-width: min(288px, 82%); box-sizing: border-box; padding: 12px 14px; border-radius: 18px 18px 4px 18px; background: var(--wk-wash);
  color: var(--wk-ink); font-size: 15px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.cx-reply {
  max-width: 100%; font-family: var(--wk-serif); font-size: 21px; line-height: 30px; font-weight: 500; color: var(--wk-ink);
  overflow-wrap: anywhere;
}
.cx-reply p { margin: 0; }
.cx-reply :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 10px; }
.cx-reply :is(ul, ol) { margin: 0; padding-left: 22px; }
.cx-reply li + li { margin-top: 4px; }
.cx-reply strong { font-weight: 700; }
.cx-ask { font-style: italic; color: var(--wk-plum); }
.cx-wait { color: var(--wk-muted); font-style: italic; }
.cx-suggest { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cx-chip {
  max-width: 100%; padding: 12px 14px; border-radius: 999px; border: 1px solid var(--wk-grip); background: transparent;
  color: var(--wk-ink); font-size: 14px; font-weight: 500; line-height: 19px; text-align: left; cursor: pointer;
  transition: background-color .15s, transform .12s;
}
.cx-chip:hover:not(:disabled) { background: var(--wk-track); }
.cx-chip:active:not(:disabled) { transform: scale(.97); }
.cx-chip:disabled { opacity: .6; cursor: default; }

/* The web pages a reply cited. */
.cx-sources { margin-top: -4px; font-size: 13px; line-height: 18px; }
.cx-sources-title { margin: 0 0 4px; font-weight: 600; color: var(--wk-muted); }
.cx-sources ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.cx-sources a { color: var(--wk-ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.cx-domain { color: var(--wk-muted); }

/* "Was this helpful?", once a chat. */
.cx-thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.cx-thumb {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--wk-track); color: var(--wk-ink); font-size: 18px; cursor: pointer;
}
.cx-share {
  min-height: 36px; padding: 0 14px; border: 1px solid var(--wk-grip); border-radius: 999px; background: none;
  color: var(--wk-ink); font-size: 13px; font-weight: 600; cursor: pointer;
}
.cx-thumbs-done { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }

/* The ask bar: attach on the left (full screen), the microphone kept, send on the right. It sits
   above the 72px tab bar, clear of the raised Ask Wickette button. */
#s-braindump .cx-dock { flex: none; padding: 10px 20px calc(101px + env(safe-area-inset-bottom)); }
.cx-hint { margin: 0 6px 8px; font-size: 13px; line-height: 18px; color: var(--wk-body); }
.cx-hint:empty { margin: 0; }
.cx-composer {
  display: flex; align-items: flex-end; gap: 2px; padding: 6px; border: 1px solid var(--wk-edge); border-radius: 28px;
  background: var(--wk-card); box-shadow: 0 2px 4px rgba(20, 26, 61, .05);
}
.cx-composer.bare { padding-left: 18px; }
.cx-composer:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.cx-composer textarea {
  flex: 1; min-width: 0; min-height: 44px; max-height: 132px; box-sizing: border-box; padding: 12px 8px; border: 0; background: transparent;
  resize: none; overflow-y: auto; font: inherit; font-size: 15px; line-height: 20px; color: var(--wk-ink); outline: none;
}
.cx-composer.bare textarea { padding-left: 0; }
.cx-composer textarea::placeholder { color: var(--wk-muted); }
:is(.cx-attach, .cx-mic) {
  flex: none; width: 36px; height: 36px; margin: 4px 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  font-size: 18px; cursor: pointer;
}
.cx-attach { background: var(--wk-track); color: var(--wk-ink); }
.cx-mic { background: none; color: var(--wk-muted); }
.cx-mic:hover { color: var(--wk-ink); }
.cx-mic.on { background: var(--wk-plum-wash); color: var(--wk-plum); }
.cx-send {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--wk-btn); color: var(--wk-on-navy); font-size: 16px; font-weight: 600; line-height: 22px; cursor: pointer;
}
.cx-later {
  display: block; min-height: 40px; margin: 8px auto 0; padding: 0 8px; border: 0; background: none;
  font-size: 13px; color: var(--wk-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
:is(.cx-icon, .cx-x, .cx-chip, .cx-attach, .cx-mic, .cx-send, .cx-later, .cx-thumb, .cx-share, .cs-expand, .cx-sources a, .cx-check):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}
.viewport:has(> #s-braindump.active) ~ #checklist-breadcrumb { bottom: calc(176px + env(safe-area-inset-bottom)) !important; }

/* ---- The sheet: a grip, Expand and close, the conversation, then the ask bar ---- */
.cs-sheet {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 480px; height: calc(100dvh - 204px); min-height: min(420px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px); margin: 0 auto; padding: 10px 20px calc(28px + env(safe-area-inset-bottom)); box-sizing: border-box;
  overflow: hidden; border: 0; border-radius: 24px 24px 0 0; background: var(--wk-paper); color: var(--wk-ink);
}
.cs-sheet::backdrop { background: rgba(20, 27, 60, .4); }
.cs-sheet[open] { animation: p-sheet-in .24s cubic-bezier(.2, .8, .2, 1); }
.cs-body { height: 100%; gap: 18px; }
.cs-grip-row { flex: none; display: flex; justify-content: center; }
.cs-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--wk-grip); }
.cs-tools { gap: 16px; }
.cs-expand {
  padding: 10px 0; margin: -10px 0; border: 0; background: none; color: var(--wk-ink); font-size: 13px; font-weight: 500; line-height: 18px;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.cs-sheet .cx-thread { gap: 18px; padding-bottom: 2px; }
.cs-sheet .cx-day { display: none; }
.cs-dock { flex: none; }

/* ---- Past chats ---- */
#s-pastchats .pc { display: flex; flex-direction: column; gap: 24px; max-width: 640px; margin: 0 auto;
  padding: calc(13px + env(safe-area-inset-top)) 20px 104px; color: var(--wk-ink); font-family: var(--wk-sans); }
#s-pastchats .p-back { margin: 0; box-shadow: 0 2px 8px rgba(20, 26, 61, .05); }
.pc-head { display: flex; flex-direction: column; gap: 8px; }
.pc-title { margin: 0; font-family: var(--wk-serif); font-size: 38px; font-weight: 500; line-height: 46px; }
.pc-sub { margin: 0; font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-muted); }
.pc-search {
  display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; background: var(--wk-track);
  color: var(--wk-muted); font-size: 16px;
}
.pc-search input {
  flex: 1; min-width: 0; height: 43px; padding: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 14px; line-height: 19px; color: var(--wk-ink);
}
.pc-search input::placeholder { color: var(--wk-muted); }
.pc-search:focus-within { box-shadow: 0 0 0 2px var(--wk-ink); }
.pc-empty { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-muted); }
.pc-group { display: flex; flex-direction: column; gap: 12px; }
.pc-group-title { margin: 0; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-muted); }
.pc-card {
  margin: 0; padding: 4px 18px; list-style: none; overflow: hidden; border: 1px solid var(--wk-hair); border-radius: 24px;
  background: var(--wk-card); filter: drop-shadow(0 6px 10px rgba(20, 26, 61, .06));
}
.pc-row + .pc-row { border-top: 1px solid var(--wk-hair); }
.pc-row .ck-swipe { margin: 0 -18px; }
.pc-row .ck-swipe-face { box-shadow: none; }
.pc-open {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.pc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pc-name { font-size: 15px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
.pc-last { overflow: hidden; font-size: 13px; line-height: 18px; color: var(--wk-muted); white-space: nowrap; text-overflow: ellipsis; }
.pc-when { flex: none; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.pc-new {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 13px 0; border: 0; border-radius: 999px;
  background: var(--wk-lime); color: var(--wk-on-lime); font: inherit; font-size: 14px; font-weight: 600; line-height: 19px; cursor: pointer;
}
.pc-new i { font-size: 16px; }
:is(.pc-open, .pc-new, .pc-row .ck-swipe-strip button):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: -3px; border-radius: 12px; }
.pc-new:focus-visible { outline-offset: 2px; border-radius: 999px; }

/* ---- a file read in chat: tick what to apply ---- */
:is(#s-braindump, #chat-sheet, .br-review) .cx-doc {
  align-self: stretch; min-width: 0; padding: 16px 18px 18px; border: 1px solid var(--wk-line); border-radius: 16px;
  background: var(--wk-card); color: var(--wk-ink); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere;
}
:is(#s-braindump, #chat-sheet, .br-review) .cx-doc-title { margin: 2px 0 0; font-family: var(--wk-serif); font-size: 24px; font-weight: 500; line-height: 1.15; }
:is(#s-braindump, #chat-sheet, .br-review) .cx-doc .k-callout { margin-top: 14px; }
:is(#s-braindump, #chat-sheet, .br-review) .cx-doc .k-callout ul { margin: 2px 0 0; padding-left: 18px; color: var(--wk-body); }
:is(#s-braindump, #chat-sheet, .br-review) .cx-terms { margin: 14px 0 0; }
:is(#s-braindump, #chat-sheet, .br-review) .cx-terms div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--wk-line); }
:is(#s-braindump, #chat-sheet, .br-review) .cx-terms dt { flex: none; max-width: 50%; color: var(--wk-ink); }
:is(#s-braindump, #chat-sheet, .br-review) .cx-terms dd { margin: 0; min-width: 0; text-align: right; color: var(--wk-muted); }
:is(#s-braindump, #chat-sheet, .br-review) .cx-group { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
:is(#s-braindump, #chat-sheet, .br-review) .cx-legend { margin: 0 0 2px; padding: 0; font-size: 13px; font-weight: 600; color: var(--wk-muted); }
:is(#s-braindump, #chat-sheet, .br-review) .cx-items { margin: 0; padding: 0; list-style: none; }
:is(#s-braindump, #chat-sheet, .br-review) .cx-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--wk-line); }
:is(#s-braindump, #chat-sheet, .br-review) .cx-item-main { flex: 1; min-width: 0; font-size: 15px; }
:is(#s-braindump, #chat-sheet, .br-review) .cx-item .k-link { margin: -8px 0; }
:is(#s-braindump, #chat-sheet, .br-review) .cx-inline { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 14px; }
:is(#s-braindump, #chat-sheet, .br-review) .cx-options { min-width: 0; margin: 8px 0 0; padding: 0; border: 0; }
:is(#s-braindump, #chat-sheet, .br-review) .cx-options legend { padding: 0; font-size: 13px; color: var(--wk-muted); }
:is(#s-braindump, #chat-sheet, .br-review) .cx-edits { display: grid; gap: 8px; margin: 10px 0 2px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
:is(#s-braindump, #chat-sheet, .br-review) .cx-edits .k-field { margin: 0; }
:is(#s-braindump, #chat-sheet, .br-review) .cx-doc-status { min-height: 20px; margin: 14px 0 0; font-size: 13px; color: var(--wk-muted); }
:is(#s-braindump, #chat-sheet, .br-review) .cx-problem { margin: 4px 0 0; font-weight: 600; color: var(--wk-plum); }
:is(#s-braindump, #chat-sheet, .br-review) .cx-confirm { margin: 10px 0 0; font-size: 15px; }
:is(#s-braindump, #chat-sheet, .br-review) .cx-result { margin: 10px 0 0; padding: 0; list-style: none; }
:is(#s-braindump, #chat-sheet, .br-review) .cx-result li { padding: 8px 0; border-top: 1px solid var(--wk-line); font-size: 15px; }
:is(#s-braindump, #chat-sheet, .br-review) .cx-result li:first-child { border-top: 0; }
:is(#s-braindump, #chat-sheet, .br-review) .cx-doc-done { align-self: stretch; margin: 0; font-size: 14px; color: var(--wk-muted); }

/* The app's check: a white ring that fills lime with a navy tick (a dot for a radio). */
:is(#s-braindump, #chat-sheet, .br-review) .cx-check {
  appearance: none; -webkit-appearance: none; flex: none; display: grid; place-content: center; width: 24px; height: 24px;
  margin: 0; border: 1.5px solid var(--wk-edge); border-radius: 50%; background: var(--wk-card); cursor: pointer;
}
:is(#s-braindump, #chat-sheet, .br-review) .cx-check::before {
  content: ''; width: 10px; height: 5px; border-left: 2px solid var(--wk-on-lime); border-bottom: 2px solid var(--wk-on-lime);
  transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .12s ease;
}
:is(#s-braindump, #chat-sheet, .br-review) .cx-check[type='radio']::before { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--wk-on-lime); transform: scale(0); }
:is(#s-braindump, #chat-sheet, .br-review) .cx-check:checked { border-color: var(--wk-lime); background: var(--wk-lime); }
:is(#s-braindump, #chat-sheet, .br-review) .cx-check:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
:is(#s-braindump, #chat-sheet, .br-review) .cx-check[type='radio']:checked::before { transform: scale(1); }
:is(#s-braindump, #chat-sheet, .br-review) .cx-item > .cx-check { margin-top: 1px; }


@media (min-width: 860px) {
  #s-braindump .cx-head { padding-top: 22px; }
  #s-braindump .cx-dock { padding-bottom: 20px; }
  #s-pastchats .pc { padding-top: 32px; padding-bottom: 48px; }
  .cs-sheet { inset: 0; margin: auto; height: min(640px, calc(100dvh - 48px)); border-radius: 24px; }
  .cs-sheet[open] { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-chip, :is(#s-braindump, #chat-sheet, .br-review) .cx-check::before { transition: none; }
  .cs-sheet[open] { animation: none; }
}
/* Explore, from the designers' Figma frames (Feed 2026-10-08, Details and Walkthrough 2026-10-05).
   Unlayered and scoped to #s-feed, on the palette in palette.css, in Manrope. A phone gets the photo
   full bleed with the vendor's words on frosted glass; the sheets, the categories page and the
   desktop board are light. Text over photos always sits on glass opaque enough to hold AA over a
   white photo, so the fills are darker than the frames' (which assume a dark photo): the vendor
   panel and caption at least 46% navy over the photo's own shade, the search field and saved
   button 62%. Spacing variables live on .fx-root too, so the breadcrumb and toast overrides there
   recompute what depends on them. */
#s-feed, #s-feed .fx-root {
  --fx-night: #141b3c;
  --fx-panel: rgba(20, 27, 60, .46);
  --fx-glass: rgba(20, 27, 60, .62);
  --fx-ink-2: rgba(255, 255, 255, .86);
  --fx-hair: rgba(255, 255, 255, .62);
  --fx-edge: rgba(255, 255, 255, .18);
  --fx-nav: 68px;
  --fx-toast: calc(var(--fx-nav) + 12px);
  --fx-clear: calc(var(--fx-nav) + 12px);
  --fx-ease-out: cubic-bezier(.23, 1, .32, 1);
  --fx-ease-drawer: cubic-bezier(.32, .72, 0, 1);
}
#s-feed .fx-crumb { --fx-toast: calc(var(--fx-nav) + 56px); --fx-clear: calc(var(--fx-nav) + 56px); }
#s-feed .fx-root.fx-has-bar { --fx-clear: calc(var(--fx-toast) + 60px); }
#s-feed {
  position: absolute; inset: 0; padding: 0; min-height: 0; color: #fff; font-family: var(--wk-sans);
  background: var(--fx-night);
}
#s-feed .fx-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
#s-feed button { font: inherit; }
#s-feed .fx-root { position: absolute; inset: 0; overflow: hidden; }

/* ---- the top: search field and saved button over the card ---- */
#s-feed .fx-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; flex-direction: column; gap: 8px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 0; pointer-events: none;
}
#s-feed .fx-top > * { pointer-events: auto; }
#s-feed .fx-bar { display: flex; align-items: center; gap: 12px; }
#s-feed .fx-field-btn { position: relative; flex: 1; min-width: 0; }
#s-feed .fx-searchfield {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 22px;
  border: 1px solid var(--fx-edge); background: var(--fx-glass); color: #fff; font-size: 14px; line-height: 19px; text-align: left;
  cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#s-feed .fx-searchfield svg { flex: none; }
#s-feed .fx-searchfield span:not(.fx-sr) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#s-feed .fx-scoped .fx-searchfield { padding-right: 48px; font-weight: 600; }
#s-feed .fx-clear {
  position: absolute; top: 2px; right: 2px; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid;
  place-items: center; background: transparent; color: #fff; font-size: 18px; cursor: pointer;
}
#s-feed .fx-saved {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--fx-edge);
  background: var(--fx-glass); color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 12px rgba(0, 0, 0, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#s-feed .fx-badge {
  position: absolute; top: -5px; left: 25px; min-width: 19px; padding: 1px 5px; border-radius: 10px;
  background: var(--wk-lime); color: var(--wk-on-lime); font-size: 10.5px; font-weight: 600; line-height: 14px; text-align: center;
}

#s-feed .fx-notice {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 16px; font-size: 13px; line-height: 1.4;
  background: rgba(43, 31, 18, .95); border: 1px solid rgba(224, 163, 64, .5); color: #fff;
}
#s-feed .fx-notice > i { color: #f0c27a; font-size: 18px; flex: none; }
#s-feed .fx-notice-text { flex: 1; min-width: 0; }
#s-feed .fx-notice-btn {
  flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--wk-lime);
  color: var(--wk-on-lime); font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ---- the stage ---- */
#s-feed .fx-stage { position: absolute; inset: 0; overflow: hidden; outline: none; }
#s-feed .fx-stage:focus-visible { box-shadow: inset 0 0 0 3px var(--wk-lime); }
#s-feed .fx-deck { position: absolute; inset: 0; }
#s-feed .fx-card { position: absolute; inset: 0; overflow: hidden; background: var(--fx-night); }
#s-feed .fx-card-next { z-index: 1; }
#s-feed .fx-card-active { z-index: 2; will-change: transform; animation: fx-rise .36s cubic-bezier(.22, 1, .36, 1) backwards; }
#s-feed .fx-spring { transition: transform .26s cubic-bezier(.22, 1, .36, 1); }
@keyframes fx-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes fx-fade { from { opacity: 0; } }

#s-feed .fx-media {
  position: absolute; inset: 0; touch-action: pinch-zoom; cursor: grab; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
#s-feed .fx-media:active { cursor: grabbing; }
#s-feed .fx-carousel, #s-feed .fx-slides, #s-feed .fx-slide { position: absolute; inset: 0; }
#s-feed .fx-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-user-drag: none;
}
#s-feed .fx-art { position: absolute; inset: 0; }
#s-feed .fx-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }


#s-feed .fx-flags { position: absolute; z-index: 4; top: calc(68px + env(safe-area-inset-top)); left: 20px; right: 20px; pointer-events: none; }
#s-feed .fx-flags .fx-tags { flex-direction: column; align-items: flex-start; gap: 6px; }
#s-feed .fx-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
/* The frames set the chips' words in grey, which falls short of AA on lime; navy holds it. */
#s-feed .fx-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; line-height: 18px; font-weight: 500; background: var(--wk-lime); color: var(--wk-on-lime);
}
#s-feed .fx-tag i { font-size: 14px; }
#s-feed .fx-verified { background: var(--wk-wash); color: #3c4610; }
#s-feed .fx-warn { background: var(--wk-plum-wash); color: #74184a; }
#s-feed .fx-travel { background: var(--wk-sand); color: var(--wk-on-sand); }
#s-feed .fx-new { background: var(--wk-sky); color: var(--wk-on-sky); }

/* The vendor on frosted glass, 12px above the tab bar, with the photo caption just above it. Each
   line shows only when it's known; the panel shrinks to what's left. */
#s-feed .fx-plate {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 12px var(--fx-clear); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
/* The frame's shade behind the words, from about 100px above the caption to 72% black at the foot.
   Anchored to the words rather than the screen, so it holds the same on a short phone. */
#s-feed .fx-plate::before {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: -104px; bottom: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .72) calc(100% - var(--fx-clear) + 12px));
}
#s-feed .fx-plate a, #s-feed .fx-plate button { pointer-events: auto; }
#s-feed .fx-panel {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 24px;
  border: 1px solid var(--fx-edge); background: var(--fx-panel); box-shadow: 0 8px 12px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px);
}
#s-feed .fx-name {
  margin: 0; font-family: var(--wk-serif); font-size: 33px; line-height: 36px; font-weight: 500; letter-spacing: -.66px;
  color: #fff; text-wrap: balance; overflow-wrap: anywhere;
}
#s-feed .fx-meta { margin: 0; font-size: 12px; line-height: 16px; color: #fff; }
#s-feed .fx-price { margin: 0; font-size: 14px; line-height: 19px; font-weight: 500; color: var(--wk-lime); }
#s-feed .fx-actions { display: flex; gap: 10px; }
#s-feed .fx-ghost {
  min-height: 41px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px;
  border-radius: 999px; border: 1px solid #fff; background: transparent; color: #fff; font-size: 14px; line-height: 19px;
  font-weight: 500; text-decoration: none; cursor: pointer; transition: transform .12s var(--fx-ease-out);
}
#s-feed .fx-ghost:active { transform: scale(.96); }
/* Save is a heart: an outline until saved, then lime with a small pop. */
#s-feed .fx-heart {
  flex: none; width: 41px; height: 41px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 1px solid #fff; background: transparent; color: #fff; cursor: pointer; transition: transform .12s var(--fx-ease-out);
}
#s-feed .fx-heart:active { transform: scale(.92); }
#s-feed .fx-heart.on svg { animation: fx-heart-pop .32s var(--fx-ease-out); }
@keyframes fx-heart-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: none; } }
#s-feed .fx-caption {
  max-width: 100%; margin: 0; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--fx-edge);
  background: rgba(20, 27, 60, .5); color: #fff; font-size: 11px; line-height: 15px; text-align: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* A photo's credit, the same everywhere a vendor photo shows: only where it comes from, small, in
   the photo's bottom right corner on a navy wash, so it reads on a white photo too. Long ones wrap. */
#s-feed .fx-pcredit {
  max-width: calc(100% - 16px); margin: 0; padding: 2px 7px; border-radius: 999px; background: rgba(20, 27, 60, .66);
  color: rgba(255, 255, 255, .92); font-size: 10px; line-height: 14px; font-weight: 500; text-align: right;
  overflow-wrap: anywhere; pointer-events: none;
}
#s-feed .fx-plate .fx-pcredit { align-self: flex-end; max-width: 100%; }

#s-feed .fx-burst { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none; }
#s-feed .fx-burst svg { opacity: 0; animation: fx-pop .8s var(--fx-ease-out) forwards; }
@keyframes fx-pop {
  0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; transform: scale(1.1); }
  70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); }
}

/* ---- the toast: it goes by itself (FeedUndo's BAR_MS), or by its ✕ ---- */
#s-feed .fx-undo {
  position: absolute; z-index: 26; left: 16px; right: 16px; bottom: var(--fx-toast); display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 4px 6px 4px 18px; border-radius: 999px; background: #141B3C; color: #fff; font-size: 15px;
  box-shadow: 0 10px 26px rgba(20, 27, 60, .32);
}
#s-feed .fx-undo-mark { flex: none; color: var(--wk-lime); }
#s-feed .fx-undo span { flex: 1; min-width: 0; }
#s-feed .fx-undo-btn {
  flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent;
  color: var(--wk-lime); font-size: 15px; font-weight: 600; cursor: pointer;
}
/* A 44px target that takes no more height than Undo's 40. */
#s-feed .fx-undo-x {
  flex: none; width: 44px; height: 44px; margin: -2px 0; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--fx-ink-2); font-size: 18px; cursor: pointer;
}
#s-feed .fx-undo-x:hover { background: rgba(255, 255, 255, .12); }
#s-feed .fx-undo-x:focus-visible { outline: 3px solid var(--wk-lime); outline-offset: -3px; }

/* Not for us also asks why, optionally: three chips in a second row of the same toast. */
#s-feed .fx-undo.fx-undo-why { flex-wrap: wrap; border-radius: 24px; padding-bottom: 10px; }
#s-feed .fx-why-row { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; padding-right: 12px; }
#s-feed .fx-why-chip {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .6); background: transparent;
  color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
}
#s-feed .fx-why-chip[aria-pressed="true"] { background: var(--wk-lime); border-color: var(--wk-lime); color: var(--wk-on-lime); }

/* ---- buttons shared by the light and dark surfaces ---- */
#s-feed .fx-btn {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--wk-lime); background: var(--wk-lime); color: var(--wk-on-lime);
  font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none;
}
#s-feed .fx-btn.ghost { background: transparent; color: #fff; border-color: var(--fx-hair); }
#s-feed .fx-btn:disabled, #s-feed .fx-btn[aria-disabled="true"] { opacity: .65; cursor: wait; }
#s-feed .fx-textbtn {
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; border: 0; background: none;
  color: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
#s-feed .fx-textbtn i { font-size: 17px; }
#s-feed :is(.fx-searchfield, .fx-clear, .fx-saved, .fx-heart, .fx-ghost, .fx-btn, .fx-textbtn, .fx-notice-btn, .fx-undo-btn, .fx-why-chip):focus-visible {
  outline: 3px solid var(--wk-lime); outline-offset: 2px;
}

/* ---- empty, loading, location and failure states on the stage ---- */
#s-feed .fx-empty {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center; padding: 116px 24px var(--fx-clear); overflow-y: auto; color: var(--fx-ink-2);
}
#s-feed .fx-msg { width: 100%; max-width: 23rem; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#s-feed .fx-msg-icon { font-size: 34px; color: var(--wk-lime); }
#s-feed .fx-msg-title {
  margin: 0; font-family: var(--wk-serif); font-size: 28px; line-height: 1.15; font-weight: 500; color: #fff; text-wrap: balance;
}
#s-feed .fx-msg-body { margin: 0; font-size: 15px; line-height: 1.55; }
#s-feed .fx-msg-small { margin: 0; font-size: 13px; color: var(--fx-ink-2); }
#s-feed .fx-msg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
#s-feed .fx-back { color: #fff; }
#s-feed .fx-where { text-align: left; align-items: stretch; }
#s-feed .fx-where .fx-msg-icon, #s-feed .fx-where .fx-msg-title, #s-feed .fx-where .fx-msg-body { text-align: center; align-self: center; }
#s-feed .fx-field-label { margin-top: 6px; font-size: 14px; font-weight: 600; color: #fff; }
#s-feed .fx-field {
  width: 100%; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--fx-hair);
  background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: 16px; outline: none;
}
#s-feed .fx-field::placeholder { color: rgba(255, 255, 255, .7); }
#s-feed .fx-field:focus-visible { border-color: var(--wk-lime); box-shadow: 0 0 0 2px rgba(207, 232, 58, .45); }
#s-feed .fx-err { margin: 0; font-size: 13px; color: #f6b3c9; }
#s-feed .fx-where .fx-msg-actions { justify-content: stretch; flex-direction: column; }

#s-feed .fx-empty[hidden] { display: none; }
#s-feed .fx-loading-text { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--wk-lime); }
#s-feed .fx-loading-text p { margin: 0; font-size: 15px; color: #fff; }

/* ---- light surfaces: the paused notice, the categories page, every sheet ---- */
#s-feed :is(.fx-paused, .fx-cats, .fx-dialog) { background: var(--wk-ground); color: var(--wk-ink); }
#s-feed :is(.fx-paused, .fx-cats, .fx-dialog) :is(.fx-btn.ghost) { background: var(--wk-card); color: var(--wk-ink); border-color: var(--wk-grip); }
#s-feed :is(.fx-paused, .fx-cats, .fx-dialog) :is(.fx-btn, .fx-textbtn, .fx-chipbtn, .fx-x, .fx-tbtn, .fx-ask, .fx-heart, .fx-source, a):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}
#s-feed .fx-paused .fx-msg-title { color: var(--wk-ink); }
#s-feed .fx-paused .fx-msg-body { color: var(--wk-body); }
#s-feed .fx-paused .fx-msg-small { color: var(--wk-muted); }
#s-feed .fx-paused .fx-msg-icon { color: var(--wk-moss); }
#s-feed .fx-label { margin: 18px 0 8px; font-size: 13px; font-weight: 500; color: var(--wk-muted); }
#s-feed .fx-chiprow { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
#s-feed .fx-chipbtn {
  min-height: 36px; display: inline-flex; align-items: center; gap: 5px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--wk-line); background: var(--wk-card); color: var(--wk-ink); font-size: 14px; cursor: pointer;
}
#s-feed .fx-chipbtn.booked i { color: var(--wk-moss); font-size: 15px; }
#s-feed .fx-grip { display: block; width: 36px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: var(--wk-grip); }

/* the categories page */
#s-feed .fx-cats {
  position: absolute; inset: 0; z-index: 5; overflow-y: auto; padding: calc(28px + env(safe-area-inset-top)) 20px var(--fx-clear);
}
#s-feed .fx-cats-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
#s-feed .fx-cats-title { margin: 0; font-family: var(--wk-serif); font-size: 36px; line-height: 1.05; font-weight: 500; }
#s-feed .fx-cats-sub { margin: 4px 0 0; font-size: 14px; color: var(--wk-body); }
#s-feed .fx-cats-links { display: flex; flex-direction: column; align-items: flex-end; }
#s-feed .fx-cats-links .fx-textbtn { min-height: 36px; font-size: 15px; color: var(--wk-ink); }
#s-feed .fx-cats .fx-label { margin-top: 26px; font-size: 14px; font-weight: 400; }
#s-feed .fx-suggest { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
#s-feed .fx-suggest-card { padding: 16px; border-radius: 16px; border: 1px solid var(--wk-line); background: var(--wk-card); }
#s-feed .fx-suggest-card h4 { margin: 0; font-size: 16px; font-weight: 600; }
#s-feed .fx-suggest-card p { margin: 6px 0 0; font-size: 14px; color: var(--wk-muted); }
#s-feed .fx-suggest-card .fx-btn { min-height: 40px; margin-top: 12px; padding: 0 18px; }

/* ---- dialogs: bottom sheets on a phone, centred on desktop ---- */
#s-feed .fx-dialog {
  width: 100%; max-width: 100%; max-height: 90dvh; margin: auto 0 0; padding: 0; border: 0; border-radius: 22px 22px 0 0;
  overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 -12px 40px rgba(0, 0, 0, .28);
}
#s-feed .fx-dialog::backdrop { background: rgba(10, 12, 20, .58); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#s-feed .fx-dialog[open] { animation: fx-sheet-up .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes fx-sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fx-sheet-down { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
#s-feed .fx-sheet-in { padding: 10px 20px 28px; }
#s-feed .fx-sheet-head { position: relative; padding-right: 50px; }
#s-feed .fx-sheet-title {
  margin: 12px 0 4px; font-family: var(--wk-serif); font-size: 32px; line-height: 1.08; font-weight: 500; outline: none;
  overflow-wrap: anywhere;
}
#s-feed .fx-sheet-meta { margin: 0; font-size: 14px; line-height: 1.5; color: var(--wk-muted); }
#s-feed .fx-x {
  position: absolute; top: -4px; right: -6px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wk-line);
  background: var(--wk-card); color: var(--wk-ink); display: grid; place-items: center; font-size: 18px; cursor: pointer;
}
#s-feed .fx-strip {
  display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scroll-snap-type: x proximity;
  scroll-padding-inline: 20px; outline: none;
}
#s-feed .fx-strip:focus-visible { box-shadow: inset 0 0 0 3px var(--wk-ink); }
#s-feed .fx-strip figure { position: relative; margin: 0; flex: none; scroll-snap-align: start; border-radius: 14px; overflow: hidden; }
#s-feed .fx-strip img { display: block; height: 196px; width: auto; min-width: 140px; max-width: 78vw; object-fit: cover; background: var(--wk-line); }
#s-feed .fx-strip .fx-pcredit { position: absolute; right: 8px; bottom: 8px; pointer-events: auto; }
#s-feed .fx-strip .fx-pcredit a { color: inherit; text-underline-offset: 2px; }
#s-feed .fx-strip-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
#s-feed .fx-dialog a { color: var(--wk-ink); text-underline-offset: 3px; }
#s-feed .fx-sec { margin-top: 26px; }
#s-feed .fx-sec-title { margin: 0 0 8px; font-family: var(--wk-serif); font-size: 26px; line-height: 1.15; font-weight: 500; }
#s-feed .fx-sec-sub { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
#s-feed .fx-sheet-note { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--wk-body); }
#s-feed .fx-table {
  margin: 0; border-radius: 24px; border: 1px solid var(--wk-hair); background: var(--wk-card); padding: 4px 16px;
  box-shadow: 0 6px 10px rgba(20, 26, 61, .06);
}
#s-feed .fx-table > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; }
#s-feed .fx-table > div + div { border-top: 1px solid var(--wk-hair); }
#s-feed .fx-table dt { flex: none; font-size: 13.5px; line-height: 18px; color: var(--wk-muted); }
#s-feed .fx-table dd {
  margin: 0; min-width: 0; font-size: 13.5px; line-height: 18px; font-weight: 500; color: var(--wk-ink); text-align: right;
  overflow-wrap: anywhere;
}
#s-feed .fx-ask {
  padding: 0; border: 0; background: none; color: var(--wk-plum); font-size: 13.5px; line-height: 18px; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer;
}
#s-feed .fx-ask.fx-ink { color: var(--wk-ink); }
#s-feed .fx-factors {
  list-style: none; margin: 8px 0 0; padding: 14px 16px; display: grid; gap: 12px; border-radius: 16px; background: var(--wk-card);
}
#s-feed .fx-factors li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14px; }
#s-feed .fx-factor-name { font-size: 13.5px; line-height: 18px; color: var(--wk-ink); }
#s-feed .fx-factor-grade { font-size: 12.5px; line-height: 17px; color: var(--wk-moss); font-weight: 500; }
#s-feed .fx-factor-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--wk-line); overflow: hidden; }
#s-feed .fx-factor-bar i { display: block; height: 100%; border-radius: 2px; background: var(--wk-olive); }
#s-feed :is(.fx-grade-fair, .fx-grade-weak) .fx-factor-grade { color: var(--wk-plum); }
#s-feed :is(.fx-grade-fair, .fx-grade-weak) .fx-factor-bar i { background: var(--wk-plum); }
#s-feed .fx-sheet-reason { margin: 12px 0 0; font-family: var(--wk-serif); font-size: 18px; line-height: 26px; color: var(--wk-ink); }
#s-feed .fx-ctas { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
#s-feed .fx-steps { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 6px; border-top: 1px solid var(--wk-line); }
#s-feed .fx-dialog .fx-textbtn { color: var(--wk-ink); text-decoration: underline; text-decoration-color: var(--wk-grip); text-underline-offset: 4px; }
#s-feed .fx-steps .fx-textbtn { text-decoration: none; }
#s-feed .fx-dialog .fx-err { color: var(--wk-plum); margin-top: 10px; }
#s-feed .fx-fine { margin: 0; font-size: 13px; line-height: 19px; color: var(--wk-muted); }
#s-feed .fx-dialog .fx-tag { min-height: 26px; padding: 0 11px; font-size: 12px; }
#s-feed .fx-dialog .fx-verified { color: var(--wk-moss); }
#s-feed .fx-dialog .fx-warn { color: var(--wk-plum); }
#s-feed .fx-hgroup { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
#s-feed .fx-hgroup .fx-sec-title { margin: 0; font-size: 22px; }
#s-feed .fx-hlist { list-style: none; margin: 0; padding: 0; }
#s-feed .fx-hlist li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;
  border-top: 1px solid var(--wk-line); font-size: 15px;
}
#s-feed .fx-tbtn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--wk-grip); background: var(--wk-card); color: var(--wk-ink); font-size: 14px; font-weight: 500; cursor: pointer;
}

/* the search sheet drops from the top */
#s-feed .fx-topsheet { margin: 0 0 auto; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); }
#s-feed .fx-topsheet[open] { animation-name: fx-sheet-down; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
#s-feed .fx-sheet-foot { display: flex; justify-content: space-between; gap: 12px; }
#s-feed .fx-sheet-foot .fx-textbtn { color: var(--wk-ink); text-decoration: none; }

/* ---- a vendor's details (Figma: Explore — Details / Venue … Planner), on a white sheet ---- */
#s-feed #feed-sheet { background: var(--wk-paper); }
#s-feed .fx-detail { display: flex; flex-direction: column; gap: 12px; padding: 12px 20px 28px; }
#s-feed .fx-detail .fx-grip { width: 40px; margin: 0 auto; }
#s-feed .fx-detail .fx-sheet-head { padding: 4px 0 0; display: flex; flex-direction: column; gap: 12px; }
#s-feed .fx-detail .fx-tag { padding: 5px 11px; font-size: 11px; line-height: 15px; font-weight: 600; }
#s-feed .fx-detail .fx-verified { padding: 5px 11px 5px 9px; font-weight: 500; }
#s-feed .fx-detail .fx-sheet-title { margin: 0; font-size: 34px; line-height: 37px; letter-spacing: -.68px; color: var(--wk-ink); }
#s-feed .fx-detail .fx-sheet-meta { margin: -6px 0 0; font-size: 13px; line-height: 18px; }
#s-feed .fx-detail .fx-sec { display: flex; flex-direction: column; gap: 12px; margin: 0; padding-top: 8px; }
#s-feed .fx-detail .fx-sec-title { margin: 0; font-size: 23px; line-height: 28px; letter-spacing: -.23px; color: var(--wk-ink); }
#s-feed .fx-detail .fx-sheet-note { margin: 0; font-size: 14px; line-height: 21px; color: var(--wk-ink); }
#s-feed .fx-detail .fx-why { gap: 0; }
#s-feed .fx-source {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 8px 0 4px; padding: 0;
  border: 0; background: none; color: var(--wk-plum); font-size: 13px; line-height: 18px; font-weight: 600; cursor: pointer;
}
#s-feed .fx-detail .fx-draft { flex: 1; min-height: 48px; padding: 14px 20px; font-size: 15px; line-height: 20px; }
#s-feed .fx-heart-lg {
  width: 48px; height: 48px; border-radius: 24px; border: 1px solid var(--wk-hair); background: var(--wk-card); color: var(--wk-ink);
  box-shadow: 0 2px 4px rgba(20, 26, 61, .05);
}
#s-feed .fx-verify {
  display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--wk-track); color: var(--wk-muted);
  font-size: 12.5px; line-height: 1.45;
}
#s-feed .fx-verify svg { flex: none; margin-top: 2px; }
#s-feed .fx-verify strong { font-weight: 600; }
#s-feed .fx-detail .fx-close {
  width: 100%; min-height: 44px; padding: 10px 16px; font-size: 14px; line-height: 19px; color: var(--wk-ink);
  background: var(--wk-card); border: 1px solid var(--wk-hair); box-shadow: 0 2px 4px rgba(20, 26, 61, .05);
}

/* ---- desktop: a light page with a masonry board (placed by screens/explore/masonry.ts) ---- */
@media (min-width: 860px) {
  #s-feed { max-width: none; height: 100dvh; overflow-y: auto; background: var(--wk-ground); color: var(--wk-ink); }
  #s-feed .fx-root {
    position: relative; inset: auto; overflow: visible; max-width: 1240px; min-height: 100%; margin: 0 auto; padding: 0 28px 72px;
  }
  #s-feed .fx-top {
    position: sticky; top: 0; z-index: 20; padding: 20px 0 14px; gap: 10px; pointer-events: auto; background: var(--wk-ground);
    border-bottom: 1px solid var(--wk-line);
  }
  #s-feed .fx-title {
    margin: 0; flex: 1; min-width: 0; font-family: var(--wk-serif); font-size: 32px; line-height: 1.1; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #s-feed .fx-bar-btns { flex: none; display: flex; gap: 8px; }
  #s-feed .fx-pill {
    min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--wk-line); background: var(--wk-card); color: var(--wk-ink); font-size: 14px; font-weight: 500;
    white-space: nowrap; cursor: pointer;
  }
  #s-feed .fx-pill i { font-size: 17px; }
  #s-feed .fx-pill:hover { border-color: var(--wk-grip); }
  #s-feed .fx-pill[aria-expanded="true"] { background: var(--wk-ink); border-color: var(--wk-ink); color: var(--wk-lime); }
  #s-feed :is(.fx-pill, .fx-btn, .fx-textbtn, .fx-notice-btn, .fx-tbtn, .fx-chipbtn, .fx-undo-btn, .fx-heart, .fx-tile-details):focus-visible {
    outline: 3px solid var(--wk-ink); outline-offset: 2px;
  }
  #s-feed .fx-notice { background: var(--wk-plum-wash); border-color: var(--wk-line); color: var(--wk-ink); }
  #s-feed .fx-notice > i { color: var(--wk-plum); }
  #s-feed .fx-err { color: var(--wk-plum); }

  #s-feed .fx-desk-tip {
    display: flex; align-items: center; gap: 10px; width: fit-content; margin: 16px 0 0; padding: 6px 6px 6px 14px;
    border-radius: 999px; border: 1px solid var(--wk-line); background: var(--wk-card); color: var(--wk-body); font-size: 13.5px;
  }
  #s-feed .fx-desk-tip > i { font-size: 17px; color: var(--wk-moss); }
  #s-feed .fx-desk-tip-x {
    width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none;
    color: var(--wk-muted); font-size: 15px; cursor: pointer;
  }
  #s-feed .fx-gridwrap { padding-top: 22px; }
  /* The tile body is one fixed height (every line clamped to one), so a tile's height follows from its
     photo box alone and the board can be placed before anything renders. */
  #s-feed .fx-grid { --fx-tile-body: 102px; position: relative; }
  #s-feed .fx-tile {
    position: absolute; top: 0; left: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; outline: none;
    background: var(--wk-card); border: 1px solid var(--wk-line); transition: box-shadow .2s var(--fx-ease-out);
  }
  #s-feed .fx-tile:hover { box-shadow: 0 16px 36px rgba(20, 27, 60, .12); }
  #s-feed .fx-tile:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 3px; }
  #s-feed .fx-tile-photo { position: relative; overflow: hidden; background: var(--wk-line); }
  #s-feed .fx-tile-photo > img, #s-feed .fx-tile-photo > svg {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 40%;
  }
  #s-feed .fx-tile-photo .fx-tags { position: absolute; top: 12px; left: 12px; right: 60px; }
  /* Clear of Details, which hover shows in the other bottom corner. */
  #s-feed .fx-tile-photo .fx-pcredit { position: absolute; right: 8px; bottom: 8px; max-width: calc(100% - 106px); }
  /* Hover (or keyboard focus inside the tile) shows Save and Details; a touch screen always shows them. */
  #s-feed .fx-tile-save, #s-feed .fx-tile-details {
    position: absolute; z-index: 2; opacity: 0; transition: opacity .15s var(--fx-ease-out);
    background: var(--fx-glass); border-color: var(--fx-edge); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  #s-feed .fx-tile-save { top: 10px; right: 10px; color: #fff; }
  #s-feed .fx-tile-details {
    left: 12px; bottom: 12px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--fx-edge);
    color: #fff; font-size: 13.5px; font-weight: 500; cursor: pointer;
  }
  #s-feed .fx-tile:is(:hover, :focus-within) :is(.fx-tile-save, .fx-tile-details),
  #s-feed .fx-tile-save.on { opacity: 1; }
  @media (hover: none) { #s-feed :is(.fx-tile-save, .fx-tile-details) { opacity: 1; } }
  #s-feed .fx-tile-body {
    display: flex; flex-direction: column; gap: 4px; height: var(--fx-tile-body); padding: 12px 16px 14px; overflow: hidden;
  }
  #s-feed .fx-tile-body > * { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #s-feed .fx-tile-name { font-family: var(--wk-serif); font-size: 22px; line-height: 28px; font-weight: 500; }
  #s-feed .fx-tile-open {
    max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
    outline: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #s-feed .fx-tile-open::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 18px; }
  #s-feed .fx-tile-open:focus-visible::after { outline: 3px solid var(--wk-ink); outline-offset: -3px; }
  #s-feed .fx-tile-meta { font-size: 13.5px; line-height: 20px; color: var(--wk-muted); }
  #s-feed .fx-tile-price { font-size: 14.5px; line-height: 20px; font-weight: 600; color: var(--wk-moss); }
  #s-feed .fx-sentinel { height: 1px; }
  #s-feed .fx-grid-foot { display: flex; justify-content: center; padding: 30px 0 8px; }
  #s-feed .fx-grid-status { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--wk-muted); }
  #s-feed .fx-grid-status .gate-load { color: var(--wk-moss); }

  #s-feed .fx-empty { position: static; min-height: 62vh; padding: 48px 24px; color: var(--wk-body); }
  #s-feed .fx-paused { position: absolute; inset: 0; min-height: 0; }
  #s-feed .fx-msg-title { color: var(--wk-ink); font-size: 30px; }
  #s-feed .fx-msg-small { color: var(--wk-muted); }
  #s-feed .fx-msg-icon, #s-feed .fx-loading-text { color: var(--wk-moss); }
  #s-feed .fx-loading-text p { color: var(--wk-ink); }
  #s-feed .fx-btn.ghost { background: var(--wk-card); color: var(--wk-ink); border-color: var(--wk-grip); }
  #s-feed .fx-field-label { color: var(--wk-ink); }
  #s-feed .fx-field { background: var(--wk-card); color: var(--wk-ink); border-color: var(--wk-grip); }
  #s-feed .fx-field::placeholder { color: var(--wk-muted); }
  #s-feed .fx-field:focus-visible { border-color: var(--wk-ink); box-shadow: 0 0 0 2px var(--wk-wash); }

  #s-feed .fx-undo {
    position: fixed; left: calc(240px + (100vw - 240px) / 2); right: auto; bottom: 24px; transform: translateX(-50%);
    width: max-content; max-width: min(560px, calc(100vw - 280px));
  }
  #s-feed .fx-cats { position: static; max-width: 760px; padding: 36px 0 48px; overflow: visible; }
  #s-feed .fx-suggest { grid-template-columns: 1fr 1fr; }

  #s-feed .fx-dialog { max-width: 640px; max-height: 86dvh; margin: auto; border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
  #s-feed .fx-dialog .fx-grip { display: none; }
  #s-feed .fx-sheet-in { padding: 28px 30px 32px; }
  #s-feed .fx-strip { margin: 0 -30px; padding: 0 30px 4px; scroll-padding-inline: 30px; }
  #s-feed .fx-topsheet { margin: 64px auto auto; }
}

/* Reduce Motion: a new vendor cross-fades in rather than sliding up; nothing pops or bursts. */
@media (prefers-reduced-motion: reduce) {
  #s-feed .fx-card-active { animation: fx-fade .2s ease-out backwards; }
  #s-feed .fx-dialog[open], #s-feed .fx-heart.on svg { animation: none; }
  #s-feed .fx-spring, #s-feed .fx-tile, #s-feed .fx-ghost, #s-feed .fx-heart, #s-feed .fx-tile-save, #s-feed .fx-tile-details { transition: none; }
  #s-feed .fx-burst { display: none; }
}
/* Explore's Advanced search sheet, from the designers' Figma frames "Explore — Advanced search
   (sheet)" and "… · What open (sheet)": a white sheet in Manrope under a Cormorant title, lime Go
   and Explore options, the What dropdown and the distance chips. Fields keep the 3:1 edge
   (--wk-edge) the frames' hairline would miss. Presses scale a touch; the menu opens from its
   button. Only transform and opacity move. */
#s-feed .fx-adv { background: var(--wk-paper); color: var(--wk-ink); font-family: var(--wk-sans); border-radius: 0 0 24px 24px; }
#s-feed .fx-adv .fx-sheet-in { display: flex; flex-direction: column; gap: 20px; padding: calc(20px + env(safe-area-inset-top)) 20px 16px; }
#s-feed .fx-adv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#s-feed .fx-adv-title { margin: 0; font-family: var(--wk-serif); font-size: 30px; line-height: 1.1; font-weight: 500; }
#s-feed .fx-adv-reset {
  min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px;
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
#s-feed .fx-adv .fx-err { margin-top: 8px; }
#s-feed .fx-adv .fx-err:empty { display: none; }

#s-feed .fx-adv-field {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 27px; border: 1px solid var(--wk-edge);
  background: var(--wk-card); box-shadow: 0 2px 8px rgba(20, 26, 61, .05);
}
#s-feed .fx-adv-field:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 3px var(--wk-wash); }
#s-feed .fx-adv-field > i { font-size: 18px; color: var(--wk-muted); }
#s-feed .fx-adv-field input {
  flex: 1; min-width: 0; min-height: 40px; border: 0; background: transparent; color: var(--wk-ink); font: inherit; font-size: 16px;
  outline: none; text-overflow: ellipsis;
}
#s-feed .fx-adv-field input::placeholder { color: var(--wk-muted); }
#s-feed .fx-adv-go {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px 0 16px; border: 0;
  border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: transform .16s var(--fx-ease-out), opacity .15s ease;
}
#s-feed .fx-adv-go i { font-size: 15px; }
#s-feed .fx-adv-go[aria-disabled="true"] { opacity: .5; cursor: default; }
#s-feed .fx-adv-go .ti-loader-2 { animation: fx-spin .8s linear infinite; }

#s-feed .fx-adv-group { display: flex; flex-direction: column; gap: 10px; }
#s-feed .fx-adv-label { margin: 0; font-size: 13px; font-weight: 500; color: var(--wk-muted); }

/* Where (the Figma's Location filter): a pin, the place and how it's chosen, and the couple's places
   in a menu like What's. Only drawn when a category can search more than one of them. */
#s-feed .fx-where-pick .lm-btn {
  width: 100%; min-height: 60px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px;
  border: 1px solid var(--wk-edge); background: var(--wk-card); color: var(--wk-ink); font: inherit; text-align: left;
  cursor: pointer; transition: transform .16s var(--fx-ease-out);
}
#s-feed .fx-where-pick .lm-btn:active { transform: scale(.985); }
#s-feed .fx-where-pick .lm-btn[aria-expanded="true"] .fx-what-chev { transform: rotate(180deg); }
#s-feed .fx-where-pick .lm-btn:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
#s-feed .fx-where-pin { flex: none; color: var(--wk-plum); }
#s-feed .fx-where-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#s-feed .fx-where-place { font-size: 15px; font-weight: 600; line-height: 20px; }
#s-feed .fx-where-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
#s-feed .fx-where-pick .lm-menu { right: 0; }
#s-feed .fx-areas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 0; }

/* What: a field-shaped button and its menu, the chosen category on a lime wash with a tick. */
#s-feed .fx-what { position: relative; }
#s-feed .fx-what-btn {
  width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 16px;
  border: 1px solid var(--wk-edge); background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 15px;
  font-weight: 600; text-align: left; cursor: pointer; transition: transform .16s var(--fx-ease-out);
}
#s-feed .fx-what-tag { font-size: 18px; color: var(--wk-plum); }
#s-feed .fx-what-value { flex: 1; min-width: 0; }
#s-feed .fx-what-chev { font-size: 18px; color: var(--wk-muted); transition: transform .2s var(--fx-ease-out); }
#s-feed .fx-what-btn[aria-expanded="true"] .fx-what-chev { transform: rotate(180deg); }
#s-feed .fx-what-menu {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none;
  border-radius: 18px; border: 1px solid var(--wk-stroke); background: var(--wk-card); box-shadow: 0 12px 32px rgba(20, 26, 61, .16);
  overflow-y: auto; overscroll-behavior: contain; display: none; opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top center;
  transition: opacity .12s ease-out, transform .12s ease-out, display .12s allow-discrete;
}
#s-feed .fx-what-menu.open {
  display: block; opacity: 1; transform: none;
  transition: opacity .18s var(--fx-ease-out), transform .18s var(--fx-ease-out), display .18s allow-discrete;
}
@starting-style { #s-feed .fx-what-menu.open { opacity: 0; transform: translateY(-4px) scale(.98); } }
#s-feed .fx-what-opt {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 12px; font-size: 14px;
  font-weight: 500; color: var(--wk-ink); cursor: pointer; outline: none;
}
#s-feed .fx-what-opt.any { color: var(--wk-muted); }
#s-feed .fx-what-opt[aria-selected="true"] { background: var(--wk-wash); color: var(--wk-ink); font-weight: 600; }
#s-feed .fx-what-opt:focus-visible { box-shadow: inset 0 0 0 2px var(--wk-ink); }
#s-feed .fx-what-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--wk-stroke); }
#s-feed .fx-what-name { flex: 1; min-width: 0; }
#s-feed .fx-what-opt .ti-check { font-size: 16px; color: var(--wk-moss); }
@media (hover: hover) and (pointer: fine) {
  #s-feed .fx-what-opt:not([aria-selected="true"]):hover { background: var(--wk-track); }
}

/* How far: one chip at most; tapping the chosen one clears it. */
#s-feed .fx-adv-drives { display: flex; flex-wrap: wrap; gap: 6px; }
#s-feed .fx-drive {
  min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--wk-line); background: var(--wk-card);
  color: var(--wk-ink); font: inherit; font-size: 12px; font-weight: 500; box-shadow: 0 2px 4px rgba(20, 26, 61, .05); cursor: pointer;
  transition: transform .16s var(--fx-ease-out), background-color .15s ease, color .15s ease, border-color .15s ease;
}
#s-feed .fx-drive[aria-pressed="true"] { background: var(--wk-ink); border-color: var(--wk-ink); color: var(--wk-on-navy); }

#s-feed .fx-adv-apply {
  min-height: 50px; border: 0; border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime); font: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .16s var(--fx-ease-out);
}
#s-feed :is(.fx-adv-apply, .fx-drive):active, #s-feed .fx-adv-go:not([aria-disabled="true"]):active { transform: scale(.97); }
#s-feed .fx-what-btn:active { transform: scale(.985); }

#s-feed .fx-adv-recent {
  padding: 8px 16px; border-radius: 24px; border: 1px solid var(--wk-line); background: var(--wk-card);
  box-shadow: 0 6px 10px rgba(20, 26, 61, .06);
}
#s-feed .fx-adv-recent ul { list-style: none; margin: 2px 0 0; padding: 0; }
#s-feed .fx-adv-recent li + li { border-top: 1px solid var(--wk-line); }
#s-feed .fx-adv-recent button {
  width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px;
  text-align: left; cursor: pointer;
}
#s-feed .fx-adv :is(.fx-adv-reset, .fx-adv-go, .fx-what-btn, .fx-drive, .fx-adv-apply, .fx-adv-recent button):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}
#s-feed .fx-adv .fx-sheet-foot { margin-top: -10px; }

/* The grabber, and the swipe that closes the sheet. */
#s-feed .fx-swipe {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: -12px -20px 0; padding: 10px 20px 4px;
  font-size: 12px; color: var(--wk-muted); touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none;
}
#s-feed .fx-adv .fx-swipe .fx-grip { width: 40px; margin: 0; }

@media (min-width: 860px) {
  #s-feed .fx-adv { border-radius: 24px; }
  #s-feed .fx-adv .fx-sheet-in { padding: 26px 28px 22px; }
  #s-feed .fx-swipe { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #s-feed :is(.fx-what-btn, .fx-what-chev, .fx-drive, .fx-adv-apply, .fx-adv-go) { transition: none; }
  #s-feed :is(.fx-what-menu, .fx-what-menu.open) { transform: none; transition: opacity .12s ease, display .12s allow-discrete; }
  @starting-style { #s-feed .fx-what-menu.open { transform: none; } }
  #s-feed .fx-adv-go .ti-loader-2 { animation: none; }
}
/* Explore loading (FeedSkeleton.tsx): the card drawn in outline on the phone's stage, the board's
   first rows on desktop, the step line and the three-step bar. Bones shimmer left to right in a
   short cascade; a fresh skeleton fades in after 200 ms so a quick answer never flashes it; on the
   phone it fades out over the first card. Only transform, opacity and a 2px blur move. */
#s-feed { --fx-bone: rgba(255, 255, 255, .09); --fx-shine: rgba(255, 255, 255, .1); }
#s-feed .fx-bone { position: relative; display: block; overflow: hidden; border-radius: 6px; background: var(--fx-bone); }
#s-feed .fx-bone::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--fx-shine), transparent);
  animation: fx-shimmer 1.4s linear infinite; animation-delay: var(--d, 0ms);
}
@keyframes fx-shimmer { to { transform: translateX(100%); } }
@keyframes fx-skel-in { from { opacity: 0; } }
@keyframes fx-step-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes fx-tile-in { from { opacity: 0; transform: translateY(8px); } }
#s-feed .fx-skel-stage.fx-skel-fresh { animation: fx-skel-in .32s var(--fx-ease-out) .2s backwards; }

/* the phone: the card's shape where the card will be */
#s-feed .fx-skel-stage {
  position: absolute; inset: 0; z-index: 6; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; pointer-events: none;
  transition: opacity .22s var(--fx-ease-out), filter .22s var(--fx-ease-out);
}
#s-feed .fx-skel-stage.fx-skel-out { opacity: 0; filter: blur(2px); }
/* While it leaves, the first card rises over a clear stage, not over the next one. */
#s-feed .fx-stage:has(.fx-skel-out) .fx-card-next { visibility: hidden; }
#s-feed .fx-skel-tags { position: absolute; top: calc(68px + env(safe-area-inset-top)); left: 20px; display: flex; flex-direction: column; gap: 6px; }
#s-feed .fx-skel-tags .fx-bone { width: 74px; height: 30px; border-radius: 999px; }
#s-feed .fx-skel-tags .fx-bone + .fx-bone { width: 92px; }
#s-feed .fx-skel-plate {
  grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 12px var(--fx-clear);
}
#s-feed .fx-skel-panel {
  width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 24px;
  border: 1px solid var(--fx-edge); background: var(--fx-panel);
}
#s-feed .fx-skel-name { width: 62%; height: 30px; margin: 3px 0; border-radius: 8px; }
#s-feed .fx-skel-meta { width: 76%; height: 12px; margin: 2px 0; }
#s-feed .fx-skel-meta.short { width: 50%; }
#s-feed .fx-skel-price { width: 40%; height: 14px; margin: 2px 0; background: rgba(207, 232, 58, .2); }
#s-feed .fx-skel-actions { display: flex; gap: 10px; }
#s-feed .fx-skel-actions .fx-bone { flex: none; width: 88px; height: 41px; border-radius: 999px; }
#s-feed .fx-skel-actions .fx-skel-heart { width: 41px; }
#s-feed .fx-skel-caption { width: 55%; height: 27px; border-radius: 999px; }

/* the line naming the work, and the bar under it */
#s-feed .fx-skel-status { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
#s-feed .fx-skel-stage .fx-skel-status { grid-row: 1; margin: calc(150px + env(safe-area-inset-top)) 28px 4px; justify-content: center; }
#s-feed .fx-skel-line {
  margin: 0; max-width: 18em; font-family: var(--wk-serif); font-size: 26px; line-height: 1.2; font-weight: 500; color: #fff;
  text-wrap: balance; animation: fx-step-in .32s var(--fx-ease-out) backwards;
}
#s-feed .fx-skel-slow {
  margin: 0; max-width: 20rem; font-size: 13px; line-height: 1.5; color: var(--fx-ink-2);
  animation: fx-step-in .32s var(--fx-ease-out) backwards;
}
#s-feed .fx-stepbar { display: flex; gap: 5px; }
#s-feed .fx-stepbar > span { width: 34px; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .2); }
#s-feed .fx-stepbar i { display: block; height: 100%; background: var(--wk-lime); transform: scaleX(0); transform-origin: left center; }

/* desktop: the grid's first two rows, tiles rising in a few at a time */
@media (min-width: 860px) {
  #s-feed { --fx-bone: var(--wk-track); --fx-shine: color-mix(in srgb, var(--wk-card) 75%, transparent); }
  #s-feed .fx-skel-grid.fx-skel-fresh .fx-skel-status { animation: fx-skel-in .32s var(--fx-ease-out) .2s backwards; }
  #s-feed .fx-skel-grid.fx-skel-fresh .fx-skel-tile { animation: fx-tile-in .32s var(--fx-ease-out) backwards; animation-delay: calc(.2s + var(--i) * 45ms); }
  /* The status floats over the first row, so the real grid lands exactly where the outline was. */
  #s-feed .fx-skel-grid { position: relative; }
  #s-feed .fx-skel-grid .fx-skel-status {
    position: absolute; z-index: 2; top: 150px; left: 50%; width: max-content; max-width: min(560px, 90%); gap: 12px;
    padding: 24px 32px; border-radius: 22px; border: 1px solid var(--wk-line); background: var(--wk-card);
    box-shadow: var(--wk-shadow); transform: translateX(-50%);
  }
  #s-feed .fx-skel-grid .fx-skel-line { color: var(--wk-ink); }
  #s-feed .fx-skel-grid .fx-skel-slow { color: var(--wk-muted); }
  #s-feed .fx-skel-grid .fx-stepbar > span { background: var(--wk-bar); }
  #s-feed .fx-skel-grid .fx-stepbar i { background: var(--wk-olive); }
  #s-feed .fx-skel-grid .fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 22px; align-items: start; }
  #s-feed .fx-skel-tile { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid var(--wk-line); background: var(--wk-card); }
  #s-feed .fx-skel-tile .fx-skel-photo { aspect-ratio: 4 / 5; border-radius: 0; }
  #s-feed .fx-skel-tile:nth-child(3n + 2) .fx-skel-photo { aspect-ratio: 4 / 3; }
  #s-feed .fx-skel-tile:nth-child(4n + 3) .fx-skel-photo { aspect-ratio: 2 / 3; }
  #s-feed .fx-skel-body { display: flex; flex-direction: column; gap: 9px; height: var(--fx-tile-body, 122px); padding: 14px 16px; }
  #s-feed .fx-skel-tile .fx-skel-name { width: 70%; height: 22px; margin: 0 0 4px; }
  #s-feed .fx-skel-tile .fx-skel-meta { width: 88%; margin: 0; }
  #s-feed .fx-skel-tile .fx-skel-meta.short { width: 58%; }
  #s-feed .fx-skel-tile .fx-skel-price { width: 38%; margin: 0; background: var(--fx-bone); }
  #s-feed .fx-tile-in { animation: fx-tile-in .32s var(--fx-ease-out) backwards; }
}

/* Reduced motion keeps the fades and the step bar's steps, and drops the movement. */
@media (prefers-reduced-motion: reduce) {
  #s-feed .fx-bone::after { animation: none; }
  #s-feed :is(.fx-skel-line, .fx-skel-slow, .fx-tile-in) { animation: none; }
  #s-feed .fx-skel-grid.fx-skel-fresh .fx-skel-tile { animation-name: fx-skel-in; }
  #s-feed .fx-skel-stage.fx-skel-out { filter: none; }
  #s-feed .fx-stepbar > span.on i { transform: none; }
}
/* The first-visit walkthrough over the phone feed (Figma: Explore — Walkthrough 1–4 of 4). The dim
   and the finger hints let touches through to the card, so each gesture can be tried for real; only
   the coach takes taps. Over a white photo the frames' glass is too thin for the lime step count and
   the tap-zone labels, so the coach is 60% navy and the zones 50%, both under the 25% dim. Positions
   follow the 390×844 frames as fractions of the screen. */
#s-feed .fx-walk { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
#s-feed .fx-walk-dim { position: absolute; inset: 0; background: rgba(20, 27, 60, .25); animation: fx-walk-in .24s var(--fx-ease-out); }
#s-feed .fx-walk-gesture { position: absolute; inset: 0; }
#s-feed .fx-walk-coach {
  position: absolute; left: 24px; right: 24px; top: calc(52px + env(safe-area-inset-top)); pointer-events: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(20, 27, 60, .6); color: #fff; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .2));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: fx-walk-in .28s var(--fx-ease-out);
}
#s-feed .fx-walk-2 .fx-walk-coach { top: auto; bottom: calc(var(--fx-nav) + 75px); }
#s-feed .fx-walk-of { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--wk-lime); }
#s-feed .fx-walk-title { margin: 0; font-family: var(--wk-serif); font-size: 28px; line-height: 1.05; font-weight: 500; outline: none; }
#s-feed .fx-walk-body { margin: 0; font-size: 14px; line-height: 19px; color: rgba(255, 255, 255, .85); }
#s-feed .fx-walk-controls { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; }
#s-feed .fx-walk-dots { display: flex; align-items: center; gap: 5px; }
#s-feed .fx-walk-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .4); }
#s-feed .fx-walk-dots i.on { width: 18px; background: var(--wk-lime); }
#s-feed .fx-walk-btns { display: flex; align-items: center; gap: 14px; }
#s-feed .fx-walk-skip {
  min-height: 40px; padding: 0 4px; border: 0; background: none; color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 600; cursor: pointer;
}
#s-feed .fx-walk-next {
  min-height: 40px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime);
  font-size: 14px; line-height: 19px; font-weight: 600; cursor: pointer; transition: transform .12s var(--fx-ease-out);
}
#s-feed .fx-walk-next:active { transform: scale(.96); }
#s-feed :is(.fx-walk-skip, .fx-walk-next):focus-visible { outline: 3px solid var(--wk-lime); outline-offset: 2px; }
@keyframes fx-walk-in { from { opacity: 0; } }

/* 1 of 4: a finger rises along the trail under the arrow. */
#s-feed .fx-walk-swipe { position: absolute; left: calc(50% - 28px); top: 34.5%; width: 56px; height: 190px; }
#s-feed .fx-walk-arrow { position: absolute; top: 0; left: 11px; }
#s-feed .fx-walk-trail {
  position: absolute; top: 30px; left: 25px; width: 6px; height: 130px; border-radius: 3px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
}
#s-feed .fx-finger { display: block; }
#s-feed .fx-walk-slide { position: absolute; left: 0; top: 132px; animation: fx-walk-slide 2s var(--fx-ease-out) infinite; }
@keyframes fx-walk-slide {
  0% { transform: none; opacity: 0; } 12% { opacity: 1; } 62% { transform: translateY(-96px); opacity: 1; }
  80%, 100% { transform: translateY(-96px); opacity: 0; }
}

/* 2 of 4: the two halves of the photo, a finger tapping the right one. */
#s-feed .fx-walk-zone {
  position: absolute; top: 17.8%; height: 39%; width: 38.5%; display: grid; place-items: center; border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(20, 27, 60, .5); color: #fff; font-size: 14px; font-weight: 600;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
#s-feed .fx-walk-zone.left { left: 16px; }
#s-feed .fx-walk-zone.right { right: 16px; }
#s-feed .fx-walk-tap { position: absolute; left: 42px; top: 63.6%; animation: fx-walk-tap 1.4s var(--fx-ease-out) infinite; }
@keyframes fx-walk-tap { 0%, 55%, 100% { transform: none; } 25% { transform: scale(.84); } }

/* 3 of 4: two quick taps and the heart. */
#s-feed .fx-walk-double { position: absolute; left: calc(50% - 60px); top: 37.7%; width: 160px; height: 170px; }
#s-feed .fx-walk-burst { position: absolute; top: 0; left: 0; animation: fx-walk-burst 1.8s var(--fx-ease-out) infinite; }
#s-feed .fx-walk-tap2 { position: absolute; left: 70px; top: 100px; animation: fx-walk-tap2 1.8s var(--fx-ease-out) infinite; }
#s-feed .fx-walk-tap2.second { left: 45px; top: 90px; opacity: .5; animation-delay: .18s; }
@keyframes fx-walk-tap2 { 0%, 30%, 100% { transform: none; } 12% { transform: scale(.84); } }
@keyframes fx-walk-burst { 0%, 22% { transform: scale(.6); opacity: 0; } 40% { transform: scale(1.06); opacity: 1; } 55%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }

/* 4 of 4: a held finger and the ring filling. */
#s-feed .fx-walk-hold { position: absolute; left: calc(50% - 36px); top: 36.6%; width: 72px; height: 72px; }
#s-feed .fx-walk-hold .fx-finger { position: absolute; left: 8px; top: 8px; }
#s-feed .fx-walk-ring { position: absolute; inset: 0; }
#s-feed .fx-walk-ring circle { stroke-dashoffset: 100; animation: fx-walk-ring 1.8s linear infinite; }
@keyframes fx-walk-ring { 0% { stroke-dashoffset: 100; } 70%, 100% { stroke-dashoffset: 25; } }

/* Reduce Motion: the hints hold still where the frames draw them. */
@media (prefers-reduced-motion: reduce) {
  #s-feed :is(.fx-walk-dim, .fx-walk-coach, .fx-walk-slide, .fx-walk-tap, .fx-walk-tap2, .fx-walk-burst, .fx-walk-next) { animation: none; transition: none; }
  #s-feed .fx-walk-ring circle { animation: none; stroke-dashoffset: 25; }
}
/* The Vendors tab (Oct 8 frames): header, banner, the list by category, the gallery and the
   Contacted and Booked cards. On the palette.css tokens, so dark mode follows. */
.vd-page { display: flex; flex-direction: column; gap: 22px; padding-inline: 20px; }

.vd-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vd-add {
  flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--wk-lime);
  color: var(--wk-on-lime); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.vd-add:active { transform: scale(.97); }

.vd-banner {
  display: flex; align-items: flex-start; gap: 8px; padding: 12px 6px 12px 14px; border-radius: 14px; background: var(--wk-wash);
}
.vd-banner p { flex: 1; margin: 2px 0 0; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--wk-body); }
.vd-banner-x {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px 0 -6px; border: 0;
  background: none; color: var(--wk-body); cursor: pointer;
}
.vd-banner-x::after { content: ''; position: absolute; inset: -6px; }
.vd-banner-x { position: relative; }
.vd-banner-x i { font-size: 18px; }

.vd-view-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: -8px; }
.vd-view.p-seg > button { min-height: 32px; padding: 6px 12px; font-size: 13px; }

/* Saved by: Anyone, then one chip per person who saved something. */
.vd-by-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: -4px; }
.vd-by-chip {
  position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 6px 12px;
  border: 1px solid var(--wk-grip); border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit;
  font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.vd-by-chip::after { content: ''; position: absolute; inset: -6px 0; }
.vd-by-chip i { font-size: 14px; }
.vd-by-count { font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.vd-by-chip[aria-pressed='true'] { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); font-weight: 600; }
.vd-by-chip[aria-pressed='true'] .vd-by-count { color: inherit; opacity: .8; }
.vd-by-chip:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vd-by-chip { transition: none; } }

/* A category: its name and state, Compare n →, and one card of rows. */
.vd-cat { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; }
.vd-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.vd-cat-name { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.vd-cat-state { font-size: 13px; font-weight: 500; color: var(--wk-muted); }
.vd-cat-state.done { font-weight: 600; color: var(--wk-moss); }
.vd-group { margin: 0; font-size: 13px; font-weight: 600; color: var(--wk-muted); }
.vd-compare {
  min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--wk-ink); cursor: pointer; white-space: nowrap;
}
.vd-card { padding: 2px 17px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.vd-rows { margin: 0; padding: 0; list-style: none; }
.vd-rows > li + li, .vd-card > .vd-rows + .vd-out-toggle { border-top: 1px solid var(--wk-hair); }

/* One vendor: the whole row is a button laid under the content, so the pill stays its own tap. */
.vd-row { position: relative; display: flex; gap: 12px; padding: 12px 0; }
.vd-row-open {
  position: absolute; inset: 0; z-index: 0; width: 100%; padding: 0; border: 0; border-radius: 12px;
  background: none; cursor: pointer;
}
.vd-row-open:focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; }
.vd-row > :not(.vd-row-open), .vd-tcard > :not(.vd-row-open) { position: relative; z-index: 1; pointer-events: none; }
.vd-row :is(button, a):not(.vd-row-open), .vd-tcard :is(button, a):not(.vd-row-open) { pointer-events: auto; }
.vd-thumb {
  flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: var(--wk-track);
  color: var(--wk-muted);
}
.vd-thumb.s44 { width: 44px; height: 44px; }
.vd-thumb.s64 { width: 64px; height: 64px; border-radius: 16px; }
.vd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vd-thumb i { font-size: 20px; }
.vd-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vd-row-top { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.vd-name { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 500; line-height: 20px; color: var(--wk-ink); }
.vd-price { flex: none; font-size: 13px; font-weight: 600; color: var(--wk-ink); }
.vd-price.none { font-weight: 500; color: var(--wk-muted); }
.vd-chev { flex: none; align-self: center; font-size: 14px; color: var(--wk-muted); }
.vd-pill-line { min-height: 23px; }
.vd-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--wk-muted); }
.vd-by { margin: 0; font-size: 11px; font-weight: 500; line-height: 1.4; color: var(--wk-muted); }
.vd-row.out .vd-thumb { opacity: .45; }
.vd-row.out .vd-name { text-decoration: line-through; color: var(--wk-muted); }
.vd-row.out .vd-price { color: var(--wk-muted); }

.vd-out-toggle {
  display: flex; align-items: center; gap: 4px; width: 100%; min-height: 40px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--wk-muted); cursor: pointer;
}
.vd-out-toggle i { font-size: 14px; }

.vd-empty {
  display: flex; align-items: center; gap: 12px; padding: 16px 17px; border: 1px solid var(--wk-hair); border-radius: 24px;
  background: var(--wk-card);
}
.vd-empty-icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--wk-btn); color: var(--wk-on-navy);
}
.vd-empty-icon i { font-size: 22px; }
.vd-empty.skipped .vd-empty-icon { opacity: .35; }
.vd-empty.skipped .vd-empty-text { flex: 1; }
.vd-empty-text { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--wk-muted); }
.vd-empty-links { margin: 4px 0 0; font-size: 13px; color: var(--wk-muted); }
.vd-link {
  min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--wk-plum); cursor: pointer;
}

/* Contacted and Booked: one card per vendor. */
.vd-cards { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.vd-tcard {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 16px; border: 1px solid var(--wk-hair);
  border-radius: 24px; background: var(--wk-card);
}
.vd-tcard .vd-row-open { border-radius: 24px; }
.vd-tcard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vd-meta { margin: 0; font-size: 13px; line-height: 19px; color: var(--wk-muted); }
.vd-mail { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 500; color: var(--wk-ink); }
.vd-mail-act, .vd-next {
  min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--wk-plum);
  cursor: pointer; white-space: nowrap;
}
.vd-mail-act { font-size: 12.5px; }
.vd-next { align-self: flex-start; font-size: 12.5px; font-weight: 500; color: var(--wk-ink); text-align: left; white-space: normal; }
.vd-none { margin: 0; font-size: 14px; line-height: 1.5; color: var(--wk-muted); }

/* Gallery: two columns of category collages. */
.vd-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; margin: 0; padding: 0; list-style: none; }
.vd-tile {
  display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0; border: 0; background: none; font: inherit;
  text-align: left; cursor: pointer;
}
.vd-collage {
  position: relative; display: grid; gap: 3px; aspect-ratio: 1; overflow: hidden; border-radius: 20px;
  background: var(--wk-ground); margin-bottom: 10px;
}
.vd-collage.n0 { place-items: center; background: var(--wk-btn); color: var(--wk-on-navy); }
.vd-collage.n0 i { font-size: 72px; font-weight: 300; }
.vd-collage.n2 { grid-template-columns: 1fr 1fr; }
.vd-collage.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.vd-collage.n3 img:first-child { grid-row: span 2; }
.vd-collage img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.vd-tile-booked {
  position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: var(--wk-card);
  font-size: 11px; font-weight: 600; color: var(--wk-moss);
}
.vd-tile-name { font-size: 15px; font-weight: 600; color: var(--wk-ink); }
.vd-tile-sub { font-size: 12.5px; font-weight: 500; color: var(--wk-muted); }
.vd-tile-sub.done { color: var(--wk-moss); }
.vd-tile:focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 4px; border-radius: 20px; }
/* Add a vendor (Figma "Vendors · Add a vendor": search Explore, not in Explore, add manually). On
   plan.css and the palette.css tokens, so dark mode follows. The frames' gray fields keep the 3:1
   outline .p-field has, and small controls keep their drawn size with an invisible 44px target. */
#add-vendor-sheet .p-sheet-top { margin-bottom: 16px; }
#add-vendor-sheet .p-sheet-body { margin-top: 16px; }
.av-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Search Explore. */
.av-search { display: flex; flex-direction: column; gap: 12px; }
.av-search .p-label { line-height: normal; }
.av-find {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 13px 15px; border: 1px solid var(--wk-edge);
  border-radius: 16px; background: var(--wk-track); color: var(--wk-muted); transition: border-color .15s, box-shadow .15s;
}
.av-find:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.av-find i { font-size: 18px; }
.av-find input {
  flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 16px; line-height: normal; outline: none; appearance: none;
}
.av-find input::placeholder { color: var(--wk-muted); opacity: 1; }
.av-find input::-webkit-search-cancel-button { display: none; }
.av-note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-muted); }

.av-results { margin: 0; padding: 0 16px; list-style: none; border: 1px solid var(--wk-hair); border-radius: 20px; background: var(--wk-card); }
.av-result { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.av-result + .av-result { border-top: 1px solid var(--wk-hair); }
.av-tile {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--wk-wash); color: var(--wk-moss);
}
.av-tile i { font-size: 22px; }
.av-result-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: normal; }
.av-result-name { font-size: 15px; font-weight: 500; color: var(--wk-ink); overflow-wrap: anywhere; }
.av-result-sub { font-size: 12.5px; color: var(--wk-muted); overflow-wrap: anywhere; }
.av-save { position: relative; flex: none; min-height: 0; padding: 6px 13px; font-size: 13px; line-height: normal; }
.av-save::after { content: ''; position: absolute; inset: -6px -4px; }
.av-save[aria-disabled='true'] { cursor: wait; }
.av-saved { flex: none; padding: 7px 14px; font-size: 13px; font-weight: 500; line-height: normal; color: var(--wk-muted); outline: none; }

.av-fallback {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; margin: 0; padding-top: 4px; font-size: 14px;
  font-weight: 500; line-height: normal; color: var(--wk-muted);
}
.av-link {
  min-height: 44px; margin: -13px 0; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit;
  font-weight: 600; cursor: pointer;
}

.av-none {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--wk-hair); border-radius: 20px;
  background: var(--wk-card); line-height: normal;
}
.av-none-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--wk-ink); overflow-wrap: anywhere; }
.av-none-text { margin: 0; font-size: 13px; color: var(--wk-muted); }
.av-big { min-height: 48px; padding: 13px 20px; font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }

/* Add them yourself. */
.av-form { display: flex; flex-direction: column; gap: 16px; }
.av-back { align-self: flex-start; gap: 2px; min-height: 44px; margin: -14px 0 -10px -4px; font-size: 13px; }
.av-back i { font-size: 16px; }
.av-fields { display: flex; flex-direction: column; gap: 10px; }
.av-fields > .p-error { margin: 0; }
.av-form .p-field { padding: 11px 15px; }
.av-form .p-field-label { font-size: 12px; line-height: 16px; }
.av-form .p-field :is(input, textarea) { min-height: 0; line-height: normal; }
.av-form .p-field :is(input, textarea)::placeholder { color: var(--wk-muted); opacity: 1; }
.av-form .p-field textarea { height: 54px; resize: none; }

/* Category and Status show their value; the native select over the whole field does the picking. */
.av-pick { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.av-pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.av-pick-value { font-size: 16px; line-height: normal; color: var(--wk-ink); overflow-wrap: anywhere; }
.av-pick-value.empty { color: var(--wk-muted); }
.av-pick > i { flex: none; font-size: 16px; color: var(--wk-muted); }
.av-form .av-pick select {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; border-radius: 16px; opacity: 0;
  appearance: none; background: var(--wk-card); color: var(--wk-ink); cursor: pointer;
}

.av-prices { display: flex; gap: 10px; }
.av-prices > .p-field { flex: 1 1 0; min-width: 0; }
.av-money { display: flex; align-items: baseline; gap: 1px; margin-top: 2px; font-size: 16px; line-height: normal; color: var(--wk-muted); }
.av-money.filled { color: var(--wk-ink); }
.av-form .av-money input { flex: 1; width: auto; min-width: 0; margin: 0; }
.av-hint { margin: 0; font-size: 12px; font-weight: 500; line-height: normal; color: var(--wk-muted); }

/* The status chip, as the list draws it. */
.av-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 9px; border: 1px solid transparent;
  border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 17px; white-space: nowrap;
}
.av-chip::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.av-chip[data-status='saved'] { border-color: var(--wk-line); background: var(--wk-ground); color: var(--wk-muted); }
.av-chip[data-status='saved']::before { background: color-mix(in srgb, var(--wk-edge) 55%, var(--wk-card)); }
.av-chip[data-status='contacted'] { background: var(--wk-plum-wash); color: var(--wk-plum); }
.av-chip[data-status='awaiting_reply'] { background: var(--wk-sand); color: var(--wk-on-sand); }
.av-chip[data-status='proposal_received'] { background: var(--wk-sky); color: var(--wk-ink); }
.av-chip[data-status='booked'] { background: var(--wk-wash); color: var(--wk-moss); }
.av-chip[data-status='booked']::before { background: var(--wk-olive); }

.av-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.av-actions .p-link { min-height: 44px; margin: -13px 0; font-size: 13px; line-height: normal; }

.av-link:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .av-find { transition: none; } }

/* Booked: the lime prompt, the contract box and what a read contract filled in. */
.av-booked-note { margin: 0; padding: 12px 15px; border-radius: 14px; background: var(--wk-wash); font-size: 13px; line-height: 1.45; color: var(--wk-ink); }
.av-form .p-field.av-filled { box-shadow: inset 0 0 0 1.5px var(--wk-olive); background: var(--wk-wash); }
.av-attach { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px dashed var(--wk-stroke); border-radius: 16px; }
.av-attach-head { display: flex; align-items: center; gap: 12px; }
.av-attach-head > i { flex: none; font-size: 18px; color: var(--wk-ink); }
.av-attach-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; font-weight: 500; line-height: normal; }
.av-attach-title { font-size: 14px; color: var(--wk-ink); overflow-wrap: anywhere; }
.av-attach-sub { margin: 0; font-size: 12px; color: var(--wk-muted); }
.av-attach-sub.bad { color: var(--wk-plum); }
.av-attach-x { flex: none; }
.av-sources { display: flex; gap: 8px; }
.av-sources button {
  display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--wk-line); border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit;
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.av-sources button[aria-expanded='true'] { border-color: var(--wk-ink); }
.av-sources i { font-size: 16px; }
.av-sources button:focus-visible, .av-mail button:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.av-spin {
  flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid var(--wk-hair); border-top-color: var(--wk-ink);
  border-radius: 50%; animation: av-spin .8s linear infinite;
}
@keyframes av-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .av-spin { animation-duration: 2.4s; } }
.av-mail { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.av-mail li + li { border-top: 1px solid var(--wk-hair); }
.av-mail button {
  display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 44px; padding: 8px 2px; border: 0; background: none;
  font: inherit; line-height: normal; text-align: left; cursor: pointer;
}
.av-mail-from { font-size: 14px; font-weight: 500; color: var(--wk-ink); }
.av-mail-subject { overflow: hidden; font-size: 12px; color: var(--wk-muted); text-overflow: ellipsis; white-space: nowrap; }
/* vstatus: the vendor status pill and the Change status, Ruled out and All set sheets (Oct 8
   frames). The pill's awaiting, proposal (the frame's 18% blue wash, made opaque) and faint-dot
   colours have no palette token, so they are defined here with their dark values. Ruled out's
   label uses muted, not the frame's #B9BCCB, which is 1.7:1 on its pill. */
:root {
  --vs-faint: #B9BCCB; --vs-awaiting-wash: #F6E3D6; --vs-awaiting: #9C4A2E; --vs-proposal-wash: #E5E8F0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --vs-faint: #6B7082; --vs-awaiting-wash: #3D2A20; --vs-awaiting: #F0B294; --vs-proposal-wash: #343F56;
  }
}
[data-theme='dark'] {
  --vs-faint: #6B7082; --vs-awaiting-wash: #3D2A20; --vs-awaiting: #F0B294; --vs-proposal-wash: #343F56;
}

.vs-chip {
  position: relative; display: inline-flex; align-items: center; gap: 4px; flex: none; margin: 0; padding: 3px 10px 3px 9px;
  border: 1px solid transparent; border-radius: 999px; background: var(--wk-ground); color: var(--wk-muted);
  font-family: var(--wk-sans); font-size: 11px; font-weight: 500; line-height: normal; white-space: nowrap;
}
.vs-chip-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vs-chip-more { flex: none; width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vs-chip[data-status='saved'] { border-color: var(--wk-line); }
.vs-chip:is([data-status='saved'], [data-status='ruled_out']) .vs-chip-dot { background: var(--vs-faint); }
.vs-chip[data-status='contacted'] { background: var(--wk-plum-wash); color: var(--wk-plum); }
.vs-chip[data-status='awaiting_reply'] { background: var(--vs-awaiting-wash); color: var(--vs-awaiting); }
.vs-chip[data-status='proposal_received'] { background: var(--vs-proposal-wash); color: var(--wk-ink); }
.vs-chip[data-status='booked'] { background: var(--wk-wash); color: var(--wk-moss); }
.vs-chip[data-status='booked'] .vs-chip-dot { background: var(--wk-olive); }
button.vs-chip { cursor: pointer; }
button.vs-chip::after { content: ''; position: absolute; inset: -11px -4px; }
button.vs-chip:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* The sheets: the frames space them at 16 throughout. */
:is(#vs-status, #vs-ruled-out, #vs-all-set, #vs-who) .p-sheet-top { margin-bottom: 16px; }
:is(#vs-status, #vs-ruled-out, #vs-all-set, #vs-who) .p-sheet-body { gap: 16px; margin-top: 16px; }
.vs-form { display: flex; flex-direction: column; gap: 16px; }
.vs-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* One choice per row in a hairline card: a pill or a label, a line under it, the radio. */
.vs-options { min-inline-size: 0; margin: 0; padding: 0 16px; }
.vs-option {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--wk-hair);
  cursor: pointer;
}
.vs-options > legend + .vs-option { border-top: 0; }
.vs-option:has(input:focus-visible)::before {
  content: ''; position: absolute; inset: 2px -10px; border: 3px solid var(--wk-ink); border-radius: 14px; pointer-events: none;
}
.vs-option-main { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.vs-option-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vs-option-name { display: flex; }
.vs-option-help { font-size: 12.5px; line-height: normal; color: var(--wk-muted); }
.vs-reason { font-size: 15px; font-weight: 500; line-height: normal; color: var(--wk-ink); }
.vs-suggest { font-size: 11.5px; font-weight: 600; line-height: normal; color: var(--wk-plum); }
.vs-radio { flex: none; width: 22px; height: 22px; box-sizing: border-box; border: 1.6px solid var(--wk-edge); border-radius: 50%; }
.vs-option input:checked ~ .vs-radio {
  border-color: var(--wk-btn); background: radial-gradient(circle, var(--wk-btn) 5.5px, transparent 6px);
}

.vs-money { margin: 0; font-size: 13px; line-height: 1.45; color: var(--wk-body); }
.vs-money:not(:empty) { margin-bottom: 16px; }
.vs-foot { margin: 0; font-size: 12px; font-weight: 500; line-height: normal; color: var(--wk-muted); }
.vs-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--wk-muted); }
.vs-form > .p-error { margin: -6px 0 0; }

.vs-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vs-actions .p-btn { min-height: 48px; font-size: 15px; }
.vs-actions .p-link { min-height: 44px; margin: -12px 0; font-size: 13px; }

/* Who's this contract with?: the category's vendors, a search, then Add <printed name>. */
.vs-who-group { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.vs-who-group > legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; line-height: normal; }
.vs-who-group .vs-option:first-child { border-top: 0; }
.vs-who-add { margin: 0; font-size: 13px; line-height: normal; color: var(--wk-body); }
/* Wedding location on the Vendors tab (the Wedding location frames): the bar, the location filter
   and the Where's the wedding? and Going with sheets. On the palette.css tokens, so dark mode
   follows. */
.vd-head { gap: 22px; }

.wl-bar { padding: 18px; border: 1px solid var(--wk-hair); border-radius: 18px; background: var(--wk-card); }
.wl-bar-top { display: flex; align-items: center; gap: 12px; }
.wl-pin { flex: none; color: var(--wk-ink); }
.wl-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wl-eyebrow { margin: 0; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.wl-place { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }
.wl-change {
  flex: none; min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--wk-plum); white-space: nowrap; cursor: pointer;
}
.wl-bar-body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--wk-hair); }
.wl-compare {
  min-height: 44px; margin: -13px 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
  line-height: 18px; color: var(--wk-ink); cursor: pointer;
}
.wl-bar-hint { margin: 14px 0 0; padding-left: 32px; font-size: 12.5px; line-height: normal; color: var(--wk-muted); }
:is(.wl-change, .wl-compare):focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; border-radius: 6px; }

/* The location filter: a pill in the view row; its menu lists each place with its vendor count. */
.wl-filter .lm-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 10px 6px 12px;
  border: 1px solid var(--wk-stroke); border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit;
  font-size: 13px; font-weight: 600; line-height: 18px; cursor: pointer;
}
.wl-filter .lm-btn::after { content: ''; position: absolute; inset: -6px 0; }
.wl-filter .lm-btn i { font-size: 14px; color: var(--wk-ink); }
.wl-filter .lm-menu { min-width: 240px; }

/* The sheets space everything 16 apart, like the other vendor sheets. */
:is(#wl-where, #wl-going) .p-sheet-top { margin-bottom: 16px; }
:is(#wl-where, #wl-going) .p-sheet-body { gap: 16px; margin-top: 16px; }
.wl-strong { font-weight: 600; }

/* Still deciding: each place a chip with a remove ×, then + Add a place (dashed). */
.wl-cities { display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; }
.wl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wl-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; box-sizing: border-box; padding: 7px 4px 7px 12px;
  border: 1px solid var(--wk-stroke); border-radius: 999px; background: var(--wk-card); font: inherit; font-size: 13px;
  font-weight: 500; line-height: 18px; color: var(--wk-ink);
}
.wl-chip-x {
  position: relative; display: grid; place-items: center; width: 22px; height: 22px; margin: -4px 0; padding: 0; border: 0;
  border-radius: 50%; background: none; color: var(--wk-ink); cursor: pointer;
}
.wl-chip-x::after { content: ''; position: absolute; inset: -11px -6px; }
.wl-chip-x i { font-size: 14px; color: var(--wk-muted); }
button.wl-chip { padding: 7px 12px; cursor: pointer; }
.wl-chip.add { border-style: dashed; color: var(--wk-plum); }
.wl-chip.suggest { color: var(--wk-plum); }
.wl-chip.suggest[aria-pressed='true'] { border-color: var(--wk-ink); box-shadow: inset 0 0 0 1px var(--wk-ink); color: var(--wk-ink); }
.wl-chip.typing { padding: 0 12px; border-color: var(--wk-ink); }
.wl-chip.typing input {
  width: 13em; min-height: 32px; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 16px;
  outline: none;
}
:is(.wl-chip-x, button.wl-chip):focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; }

/* A whole country or state: a few popular areas to add. */
.wl-narrow { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--wk-wash); }
.wl-narrow-ask { margin: 0; font-size: 14px; font-weight: 600; line-height: normal; color: var(--wk-ink); }
.wl-narrow-hint { margin: 0; font-size: 12.5px; line-height: normal; color: var(--wk-body); }
.wl-suggest { display: flex; flex-wrap: wrap; gap: 8px; }

/* Place search: suggestions under the box as the couple types; the highlighted one is what Enter picks. */
.wl-combo { display: flex; flex-direction: column; gap: 6px; }
.wl-chips > .wl-adding { flex: 1 1 100%; }
.wl-combo.chip { align-items: flex-start; }
.wl-combo .p-error { margin: 0; }
.wl-list {
  align-self: stretch; margin: 0; padding: 4px 0; list-style: none; border: 1px solid var(--wk-stroke); border-radius: 14px;
  background: var(--wk-card); box-shadow: 0 6px 18px rgb(20 27 60 / 8%);
}
.wl-list[hidden] { display: none; }
.wl-list > li {
  display: flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 10px 14px; font-size: 15px;
  line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; cursor: pointer;
}
.wl-list > li + li { border-top: 1px solid var(--wk-hair); }
.wl-list > li:hover { background: var(--wk-track); }
.wl-list > li[aria-selected='true'] { background: var(--wk-plum-wash); box-shadow: inset 3px 0 0 var(--wk-plum); font-weight: 600; }
.wl-none { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }
.wl-none:empty { display: none; }

.wl-one { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; }
.wl-field { margin: 0; }
.wl-home { display: flex; flex-direction: column; gap: 10px; }
.wl-home-title { margin: 0; padding: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.wl-home-help { margin: 0; font-size: 12.5px; line-height: normal; color: var(--wk-muted); }
.wl-others { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.wl-others > legend { float: left; width: 100%; margin-bottom: 10px; }

/* Compare's places mode: a pin where a vendor's photo would be, the facts as they arrive. */
.vc-place-pin {
  display: grid; place-items: center; width: 100%; height: 60px; border-radius: 12px; background: var(--wk-plum-wash);
  color: var(--wk-plum);
}
.vc-table td.vc-wait { color: var(--wk-muted); }
.vc-retry { align-self: flex-start; min-height: 44px; margin: -6px 0 -10px; font-size: 13px; }
.vc-places .vc-contact { height: auto; min-height: 37px; padding-block: 8px; white-space: normal; line-height: 1.25; }
/* Compare (Oct 8 frames 11:739 and 32:1459): the table of vendors side by side with the best fit
   washed lime, Wickette's read, the disclaimer, and the picker with its navy tray. On the
   palette.css tokens, so dark mode follows; the tray flips to lime there like the main button.
   Row labels are 11px, not the frame's 10.5. */
.viewport:has(> #s-compare.active) { background: var(--wk-paper); }
#s-compare { padding-bottom: 0; }
.vc-page { display: flex; flex-direction: column; gap: 22px; padding-inline: 20px; }
.vc-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.vc-back { align-self: flex-start; margin-block: -12px; font-weight: 600; }
.vc-picker .vc-back { font-weight: 500; }
.vc-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vc-title {
  margin: 0; font-family: var(--wk-serif); font-size: 38px; line-height: 36px; font-weight: 500; letter-spacing: -.02em;
  color: var(--wk-ink); text-wrap: balance; outline: none;
}
.vc-title.sm { font-size: 33px; }
.vc-edit {
  min-height: 44px; margin: -12px -10px; padding: 0 10px; border: 0; background: none; font: inherit; font-size: 14px;
  font-weight: 600; color: var(--wk-ink); cursor: pointer;
}
.vc-sub { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--wk-muted); }
.vc-diff { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 500; color: var(--wk-ink); }

/* The table: a card the width of the page on a phone; on a computer it scrolls sideways under a
   label column that stays put. */
.vc-card { overflow: hidden; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); box-shadow: var(--wk-shadow); }
.vc-card.wide { overflow-x: auto; scrollbar-width: thin; }
.vc-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vc-card.wide .vc-table { width: max-content; min-width: 100%; }
.vc-col-label { width: 78px; }
.vc-card.wide .vc-col-label { width: 112px; }
.vc-card.wide .vc-col { width: 176px; }
.vc-col-add { width: 112px; }
.vc-table :is(th, td) { padding: 0 10px; text-align: left; vertical-align: middle; font-weight: 500; color: var(--wk-ink); }
.vc-table .vc-label { padding: 0 4px 0 10px; font-size: 11px; font-weight: 600; line-height: 13px; color: var(--wk-muted); }
.vc-card.wide .vc-label { position: sticky; left: 0; z-index: 1; background: var(--wk-card); box-shadow: inset -1px 0 0 var(--wk-hair); }
.vc-table .best { background: var(--wk-wash); }

.vc-table .vc-head > * { padding-top: 12px; vertical-align: top; }
.vc-who .vd-thumb.s44 { width: 100%; height: 60px; }
.vc-name { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; line-height: normal; overflow-wrap: anywhere; }
.vc-table .vc-meta > * { padding-bottom: 12px; vertical-align: top; }
.vc-meta td > * { display: block; margin-top: 4px; }
.vc-meta td > :first-child { margin-top: 2px; }
.vc-town { font-size: 12px; line-height: normal; color: var(--wk-muted); overflow-wrap: anywhere; }
.vc-best { font-size: 11.5px; font-weight: 600; line-height: normal; color: var(--wk-moss); }
.vc-swap {
  position: relative; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; line-height: normal;
  color: var(--wk-plum); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.vc-swap::after { content: ''; position: absolute; inset: -13px -12px; }

.vc-row > * { height: 52px; border-top: 1px solid var(--wk-hair); font-size: 13px; line-height: normal; overflow-wrap: anywhere; }
.vc-row > .vc-gap { border-top: 0; }
.vc-row.price > td { font-weight: 600; }
.vc-table td.good { color: var(--wk-moss); }
.vc-table td.over { color: var(--wk-plum); }
.vc-table .vc-same { color: var(--wk-muted); }
.vc-table .vc-act > * { height: 60px; padding-block: 8px; }
.vc-contact {
  position: relative; width: 100%; min-height: 36px; padding: 0 8px; border: 1px solid var(--wk-stroke); border-radius: 999px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.vc-contact::after { content: ''; position: absolute; inset: -5px 0; }
.vc-head .vc-gap { padding: 12px 12px 0 2px; }
.vc-add {
  width: 100%; min-height: 60px; padding: 0; border: 1px dashed var(--wk-edge); border-radius: 12px; background: none;
  color: var(--wk-body); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}

/* Wickette's read: lime, an italic plum label over serif words. Then the disclaimer. */
.vc-read { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--wk-wash); }
.vc-read-label { margin: 0; font-family: var(--wk-serif); font-style: italic; font-size: 17px; font-weight: 500; line-height: normal; color: var(--wk-plum); }
.vc-read-text {
  margin: 0; font-family: var(--wk-serif); font-size: 19.5px; line-height: 28px; font-weight: 500; letter-spacing: -.01em;
  color: var(--wk-ink); overflow-wrap: anywhere; max-width: 64ch;
}
.vc-read-text.quiet { font-style: italic; color: var(--wk-body); }
.vc-read-slot:empty { display: none; }
.vc-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--wk-track); }
.vc-note i { flex: none; margin-top: 1px; font-size: 16px; color: var(--wk-muted); }
.vc-note p { max-width: 80ch; margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--wk-muted); }
.vc-note strong { font-weight: 700; }
.vc-swap-all { box-shadow: 0 2px 4px rgba(20, 26, 61, .05); }

/* The picker: a card per vendor with the tick, the photo, name and price, and the status. */
.vc-picker { min-height: 100dvh; box-sizing: border-box; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.vc-pick-head { display: flex; flex-direction: column; gap: 4px; }
.vc-lead { margin: 0; font-size: 13px; line-height: 19px; color: var(--wk-body); }
.vc-picks { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; list-style: none; }
.vc-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--wk-hair);
  border-radius: 24px; background: var(--wk-card); box-shadow: 0 6px 10px rgba(20, 26, 61, .06); color: var(--wk-ink);
  font: inherit; text-align: left; cursor: pointer; transition: opacity .15s;
}
.vc-pick.locked { opacity: .55; cursor: not-allowed; }
.vc-pick .vd-thumb.s44 { width: 48px; height: 48px; }
.vc-pick-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.vc-pick-name { font-size: 15px; font-weight: 500; line-height: normal; overflow-wrap: anywhere; }
.vc-pick-price { font-size: 13px; line-height: normal; color: var(--wk-muted); }
.vc-help { margin: 0; font-size: 12.5px; line-height: normal; color: var(--wk-muted); }
.vc-more {
  width: 100%; min-height: 48px; padding: 14px 16px; border: 1px dashed var(--wk-grip); border-radius: 16px; background: none;
  color: var(--wk-muted); font: inherit; font-size: 14px; font-weight: 500; line-height: normal; text-align: left; cursor: pointer;
}

/* The tray rides above the tab bar, at the foot of the screen when the list is short. */
.vc-tray {
  position: sticky; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 3; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; margin-top: auto; padding: 10px 10px 10px 18px; border-radius: 18px;
  background: var(--wk-btn); box-shadow: 0 24px 30px -12px rgba(20, 27, 60, .35);
}
.vc-tray-count { margin: 0; font-size: 13px; font-weight: 500; color: var(--wk-on-navy); }
.vc-tray-go {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--wk-on-btn); color: var(--wk-btn);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.vc-tray-go:disabled { opacity: .5; cursor: not-allowed; }

:is(.vc-edit, .vc-swap, .vc-contact, .vc-add, .vc-pick, .vc-more):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.vc-tray-go:focus-visible { outline: 3px solid var(--wk-on-btn); outline-offset: 2px; }

/* A computer gives the table room for three vendors and "+ Add" before it scrolls; the picker
   keeps the usual reading width. */
@media (min-width: 860px) {
  .vc-page:not(.vc-picker) { max-width: 880px; }
  .vc-picker { padding-bottom: 24px; }
  .vc-tray { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-pick { transition: none; }
}
/* The vendor page (Oct 8 frames, Ada Films 10:369 on Oct 20): header, photos, Next step, Pricing,
   Timeline, Details, Emails & documents, Notes and the closing buttons, then a filed email thread. On the palette.css tokens, so dark mode follows.
   Rust and clay mark money paid and due (Budget's colours) and the sage band is a vendor's price
   range; none has a palette token, so they are defined here with their dark values. */
:root { --vp-rust: #9C4A2E; --vp-clay: #F6E3D6; --vp-band: rgba(111, 154, 122, .35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --vp-rust: #F0B294; --vp-clay: #3D2A20; --vp-band: rgba(111, 154, 122, .5); }
}
[data-theme='dark'] { --vp-rust: #F0B294; --vp-clay: #3D2A20; --vp-band: rgba(111, 154, 122, .5); }

.viewport:has(> #s-vendor.active) { background: var(--wk-paper); }
.vp-page { display: flex; flex-direction: column; gap: 18px; padding-inline: 20px; padding-bottom: 120px; }
:where(.vp-page p) { margin: 0; }
.vp-tight { margin-top: -8px; }

/* Header: back, status, name. */
.vp-head { display: flex; flex-direction: column; gap: 18px; }
.vp-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -10px 0 -12px;
  padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--wk-ink); cursor: pointer;
}
.vp-back span { font-size: 18px; line-height: 1; margin-top: -2px; }
.vp-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vp-status .vs-chip { padding: 4px 10px; font-size: 12px; font-weight: 600; }
.vp-status .vs-chip[data-status='booked'] .vs-chip-dot { display: none; }
.vp-status .vs-chip[data-status='booked']::before { content: '✓'; }
.vp-change {
  min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--wk-plum); cursor: pointer;
}
.vp-name h1 {
  margin: 0; font-family: var(--wk-serif); font-size: 38px; line-height: 1.15; font-weight: 500; color: var(--wk-ink);
  overflow-wrap: anywhere; text-wrap: balance;
}
.vp-name p { margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--wk-muted); }
.vp-name .vp-saved-by { margin-top: 4px; font-size: 13px; }
.vp-about { font-size: 14px; line-height: 1.45; color: var(--wk-body); }

/* Photos: one wide, or a row that swipes two at a time. */
.vp-photos {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 18px;
}
.vp-photos::-webkit-scrollbar { display: none; }
.vp-photo {
  flex: 0 0 calc(50% - 4px); width: calc(50% - 4px); height: 210px; min-width: 0; border-radius: 18px; object-fit: cover;
  background: var(--wk-track); scroll-snap-align: start;
}
.vp-photos.one .vp-photo { flex-basis: 100%; width: 100%; }
.vp-photo-art {
  display: grid; place-items: center; height: 210px; border-radius: 18px; background: var(--wk-btn); color: var(--wk-on-navy);
}
.vp-photo-art i { font-size: 72px; font-weight: 300; }
.vp-credit { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -12px 0; }
.vp-credit p { font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.vp-credit .p-link { flex: none; min-height: 44px; font-size: 13px; }
.vp-credit .p-link i { font-size: 15px; }

/* Next step: the plum card. */
.vp-next {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 22px; background: var(--wk-plum-wash);
}
.vp-next h2:focus { outline: none; }
.vp-next-x {
  position: absolute; top: 4px; right: 17px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 50%; background: none; color: var(--wk-body); font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.vp-eyebrow { font-family: var(--wk-serif); font-style: italic; font-size: 17px; font-weight: 500; color: var(--wk-plum); }
.vp-next h2 { margin: 0; font-family: var(--wk-serif); font-size: 24px; line-height: 1.2; font-weight: 500; color: var(--wk-ink); }
.vp-asks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vp-asks li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--wk-body); }
.vp-asks li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--wk-plum); transform: translateY(-2px); }
.vp-next .p-btn { min-height: 46px; }
.vp-foot { font-size: 12px; line-height: 1.4; color: var(--wk-muted); }

/* Sections: a serif heading over a hairline card. */
.vp-section { display: flex; flex-direction: column; gap: 18px; }
.vp-h2 { margin: 0; font-family: var(--wk-serif); font-size: 24px; line-height: 1.2; font-weight: 500; color: var(--wk-ink); }
.vp-h2-sub { margin-top: 2px; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--wk-muted); }
.vp-h2-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vp-h2-link {
  min-height: 44px; margin: -10px 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--wk-plum); cursor: pointer; text-align: right;
}
.vp-h2-link:disabled { color: var(--wk-muted); cursor: wait; }
.vp-h3 { margin: 0; font-family: var(--wk-serif); font-size: 21px; line-height: 1.2; font-weight: 500; color: var(--wk-ink); }
.vp-card { margin: 0; padding: 4px 16px; list-style: none; border: 1px solid var(--wk-hair); border-radius: 22px; background: var(--wk-card); }
.vp-card.pad { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.vp-card > li + li { border-top: 1px solid var(--wk-hair); }
.vp-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; box-sizing: border-box; padding: 13px 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left;
}
button.vp-row { cursor: pointer; }
button.vp-row:disabled { cursor: default; }
.vp-row-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.vp-row-label { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--wk-ink); overflow-wrap: anywhere; }
.vp-row-hint { font-size: 12px; line-height: 1.35; color: var(--wk-muted); overflow-wrap: anywhere; }
.vp-row-value { flex: 0 1 auto; max-width: 58%; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--wk-body); text-align: right; overflow-wrap: anywhere; }
.vp-row-value.none { color: var(--wk-muted); }
.vp-row-value.ok { color: var(--wk-moss); }
.vp-row-value.ask { color: var(--vp-rust); }
.vp-visit { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; color: var(--wk-ink); text-decoration: none; }
.vp-go { flex: none; font-size: 13.5px; font-weight: 600; color: var(--wk-muted); white-space: nowrap; }
.vp-go.plum { color: var(--wk-plum); }
.vp-row-label.none { color: var(--wk-muted); }
/* "Emails" and "Documents" inside the card: small grey labels, no rule under them. */
.vp-subhead { padding: 12px 0 4px; }
.vp-card > li + .vp-subhead { padding-top: 14px; }
.vp-card > .vp-subhead + li { border-top: 0; }
.vp-subhead h3 { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--wk-muted); }
.vp-mail .vp-row-hint { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
.vp-mail .vp-go { color: var(--wk-ink); }
.vp-doc { display: flex; align-items: center; gap: 4px; }
.vp-doc .vp-row { flex: 1; min-width: 0; }
.vp-doc .vp-row .vp-go { color: var(--wk-ink); }
.vp-doc-x {
  display: grid; place-items: center; flex: none; min-width: 44px; height: 44px; margin-right: -12px; padding: 0 8px; border: 0;
  border-radius: 12px; background: none; color: var(--wk-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.vp-doc-x i { font-size: 16px; }
.vp-doc-x.armed { color: var(--wk-plum); }
.vp-say { font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--wk-body); }
.vp-say.bad { color: var(--wk-plum); }
.vp-say:empty { display: none; }
.vp-section > .vp-say { margin-top: -8px; }
/* A document being added or read: a spinner and what's happening, at the top of the sheet. */
.vp-busy { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.vp-busy:empty { display: none; }
.vp-busy-head { display: flex; align-items: center; gap: 10px; }
.vp-busy-text { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--wk-ink); }

.vp-disclaimer {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--wk-track);
  font-size: 12.5px; line-height: 1.45; color: var(--wk-muted);
}
.vp-disclaimer i { flex: none; margin-top: 1px; font-size: 16px; }
.vp-disclaimer b { font-weight: 600; }

/* Pricing. */
.vp-price-top { display: flex; align-items: center; gap: 12px; }
.vp-price-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vp-price-label { font-size: 12px; font-weight: 600; color: var(--wk-muted); }
.vp-price-big { font-size: 22px; font-weight: 700; letter-spacing: -.3px; color: var(--wk-ink); }
.vp-price-big.none { font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--wk-muted); }
.vp-tag { flex: none; padding: 2px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.vp-tag.estimate { border: 1px dashed var(--wk-edge); background: var(--wk-card); color: var(--wk-muted); }
.vp-tag.quoted { background: var(--wk-track); color: var(--wk-ink); }
.vp-tag.booked { background: var(--wk-wash); color: var(--wk-moss); }
.vp-range { display: flex; flex-direction: column; gap: 2px; }
.vp-bar { position: relative; height: 34px; }
.vp-track, .vp-band, .vp-fill { position: absolute; top: 22px; height: 8px; border-radius: 4px; }
.vp-track { left: 0; right: 0; background: var(--wk-track); }
.vp-band { background: var(--vp-band); }
.vp-mark {
  position: absolute; top: 18px; width: 16px; height: 16px; box-sizing: border-box; margin-left: -8px; border: 3px solid var(--wk-card);
  border-radius: 50%; background: var(--wk-plum); box-shadow: 0 0 0 1px var(--wk-plum);
}
.vp-mark.quote { background: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.vp-mark-label, .vp-paid-label { position: absolute; top: 0; font-size: 11.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--wk-plum); }
.vp-bar.paid .vp-track, .vp-bar.paid .vp-fill { top: 18px; }
.vp-bar.paid .vp-track { background: var(--vp-clay); }
.vp-fill { left: 0; background: var(--vp-rust); }
.vp-paid-label { left: 0; color: var(--vp-rust); }
.vp-ends { position: relative; height: 16px; font-size: 11px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.vp-ends > span { position: absolute; top: 0; white-space: nowrap; }
.vp-ends > .quote { font-weight: 600; color: var(--wk-ink); }
.vp-ends.flat { display: flex; justify-content: space-between; }
.vp-ends.flat > span { position: static; }
.vp-line { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--wk-moss); }
.vp-line.bad { color: var(--vp-rust); }
.vp-caveat { font-size: 12px; line-height: 1.45; color: var(--wk-muted); }
.vp-divider { height: 1px; background: var(--wk-hair); }
.vp-price-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 24px; padding: 0; border: 0; background: none;
  font: inherit; text-align: left; color: inherit;
}
.vp-price-row > :first-child { flex: 1; font-size: 14px; font-weight: 500; color: var(--wk-ink); }
.vp-price-row > :last-child { font-size: 13px; font-weight: 600; color: var(--wk-ink); text-align: right; }
.vp-price-row > .none { color: var(--wk-muted); }
.vp-price-row > .due { color: var(--vp-rust); }
.vp-price-row > .done { color: var(--wk-moss); }
button.vp-price-row { min-height: 44px; margin: -10px 0; cursor: pointer; }

/* Timeline: a date tile, what it is, the amount. */
.vp-tl { padding-block: 6px; }
.vp-tl-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left;
}
button.vp-tl-item { cursor: pointer; }
.vp-date {
  display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 12px; background: var(--wk-track);
}
.vp-date.paid { background: var(--wk-wash); }
.vp-date.due { background: var(--vp-clay); }
.vp-date-m { font-size: 10px; font-weight: 600; line-height: 1.3; text-transform: uppercase; color: var(--wk-muted); }
.vp-date-d { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--wk-ink); }
.vp-tl-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.vp-tl-title { font-size: 14px; font-weight: 500; color: var(--wk-ink); overflow-wrap: anywhere; }
.vp-tl-sub { font-size: 12px; color: var(--wk-muted); overflow-wrap: anywhere; }
.vp-tl-amount { flex: none; font-size: 13px; font-weight: 600; }
.vp-tl-amount.paid { color: var(--wk-moss); }
.vp-tl-amount.due { color: var(--vp-rust); }

/* A contract read, waiting for Apply or Discard. */
.vp-review h3 { margin: 0; font-family: var(--wk-serif); font-size: 21px; font-weight: 500; color: var(--wk-ink); }
.vp-review:focus { outline: none; }
.vp-review > .p-btn { align-self: flex-start; }
.vp-check { display: flex; flex-direction: column; gap: 4px; }
.vp-check .vp-quiet { align-self: center; }
.vp-review-text { font-size: 14px; line-height: 1.45; color: var(--wk-body); }
.vp-review-text.bad { color: var(--wk-plum); }
.vp-review-rows { margin: 0; }
.vp-review-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--wk-hair); font-size: 13px; }
.vp-review-rows > div:first-child { border-top: 0; }
.vp-review-rows dt { color: var(--wk-muted); }
.vp-review-rows dd { margin: 0; font-weight: 600; color: var(--wk-ink); text-align: right; overflow-wrap: anywhere; }
.vp-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vp-review-actions .p-btn { flex: 1 1 auto; }

/* Inline fields: a Details value, a note, the merge. */
.vp-edit { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; }
.vp-form-actions { display: flex; align-items: center; gap: 16px; }
.vp-form-actions .p-btn { min-width: 120px; }
.vp-notes { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vp-note { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 18px; background: var(--wk-plum-wash); }
.vp-note-body { font-size: 13.5px; line-height: 1.45; color: var(--wk-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.vp-note-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; font-size: 11.5px; font-weight: 500; color: var(--wk-plum); }
.vp-note-tools { display: inline-flex; align-items: center; gap: 12px; margin: -12px 0; }
.vp-note-tools button {
  min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--wk-plum);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.vp-note-form { display: flex; flex-direction: column; gap: 10px; }
.vp-merge .p-field select { appearance: auto; }
.vp-quiet {
  align-self: center; min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--wk-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Add a document. */
#vp-add-doc .p-sheet-body { gap: 22px; }
.vp-sheet-part { display: flex; flex-direction: column; gap: 10px; }
.vp-kinds { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.vp-kinds legend { margin-bottom: 10px; padding: 0; }
.vp-kinds .p-chip { min-height: 44px; box-sizing: border-box; }
.vp-kinds .p-chip:has(input:checked) { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); font-weight: 600; }
.vp-kinds .p-chip:has(input:focus-visible) { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

:is(.vp-back, .vp-change, .vp-photos, .vp-row, .vp-h2-link, .vp-doc-x, .vp-visit, .vp-tl-item, .vp-price-row, .vp-note-tools button, .vp-quiet,
  .vp-next-x, .vt-x):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 6px;
}
@media (hover: hover) {
  :is(button.vp-row, button.vp-tl-item):hover .vp-row-label, button.vp-tl-item:hover .vp-tl-title { text-decoration: underline; text-underline-offset: 3px; }
}

/* A filed email thread, read-only (2793:17262, 2797:17306). */
.viewport:has(> #s-vendor-thread.active) { background: var(--wk-paper); }
.vt-page { display: flex; flex-direction: column; gap: 22px; padding-inline: 20px; padding-bottom: 120px; }
:where(.vt-page p) { margin: 0; }
.vt-top { display: flex; justify-content: flex-end; margin-bottom: -10px; }
.vt-x {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--wk-ink); cursor: pointer;
}
.vt-x i { font-size: 24px; }
.vt-head { display: flex; flex-direction: column; gap: 4px; }
.vt-head h1 {
  margin: 0; font-family: var(--wk-serif); font-size: 33px; line-height: 36px; letter-spacing: -.66px; font-weight: 500;
  color: var(--wk-ink); overflow-wrap: anywhere;
}
.vt-head p { font-size: 13px; line-height: 19px; color: var(--wk-body); }
.vt-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--wk-muted); }
.vt-pill {
  display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--wk-track); font-size: 12px; font-weight: 600;
  color: var(--wk-ink); overflow-wrap: anywhere;
}
.vt-msgs { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; list-style: none; }
.vt-msgs > li { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-top: 1px solid var(--wk-hair); }
.vt-from { display: flex; align-items: center; gap: 8px; }
.vt-who { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--wk-ink); overflow-wrap: anywhere; }
.vt-from time { flex: none; font-size: 13px; color: var(--wk-body); }
.vt-body { font-size: 15px; line-height: 23px; color: var(--wk-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.vt-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.vt-foot { display: flex; flex-direction: column; gap: 22px; }
.vt-foot p { font-size: 12px; line-height: 1.4; color: var(--wk-muted); }
.vt-foot .p-btn { min-height: 46px; }
.vt-foot .p-btn.line { border-color: var(--wk-ink); }
.vt-state { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--wk-body); }
/* Inbox (Inbox redesign, Figma "Ready for dev · Oct 20"): the list (2595:17072 and its states), Inbox
   settings (2608:17324) and File this email (2503:16698). On the palette.css tokens, so dark mode
   follows. The Compose button and the Select bar ride just above the tab bar; the toast moves up
   over them on a phone, as the frames place it. */
:root { --ix-red: #b3261e; --ix-dot-on: #3f9b3a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --ix-red: #ff8a80; --ix-dot-on: #7fd17a; } }
[data-theme='dark'] { --ix-red: #ff8a80; --ix-dot-on: #7fd17a; }

.viewport:has(> #s-inbox-settings.active) { background: var(--wk-paper); }
#s-inbox.active { display: flex; flex-direction: column; padding-bottom: 0; }
.ix-page { display: flex; flex-direction: column; gap: 16px; padding: 20px 20px 0; }
#s-inbox .ix-page { flex: 1; }
.ix-settings { gap: 22px; }
.ix-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ix-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 -16px; padding: 0;
  border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--wk-ink); cursor: pointer;
}
.ix-title { margin: 0; font-family: var(--wk-serif); font-size: 33px; line-height: 36px; font-weight: 500; letter-spacing: -.66px; color: var(--wk-ink); }
.ix-lead { margin: -12px 0 6px; font-size: 13px; line-height: 18px; color: var(--wk-body); }

/* The account line and Inbox settings. */
.ix-account { display: flex; align-items: center; gap: 12px; min-height: 40px; margin-top: -14px; }
.ix-account-line, .ix-picked { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-body); overflow-wrap: anywhere; }
.ix-picked { font-weight: 600; color: var(--wk-ink); }
.ix-state { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ix-dot-on); }
.ix-state.bad { background: var(--ix-red); }
.ix-reconnect { min-height: 44px; margin: -13px 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ix-red); cursor: pointer; }
.ix-gear {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--wk-line); border-radius: 50%;
  background: var(--wk-card); color: var(--wk-ink); cursor: pointer; position: relative;
}
.ix-gear::after { content: ''; position: absolute; inset: -2px; }
.ix-gear i { font-size: 20px; }

/* Inbox · Drafts. */
.ix-seg { display: flex; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--wk-ink) 6%, transparent); }
.ix-seg > button {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 0; border-radius: 999px; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--wk-body); cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.ix-seg > button[aria-selected='true'] { background: var(--wk-card); box-shadow: var(--wk-shadow-sm); font-weight: 600; color: var(--wk-ink); }
.ix-badge { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime); font-size: 12px; font-weight: 600; line-height: 20px; }
.ix-panel { display: flex; flex-direction: column; gap: 0; }
.ix-panel[hidden] { display: none; }

/* Search, filter, Select. */
.ix-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ix-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 41px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--wk-edge); border-radius: 999px; background: var(--wk-card); color: var(--wk-muted);
}
.ix-search:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.ix-search i { flex: none; font-size: 18px; }
.ix-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--wk-ink); }
.ix-search input::placeholder { color: var(--wk-muted); opacity: 1; }
.ix-filter { position: relative; flex: none; }
.ix-filter-btn {
  display: inline-flex; align-items: center; gap: 4px; height: 41px; padding: 0 12px 0 16px; box-sizing: border-box;
  border: 1px solid var(--wk-edge); border-radius: 999px; background: var(--wk-card); font: inherit; font-size: 14px; font-weight: 600;
  color: var(--wk-ink); cursor: pointer; max-width: 150px;
}
.ix-filter-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-filter-btn i { flex: none; font-size: 16px; }
.ix-select { flex: none; min-height: 44px; padding: 0 2px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--wk-ink); cursor: pointer; }

.ix-pop {
  position: absolute; z-index: 8; top: calc(100% + 8px); right: 0; width: 240px; padding: 6px 0;
  border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-card); box-shadow: 0 8px 24px rgba(20, 27, 60, .12);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right;
}
.ix-pop.open { opacity: 1; transform: none; transition: opacity .18s cubic-bezier(.23, 1, .32, 1), transform .18s cubic-bezier(.23, 1, .32, 1); }
@starting-style { .ix-pop.open { opacity: 0; transform: translateY(-4px) scale(.98); } }
.ix-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 41px; padding: 0 16px; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--wk-ink); text-align: left; cursor: pointer;
}
.ix-menu-item[aria-checked='true'] { font-weight: 600; }
.ix-menu-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wk-ink); }
.ix-menu-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ix-menu-count { font-size: 13px; color: var(--wk-muted); }
.ix-menu-item .ti-check { font-size: 16px; color: var(--wk-ink); }
.ix-menu-item .ti-check.off { visibility: hidden; }
.ix-menu-rule { height: 1px; margin: 4px 0; background: var(--wk-hair); }
.ix-menu-head { display: block; padding: 8px 16px 2px; font-size: 12px; font-weight: 500; color: var(--wk-muted); }
.ix-menu-foot { margin: 0; padding: 6px 16px 6px; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
@media (hover: hover) and (pointer: fine) { .ix-menu-item:hover { background: var(--wk-track); } }

/* Lines above the list, the sorting note, the empty state. */
.ix-line { margin: 0; padding: 8px 0 10px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.ix-line.bad { color: var(--wk-plum); }
.ix-sorting { margin: 6px 0 4px; padding: 14px 14px 12px; border-radius: 14px; background: var(--wk-wash); color: var(--wk-ink); }
.ix-sorting-title { margin: 0 0 2px; font-size: 15px; font-weight: 600; line-height: 21px; }
.ix-sorting-text { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.45; }
.ix-skeletons { display: flex; flex-direction: column; gap: 22px; padding: 18px 0; }
.ix-skel { display: flex; flex-direction: column; gap: 8px; }
.ix-skel span { display: block; max-width: 100%; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--wk-ink) 8%, transparent); }
.ix-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 8px 0; text-align: center; }
.ix-empty-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 23px; color: var(--wk-ink); }
.ix-empty-text { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: var(--wk-muted); overflow-wrap: anywhere; }

/* Groups and rows. */
.ix-group + .ix-group { margin-top: 20px; }
.ix-group-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 0 10px; font-size: 16px; font-weight: 700; line-height: 22px; color: var(--wk-ink); }
.ix-count { min-width: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.ix-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--wk-ink) 10%, transparent); }
.ix-item { border-bottom: 1px solid color-mix(in srgb, var(--wk-ink) 10%, transparent); }

.ix-swipe { position: relative; overflow: hidden; }
.ix-swipe-face { position: relative; z-index: 1; background: var(--wk-paper); transition: transform .2s cubic-bezier(.23, 1, .32, 1); touch-action: pan-y; }
.ix-swipe-face.dragging { transition: none; }
.ix-swipe-strip { position: absolute; top: 0; right: 0; bottom: 0; width: 88px; display: flex; align-items: center; justify-content: flex-end; padding: 6px 8px 6px 0; box-sizing: border-box; }
.ix-swipe-strip button {
  width: 72px; height: 100%; max-height: 55px; padding: 0; border: 0; border-radius: 14px; background: var(--wk-plum); color: var(--wk-on-navy);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.ix-swipe-strip button:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: -3px; }

.ix-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.ix-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ix-l1 { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.ix-open {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; font: inherit;
  font-size: 15px; font-weight: 500; line-height: 21px; color: var(--wk-ink); text-align: left; cursor: pointer;
}
.ix-open::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 10px; }
.ix-open:focus-visible { outline: none; }
.ix-open:focus-visible::after { box-shadow: inset 0 0 0 3px var(--wk-ink); }
.ix-row.unread .ix-open { font-weight: 700; }
.ix-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--wk-ink); }
.ix-gap { flex: 1; }
.ix-age { flex: none; font-size: 13px; line-height: 18px; color: var(--wk-body); }
.ix-chips { display: inline-flex; align-items: center; gap: 6px; }
.ix-chip, .ix-unhide, .ix-nudge { position: relative; z-index: 1; }
.ix-chip {
  flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 4px 10px; border: 0; border-radius: 999px; background: none;
  font: inherit; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--wk-ink); white-space: nowrap; cursor: pointer;
}
.ix-chip::before { content: ''; position: absolute; inset: -10px -2px; }
.ix-chip.filed { background: color-mix(in srgb, var(--wk-ink) 7%, transparent); }
.ix-chip.guess { padding: 3px 9px; border: 1px dashed color-mix(in srgb, var(--wk-ink) 45%, transparent); }
.ix-chip.guess i { font-size: 12px; }
.ix-chip.file { background: var(--wk-lime); color: var(--wk-on-lime); }
.ix-chip.add { padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--wk-ink) 35%, transparent); font-weight: 500; color: var(--wk-body); }
span.ix-chip { cursor: default; }
span.ix-chip::before { content: none; }
.ix-chip:focus-visible, .ix-unhide:focus-visible, .ix-nudge:focus-visible, .ix-reconnect:focus-visible, .ix-gear:focus-visible,
.ix-select:focus-visible, .ix-filter-btn:focus-visible, .ix-back:focus-visible, .ix-seg > button:focus-visible, .ix-tip button:focus-visible,
.ix-bar button:focus-visible, .ix-compose:focus-visible, .ix-pill:focus-visible, .ix-disconnect:focus-visible, .ix-file-new:focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}
.ix-unhide, .ix-nudge { min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--wk-ink); cursor: pointer; }
.ix-unhide::before, .ix-nudge::before { content: ''; position: absolute; inset: -6px -8px; }
span.ix-nudge { min-height: 0; }
span.ix-nudge::before { content: none; }
.ix-l2 { margin: 0; font-size: 14px; line-height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wk-body); }
.ix-lead { font-weight: 500; color: var(--wk-ink); }
.ix-row.unread .ix-lead { font-weight: 600; }
.ix-lead.said { font-weight: 400; }
.ix-row.unread .ix-lead.said { font-weight: 600; }
.ix-group[aria-labelledby='ix-g-waiting'] .ix-lead { font-weight: 600; }
.ix-l3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }

/* Selecting: the round check on the left. */
.ix-tick {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--wk-edge); background: var(--wk-card); color: transparent; transition: background-color .15s ease, border-color .15s ease;
}
.ix-tick i { font-size: 14px; }
.ix-tick.on { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-btn); }

/* The one-time tip. */
.ix-tip { margin: 0 0 10px; padding: 14px 14px 12px; border-radius: 14px; background: var(--wk-wash); color: var(--wk-ink); }
.ix-tip p { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.45; }
.ix-tip button { min-height: 32px; margin: 8px 0 -6px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--wk-ink); cursor: pointer; }

/* Compose and the Select bar, just above the tab bar. */
.ix-dock {
  position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 4; display: flex; justify-content: flex-end;
  margin: auto -20px 0; padding: 16px 16px; pointer-events: none;
}
#s-inbox .ix-page::after { content: ''; flex: none; height: calc(72px + env(safe-area-inset-bottom)); }
.ix-dock > * { pointer-events: auto; }
.ix-compose {
  display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 22px 0 20px; border: 0; border-radius: 999px;
  background: var(--wk-btn); color: var(--wk-on-navy); box-shadow: 0 4px 12px rgba(20, 26, 61, .22); font: inherit; font-size: 15px;
  font-weight: 600; cursor: pointer;
}
.ix-compose i { font-size: 16px; color: var(--wk-on-btn); }
.ix-compose:active { transform: scale(.97); }
.ix-dock:has(.ix-bar) { padding: 0; }
.ix-bar {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 56px; padding: 0 20px;
  border-top: 1px solid var(--wk-line); background: var(--wk-card);
}
.ix-bar button { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--wk-ink); cursor: pointer; white-space: nowrap; }
.ix-bar button:disabled { color: var(--wk-muted); cursor: default; }
@media (max-width: 380px) { .ix-bar button { font-size: 14px; } .ix-bar { padding: 0 14px; } }
/* The Inbox's toasts say where emails went in a sentence or two: they wrap, full width as the frames draw them. */
body:has(#s-inbox.active) #site-toast {
  box-sizing: border-box; width: min(calc(100% - 40px), 390px); white-space: normal !important; border-radius: 14px !important;
  justify-content: space-between; line-height: 1.4;
}
@media (max-width: 859px) {
  body:has(#s-inbox.active) #site-toast { bottom: calc(160px + env(safe-area-inset-bottom)) !important; }
}
@media (min-width: 860px) {
  .ix-page { max-width: 640px; margin: 0 auto; width: 100%; box-sizing: border-box; padding-top: 32px; }
  .ix-dock { bottom: 0; }
  #s-inbox .ix-page::after { height: 0; }
}

/* Buttons the sheets share: lime, outlined, red. */
.ix-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; padding: 0 20px;
  border: 1.5px solid transparent; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.ix-pill.lime { background: var(--wk-lime); color: var(--wk-on-lime); }
.ix-pill.line { border-color: var(--wk-ink); background: var(--wk-card); color: var(--wk-ink); }
.ix-pill.red { background: var(--ix-red); color: var(--wk-on-navy); }
.ix-empty .ix-pill { width: auto; min-height: 44px; font-size: 14px; }
.ix-pill:disabled { opacity: .55; cursor: default; }

/* File this email. */
#ix-file .p-sheet-title, #ix-disconnect .p-sheet-title { font-size: 30px; }
#ix-file .p-sheet-top, #ix-disconnect .p-sheet-top { margin-bottom: 12px; }
#ix-file .p-sheet-lead { margin-top: 4px; color: var(--wk-body); overflow-wrap: anywhere; }
#ix-file .p-sheet-body, #ix-disconnect .p-sheet-body { gap: 16px; margin-top: 16px; }
.ix-file-note { margin: 0; padding: 14px 14px 12px; border-radius: 14px; background: var(--wk-wash); font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--wk-ink); }
.ix-file-cats { margin: 0; padding: 0; border: 0; }
.ix-file-cat { display: flex; align-items: center; gap: 12px; min-height: 43px; border-bottom: 1px solid color-mix(in srgb, var(--wk-ink) 10%, transparent); cursor: pointer; }
.ix-file-cat input {
  flex: none; appearance: none; width: 20px; height: 20px; margin: 0; border: 1.2px solid var(--wk-edge); border-radius: 50%; background: var(--wk-card); cursor: pointer;
}
.ix-file-cat input:checked { border: 6px solid var(--wk-ink); }
.ix-file-cat input:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.ix-file-name { flex: 1; font-size: 15px; color: var(--wk-ink); }
.ix-file-cat.on .ix-file-name { font-weight: 600; }
.ix-file-own { font-size: 12px; font-weight: 500; color: var(--wk-body); }
.ix-file-new { align-self: flex-start; min-height: 44px; margin: -8px 0; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--wk-ink); cursor: pointer; }
.ix-file-adds { margin: 0; font-size: 14px; line-height: 20px; color: var(--wk-body); }
.ix-file-actions { display: flex; flex-direction: column; gap: 12px; }

/* Inbox settings. */
.ix-set-label { margin: 0 0 8px; padding: 0 16px; font-size: 13px; font-weight: 500; color: var(--wk-muted); }
.ix-set-card { padding: 0 16px; border-radius: 24px; border: 1px solid var(--wk-hair); background: var(--wk-card); box-shadow: 0 6px 10px rgba(20, 26, 61, .06); }
.ix-set-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0; }
.ix-set-row + .ix-set-row { border-top: 1px solid var(--wk-line); }
.ix-set-email { flex: 1; min-width: 0; font-size: 14px; color: var(--wk-ink); overflow-wrap: anywhere; }
.ix-disconnect { min-height: 44px; margin: -10px 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ix-red); cursor: pointer; }
.ix-set-help { margin: 10px 0 0; padding: 0 16px; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.ix-set-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ix-set-title { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); }
.ix-set-sub { font-size: 12px; line-height: 16px; color: var(--wk-body); }

@media (prefers-reduced-motion: reduce) {
  .ix-seg > button, .ix-swipe-face, .ix-tick, .ix-pop.open { transition: none; }
  .ix-pop, .ix-pop.open { transform: none; }
  .ix-compose:active { transform: none; }
}
/* Compose, Email detail and Inbox › Drafts (Inbox redesign, Figma "Ready for dev · Oct 20": 11:984,
   2852:17804, 2584:16859/16931, 2597:17311, 2499:*, 2896:17862, 2864:17624, 2899:17902). White pages,
   Manrope words, hairline rows; the red is the frames' destructive #b3261e, lighter in dark mode. */
:root { --cm-red: #B3261E; --cm-hair: color-mix(in srgb, var(--wk-ink) 10%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --cm-red: #F2B8B5; } }
[data-theme='dark'] { --cm-red: #F2B8B5; }

.viewport:has(> :is(#s-email-compose, #s-email-detail).active) { background: var(--wk-paper); }
.cm-page, .ed-page, .dr-list { font-family: var(--wk-sans); color: var(--wk-ink); }
.cm-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Compose ─────────────────────────────────────────────────────────────────────────────────── */
/* As tall as the screen, so the footer sits on the tab bar even under a short message. */
.cm-page { display: flex; flex-direction: column; min-height: 100dvh; box-sizing: border-box; padding: 20px 20px 0; }
.cm-top { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; }
.cm-x {
  display: grid; place-items: center; width: 44px; height: 44px; margin-left: -12px; border: 0; border-radius: 50%; background: none;
  color: var(--wk-ink); cursor: pointer; font-size: 22px;
}
.cm-title { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; line-height: 24px; }
.cm-top-actions { display: flex; align-items: center; gap: 8px; }
.cm-polish, .cm-send {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 500;
  line-height: 19px; cursor: pointer; white-space: nowrap;
}
.cm-polish { background: var(--wk-lime); color: var(--wk-on-lime); }
.cm-send { background: var(--wk-btn); color: var(--wk-on-btn); }
.cm-polish:disabled { opacity: .55; cursor: default; }
.cm-send:disabled, .cm-send[aria-disabled='true'] { opacity: .6; cursor: default; }

.cm-fields { border-top: 1px solid var(--cm-hair); }
.cm-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--cm-hair); }
.cm-key { flex: none; width: 62px; font-size: 15px; line-height: 21px; color: var(--wk-body); }
.cm-input, .cm-add {
  flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; line-height: 21px;
  color: var(--wk-ink); text-align: left;
}
.cm-input::placeholder { color: var(--wk-body); opacity: 1; }
.cm-input:focus { outline: none; }
.cm-row:focus-within { box-shadow: inset 0 -2px 0 var(--wk-ink); }
.cm-add { min-height: 21px; color: var(--wk-body); cursor: text; }
.cm-to { position: relative; flex: 1; min-width: 0; }
.cm-suggest {
  position: absolute; top: calc(100% + 10px); left: -12px; right: 0; z-index: 8; margin: 0; padding: 6px 0; list-style: none;
  border: 1px solid var(--wk-line); border-radius: 14px; background: var(--wk-card); box-shadow: var(--wk-shadow);
}
.cm-suggest li { display: flex; flex-direction: column; gap: 1px; min-height: 44px; justify-content: center; padding: 6px 12px; cursor: pointer; }
.cm-suggest li.on { background: var(--wk-track); }
.cm-suggest-name { font-size: 15px; font-weight: 600; }
.cm-suggest-mail { font-size: 13px; color: var(--wk-body); }
.cm-hint { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }
.cm-error { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--cm-red); }
.cm-check { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--wk-ink); text-decoration: underline; cursor: pointer; }

.cm-quote { margin-top: 14px; padding-left: 12px; border-left: 3px solid color-mix(in srgb, var(--wk-ink) 18%, transparent); }
.cm-quote-head { margin: 0 0 4px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-body); }
.cm-quote-text {
  margin: 0; font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cm-quote-text.full { display: block; -webkit-line-clamp: unset; }
.cm-quote-more {
  min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--wk-ink); cursor: pointer;
}

.cm-toolbar {
  display: flex; align-items: center; gap: 2px; margin-top: 14px; padding: 6px 0; border-top: 1px solid var(--wk-line);
  border-bottom: 1px solid var(--wk-line); background: var(--wk-paper);
}
.cm-toolbar.lifted { position: fixed; left: 0; right: 0; z-index: 40; margin: 0; padding: 6px 20px; }
.cm-tool {
  display: grid; place-items: center; width: 44px; height: 42px; padding: 0; border: 0; border-radius: 10px; background: none;
  color: var(--wk-ink); font: inherit; font-size: 16px; cursor: pointer;
}
.cm-tool.b { font-weight: 700; }
.cm-tool.i { font-family: var(--wk-serif); font-style: italic; font-size: 21px; }
.cm-tool.u { text-decoration: underline; text-underline-offset: 3px; }
.cm-tool i { font-size: 22px; }
.cm-tool[aria-pressed='true'] { background: color-mix(in srgb, var(--wk-ink) 10%, transparent); }
.cm-tool:disabled { opacity: .45; cursor: default; }

.cm-note { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--wk-wash); font-size: 13px; line-height: 18px; }
.cm-note.bad { background: var(--wk-plum-wash); }
.cm-note p { margin: 0; }
.cm-note-actions { display: flex; gap: 16px; margin-top: 2px; }
.cm-note-actions button {
  min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--wk-ink); cursor: pointer;
}

.cm-drafting { padding-top: 18px; }
.cm-drafting-line { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--wk-body); }
.cm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wk-olive); }
.cm-skeleton { display: flex; flex-direction: column; gap: 12px; }
.cm-skeleton span { height: 12px; border-radius: 6px; background: var(--wk-off); }

.cm-card {
  display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--wk-wash);
}
.cm-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cm-card-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 21px; }
.cm-card-x {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -12px -14px -12px 0; border: 0; border-radius: 50%;
  background: none; color: var(--wk-ink); font-size: 20px; cursor: pointer;
}
.cm-card-lead, .cm-card-foot { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-body); }
.cm-card-foot { color: var(--wk-muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .cm-card-foot { color: var(--wk-body); } }
.cm-starters { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-starter {
  min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--wk-card); color: var(--wk-ink);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; cursor: pointer; text-align: left;
}
.cm-notes { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--wk-edge); border-radius: 12px; background: var(--wk-card); }
.cm-notes:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.cm-notes label { font-size: 11px; font-weight: 500; line-height: 15px; color: var(--wk-muted); }
.cm-notes :is(textarea, input) {
  width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 20px; color: var(--wk-ink); resize: vertical;
}
.cm-notes :is(textarea, input):focus { outline: none; }
.cm-notes :is(textarea, input)::placeholder { color: var(--wk-muted); opacity: 1; }
.cm-write {
  align-self: flex-start; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--wk-btn);
  color: var(--wk-on-btn); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.cm-yourself {
  align-self: flex-start; min-height: 44px; margin-top: 16px; padding: 0 16px; border: 1.5px solid var(--wk-ink); border-radius: 999px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.cm-fold {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; margin-top: 8px; padding: 0 14px;
  border: 0; border-radius: 999px; background: var(--wk-wash); color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}

.cm-body-wrap { flex: 1; display: flex; flex-direction: column; }
.cm-message { flex: 1; min-height: 160px; padding: 16px 0 24px; cursor: text; }
.cm-editor { min-height: 140px; font-size: 15px; line-height: 1.55; color: var(--wk-ink); overflow-wrap: anywhere; outline: none; }
.cm-editor p { margin: 0 0 1em; }
.cm-editor p:last-child { margin-bottom: 0; }
.cm-editor :is(ul, ol) { margin: 0 0 1em; padding-left: 22px; }
.cm-editor li p { margin: 0; }
.cm-editor:focus-visible { box-shadow: 0 0 0 2px var(--wk-paper), 0 0 0 4px var(--wk-ink); border-radius: 4px; }
.cm-editor p.is-editor-empty:first-child::before {
  content: attr(data-placeholder); float: left; height: 0; color: var(--wk-body); pointer-events: none;
}
.card-open .cm-editor p.is-editor-empty:first-child::before { content: none; }

.cm-files { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.cm-file { display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px 12px; border: 1px solid var(--wk-line); border-radius: 14px; }
.cm-file-badge {
  flex: none; padding: 3px 6px; border-radius: 6px; background: var(--wk-wash); font-size: 11px; font-weight: 700; color: var(--wk-ink);
}
.cm-file-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.cm-file-size { flex: none; font-size: 13px; color: var(--wk-body); }
.cm-file-remove {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--wk-ink); cursor: pointer;
}

/* The footer rides just above the tab bar (on a desk there is no tab bar). */
.cm-foot {
  position: sticky; bottom: calc(73px + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; margin: 0 -20px; padding: 8px 20px; border-top: 1px solid var(--cm-hair); background: var(--wk-paper);
}
.cm-foot-status { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }
.cm-foot-actions { display: flex; align-items: center; gap: 20px; }
.cm-delete, .cm-save {
  min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.cm-delete { color: var(--cm-red); }
.cm-save { color: var(--wk-ink); }
:is(.cm-delete, .cm-save):disabled, .cm-save[aria-disabled='true'] { opacity: .5; cursor: default; }
@media (max-width: 859px) {
  body:has(#s-email-compose.active) #site-toast { bottom: calc(140px + env(safe-area-inset-bottom)) !important; }
}
@media (min-width: 860px) {
  .cm-page { padding-top: 32px; }
  .cm-foot { bottom: 0; }
}

/* Polish with Wickette (2597:17311). */
#cm-polish .p-sheet-title { font-size: 26px; }
#cm-polish .p-sheet-top { margin-bottom: 14px; }
.cm-options { display: flex; flex-direction: column; margin-bottom: 14px; }
.cm-option { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--wk-line); cursor: pointer; }
.cm-option input { position: absolute; inset: 12px auto auto 0; width: 22px; height: 22px; margin: 0; opacity: 0; }
.cm-box {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; box-sizing: border-box; border: 1.5px solid var(--wk-edge);
  border-radius: 6px; background: var(--wk-card); color: transparent; font-size: 15px;
}
.cm-option.on .cm-box { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-btn); }
.cm-option input:focus-visible + .cm-box { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.cm-option-text { display: flex; flex-direction: column; gap: 1px; }
.cm-option-label { font-size: 15px; font-weight: 500; line-height: 21px; }
.cm-option.on .cm-option-label { font-weight: 600; }
.cm-option-sub { font-size: 12px; line-height: 17px; color: var(--wk-body); }
.cm-extra { margin-bottom: 14px; }
.cm-polish-go {
  width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.cm-polish-go:disabled { opacity: .5; cursor: default; }
.cm-cancel {
  display: block; min-height: 44px; margin: 6px auto 0; padding: 0 16px; border: 0; background: none; font: inherit; font-size: 14px;
  font-weight: 600; color: var(--wk-ink); cursor: pointer;
}

/* ── Email detail ────────────────────────────────────────────────────────────────────────────── */
.ed-page { display: flex; flex-direction: column; gap: 22px; padding: 16px 20px 32px; }
.ed-page > .k-back { align-self: flex-start; margin-bottom: -10px; white-space: pre; }
.ed-head { display: flex; flex-direction: column; gap: 4px; }
.ed-title {
  margin: 0; font-family: var(--wk-serif); font-size: 33px; font-weight: 500; line-height: 36px; letter-spacing: -.02em; overflow-wrap: anywhere;
}
.ed-sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }
.ed-tags { display: flex; align-items: center; gap: 10px; margin-top: -8px; }
.ed-chip {
  padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--wk-ink) 7%, transparent); font-size: 12px; font-weight: 600; line-height: 16px;
}
.ed-chip.suggested { background: none; box-shadow: inset 0 0 0 1px var(--wk-edge); }
.ed-change { min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--wk-body); cursor: pointer; }
.ed-thread { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--cm-hair); }
.ed-msg { padding: 16px 0; border-top: 1px solid var(--cm-hair); }
.ed-msg.folded { padding: 0; }
.ed-msg-head { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ed-msg.folded .ed-msg-head { padding: 12px 0; }
.ed-msg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.ed-msg.folded .ed-msg-top { margin-bottom: 2px; }
.ed-from { font-size: 15px; font-weight: 600; line-height: 21px; }
.ed-when { flex: none; font-size: 13px; color: var(--wk-body); }
.ed-preview { display: block; overflow: hidden; font-size: 14px; line-height: 20px; color: var(--wk-body); white-space: nowrap; text-overflow: ellipsis; }
.ed-body { margin: 0; font-size: 15px; line-height: 23px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ed-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--wk-body); }
.ed-files li { display: inline-flex; align-items: center; gap: 4px; }
.ed-reply { display: flex; flex-direction: column; gap: 4px; }
.ed-reply-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 21px; }
.ed-reply-lead { margin: 0 0 12px; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ed-reply-lead { color: var(--wk-body); } }
.ed-starters { display: flex; gap: 8px; margin-bottom: 16px; }
.ed-starter {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 4px 8px; border: 1px solid var(--wk-line); border-radius: 999px; background: var(--wk-card);
  color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 17px; cursor: pointer;
}
.ed-own, .ed-mark {
  min-height: 44px; border: 0; border-radius: 999px; background: var(--wk-btn); color: var(--wk-on-btn); font: inherit; font-size: 14px;
  font-weight: 500; cursor: pointer;
}
.ed-booking { padding: 16px; border-radius: 14px; background: var(--wk-wash); }
.ed-booking p { margin: 0 0 12px; font-size: 13px; font-weight: 500; line-height: 1.45; }
.ed-booking-actions { display: flex; gap: 8px; }
.ed-booking-actions button { flex: 1 1 0; }
.ed-not-yet {
  min-height: 44px; border: 1.5px solid var(--wk-ink); border-radius: 999px; background: var(--wk-card); color: var(--wk-ink);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}

/* ── Inbox › Drafts ──────────────────────────────────────────────────────────────────────────── */
.dr-list { display: flex; flex-direction: column; }
.dr-rows { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--cm-hair); }
.dr-rows > li { border-top: 1px solid var(--cm-hair); }
.dr-swipe { position: relative; overflow: hidden; }
.dr-swipe-face { position: relative; z-index: 1; background: var(--wk-paper); transition: transform .2s cubic-bezier(.2, .8, .2, 1); touch-action: pan-y; }
.dr-swipe-face.dragging { transition: none; }
.dr-swipe-strip { position: absolute; inset: 0 0 0 auto; display: flex; align-items: center; padding-right: 8px; }
.dr-delete {
  width: 72px; height: 55px; border: 0; border-radius: 14px; background: var(--cm-red); color: #FFFFFF; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .dr-delete { color: #3A0907; } }
[data-theme='dark'] .dr-delete { color: #3A0907; }
.dr-row {
  display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 14px 0; border: 0; background: none; font: inherit;
  color: var(--wk-ink); text-align: left; cursor: pointer;
}
.dr-top { display: flex; align-items: baseline; gap: 8px; }
.dr-tag { flex: none; font-size: 13px; font-weight: 600; color: var(--cm-red); }
.dr-who { flex: 1; min-width: 0; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 21px; white-space: nowrap; text-overflow: ellipsis; }
.dr-age { flex: none; font-size: 13px; color: var(--wk-body); }
.dr-line { overflow: hidden; font-size: 14px; line-height: 20px; color: var(--wk-body); white-space: nowrap; text-overflow: ellipsis; }
.dr-subject { font-weight: 500; color: var(--wk-ink); }
.dr-for { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 17px; color: var(--wk-body); }
.dr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wk-olive); }
.dr-foot { margin: 16px 0 0; font-size: 12px; line-height: 17px; color: var(--wk-body); }
.dr-empty {
  padding: 22px 16px; border: 1px solid var(--wk-line); border-radius: 24px; background: var(--wk-card); box-shadow: 0 6px 10px rgba(20, 26, 61, .06);
}
.dr-empty-title { margin: 0 0 4px; font-size: 15px; font-weight: 500; }
.dr-empty-text { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }

:is(.cm-x, .cm-polish, .cm-send, .cm-add, .cm-quote-more, .cm-tool, .cm-note-actions button, .cm-card-x, .cm-starter, .cm-write,
  .cm-yourself, .cm-fold, .cm-file-remove, .cm-delete, .cm-save, .cm-polish-go, .cm-cancel, .cm-check, .ed-change, .ed-msg-head,
  .ed-starter, .ed-own, .ed-mark, .ed-not-yet, .dr-row, .dr-delete):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.dr-row:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .dr-swipe-face { transition: none; } }
/* iOS zooms into a field under 16px when it's focused. */
@supports (-webkit-touch-callout: none) { .cm-input, .cm-notes :is(textarea, input), .cm-editor { font-size: 16px; } }
/* The Connect Gmail card (10:763, 1166:8512, 1183:8416) on setup.css's card, and Is this your wedding email?
   (2891:17822). Tokens only, so dark mode follows; line heights pinned in px (Chrome draws Manrope's normal one
   1px taller than Figma). */
.cg-will { display: flex; flex-direction: column; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.cg-will li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 19px; color: var(--wk-ink); }
.cg-tick {
  display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--wk-lime);
  color: var(--wk-on-lime); font-size: 12px; font-weight: 700; line-height: 1;
}
.cg-wide .su-btn { flex: 1 1 100%; padding-block: 10px; }
/* Early access: a quiet line inside the card, part of the warning above it. */
.cg-early { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-body); }
.cg-early i { flex: none; margin-top: 1px; font-size: 15px; color: var(--wk-muted); }
.cg-done { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; line-height: 19px; overflow-wrap: anywhere; }
.cg-done i { flex: none; font-size: 18px; color: var(--wk-moss); }

/* Bring what you have: "Your inbox" with its lime tag. */
.cg-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cg-tag {
  padding: 2px 8px; border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime);
  font: 600 11px/15px var(--wk-sans);
}

/* Is this your wedding email? */
#wedding-email-sheet .p-sheet-title { font-size: 30px; line-height: 34px; }
#wedding-email-sheet .p-sheet-lead { margin-top: 6px; font-size: 14px; line-height: 19px; color: var(--wk-body); }
#wedding-email-sheet .p-sheet-body { gap: 16px; margin-top: 16px; }
.we-box {
  margin: 0; padding: 14px; border: 1px solid var(--wk-edge); border-radius: 12px; background: var(--wk-card);
  font-size: 16px; font-weight: 600; line-height: 22px; color: var(--wk-ink); overflow-wrap: anywhere;
}
.we-text { margin: 0; font-size: 13px; font-weight: 500; line-height: 19px; color: var(--wk-body); }
.we-error { margin: 0; }
.we-btns { display: flex; flex-direction: column; gap: 14px; }
.we-btns .p-btn { min-height: 48px; font-size: 15px; line-height: 20px; }
.we-btns .p-btn.line { border: 1.5px solid var(--wk-ink); }
@media (min-width: 860px) {
  #wedding-email-sheet { border-radius: 28px; }
}
/* The document viewer (ui/DocViewer.tsx): a full-screen modal dialog with the Plan pages' bar
   (round back button, title, page count, Share and Download), the terms worth rereading under
   it, white pages stacked on a cool gray ground, and a zoom pill at the foot. The pages stay
   white in dark mode; they are the document. The round buttons and chips come from plan.css. */
.dv {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; overflow: hidden; background: var(--wk-track); color: var(--wk-ink); font-family: var(--wk-sans);
}
.dv[open] { display: flex; flex-direction: column; animation: dv-in .2s cubic-bezier(.2, .8, .2, 1); }
.dv::backdrop { background: var(--wk-paper); }
@keyframes dv-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.dv-bar {
  display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  border-bottom: 1px solid var(--wk-hair); background: var(--wk-paper);
}
.dv-bar a.p-round { text-decoration: none; }
.dv-heading { flex: 1; min-width: 0; padding: 0 4px; }
.dv-title {
  margin: 0; overflow: hidden; font-size: 16px; font-weight: 600; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis;
}
.dv-count { margin: 2px 0 0; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--wk-muted); font-variant-numeric: tabular-nums; }
.dv-count:empty { display: none; }

/* Worth rereading: one row of chips that scrolls sideways on a phone. */
.dv-terms { padding: 12px 0 10px; border-bottom: 1px solid var(--wk-hair); background: var(--wk-paper); }
.dv-terms-label { margin: 0 16px 6px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--wk-muted); }
.dv-term-list {
  display: flex; gap: 8px; margin: 0; padding: 2px 16px; overflow-x: auto; list-style: none; scrollbar-width: none;
}
.dv-term-list::-webkit-scrollbar { display: none; }
.dv-term { min-height: 44px; white-space: nowrap; }
.dv-term-page { font-size: 13px; color: var(--wk-muted); }

.dv-scroll {
  position: relative; flex: 1; min-height: 0; padding-bottom: 72px; overflow: auto; overscroll-behavior: contain;
  touch-action: pan-x pan-y pinch-zoom; outline: none;
}
.dv-pages { position: relative; margin: 0 auto; }
.dv-page { position: absolute; background: var(--wk-card); box-shadow: 0 0 0 1px var(--wk-stroke), var(--wk-shadow-sm); }
.dv-page canvas { display: block; width: 100%; height: 100%; }
.dv-photo { display: block; max-width: none; height: auto; margin: 16px auto 0; box-shadow: var(--wk-shadow-sm); }

.dv-status {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; margin: 0;
  padding: 24px; font-size: 14px; line-height: 1.45; text-align: center; color: var(--wk-body);
}
.dv-problem p { margin: 0; font-size: 16px; font-weight: 600; color: var(--wk-ink); }
.dv-problem a.p-btn { text-decoration: none; }

.dv-zoom {
  position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; align-items: center;
  gap: 2px; padding: 3px; transform: translateX(-50%); border: 1px solid var(--wk-hair); border-radius: 999px;
  background: var(--wk-card); box-shadow: var(--wk-shadow);
}
.dv-zoom-btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--wk-ink); font: inherit; cursor: pointer;
}
.dv-zoom-btn i { font-size: 20px; }
.dv-zoom-btn[aria-disabled='true'] { opacity: .4; cursor: default; }
.dv-zoom-level { min-width: 44px; font-size: 13px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

.dv-scroll:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: -3px; }
.dv-zoom-btn:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .dv[open] { animation: none; }
}
/* Bring what you have (onboarding, "Bring what you have" and "· filled" frames): the dashed upload
   box, one row per file, and the cards of what's already done. Measurements are the frames' (their
   strokes add to each box, as borders do here). Hairline outlines
   use the 3:1 edge (WCAG 1.4.11); #6b800d text is moss and #9497a6 placeholders are muted, which
   hold AA. Line heights are pinned in px (Chrome draws Manrope's `normal` a pixel taller). */
#ob-step-bring { --br-wash: color-mix(in srgb, var(--wk-track) 50%, var(--wk-paper)); }
.br-section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.br-label { margin: 0; font: 600 13px/18px var(--wk-sans); color: var(--wk-ink); }
.br-help { font: 400 12px/16px var(--wk-sans); color: var(--wk-muted); }

/* The input covers the whole box, so a tap anywhere opens the picker and Tab reaches it. */
.br-upload {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed var(--wk-edge);
  border-radius: 18px; background: var(--br-wash); cursor: pointer;
}
.br-file { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.br-file::file-selector-button { cursor: pointer; }
.br-upload:has(.br-file:focus-visible) { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .br-upload:hover { border-color: var(--wk-ink); } }
.br-plus {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 20px; background: var(--wk-lime);
  color: var(--wk-on-lime); font: 600 22px/30px var(--wk-sans);
}
.br-upload-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.br-upload-title { font: 600 15px/20px var(--wk-sans); color: var(--wk-ink); }
.br-upload-help { font: 400 12px/16px var(--wk-sans); color: var(--wk-muted); }

/* One row per file: a dot (a spinner while it's read, a ring while it waits on a review). */
.br-files { margin: 0; padding: 0; list-style: none; border: 1px solid var(--wk-edge); border-radius: 18px; background: var(--wk-card); overflow: hidden; }
.br-files li + li { border-top: 1px solid var(--wk-bar); }
.br-file-row {
  box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 11px 14px; border: 0;
  background: none; color: var(--wk-ink); font: inherit; text-align: left;
}
button.br-file-row { cursor: pointer; }
.ob button.br-file-row:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { button.br-file-row:hover { background: var(--wk-track); } }
.br-dot { flex: none; box-sizing: border-box; width: 8px; height: 8px; border-radius: 50%; background: var(--wk-lime); }
.br-dot.ring { background: var(--wk-card); box-shadow: inset 0 0 0 1.5px var(--wk-olive); }
.br-dot.bad { background: var(--wk-plum); }
.br-dot.off { background: var(--wk-dot); }
.br-dot.spin { width: 12px; height: 12px; margin: -2px; border: 1.5px solid var(--wk-bar); border-top-color: var(--wk-ink); background: none; animation: br-spin .8s linear infinite; }
@keyframes br-spin { to { transform: rotate(360deg); } }
.br-file-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.br-file-name { font: 500 14px/19px var(--wk-sans); color: var(--wk-ink); overflow-wrap: anywhere; }
.br-file-line { font: 400 12px/16px var(--wk-sans); color: var(--wk-muted); }
.br-file-line.bad { color: var(--wk-plum); }

/* What's already done: the empty state, then cards. */
.br-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 18px; border-radius: 20px; background: var(--br-wash); }
.br-empty-text { font: 600 14px/19px var(--wk-sans); color: var(--wk-ink); }
.br-add, .br-save {
  padding: 12px 18px; border: 0; border-radius: 999px; background: var(--wk-btn); color: var(--wk-on-navy);
  font: 600 14px/19px var(--wk-sans); cursor: pointer; transition: transform .12s ease;
}
.br-add.line { width: 100%; border: 1px solid var(--wk-edge); background: var(--wk-card); color: var(--wk-ink); }
.br-cards { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.br-card {
  box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--wk-edge);
  border-radius: 18px; background: var(--wk-card);
}
.br-card.open { gap: 10px; border: 1.5px solid var(--wk-ink); }
.br-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.br-card-type { font: 500 12px/16px var(--wk-sans); color: var(--wk-muted); }
.br-card-name { font: 600 15px/20px var(--wk-sans); color: var(--wk-ink); overflow-wrap: anywhere; }
.br-card-note { font: 400 13px/18px var(--wk-sans); color: var(--wk-muted); }
.br-card-from { font: 500 12px/16px var(--wk-sans); color: var(--wk-moss); overflow-wrap: anywhere; }
.br-edit, .br-remove {
  margin: -6px -8px; padding: 6px 8px; border: 0; background: none; font: 600 13px/18px var(--wk-sans); cursor: pointer;
}
.br-edit { color: var(--wk-ink); text-decoration: underline; text-underline-offset: 2px; }
.br-remove { color: var(--wk-muted); }

/* An open card's fields: the label inside the box, the type a native picker under its value. */
.ob .br-field { gap: 4px; border-radius: 12px; }
.ob .br-field label, .br-field-label { font: 500 12px/16px var(--wk-sans); color: var(--wk-muted); }
.br-field-value, .br-pick-value { font: 400 14px/19px var(--wk-sans); color: var(--wk-ink); }
.br-pick { position: relative; }
.br-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.br-pick-value.empty { color: var(--wk-muted); }
.br-chevron { flex: none; margin: 0 -0.8px; color: var(--wk-muted); }
.br-pick select {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
  font-size: 16px; appearance: none;
}
.ob .br-field.bad { border-color: var(--wk-plum); box-shadow: 0 0 0 1px var(--wk-plum); }
.ob .br-field :is(input, select):focus-visible { outline: none; }   /* the field's own ring shows focus */
.br-actions { display: flex; align-items: center; gap: 16px; }
.br-save:disabled, .br-remove:disabled { opacity: .55; cursor: default; }
:is(.br-add, .br-save):active:not(:disabled) { transform: scale(.98); }

/* The review sheet: chat's document card (chat.css scopes its styles to this sheet too), the
   guest importer's preview and a contract's money. The card lies flat on the sheet, and its links
   out of the app are hidden, as they would leave onboarding behind an open sheet. */
.br-review { min-width: 0; color: var(--wk-ink); font: 400 14px/1.5 var(--wk-sans); overflow-wrap: anywhere; }
#br-review .cx-doc { padding: 0; border: 0; border-radius: 0; background: none; }
.br-review .cx-result .k-link, .br-review .cx-doc[aria-label^='Applied '] .k-actions { display: none; }
.br-guests, .br-costs { display: flex; flex-direction: column; gap: 10px; }
.br-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.br-stats div { display: flex; flex-direction: column-reverse; }
.br-stats dt { font: 500 12px/16px var(--wk-sans); color: var(--wk-muted); }
.br-stats dd { margin: 0; font: 600 20px/26px var(--wk-sans); color: var(--wk-ink); }
.br-sample, .br-cost-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wk-line); }
.br-sample li { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--wk-line); }
.br-sample-name { font: 500 14px/19px var(--wk-sans); }
.br-cost-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--wk-line); font-size: 15px; }
.br-cost-list li span:last-child:not(:first-child) { flex: none; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .br-dot.spin { animation-duration: 2.4s; }
  .br-add, .br-save { transition: none; }
}
/* The Website tab's home (Figma 9a first visit, setup in progress, the draft hub, 9k live and editing a
   live site, Oct 14), on the plan.css kit. Line heights are pinned in px: Manrope `normal` runs 1px tall
   in Chrome. */
.sh-page { display: flex; flex-direction: column; gap: 22px; }
.sh-page > .p-stack { gap: 22px; }
.sh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sh-title { margin: 0; font-family: var(--wk-serif); font-size: 32px; font-weight: 500; line-height: 40px; color: var(--wk-ink); }
.sh-title-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sh-welcome { display: flex; flex-direction: column; gap: 8px; }
.sh-welcome .sh-title { line-height: 34px; }
.sh-lead { margin: 0; font-size: 15px; line-height: 22px; color: var(--wk-body); }
.sh-head { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.sh-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }

/* 9a first visit: Build it for me (navy in every theme) and Customize it myself. */
.sh-choices { display: flex; flex-direction: column; gap: 12px; }
.sh-choice {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 18px 20px; border: 1px solid var(--wk-hair); border-radius: 24px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.sh-choice.navy { border-color: #141b3c; background: #141b3c; color: #fff; }
.sh-choice-main { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.sh-choice-title { font-family: var(--wk-serif); font-size: 24px; font-weight: 500; line-height: 29px; }
.sh-choice-sub { font-size: 14px; line-height: 19px; color: var(--wk-muted); }
.sh-choice.navy .sh-choice-sub { color: #d9dcea; }
.sh-go {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--wk-track);
  color: var(--wk-ink); font-size: 20px; font-weight: 600; line-height: 1;
}
.sh-choice.navy .sh-go { background: var(--wk-lime); color: #141b3c; }
.sh-choice:active:not(:disabled) { transform: scale(.99); }
.sh-choice:disabled { cursor: wait; opacity: .7; }
.sh-already { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: 14px; line-height: 19px; color: var(--wk-muted); }
.sh-let {
  position: relative; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.sh-let::after, .sh-hit::after { content: ''; position: absolute; inset: -12px -8px; }

/* The couple's own site link, once they've told us. */
.sh-external { display: flex; flex-direction: column; gap: 14px; }
.sh-external-card { display: flex; align-items: center; gap: 12px; padding: 16px; }
.sh-external-card i { font-size: 22px; color: var(--wk-plum); }
.sh-external-link { min-width: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }

/* 9a setup in progress: the steps, ticked (navy), current (lime), still to come. */
.sh-steps { display: flex; flex-direction: column; gap: 10px; }
.sh-steps ol { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sh-step { display: flex; align-items: center; gap: 12px; }
.sh-step-mark {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--wk-track);
  color: var(--wk-ink); font-size: 13px; font-weight: 600; line-height: 1;
}
.sh-step.done .sh-step-mark { background: #141b3c; color: #fff; }
.sh-step.now .sh-step-mark { background: var(--wk-lime); color: #141b3c; }
.sh-step-main { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.sh-step-title { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); }
.sh-step-sub { font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.sh-main { min-height: 48px; font-size: 15px; }

/* The preview: the cover (photo, or the monogram in the design's colors) and the two buttons under it. */
.sh-preview { display: flex; flex-direction: column; gap: 22px; }
.sh-cover {
  position: relative; display: grid; place-items: center; width: 100%; height: 220px; padding: 0; overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent); border-radius: 24px; background-position: center;
  background-size: cover; font: inherit;
}
button.sh-cover { cursor: pointer; }
.sh-cover.photo { border-color: var(--wk-hair); }
.sh-mono { margin-top: -18px; font-family: 'Pinyon Script', var(--wk-serif); font-size: 76px; line-height: 104px; white-space: nowrap; }
.sh-amp { margin: 0 .2em; font-family: var(--wk-serif); font-size: 54px; font-style: italic; font-weight: 400; }
.sh-pill {
  position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: #141b3c; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap;
}
.sh-actions { display: flex; gap: 10px; }
.sh-btn {
  display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; min-height: 48px; padding: 0 12px;
  border: 1.5px solid var(--wk-ink); border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit;
  font-size: 15px; font-weight: 600; line-height: 20px; cursor: pointer;
}
.sh-btn.navy { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
.sh-btn.sm { width: 100%; min-height: 44px; font-size: 14px; }
.sh-btn:active:not(:disabled) { transform: scale(.98); }
.sh-btn:disabled { cursor: wait; opacity: .6; }

/* Cards of rows: Design / Photos and graphics, Still needs you, Pages, Who can see it, RSVPs. */
.sh-card { margin: 0; padding: 6px 16px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); list-style: none; }
.sh-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left;
}
.sh-row + .sh-row { border-top: 1px solid var(--wk-line); }
button.sh-row { cursor: pointer; }
.sh-row.tall { padding: 14px 0; }
.sh-row-main { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.sh-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sh-row-title { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.sh-row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.sh-act {
  position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px;
  font-weight: 600; line-height: 18px; white-space: nowrap; cursor: pointer;
}
.sh-tile { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--wk-plum-wash); color: var(--wk-plum); }
.sh-tile i { font-size: 24px; }
.sh-dots { display: inline-flex; gap: 3px; }
.sh-dots > span { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(20, 27, 60, .12); }
.sh-chip { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 15px; white-space: nowrap; }
.sh-chip.warm { background: var(--wk-sand); color: var(--wk-on-sand); }
.sh-chip.linked { background: var(--wk-wash); color: var(--wk-moss); }
.sh-always { flex: none; font-size: 11px; font-weight: 500; line-height: 15px; color: var(--wk-muted); }
.sh-pages .p-switch::before { content: ''; position: absolute; inset: -10px -4px; }
.sh-section { display: flex; flex-direction: column; gap: 10px; outline: none; }
.sh-section > .sh-card:has(.tall) { padding-block: 4px; }
.sh-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
:is(.sh-head-row, .sh-head) + .sh-note { margin-top: -4px; }
.sh-section:has(.sh-pages) { gap: 6px; }
.sh-fill { padding: 4px 0 14px; }
.sh-rsvps .sh-row-main { gap: 2px; }

/* "Filled in from your plan" (lime wash) and "You're editing your live site" (plum wash). */
.sh-plan { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 18px; background: var(--wk-wash); }
.sh-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sh-plan h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.sh-plan p { margin: 0; font-size: 13px; line-height: 19px; color: #2b3410; }
.sh-x {
  position: relative; flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; font-size: 16px; font-weight: 500; line-height: 24px; cursor: pointer;
}
.sh-x::after { content: ''; position: absolute; inset: -10px; }
.sh-banner { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--wk-plum-wash); }
.sh-banner p { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.sh-banner .sh-banner-title { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.sh-bottom { display: flex; flex-direction: column; gap: 12px; }
.sh-foot { margin: 0; font-size: 12px; line-height: 16px; text-align: center; color: var(--wk-muted); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .sh-plan p { color: var(--wk-body); }
  :root:not([data-theme='light']) .sh-choice.navy { border-color: var(--wk-stroke); }
}
[data-theme='dark'] .sh-plan p { color: var(--wk-body); }
[data-theme='dark'] .sh-choice.navy { border-color: var(--wk-stroke); }
/* site-design: Choose a design (9b), the design editor (9c, 9o) and Your own colors (9d), from the
   Oct 14 frames, on the palette.css tokens. Line heights pinned in px (Manrope runs 1px tall in Chrome).
   The miniatures and cover diagrams draw a site, so they keep the site's own colors in dark mode. */
.viewport:has(> :is(#s-site-design, #s-site-customize).active) { background: var(--wk-paper); }

.sd-page {
  display: flex; flex-direction: column; gap: 18px; padding: 20px 20px 104px; color: var(--wk-ink); font-family: var(--wk-sans);
}
:where(.sd-page, #sd-colors) :where(h1, h2, p, ul, figure) { margin: 0; }
:where(.sd-page, #sd-colors) ul { padding: 0; list-style: none; }

/* The setup header */
.sd-head { display: flex; flex-direction: column; gap: 18px; }
.sd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sd-back, .sd-skip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); cursor: pointer;
}
.sd-skip { color: var(--wk-muted); }
.sd-step { display: flex; flex-direction: column; gap: 4px; }
.sd-bar { display: flex; gap: 6px; }
.sd-bar span { flex: 1; height: 4px; border-radius: 2px; background: var(--wk-bar); }
.sd-bar span.on { background: var(--wk-ink); }
.sd-step-label { font-size: 13px; font-weight: 600; line-height: 19px; color: var(--wk-plum); }
.sd-title { font-family: var(--wk-serif); font-size: 33px; font-weight: 500; line-height: 40px; outline: none; }
.sd-lead { font-size: 13px; line-height: 18px; color: var(--wk-body); }

/* 9b: the groups of template cards */
.sd-groups { display: flex; flex-direction: column; gap: 28px; }
.sd-group { display: flex; flex-direction: column; gap: 12px; }
.sd-group-head { display: flex; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 600; line-height: 20px; }
.sd-count { font-size: 13px; font-weight: 400; color: var(--wk-muted); }
.sd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 14px; }
.sd-card {
  display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; text-align: left; cursor: pointer;
}
.sd-card:disabled { cursor: wait; }
.sd-card-art {
  position: relative; display: block; width: 100%; aspect-ratio: 168 / 200; box-sizing: border-box; overflow: hidden; padding: 0;
  border: 1px solid var(--wk-line); border-radius: 12px; background: none; cursor: pointer;
}
.sd-card-art.selected { border: 2px solid var(--wk-ink); }
.sd-card-name { font-size: 14px; font-weight: 500; line-height: 19px; }
.sd-card[aria-pressed='true'] .sd-card-name { font-weight: 600; }
.sd-card-tone { margin-top: -2px; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.sd-selected {
  position: absolute; top: 6px; left: 6px; z-index: 2; padding: 4px 9px 4px 8px; border-radius: 999px; background: var(--wk-lime);
  color: var(--wk-on-lime); font-size: 11px; font-weight: 600; line-height: 15px;
}
.sd-current { display: flex; align-items: center; gap: 14px; }
.sd-current .sd-card-art { flex: none; width: 168px; }
.sd-current-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sd-current-eyebrow, .sd-current-fonts { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.sd-current-name { font-family: var(--wk-serif); font-size: 26px; font-weight: 500; line-height: 31px; }
.sd-current-fonts { margin-bottom: 6px; }
.sd-link {
  align-self: flex-start; min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; font: inherit; font-size: 14px;
  font-weight: 600; line-height: 19px; color: var(--wk-ink); cursor: pointer;
}

/* A design drawn small (9b cards) and the live preview (9c, 9o) */
.sd-mini {
  position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; box-sizing: border-box;
  padding: 10px 10px 13px; overflow: hidden; background-color: var(--sd-bg);
}
.sd-mini-photo { flex: none; align-self: stretch; height: 42%; border-radius: 6px; background: var(--sd-photo); }
.sd-mini-names, .sd-mini-mono {
  position: relative; z-index: 1; max-width: 100%; margin-top: 10px; color: var(--sd-ink); line-height: 1.15; text-align: center;
  overflow-wrap: anywhere;
}
.sd-mini-divider { position: relative; z-index: 1; margin-top: 8px; color: var(--sd-accent); line-height: 0; }
.sd-mini-pill { position: relative; z-index: 1; flex: none; width: 44px; height: 12px; margin-top: auto; border-radius: 6px; background: var(--sd-accent); }
.sd-mini.live { padding: 10px 10px 28px; }
.sd-mini.live .sd-mini-photo { height: 46.7%; border-radius: 9px; }
.sd-mini.live .sd-mini-names { margin-top: 20px; }
.sd-mini.live .sd-mini-pill { width: 67px; height: 18px; border-radius: 9px; }
.sd-mini:is(.cover-full_bleed, .cover-overlay) .sd-mini-photo { position: absolute; inset: 0; height: auto; border-radius: 0; }
.sd-mini:is(.cover-full_bleed, .cover-overlay, .cover-monogram) .sd-mini-names { margin-top: auto; }
.sd-mini.cover-full_bleed.has-photo .sd-mini-names { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.sd-mini.cover-overlay .sd-mini-names { padding: 8px 14px; border-radius: 8px; background: var(--sd-bg); }
.sd-mini.cover-arch .sd-mini-photo { align-self: center; width: 34%; height: 50%; border-radius: 999px 999px 6px 6px; }
.sd-mini.cover-monogram .sd-mini-mono { margin-top: auto; }
.sd-mini.cover-monogram .sd-mini-names { margin-top: 6px; }

.sd-live { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 4px; }
.sd-live .sd-mini { max-width: 350px; height: auto; aspect-ratio: 350 / 300; border: 1.5px solid var(--wk-line); border-radius: 24px; }
.sd-caption { font-size: 12px; line-height: 16px; color: var(--wk-muted); text-align: center; }

/* The editor's sections */
.sd-section { display: flex; flex-direction: column; gap: 12px; }
.sd-section.tight { gap: 8px; }
.sd-h { font-size: 16px; font-weight: 600; line-height: 22px; }
.sd-label { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.sd-panel { border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }

.sd-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sd-cover {
  display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%; box-sizing: border-box; padding: 4px 4px 8px;
  border: 1px solid var(--wk-hair); border-radius: 14px; background: var(--wk-card); color: var(--wk-ink); font: inherit;
  text-align: left; cursor: pointer;
}
.sd-cover[aria-pressed='true'] { padding: 3px 3px 7px; border: 2px solid var(--wk-ink); }
.sd-cover-label, .sd-cover-hint { padding: 0 4px; }
.sd-cover-label { font-size: 13px; font-weight: 500; line-height: 18px; }
.sd-cover[aria-pressed='true'] .sd-cover-label { font-weight: 600; }
.sd-cover-hint { margin-top: -5px; font-size: 11px; line-height: 15px; color: var(--wk-muted); }
.sd-diagram { position: relative; display: block; height: 74px; overflow: hidden; border-radius: 10px; background: #f7f4ed; }
.sd-diagram > span { position: absolute; left: 50%; transform: translateX(-50%); }
.sd-dia-photo { top: 8px; width: calc(100% - 20px); height: 36px; border-radius: 6px; background: #c9c3b4; }
.sd-dia-name { top: 52px; width: 48px; height: 5px; border-radius: 2px; background: #141b3c; }
.sd-dia-date { top: 61px; width: 28px; height: 3px; border-radius: 1.5px; background: #141b3c; }
.sd-diagram:is(.full_bleed, .overlay) .sd-dia-photo { top: 0; width: 100%; height: 100%; border-radius: 0; }
.sd-diagram.full_bleed :is(.sd-dia-name, .sd-dia-date) { background: #fff; }
.sd-diagram.full_bleed .sd-dia-name, .sd-diagram.overlay .sd-dia-name { top: 31px; }
.sd-diagram.full_bleed .sd-dia-date, .sd-diagram.overlay .sd-dia-date { top: 40px; }
.sd-diagram.overlay .sd-dia-photo::after {
  content: ''; position: absolute; top: 20px; left: 50%; width: 58px; height: 34px; border-radius: 6px; background: #f7f4ed;
  transform: translateX(-50%);
}
.sd-diagram.arch .sd-dia-photo { top: 6px; width: 40px; height: 42px; border-radius: 20px 20px 0 0; }
.sd-diagram.arch .sd-dia-name { top: 54px; }
.sd-diagram.arch .sd-dia-date { top: 63px; }
.sd-dia-mono { top: 14px; font-family: 'Pinyon Script', var(--wk-serif); font-size: 20px; line-height: 27px; color: #141b3c; white-space: nowrap; }
.sd-dia-rule { top: 50px; width: 28px; height: 1.5px; background: #8a9a5b; }

.sd-fonts { display: flex; flex-direction: column; gap: 16px; padding: 16px; overflow: hidden; }
.sd-font-title { font-size: 14px; font-weight: 600; line-height: 19px; }
.sd-font-sub { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.sd-tiles { display: flex; gap: 8px; margin: 10px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.sd-tiles::-webkit-scrollbar { display: none; }
.sd-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 86px; height: 80px;
  box-sizing: border-box; padding: 12px 6px 10px; border: 1.5px solid transparent; border-radius: 16px; background: var(--wk-track);
  color: var(--wk-ink); font: inherit; cursor: pointer;
}
.sd-tile[aria-pressed='true'] { border-color: var(--wk-ink); }
.sd-tile-aa { font-size: 22px; line-height: 30px; }
.sd-tile-aa.big { font-size: 26px; font-weight: 500; line-height: 32px; }
.sd-tile-name { max-width: 100%; overflow: hidden; font-size: 11px; line-height: 15px; color: var(--wk-muted); text-overflow: ellipsis; white-space: nowrap; }
.sd-tile[aria-pressed='true'] .sd-tile-name { font-weight: 600; color: var(--wk-ink); }
.sd-rule { width: 100%; height: 1px; margin: 0; border: 0; background: var(--wk-hair); }
.sd-upload { margin: 0; }

.sd-palettes { padding: 16px 16px 10px; }
.sd-palettes-title { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.sd-plist { margin-top: 0; }
.sd-palette {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 12px 0; border: 0;
  border-top: 1px solid var(--wk-hair); background: none; color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.sd-palette.own { font-size: 14px; font-weight: 600; line-height: 19px; }
.sd-dots { display: flex; flex: none; width: 78px; }
.sd-dots span { width: 22px; height: 22px; border: 1px solid transparent; border-radius: 50%; box-shadow: 0 0 0 2px var(--wk-card); }
.sd-dots span + span { margin-left: -4px; }
.sd-palette-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.sd-palette-name { font-size: 14px; font-weight: 600; line-height: 19px; }
.sd-palette-mood { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.sd-tick { flex: none; width: 16px; font-size: 16px; font-weight: 600; line-height: 22px; }

.sd-touches { padding: 2px 16px; }
.sd-touches > li + li { border-top: 1px solid var(--wk-hair); }
.sd-touch {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; text-align: left; cursor: pointer;
}
.sd-touch-main { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.sd-touch-title { font-size: 15px; font-weight: 500; line-height: 20px; }
.sd-touch-sub { font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.sd-chev { flex: none; font-size: 20px; font-weight: 500; line-height: 27px; color: var(--wk-edge); transition: transform .15s; }
.sd-chev.open { transform: rotate(90deg); }

.sd-buttons { display: flex; flex-direction: column; gap: 10px; }
.sd-buttons .p-btn { font-weight: 500; }

/* The finishing-touch picker */
.sd-choices { margin: 0; }
.sd-choices > li + li { border-top: 1px solid var(--wk-hair); }
.sd-choice {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.sd-choice-art {
  display: grid; flex: none; place-items: center; width: 64px; height: 40px; border: 1px solid var(--wk-hair); border-radius: 10px;
  background-color: #fbf9f4; color: #635c55;
}
.sd-choice-label { flex: 1; font-size: 15px; font-weight: 500; line-height: 20px; }
.sd-choice-tick { font-size: 18px; visibility: hidden; }
.sd-choice[aria-pressed='true'] .sd-choice-label { font-weight: 600; }
.sd-choice[aria-pressed='true'] .sd-choice-tick { visibility: visible; }

/* 9d: Your own colors */
#sd-colors { padding: 12px 20px calc(28px + env(safe-area-inset-bottom)); }
#sd-colors .p-sheet-top { margin-bottom: 16px; }
#sd-colors .p-sheet-title { font-size: 30px; line-height: 33px; }
#sd-colors .p-sheet-lead { margin-top: 6px; color: var(--wk-body); }
#sd-colors .p-sheet-body { gap: 16px; margin-top: 16px; }
.sd-slots { padding: 2px 16px; }
.sd-slot { border-bottom: 1px solid var(--wk-hair); }
.sd-slot-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; text-align: left; cursor: pointer;
}
.sd-slot-dot { flex: none; width: 28px; height: 28px; box-sizing: border-box; border: 1px solid #d8cfc4; border-radius: 50%; }
.sd-slot-main { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.sd-slot-title { font-size: 15px; font-weight: 500; line-height: 20px; }
.sd-slot-sub { font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.sd-reset {
  min-height: 44px; padding: 13px 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600;
  line-height: 18px; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.sd-pick { display: flex; flex-direction: column; gap: 12px; padding: 0 0 16px 40px; }
.sd-shades { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sd-shade {
  position: relative; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(20, 27, 60, .15); border-radius: 50%; cursor: pointer;
}
.sd-shade::after { content: ''; position: absolute; inset: -4px; }
.sd-shade[aria-pressed='true'] { outline: 2px solid var(--wk-ink); outline-offset: 2px; }
/* "Any color": the native picker laid over a pill at the end of the shades, so a tap opens it on every browser. */
.sd-any {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; box-sizing: border-box; padding: 0 12px 0 6px;
  border: 1px dashed var(--wk-edge); border-radius: 999px; color: var(--wk-ink); font-size: 13px; font-weight: 500; cursor: pointer;
}
.sd-any-dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: conic-gradient(hsl(0 75% 60%), hsl(60 75% 55%), hsl(120 55% 50%), hsl(180 60% 50%), hsl(240 65% 62%), hsl(300 60% 58%), hsl(0 75% 60%));
}
.sd-any input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.sd-any:has(input:focus-visible) { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.sd-own { display: flex; align-items: flex-end; gap: 10px; }
.sd-hex { flex: 1; min-width: 0; }
.sd-hex-hint { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.sd-sheet-buttons { display: flex; flex-direction: column; gap: 16px; }
.sd-sheet-buttons .p-btn { min-height: 48px; font-size: 15px; }
.p-btn.line.sd-cancel { border: 1.5px solid var(--wk-ink); }
/* Keep your own colors and fonts? Two rows with a radio, then Continue. */
.p-sheet:has(.sd-keep) { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.sd-keep > .p-list { padding: 4px 18px; }
.sd-keep .sd-keep-row { padding: 12px 0; }
.sd-keep :is(.p-row-title, .p-row-sub) { line-height: normal; }
.sd-keep-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.sd-keep-go .av-spin { width: 16px; height: 16px; border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }
.sd-keep-foot { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }

:is(.sd-back, .sd-skip, .sd-card, .sd-card-art, .sd-link, .sd-cover, .sd-tile, .sd-palette, .sd-touch, .sd-choice, .sd-slot-row,
  .sd-reset, .sd-shade):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

@media (min-width: 860px) {
  .sd-page { max-width: 640px; margin: 0 auto; padding-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-chev { transition: none; }
}
/* site-quick: owned by its agent (PR D). Line heights pinned in px (Manrope runs 1px tall in Chrome). */
/* Build it for me (Figma 2066:15623) and the site preview's bars (9i 1800:14179, built for you 2080:15765).
   The page is on the kit's tokens, so dark mode follows; the preview card is in the color theme's own
   colors, and the bars float over the guest's page in Wickette navy whatever the app's theme. */
.sq-page { display: flex; flex-direction: column; gap: 18px; padding-inline: 20px; }

/* "‹  Your wedding site": 19px to see, 44px to hit. */
.sq-back {
  align-self: flex-start; min-height: 44px; margin: -12px 0 -13px; padding: 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; white-space: pre; cursor: pointer;
}
.sq-head { display: flex; flex-direction: column; gap: 4px; }
.sq-head p, .sq-head h1 { margin: 0; }
.sq-step { font-size: 13px; font-weight: 600; line-height: 19px; color: var(--wk-plum); }
.sq-title { font-family: var(--wk-serif); font-size: 33px; font-weight: 500; line-height: 40px; color: var(--wk-ink); }
.sq-lead { font-size: 13px; line-height: 18px; color: var(--wk-body); }

/* The live preview: the names in the theme's heading font on its colors, a cover and a button. */
.sq-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; padding-top: 4px; }
.sq-card {
  position: relative; width: 100%; height: 300px; box-sizing: border-box; overflow: hidden; border: 1px solid var(--wk-line);
  border-radius: 24px; background: var(--sq-bg); transition: background-color .2s ease;
}
.sq-cover {
  position: absolute; top: 11px; left: 11px; right: 11px; height: 140px; border-radius: 6px;
  background: color-mix(in srgb, var(--sq-soft) 35%, var(--sq-bg)); transition: background-color .2s ease;
}
.sq-names {
  position: absolute; top: 171px; left: 12px; right: 12px; margin: 0; overflow: hidden; text-align: center; text-overflow: ellipsis;
  white-space: nowrap; font-family: var(--sq-font); font-size: 26px; font-style: italic; font-weight: 500; line-height: 32px;
  color: var(--sq-ink); transition: color .2s ease;
}
.sq-cta {
  position: absolute; bottom: 27px; left: 50%; width: 44px; height: 12px; margin-left: -22px; border-radius: 6px;
  background: var(--sq-accent); transition: background-color .2s ease;
}
.sq-caption { font-size: 12px; line-height: 16px; color: var(--wk-muted); }

/* Color themes: rows of three dots (page, headings, the theme's second color), name and mood. */
.sq-colors { display: flex; flex-direction: column; gap: 8px; }
.sq-label { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.sq-rows { display: flex; flex-direction: column; gap: 8px; }
.sq-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--wk-hair);
  border-radius: 18px; background: var(--wk-card); color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, transform .12s ease;
}
.sq-row[aria-checked='true'] { padding: 9.5px 11.5px; border: 1.5px solid var(--wk-ink); }
.sq-row:active { transform: scale(.99); }
.sq-dots { display: flex; gap: 10px; flex: none; }
.sq-dot { width: 22px; height: 22px; box-sizing: border-box; border: 1px solid var(--wk-line); border-radius: 50%; }
.sq-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sq-row-name { font-size: 14px; font-weight: 500; line-height: 19px; }
.sq-row-mood { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.sq-tick { flex: none; font-size: 14px; font-weight: 600; line-height: 19px; }
.sq-build { margin-top: 0; }
:is(.sq-back, .sq-row):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* The preview: the guest page fills the screen; on a computer, Phone shows it at a phone's width. */
.sq-overlay {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: #2a2724; font-family: var(--wk-sans); outline: none;
}
.sq-overlay::backdrop { background: #2a2724; }
#site-preview-frame { display: block; width: 100%; height: 100%; margin: 0 auto; border: 0; background: #fdfbf7; }
.sq-bars {
  position: absolute; left: 16px; right: 16px; bottom: calc(82px + env(safe-area-inset-bottom)); display: flex;
  flex-direction: column; align-items: center; gap: 10px; pointer-events: none;
}
.sq-bars > * { pointer-events: auto; }
.sq-bar {
  display: flex; align-items: center; gap: 12px; max-width: 100%; box-sizing: border-box; padding: 10px 12px 10px 16px;
  border-radius: 999px; background: #141b3c; color: #fff; box-shadow: 0 4px 12px rgba(20, 26, 61, .18);
}
.sq-bar-label { font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; }
/* 32px to see, 44px to hit. */
.sq-bar-btn, .sq-device > button {
  position: relative; flex: none; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px;
  background: none; color: #fff; font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; white-space: nowrap; cursor: pointer;
}
.sq-bar-btn::after, .sq-device > button::after { content: ''; position: absolute; inset: -6px -6px; }
.sq-bar-btn.go { border-color: #cfe83a; background: #cfe83a; color: #141b3c; }
.sq-device {
  display: none; gap: 2px; padding: 4px; border-radius: 999px; background: #141b3c; box-shadow: 0 4px 12px rgba(20, 26, 61, .18);
}
.sq-device > button { padding: 6px 14px; border: 0; font-weight: 500; }
.sq-device > button::after { inset: -7px -1px; }
.sq-device > button[aria-pressed='true'] { background: #fff; color: #141b3c; font-weight: 600; }
:is(.sq-bar-btn, .sq-device > button):focus-visible { outline: 3px solid #cfe83a; outline-offset: 2px; }

@media (min-width: 860px) {
  .sq-device { display: flex; }
  .sq-overlay.phone #site-preview-frame { width: 390px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
}
@media (prefers-reduced-motion: reduce) {
  .sq-card, .sq-cover, .sq-names, .sq-cta, .sq-row { transition: none; }
}
/* site-pages: setup step 2 (Choose your pages), step 3 (Arrange your blocks) and Arrange your site (9e), from
   the Oct 14 frames, on the palette.css tokens and the design editor's setup header (sd-*). Line heights are
   pinned in px (Manrope runs 1px tall in Chrome). */
.viewport:has(> :is(#s-site-pages, #s-site-arrange).active) { background: var(--wk-paper); }
.sp-page :where(h2, ol, ul, p) { margin: 0; }
.sp-page :where(ol, ul) { padding: 0; list-style: none; }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sp-main { min-height: 48px; font-size: 15px; }
.p-btn.line.sp-line { min-height: 51px; border: 1.5px solid var(--wk-ink); font-size: 15px; }
.sp-buttons { display: flex; flex-direction: column; gap: 18px; }

/* Step 2: one row per page */
.sp-card { padding: 4px 16px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.sp-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 13px 0; }
.sp-row + .sp-row { border-top: 1px solid var(--wk-hair); }
.sp-row-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 20px; }
.sp-always { flex: none; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.sp-always.sm { font-size: 11px; line-height: 15px; }
.sp-foot { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.sp-row .p-switch::before { content: ''; position: absolute; inset: -9px -1px; }

/* Step 3 and 9e: the pages, each a gray card of white block rows */
.sp-layout { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.sp-intro { font-size: 12px; line-height: 16px; color: var(--wk-muted); outline: none; }
.sp-tabs { display: flex; flex-direction: column; gap: 12px; }
.sp-tab { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--wk-track); }
.sp-tab.held { box-shadow: 0 0 0 1.5px var(--wk-ink), 0 6px 16px rgba(20, 28, 61, .16); }
.sp-tab-head { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 4px 4px 2px; }
.sp-order {
  display: flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--wk-card); font-size: 11px; font-weight: 600; line-height: 15px;
}
.sp-tab-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 19px; }
.sp-tab-body { display: flex; flex-direction: column; gap: 8px; }
.sp-tab-body[hidden] { display: none; }
.sp-blocks { display: flex; flex-direction: column; gap: 8px; }
.sp-block {
  display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8.5px; border: 1.5px solid transparent;
  border-radius: 12px; background: var(--wk-card);
}
.sp-block.held { border-color: var(--wk-ink); box-shadow: 0 6px 16px rgba(20, 28, 61, .16); }
.sp-tile {
  display: flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--wk-plum-wash); color: var(--wk-plum); fill: var(--wk-ink); font-size: 11px; font-weight: 600; line-height: 15px;
  white-space: nowrap; overflow: hidden;
}
.sp-tile.wide { font-size: 9px; letter-spacing: -1px; }
.sp-tile.script { font-family: 'Pinyon Script', var(--wk-serif); font-weight: 400; }
.sp-tile .sp-stroke { fill: none; stroke: var(--wk-plum); stroke-width: 1.5; }
.sp-block-name { flex: 1; min-width: 0; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.sp-rename { padding: 0; border: 0; background: none; color: inherit; font-family: inherit; text-align: left; cursor: text; }

/* The small links: Remove, Hide, Edit, ✕, Done and + Add a block. Each reaches 44px tall past its row. */
:is(.sp-link, .sp-edit, .sp-x, .sp-done, .sp-add, .sp-handle) {
  position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; cursor: pointer;
}
:is(.sp-link, .sp-edit, .sp-x, .sp-done, .sp-add)::after { content: ''; position: absolute; inset: -14px -4px; }
.sp-handle::after { content: ''; position: absolute; inset: -7px 0; }
.sp-link { font-size: 11px; line-height: 15px; }
.sp-link.muted, .sp-edit, .sp-x { color: var(--wk-muted); }
.sp-edit { font-size: 12px; font-weight: 600; line-height: 16px; text-decoration: underline; }
.sp-x { font-size: 13px; font-weight: 600; line-height: 18px; }
.sp-done { font-size: 13px; font-weight: 600; line-height: 18px; }
.sp-add { align-self: flex-start; margin: 4px 0 0 4px; font-size: 13px; font-weight: 600; line-height: 18px; }
.sp-handle {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 30px; margin: 0 -7px;
  fill: var(--wk-edge); cursor: grab; touch-action: none;
}
.sp-tab-head .sp-handle { height: 22px; margin: 0 -7px 0 -5px; }
.sp-tab-head .sp-handle::after { inset: -11px 0; }
.held .sp-handle { cursor: grabbing; }

.sp-rename-main { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.sp-field {
  width: 100%; min-height: 35px; padding: 7px 10px; border: 1.5px solid var(--wk-ink); border-radius: 8px; background: var(--wk-card);
  color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 18px;
}
.sp-hint { font-size: 11px; line-height: 15px; color: var(--wk-muted); }

.sp-alert { display: flex; gap: 10px; }
.sp-alert .p-btn { flex: 1 1 0; min-height: 48px; font-size: 15px; }
.sp-alert .p-btn.line { border-color: var(--wk-stroke); }
.p-btn.sp-danger { border-color: var(--wk-plum); background: var(--wk-plum); color: var(--wk-paper); }

:is(.sp-link, .sp-edit, .sp-x, .sp-done, .sp-add, .sp-handle, .sp-rename):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 4px; }
.sp-field:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.sp-intro:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 4px; }
/* site-blocks: Add a block (9p) and each block's options (9q–9x), from the Oct 14 frames, on the palette.css
   tokens. Line heights pinned in px (Manrope runs 1px tall in Chrome). The previews draw the couple's design
   (--sb-* set from the snapshot), so they keep its colors in dark mode. */
#sb-sheet { padding: 12px 20px calc(28px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
#sb-sheet .p-sheet-top { margin-bottom: 14px; }
#sb-sheet .p-sheet-title { font-size: 30px; line-height: 33px; }
#sb-sheet .p-sheet-lead { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--wk-body); }
#sb-sheet .p-sheet-body { gap: 14px; margin-top: 14px; }
#sb-sheet :where(p, h3, ul) { margin: 0; }
#sb-sheet ul { padding: 0; list-style: none; }
@media (min-width: 860px) { #sb-sheet { border-radius: 24px; } }

/* "‹ All blocks" sits above the title, where the frames draw it; it comes after the title in reading order. */
#sb-sheet:has(.sb-back) .p-sheet-title { margin-top: 47px; }   /* collapses with the grip row's 14px */
.sb-back {
  position: absolute; top: 30px; left: 20px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  margin: -12px 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px;
  font-weight: 600; line-height: 19px; cursor: pointer;
}

/* 9p: the two groups of tiles and the library row */
.sb-menu-group { display: flex; flex-direction: column; gap: 10px; }
.sb-menu-group + .sb-menu-group { margin-top: 4px; }
.sb-menu-h { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); }
.sb-menu-sub { margin-top: -8px !important; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.sb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sb-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 8px 8px 10px;
  border: 1px solid var(--wk-hair); border-radius: 18px; background: var(--wk-card); color: var(--wk-ink); font: inherit; cursor: pointer;
}
.sb-tile-art {
  display: flex; align-items: center; justify-content: center; gap: 2.5px; align-self: stretch; height: 52px; padding: 0 5px;
  overflow: hidden; border-radius: 10px; background: var(--sb-bg); color: var(--sb-primary);
}
.sb-tile-art:is(.photo, .two_photos, .strip) { height: 41px; border-radius: 6px; }
.sb-tile-photo { flex: 1 1 0; min-width: 0; height: 29px; overflow: hidden; border-radius: 2.5px; }
.sb-tile-photo img, .sb-tile-photo .sb-ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-ph { background: color-mix(in srgb, var(--sb-primary) 22%, var(--sb-bg)); }
.sb-tile-name { font-size: 13px; font-weight: 600; line-height: 18px; text-align: left; }
.sb-aa { font-family: var(--sb-heading); font-size: 18px; line-height: 24px; }
.sb-stars { color: var(--sb-accent); font-size: 12px; letter-spacing: .25em; }
.sb-rule { width: 60%; height: 1px; background: var(--sb-ink); }
.sb-count { display: flex; flex-direction: column; align-items: center; }
.sb-count-n { font-family: var(--sb-heading); font-size: 20px; line-height: 24px; }
.sb-count-l { font-family: var(--sb-body); font-size: 9px; line-height: 12px; color: var(--sb-ink); }
.sb-mono { line-height: 1.2; white-space: nowrap; }
.sb-mono-img { display: block; max-width: 100%; object-fit: contain; }
.sb-lib { display: flex; gap: 8px; }
.sb-lib-item {
  display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; height: 64px; padding: 0; overflow: hidden;
  border: 0; border-radius: 10px; background: var(--wk-track); cursor: pointer;
}
.sb-lib-item img { width: 100%; height: 100%; object-fit: cover; }
.sb-lib-item.mono { flex: 0 1 calc((100% - 32px) / 5); background: var(--sb-bg); }
.sb-lib-item .sb-mono-img { height: 70% !important; }
.sb-see-all {
  align-self: flex-start; min-height: 44px; margin: -10px 0 -12px; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.sb-cancel { min-height: 46px; border-color: var(--wk-stroke); font-size: 15px; font-weight: 500; }

/* The options sheets */
.sb-group { display: flex; flex-direction: column; gap: 8px; }
.sb-group-label { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); }
.sb-choose { min-height: 46px; border: 1.5px solid var(--wk-ink); }
.sb-picks { display: flex; flex-direction: column; gap: 10px; }
.sb-picks-label { margin-top: -4px !important; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.sb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sb-cell {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 10px;
  background: var(--wk-track); cursor: pointer;
}
.sb-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-cell[aria-pressed='true'] { box-shadow: inset 0 0 0 3px var(--wk-ink); }
.sb-badge {
  position: absolute; top: 3px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; box-sizing: border-box;
  border: 1.5px solid #fff; border-radius: 50%; background: #141b3c; color: #fff; font-size: 11px; font-weight: 600; line-height: 1;
}
.sb-cell:focus-visible, .sb-tile:focus-visible, .sb-lib-item:focus-visible, .sb-layout:focus-visible, .sb-tick:focus-visible,
.sb-art-item:focus-visible, .sb-back:focus-visible, .sb-link:focus-visible, .sb-see-all:focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}
.sb-count-line { margin-top: -4px !important; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.sb-empty, .sb-note { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.sb-note { margin-top: -6px !important; }
.sb-field { padding: 10px 14px 12px; border-radius: 14px; background: var(--wk-card); }
.sb-field .p-field-label { font-size: 11px; font-weight: 600; line-height: 15px; }
.sb-field :is(input, textarea) { line-height: 22px; }
.sb-field textarea { min-height: 44px; }
.sb-link {
  align-self: flex-start; min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 14px; font-weight: 600; line-height: 19px; cursor: pointer;
}
.sb-link:disabled { color: var(--wk-muted); cursor: wait; }

/* Two photos: the layout cards */
.sb-layouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sb-layout {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px 10px 12px; border: 1px solid var(--wk-hair);
  border-radius: 16px; background: var(--wk-card); color: var(--wk-ink); font: inherit; cursor: pointer;
}
.sb-layout[aria-checked='true'] { padding: 9px 9px 11px; border: 2px solid var(--wk-ink); }
.sb-layout-name { font-size: 13px; font-weight: 500; line-height: 18px; }
.sb-layout[aria-checked='true'] .sb-layout-name { font-weight: 600; }
.sb-diagram { display: flex; align-items: center; justify-content: center; gap: 6px; align-self: stretch; height: 64px; border-radius: 10px; background: #f7f4ed; }
.sb-diagram span { width: 70px; height: 44px; border-radius: 6px; background: #9a9db0; }
.sb-diagram.tall_wide span:first-child { width: 40px; height: 54px; }
.sb-diagram.tall_wide span:last-child { width: 76px; height: 30px; }

/* Ticked lists (Style, Monogram, Divider) and the switch card */
.sb-ticks, .sb-switch-card { padding: 4px 14px; border: 1px solid var(--wk-hair); border-radius: 20px; background: var(--wk-card); }
.sb-tick {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--wk-hair);
  background: none; color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.sb-tick:last-child { border-bottom: 0; }
.sb-tick-art { flex: none; }
.sb-tick-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sb-tick-title { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.sb-tick-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.sb-tick-mark { flex: none; width: 16px; font-size: 16px; font-weight: 600; line-height: 22px; text-align: center; }
.sb-switch-card { display: flex; align-items: center; gap: 12px; padding: 16px 14px; }
.sb-thumb {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 44px; overflow: hidden; border-radius: 10px;
  background: var(--sb-bg);
}
.sb-thumb img { max-width: 80%; max-height: 70%; object-fit: contain; }
.sb-divider-art { color: var(--sb-accent); }

/* The previews in the couple's design */
.sb-preview {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px 20px; border-radius: 16px;
  background: var(--sb-bg); color: var(--sb-ink); font-family: var(--sb-body); text-align: center;
}
.sb-date { font-family: var(--wk-sans); font-size: 11px; font-weight: 600; line-height: 15px; letter-spacing: 1.32px; text-transform: uppercase; color: var(--sb-ink); }
.sb-mono-preview { min-height: 120px; justify-content: center; }
.sb-mono-preview .sb-mono-img { max-height: 96px; }
.sb-count-preview { gap: 6px; }
.sb-count-figures { display: flex; gap: 18px; }
.sb-count-pair { display: flex; align-items: baseline; gap: 6px; }
.sb-count-big { font-family: var(--sb-heading); font-size: 46px; font-weight: 500; line-height: 52px; color: var(--sb-primary); }
.sb-count-unit, .sb-count-to { font-size: 14px; line-height: 19px; }
.sb-text-preview { gap: 6px; padding: 18px 20px; }
.sb-text-preview.left { align-items: flex-start; text-align: left; }
.sb-text-h { font-family: var(--sb-heading); font-size: 24px; font-weight: 500; line-height: 29px; color: var(--sb-primary); }
.sb-text-b { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.sb-text-preview.quote .sb-text-b { font-family: var(--sb-heading); font-size: 20px; line-height: 26px; font-style: italic; color: var(--sb-primary); }
.sb-text-preview.note .sb-text-b { font-size: 15px; }
.sb-text-by { font-size: 12px; line-height: 16px; }

/* Graphic: the illustrations */
.sb-art { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sb-art-item { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer; }
.sb-art-img {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 110 / 96; box-sizing: border-box; overflow: hidden;
  border: 2px solid transparent; border-radius: 14px; background: var(--sb-bg);
}
.sb-art-img img { max-width: 70%; max-height: 70%; object-fit: contain; }
.sb-art-item[aria-checked='true'] .sb-art-img { border-color: var(--wk-ink); }
.sb-art-name { font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.sb-art-item[aria-checked='true'] .sb-art-name { font-weight: 600; color: var(--wk-ink); }

.sb-actions { display: flex; flex-direction: column; gap: 10px; }
.sb-add { min-height: 48px; font-size: 15px; }
.sb-remove { min-height: 46px; font-size: 15px; font-weight: 500; }
/* site-library: Photos, graphics and fonts (9l) and its sheets (9y Upload a graphic, 9l graphic details, the photo and
   font sheet), from the Oct 14 frames, on the palette.css tokens. Line heights pinned in px (Manrope runs 1px tall in
   Chrome). Tiles sit on the cream ground, as the frames' #f7f4ed does. */
:root { --sl-red: #8F1D1D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --sl-red: #F2A0A0; } }
[data-theme='dark'] { --sl-red: #F2A0A0; }

.viewport:has(> #s-site-library.active) { background: var(--wk-paper); }
.sl-page {
  display: flex; flex-direction: column; gap: 22px; padding: 20px 20px 104px; color: var(--wk-ink); font-family: var(--wk-sans);
}
:where(.sl-page, #sl-upload, #sl-details, #sl-item) :where(h1, h2, p, ul) { margin: 0; }
:where(.sl-page, #sl-upload, #sl-details, #sl-item) ul { padding: 0; list-style: none; }

.sl-back, .sl-sheet-back {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 44px; margin: -12px 0; padding: 0;
  border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.sl-head { display: flex; flex-direction: column; gap: 4px; }
.sl-title { font-family: var(--wk-serif); font-size: 38px; font-weight: 500; line-height: 36px; letter-spacing: -.76px; }
.sl-lead { font-size: 14px; line-height: 20px; color: var(--wk-body); }
.sl-tabs > button { line-height: 19px; }
.sl-upload { min-height: 46px; font-size: 15px; line-height: 20px; }
.sl-upload:disabled { cursor: progress; }
.sl-foot { font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.sl-empty {
  padding: 14px 16px; border: 1px dashed var(--wk-edge); border-radius: 16px; background: var(--wk-card);
  font-size: 13px; line-height: 18px; color: var(--wk-muted);
}

/* Photos */
.sl-count-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -11px 0; }
.sl-count, .sl-select { font-size: 14px; font-weight: 600; line-height: 19px; }
.sl-select {
  min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--wk-ink); font-family: inherit; cursor: pointer;
}
.sl-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sl-photo {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 12px;
  background: var(--wk-ground); cursor: pointer;
}
.sl-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sl-photo.on::after { content: ''; position: absolute; inset: 0; border: 3px solid var(--wk-ink); border-radius: 12px; }
.sl-badge {
  position: absolute; left: 6px; bottom: 7px; max-width: calc(100% - 12px); padding: 3px 7px; overflow: hidden; box-sizing: border-box;
  border-radius: 999px; background: rgba(255, 255, 255, .94); color: #141B3C; font-size: 10px; font-weight: 600; line-height: 14px;
  white-space: nowrap; text-overflow: ellipsis;
}
.sl-pick {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; box-sizing: border-box;
  border: 2px solid #fff; border-radius: 50%; background: rgba(20, 27, 60, .35); color: #fff; font-size: 14px;
}
.sl-photo.on .sl-pick { border-color: var(--wk-ink); background: var(--wk-ink); color: var(--wk-on-navy); }

/* Graphics */
.sl-gsection { display: flex; flex-direction: column; gap: 10px; }
.sl-ghead { font-size: 15px; font-weight: 600; line-height: 20px; }
.sl-gcount { margin-left: 2px; font-size: 13px; font-weight: 400; color: var(--wk-muted); }
.sl-graphics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 10px; }
.sl-graphic {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.sl-art {
  display: grid; place-items: center; width: 100%; height: 104px; box-sizing: border-box; padding: 12px; overflow: hidden;
  border-radius: 14px; background: #F7F4ED;
}
.sl-art:not(.pattern) { padding: 16px 22px; }
.sl-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sl-art.pattern, .sl-preview.pattern { background-repeat: repeat; background-size: 56px; }
.sl-gname { max-width: 100%; font-size: 13px; font-weight: 600; line-height: 18px; overflow-wrap: anywhere; }
.sl-gsub { font-size: 12px; line-height: 17px; color: var(--wk-muted); }

/* Fonts */
.sl-fonts { display: flex; flex-direction: column; gap: 12px; }
.sl-font { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.sl-font-open { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--wk-ink); text-align: left; cursor: pointer; }
.sl-font-sample { display: block; font-size: 34px; line-height: 46px; overflow-wrap: anywhere; }
.sl-font-row { display: flex; align-items: center; gap: 10px; }
.sl-font-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-font-name { font-size: 13px; font-weight: 600; line-height: 18px; overflow-wrap: anywhere; }
.sl-font-use, .sl-font-flag, .sl-font-why { font-size: 12px; line-height: 17px; color: var(--wk-moss); }
.sl-font-flag { color: var(--sl-red); font-weight: 600; }
.sl-font-why { color: var(--wk-muted); }
.sl-under {
  flex: none; min-height: 44px; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px;
  font-weight: 600; line-height: 18px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* The sheets */
:is(#sl-upload, #sl-details, #sl-item) { padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); }
:is(#sl-upload, #sl-details, #sl-item) .p-sheet-top { margin-bottom: 16px; }
:is(#sl-upload, #sl-details, #sl-item) .p-sheet-title { font-size: 30px; line-height: 33px; overflow-wrap: anywhere; }
:is(#sl-upload, #sl-details, #sl-item) .p-sheet-lead { margin-top: 6px; line-height: 20px; color: var(--wk-body); }
:is(#sl-upload, #sl-details, #sl-item) .p-sheet-body { gap: 16px; margin-top: 16px; }
/* "‹ Add a graphic" sits above the title, as the frame has it, though it reads after it */
#sl-upload:has(.sl-sheet-back) .p-sheet-top { margin-bottom: 52px; }
#sl-upload .sl-sheet-back { position: absolute; top: 28px; left: 20px; margin: 0; font-weight: 600; }

.sl-file {
  display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; padding: 12px 14px 12px 12px;
  border: 1px solid var(--wk-hair); border-radius: 20px; background: var(--wk-card); color: var(--wk-ink); font: inherit; text-align: left;
}
.sl-file-art { display: grid; place-items: center; flex: none; width: 84px; height: 84px; box-sizing: border-box; padding: 8px; border-radius: 14px; background: #F7F4ED; }
.sl-file-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sl-file-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sl-file-name { font-size: 14px; font-weight: 600; line-height: 19px; overflow-wrap: anywhere; }
.sl-file-sub { font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.sl-file-empty { flex-direction: column; align-items: flex-start; gap: 3px; min-height: 84px; justify-content: center; border-style: dashed; border-color: var(--wk-edge); cursor: pointer; }

.sl-field { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 12px; border: 1px solid var(--wk-edge); border-radius: 14px; background: var(--wk-card); }
.sl-field:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.sl-field label { font-size: 11px; font-weight: 600; line-height: 15px; color: var(--wk-muted); }
.sl-field input { width: 100%; min-height: 24px; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 16px; line-height: 22px; outline: none; }

.sl-group { display: flex; flex-direction: column; gap: 8px; }
.sl-group-label { font-size: 14px; font-weight: 600; line-height: 19px; }
.sl-types { display: flex; flex-direction: column; padding: 4px 14px; border: 1px solid var(--wk-hair); border-radius: 20px; background: var(--wk-card); }
.sl-type {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--wk-hair);
  background: none; color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.sl-type:first-child { border-top: 0; }
.sl-type-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-type-name { font-size: 14px; font-weight: 600; line-height: 19px; }
.sl-type-hint { font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.sl-tick { flex: none; width: 16px; font-size: 16px; font-weight: 600; line-height: 22px; }
.sl-save { min-height: 48px; font-size: 15px; }

.sl-preview { display: grid; place-items: center; height: 110px; box-sizing: border-box; padding: 20px 64px; overflow: hidden; border-radius: 16px; background: #F7F4ED; }
.sl-preview.photo { height: 180px; padding: 0; }
.sl-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sl-preview .sl-font-sample { color: #141B3C; }
.sl-seg > button { min-width: 0; padding-inline: 4px; font-size: 12px; line-height: 16px; }
.sl-used {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-card); color: var(--wk-ink); font: inherit;
  font-size: 14px; font-weight: 500; line-height: 19px; text-align: left; cursor: pointer;
}
.sl-used > span:first-child { flex: 1; min-width: 0; }
.sl-chev { font-size: 18px; font-weight: 600; color: var(--wk-muted); }
.sl-note { font-size: 13px; line-height: 18px; color: var(--wk-body); }
.sl-buttons { display: flex; gap: 10px; }
.sl-buttons > .p-btn { flex: 1 1 0; min-height: 46px; font-size: 15px; }
.sl-outline { border: 1.5px solid var(--wk-ink); background: var(--wk-card); color: var(--wk-ink); }
.sl-remove { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.sl-remove-btn {
  min-height: 44px; margin: -12px 0 -10px; padding: 0 8px; border: 0; background: none; color: var(--sl-red); font: inherit;
  font-size: 14px; font-weight: 600; line-height: 19px; cursor: pointer;
}
.sl-remove p { font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.sl-page .sl-remove-btn { margin: -6px 0; }

:is(.sl-back, .sl-sheet-back, .sl-select, .sl-photo, .sl-graphic, .sl-font-open, .sl-under, .sl-file, .sl-type, .sl-used,
  .sl-remove-btn):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
@media (min-width: 860px) {
  .sl-page { max-width: 640px; margin: 0 auto; padding-top: 32px; }
}
/* site-edit: owned by its agent (PR E). Line heights pinned in px (Manrope runs 1px tall in Chrome). */
/* Editing your site (9z 2049:15246, 2091:15709): full screen, its own bars, no app tab bar. */
body:has(#s-site-edit.active) :is(#bottom-nav, #sidebar) { display: none !important; }
#s-site-edit.screen { padding: 0; }
#s-site-edit.screen.active { display: flex; flex-direction: column; }
.viewport:has(> #s-site-edit.active) { background: var(--se-ground, #faf6f2); }

.se { flex: 1; display: flex; flex-direction: column; font-family: var(--wk-sans); color: var(--wk-ink); background: var(--se-ground); }
:where(.se) button { font: inherit; color: inherit; cursor: pointer; }
.se-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Top bar: back, title, Done; the site's pages as tabs along it. */
.se-top {
  position: sticky; top: 0; z-index: 6; display: flex; flex-direction: column; gap: 12px;
  padding-top: calc(12px + env(safe-area-inset-top)); background: var(--wk-paper); border-bottom: 1px solid var(--wk-hair);
}
.se-top-row { display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.se-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -5px 0; padding: 0; border: 0; background: none;
  font-size: 14px; font-weight: 600; line-height: 19px; white-space: nowrap;
}
.se-title { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; text-align: center; }
.se-done {
  min-height: 35px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime);
  font-size: 14px; font-weight: 600; line-height: 19px; position: relative;
}
.se-done::after { content: ''; position: absolute; inset: -5px 0; }
.se-tabs { display: flex; gap: 20px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.se-tabs::-webkit-scrollbar { display: none; }
.se-tabs > button {
  flex: none; padding: 2px 0 10px; border: 0; border-bottom: 2px solid transparent; background: none;
  font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-muted); white-space: nowrap;
}
.se-tabs > button[aria-selected='true'] { border-bottom-color: var(--wk-ink); color: var(--wk-ink); font-weight: 600; }

/* The page, in the couple's design, with the editor's hint above it. */
.se-body { flex: 1; display: flex; flex-direction: column; padding: 14px 0 24px; }
.se-lead { display: flex; gap: 12px; margin: 0 16px; }
.se-hint {
  flex: 1; margin: 0; padding: 10px 14px; border-radius: 14px; background: #f1f6d3; color: #141b3c;
  font-size: 13px; font-weight: 500; line-height: 18px;
}
/* Edit with Wickette, under construction: desktop only, nothing to press yet. */
.se-ask { display: none; }
.se-ask-head { display: flex; align-items: center; gap: 8px; }
.se-ask-title { margin: 0; font-size: 13px; font-weight: 600; line-height: 18px; }
.se-ask-line { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.se-canvas { position: relative; }
.se-frame { display: block; width: 100%; min-height: 360px; border: 0; background: transparent; }
.se-over { position: absolute; inset: 0; pointer-events: none; }
.se-over > * { pointer-events: auto; }
.se-add {
  display: block; width: calc(100% - 32px); margin: 0 16px; padding: 14px 0; border: 1.5px dashed #141b3c; border-radius: 999px;
  background: none; color: #141b3c; font-size: 14px; font-weight: 600; line-height: 19px;
}
/* On a dark design's ground the editor's marks and labels turn light. */
.se-body.dark .se-add { border-color: #fff; color: #fff; }
.se-body.dark .se-sel { border-color: #fff; }
.se-body.dark .se-row-label { color: #fff; }

/* A selected photo (2049:15252): navy frame, corner handles, the height bar, Swap photo. */
.se-sel { position: absolute; border: 2px solid #141b3c; border-radius: 10px; pointer-events: none !important; }
.se-handle { position: absolute; width: 14px; height: 14px; border: 2px solid #141b3c; border-radius: 50%; background: #fff; }
.se-drag {
  position: absolute; left: 50%; width: 40px; height: 6px; margin-left: -20px; border-radius: 3px; background: #141b3c;
  pointer-events: auto; cursor: ns-resize; touch-action: none;
}
.se-drag::after { content: ''; position: absolute; inset: -19px -2px; }
.se-swap {
  position: absolute; right: 12px; padding: 7px 12px; border: 0; border-radius: 999px; background: #fff; color: #141b3c;
  font-size: 12px; font-weight: 600; line-height: 16px; pointer-events: auto; box-shadow: 0 1px 3px rgba(20, 28, 61, .12);
}
.se-swap::after { content: ''; position: absolute; inset: -7px -4px; }
.se-sel-pill {
  position: absolute; top: 4px; left: 6px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 10px; border-radius: 999px; background: #fff; color: #141b3c; font-size: 11px; font-weight: 600; line-height: 15px;
}

/* Size and Layer under the photo: white tracks, navy for the choice. */
.se-photo-ctl { position: absolute; display: flex; flex-direction: column; gap: 10px; }
.se-row { display: flex; align-items: center; gap: 10px; }
.se-row > .p-seg { max-width: 440px; }
.se-row-label { flex: none; width: 44px; font-size: 12px; font-weight: 600; line-height: 16px; color: #5f6377; }
.se-photo-ctl .p-seg.se-seg { flex: 1; min-width: 0; background: #fff; border: 1px solid #ececf0; }
.se-photo-ctl .p-seg.se-seg > button {
  min-height: 30px; padding: 7px 10px; font-size: 12px; font-weight: 600; line-height: 16px; color: #141b3c; white-space: nowrap;
}
.se-photo-ctl .p-seg.se-seg > button[aria-checked='true'] { background: #141b3c; color: #fff; box-shadow: none; }

/* Photo behind blocks (2191:16451): an inline panel. */
.se-behind {
  position: absolute; display: flex; flex-direction: column; gap: 14px; padding: 16px;
  border: 1px solid #ececf0; border-radius: 20px; background: #fff; color: #141b3c; box-shadow: 0 6px 18px rgba(20, 28, 61, .08);
}
.se-behind-head { display: flex; align-items: center; gap: 8px; }
.se-behind-head h2 { flex: 1; margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; }
.se-behind-done { position: relative; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; line-height: 18px; color: #141b3c; }
.se-behind-done::after { content: ''; position: absolute; inset: -13px -8px; }
.se-behind .p-seg { background: #f3f3f6; }
.se-behind .p-seg > button { min-height: 34px; padding: 8px; font-size: 13px; line-height: 18px; color: #5f6377; }
.se-behind .p-seg > button[aria-checked='true'] { background: #fff; color: #141b3c; box-shadow: 0 1px 3px rgba(20, 28, 61, .12); }
.se-behind-group { display: flex; flex-direction: column; gap: 6px; }
.se-behind-group h3 { margin: 0; font-size: 12px; font-weight: 600; line-height: 16px; color: #5f6377; }
.se-behind-list { margin: 0; padding: 0 4px; list-style: none; border-radius: 14px; background: #f7f4ed; }
.se-behind-list li + li { border-top: 1px solid #ebe6da; }
.se-behind-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px 10px 10px; border: 0; background: none;
  text-align: left; color: #141b3c;
}
.se-ic {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #fff;
  font-size: 10px; font-weight: 600; line-height: 14px;
}
.se-ic.mono { font-family: 'Pinyon Script', var(--wk-serif); font-weight: 400; }
.se-ic i { font-size: 14px; }
.se-behind-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; line-height: 19px; }
.se-behind-row[aria-checked='true'] .se-behind-name { font-weight: 600; }
.se-tick {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #8a8e9f; border-radius: 50%;
  background: #fff; color: #fff; font-size: 12px; font-weight: 600; line-height: 16px;
}
.se-behind-row[aria-checked='true'] .se-tick { border-color: #141b3c; background: #141b3c; }
.se-behind-note { margin: 0; font-size: 12px; line-height: 16px; color: #5f6377; }

/* The text toolbar (2049:15258), floating over the block being edited. */
.se-tools {
  position: absolute; display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: #141b3c; transform: translateX(-50%);
  max-width: calc(100% - 16px); box-shadow: 0 6px 16px rgba(20, 28, 61, .2);
}
.se-tools > button {
  flex: none; padding: 6px 10px; border: 0; border-radius: 999px; background: none; color: #fff;
  font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap;
}
.se-tools > button[aria-pressed='true'] { background: rgba(255, 255, 255, .16); }
.se-tools > button[aria-disabled='true'] { opacity: .8; cursor: progress; }

/* Bottom bar: Change design and Preview as a guest. */
.se-bottom {
  position: sticky; bottom: 0; z-index: 6; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--wk-paper); border-top: 1px solid var(--wk-hair);
}
.se-btn {
  flex: 1 1 0; min-width: 0; min-height: 46px; padding: 12px 8px; border: 1.5px solid var(--wk-ink); border-radius: 999px;
  background: var(--wk-paper); font-size: 14px; font-weight: 600; line-height: 19px; white-space: nowrap;
}

:is(.se-back, .se-done, .se-tabs > button, .se-add, .se-swap, .se-drag, .se-behind-done, .se-behind-row, .se-tools > button, .se-btn):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}
.se-tools > button:focus-visible { outline-color: #cfe83a; outline-offset: 1px; }
.se-swap:focus-visible, .se-body.dark .se-add:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px #141b3c; }

@media (min-width: 860px) {
  .se-top-row, .se-tabs { padding: 0 24px; }
  .se-bottom { justify-content: center; }
  .se-btn { flex: 0 1 240px; }
  .se-hint { display: flex; align-items: center; }
  .se-ask {
    display: block; flex: 0 1 360px; padding: 10px 14px; border: 1px solid var(--wk-hair); border-radius: 14px;
    background: var(--wk-paper); color: var(--wk-ink);
  }
}
/* site-share: 9j Share your site (1798:14377) and the password sheet (2093:15705), from the Oct 14 frames, on the
   palette.css tokens. Line heights pinned in px (Manrope runs 1px tall in Chrome). */
.viewport:has(> #s-site-publish.active) { background: var(--wk-paper); }
.ss-page { display: flex; flex-direction: column; gap: 22px; padding: 20px 20px 104px; color: var(--wk-ink); font-family: var(--wk-sans); }
:where(.ss-page, #ss-password) :where(h1, h2, p) { margin: 0; }

.ss-back {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 44px; margin: -12px 0; padding: 0;
  border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.ss-title { font-family: var(--wk-serif); font-size: 38px; font-weight: 500; line-height: 36px; letter-spacing: -.76px; }
.ss-section { display: flex; flex-direction: column; gap: 10px; }
.ss-head { font-size: 15px; font-weight: 600; line-height: 20px; }

.ss-card { display: flex; flex-direction: column; padding: 4px 16px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.ss-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 12px 0; box-sizing: border-box; border: 0;
  background: none; color: var(--wk-ink); font: inherit; text-align: left;
}
button.ss-row { cursor: pointer; }
.ss-row + .ss-row { border-top: 1px solid var(--wk-hair); }
.ss-row-main { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.ss-row-title { font-size: 14px; font-weight: 500; line-height: 19px; }
.ss-row-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.ss-chev { font-size: 18px; line-height: 25px; color: var(--wk-muted); }
.ss-under {
  flex: none; min-width: 44px; min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 19px; text-align: right; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer;
}

/* Your address and Use your own domain */
.ss-address { padding: 0 16px; border-radius: 18px; }
.ss-address-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 19px; padding: 16px 0; }
.ss-address-text { min-width: 0; font-size: 14px; font-weight: 500; line-height: 19px; overflow-wrap: anywhere; }
.ss-domain { padding: 16px 0; border-top: 1px solid var(--wk-hair); }

.ss-edit { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 0 16px; }
.ss-field {
  display: block; padding: 10px 14px 12px; border: 1px solid var(--wk-edge); border-radius: 14px; background: var(--wk-card);
  transition: border-color .15s, box-shadow .15s;
}
.ss-field:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 .5px var(--wk-ink); }
.ss-field:has([aria-invalid='true']) { border-color: var(--wk-plum); box-shadow: 0 0 0 .5px var(--wk-plum); }
.ss-field label { display: block; font-size: 11px; font-weight: 600; line-height: 15px; color: var(--wk-muted); }
.ss-field-row { display: flex; align-items: baseline; min-width: 0; margin-top: 2px; }
.ss-prefix { flex: none; font-size: 15px; line-height: 21px; color: var(--wk-muted); }
.ss-field input {
  display: block; flex: 1; min-width: 0; width: 100%; height: 21px; margin: 0; padding: 0; border: 0; background: transparent;
  color: var(--wk-ink); font: inherit; font-size: 15px; line-height: 21px; outline: none;
}
.ss-line { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.ss-line.bad { font-weight: 600; color: var(--wk-plum); }
.ss-suggest { align-self: flex-start; }
.ss-warn { padding: 10px 12px; border-radius: 12px; background: var(--wk-plum-wash); color: var(--wk-plum); font-size: 13px; font-weight: 600; line-height: 18px; }
.ss-edit-btns { display: flex; gap: 8px; margin-top: 2px; }
.ss-edit-btns > .p-btn { flex: 1 1 0; }

/* Who can see it */
.ss-choices { display: flex; flex-direction: column; gap: 8px; }
.ss-choice {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--wk-hair); border-radius: 18px;
  background: var(--wk-card); cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.ss-choice.on { border-color: var(--wk-ink); box-shadow: 0 0 0 .5px var(--wk-ink); }
.ss-choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ss-tick { flex: none; width: 16px; font-size: 16px; font-weight: 600; line-height: 22px; text-align: center; }

/* Ask for a password */
.ss-pw-label { font-size: 11px; font-weight: 600; line-height: 15px; color: var(--wk-muted); }
.ss-pw-value { font-size: 15px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
.ss-note { font-size: 13px; line-height: 19px; color: var(--wk-body); }

.ss-actions { display: flex; flex-direction: column; gap: 10px; }
.ss-live { min-height: 55px; padding: 16px; font-size: 17px; line-height: 23px; }
.ss-preview { min-height: 50px; border-color: var(--wk-hair); font-size: 15px; line-height: 20px; }

/* The password sheet */
#ss-password { padding: 12px 20px calc(28px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
#ss-password .p-sheet-top { margin-bottom: 16px; }
#ss-password .p-sheet-title { font-size: 30px; line-height: 33px; }
#ss-password .p-sheet-lead { margin-top: 6px; line-height: 20px; color: var(--wk-body); }
#ss-password .p-sheet-body { gap: 16px; margin-top: 16px; }
.ss-pw-form { display: flex; flex-direction: column; gap: 16px; }
.ss-pw-field { display: flex; align-items: center; gap: 10px; }
.ss-pw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-pw-field .ss-under { font-size: 13px; line-height: 18px; }
.ss-hint { margin-top: -4px; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.ss-pw-form .p-error { margin: -8px 0 0; }
.ss-save, .ss-cancel { min-height: 48px; font-size: 15px; line-height: 20px; }
.p-btn.ss-cancel { border: 1.5px solid var(--wk-ink); }
:where(.ss-page, #ss-password) .p-btn:disabled { cursor: default; }

:is(.ss-back, .ss-under, .ss-row):focus-visible,
.ss-choice:has(input:focus-visible) { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
@media (min-width: 860px) {
  .ss-page { max-width: 640px; margin: 0 auto; padding-top: 32px; }
}
/* 9j · Connect your domain (screens/site/domain): one sheet in three steps, sized to frames 2148:16126,
   2148:16261 and 2148:16394. */
#sd-domain { padding: 12px 20px calc(34px + env(safe-area-inset-bottom)); }
#sd-domain .p-sheet-top { margin-bottom: 16px; }
#sd-domain .p-sheet-title { font-size: 30px; line-height: 33px; overflow-wrap: anywhere; }
#sd-domain .p-sheet-lead { margin-top: 6px; line-height: 20px; color: var(--wk-body); }
#sd-domain .p-sheet-body { gap: 16px; margin-top: 16px; }
#sd-domain :where(p, ul) { margin: 0; }

/* The domain field: white, outlined, the label above the typing */
.sd-field {
  display: block; padding: 10px 14px 12px; border: 1.5px solid var(--wk-edge); border-radius: 14px; background: var(--wk-paper);
  transition: border-color .15s;
}
.sd-field:focus-within { border-color: var(--wk-ink); }
.sd-field.bad { border-color: var(--wk-plum); }
.sd-field label { display: block; font-size: 11px; font-weight: 600; line-height: 15px; color: var(--wk-muted); }
/* 16px, not the frame's 15: smaller text makes iOS zoom into the field */
.sd-field input {
  display: block; width: 100%; box-sizing: border-box; min-height: 24px; margin: 2px 0 0; padding: 0; border: 0; background: transparent;
  color: var(--wk-ink); font: inherit; font-size: 16px; line-height: 22px; outline: none;
}
.sd-field input::placeholder { color: var(--wk-muted); }
#sd-domain .sd-error { margin-top: -8px; }
.sd-looking { font-size: 12px; line-height: 17px; color: var(--wk-muted); }

/* Cards of rows: Managed by, the two records, the three steps of connecting */
.sd-card { padding: 0 16px; border: 1px solid var(--wk-hair); border-radius: 18px; background: var(--wk-paper); list-style: none; }
.sd-row { display: flex; align-items: center; gap: 12px; min-height: 43px; padding: 12px 0; box-sizing: border-box; }
.sd-row + .sd-row { border-top: 1px solid var(--wk-off); }
.sd-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sd-row-title { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.sd-row-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }

/* Status marks: a tick when done, a dashed plum ring for the step under way, an empty ring for later */
.sd-mark { flex: none; display: grid; place-items: center; width: 12px; font-size: 14px; font-weight: 600; line-height: 19px; }
.sd-mark.done { color: var(--wk-moss); }
.sd-mark.now::before, .sd-mark.wait::before { content: ''; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; }
.sd-mark.now::before { border: 1.5px dashed var(--wk-plum); }
.sd-mark.wait::before { width: 11px; height: 11px; border: 1.5px solid var(--wk-edge); }

.sd-copy {
  flex: none; min-width: 44px; min-height: 44px; margin: -10px -4px; padding: 0 4px; border: 0; background: none;
  color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; cursor: pointer;
}
.sd-note { font-size: 12px; line-height: 17px; color: var(--wk-muted); }

/* The frame's buttons: 48px tall, 15px words, the outlined one in navy */
.sd-btns { display: flex; flex-direction: column; gap: 16px; }
#sd-domain .sd-btn { min-height: 48px; font-size: 15px; }
#sd-domain .sd-btn.line { border: 1.5px solid var(--wk-ink); }
.sd-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; margin-top: -8px; }
.sd-remove { display: flex; flex-direction: column; gap: 16px; }

.sd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sd-copy:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
/* site-invitations: Emailed invitations (row 12, 2126:15956) and its two sheets, on the palette.css tokens. Line
   heights pinned in px (Manrope runs 1px tall in Chrome). The frame is white, as 9l's is. */
:root { --si-red: #8F1D1D; --si-red-wash: #FBF1F1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --si-red: #F2A0A0; --si-red-wash: #3A2226; } }
[data-theme='dark'] { --si-red: #F2A0A0; --si-red-wash: #3A2226; }

.viewport:has(> #s-site-invitations.active) { background: var(--wk-paper); }
.si-page {
  display: flex; flex-direction: column; gap: 22px; padding: 20px 20px 104px; color: var(--wk-ink); font-family: var(--wk-sans);
}
:where(.si-page, #si-send-sheet, #si-qr-sheet) :where(h1, p, ul) { margin: 0; }
:where(.si-page) ul { padding: 0; list-style: none; }

.si-back, .si-link, .si-act {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
.si-back { align-self: flex-start; gap: 8px; margin: -12px 0; font-size: 14px; line-height: 19px; }
.si-head { display: flex; flex-direction: column; gap: 6px; }
.si-title { font-family: var(--wk-serif); font-size: 34px; font-weight: 500; line-height: 41px; }
.si-lead { font-size: 14px; line-height: 19px; color: var(--wk-muted); }

.si-stats { display: flex; gap: 8px; }
.si-stats li {
  display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; padding: 10px 12px; border: 1px solid var(--wk-hair);
  border-radius: 16px; background: var(--wk-card); font-size: 11px; line-height: 15px; color: var(--wk-muted);
}
.si-stats b { font-size: 18px; font-weight: 600; line-height: 25px; color: var(--wk-ink); }
.si-stats li.bad { background: var(--si-red-wash); }
.si-stats li.bad b { color: var(--si-red); }

.si-wide { width: 100%; min-height: 50px; font-size: 15px; line-height: 20px; }
.si-wide.line { border: 1.5px solid var(--wk-ink); }
.si-qr { display: flex; flex-direction: column; gap: 22px; }
.si-note, .si-none { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.si-problem { margin: -10px 0 0; }
.si-unlive {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 4px 16px;
  border: 1px solid var(--wk-note-edge); border-radius: 16px; background: var(--wk-note); font-size: 14px; line-height: 19px;
}
.si-link { font-size: 14px; line-height: 19px; }

.si-search {
  width: 100%; min-height: 44px; padding: 12px 14px; border: 1px solid var(--wk-stroke); border-radius: 14px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 14px; line-height: 19px;
}
.si-search::placeholder { color: var(--wk-muted); }
.si-search:focus-visible { outline: 0; border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }

.si-card { padding: 4px 16px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.si-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.si-row + .si-row { border-top: 1px solid var(--wk-hair); }
.si-row-main { display: flex; flex: 1 1 0; flex-direction: column; gap: 2px; min-width: 0; }
.si-name { font-size: 14px; font-weight: 600; line-height: 19px; overflow-wrap: anywhere; }
.si-status { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.si-status.bad { color: var(--si-red); }
.si-act { margin: -12px 0; font-size: 13px; line-height: 18px; white-space: nowrap; }
.si-act:disabled { opacity: .5; cursor: wait; }

#si-qr-sheet .si-qr-img {
  display: block; width: 168px; height: 168px; margin: 0 auto 18px; padding: 8px; border: 1px solid var(--wk-hair);
  border-radius: 16px; background: #FFFFFF;
}
#si-qr-sheet a.p-btn { text-decoration: none; }

:is(.si-back, .si-link, .si-act):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
@media (min-width: 860px) {
  .si-page { max-width: 640px; margin: 0 auto; padding-top: 32px; }
}
/* site-registry: 9h Registry, Registry empty and the Add a registry sheet (Oct 14 frames), the Edit and Release sheets
   built the same way, on the palette.css tokens. Line heights pinned in px (Manrope runs 1px tall in Chrome). */
:root { --sr-red: #8F1D1D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --sr-red: #F2A0A0; } }
[data-theme='dark'] { --sr-red: #F2A0A0; }

.viewport:has(> #s-site-registry.active) { background: var(--wk-paper); }
.sr-page {
  display: flex; flex-direction: column; gap: 22px; padding: 20px 20px 104px; color: var(--wk-ink); font-family: var(--wk-sans);
}
:where(.sr-page, #sr-add, #sr-edit, #sr-release) :where(h1, h2, p, ul) { margin: 0; }
:where(.sr-page, #sr-edit) ul { padding: 0; list-style: none; }

.sr-back {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 44px; margin: -12px 0; padding: 0;
  border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.sr-head { display: flex; flex-direction: column; gap: 4px; }
.sr-title { font-family: var(--wk-serif); font-size: 38px; font-weight: 500; line-height: 36px; letter-spacing: -.76px; }
.sr-lead { font-size: 13px; line-height: 19px; color: var(--wk-body); }
.sr-foot { font-size: 12px; line-height: 17px; color: var(--wk-muted); }

/* Cards: a title, then rows split by hairlines. */
.sr-card { padding: 14px 16px 6px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.sr-card > h2 { font-size: 15px; font-weight: 600; line-height: 20px; }
.sr-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--wk-hair); }
.sr-card li:last-child > .sr-row, .sr-card li.sr-row:last-child { border-bottom: 0; }
.sr-row-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.sr-row-title { font-size: 14px; font-weight: 600; line-height: 19px; overflow-wrap: anywhere; }
.sr-row-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.sr-acts { display: flex; flex: none; gap: 4px; margin: -12px -8px -12px 0; }
.sr-act, .sr-inline, .sr-connect, .sr-guest-view, .sr-remove {
  padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.sr-act { min-width: 44px; min-height: 44px; padding: 0 8px; font-size: 13px; line-height: 18px; }
.sr-act:disabled { cursor: progress; color: var(--wk-muted); }
.sr-inline { display: inline; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; text-align: left; }
.sr-connect { align-self: flex-start; min-height: 44px; margin: -6px 0 -12px; font-size: 13px; line-height: 18px; }
.sr-add {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: -12px 0; padding: 12px 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.sr-chev { flex: none; font-size: 13px; font-weight: 600; line-height: 18px; }
.sr-none { padding: 12px 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.sr-watch { padding: 14px 16px; }
.sr-watch .sr-row { padding: 0; border: 0; }
.sr-guest-view { align-self: flex-start; min-height: 44px; margin: -12px 0; font-size: 14px; line-height: 19px; }

/* Registry empty (2168:16466). */
.sr-empty { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.sr-empty h2 { font-size: 15px; font-weight: 600; line-height: 20px; }
.sr-empty > p:not(.sr-foot) { font-size: 13px; line-height: 19px; color: var(--wk-body); }
.sr-empty .sr-main { margin: 30px 0 16px; }
.sr-main { min-height: 48px; font-size: 15px; line-height: 20px; }

/* The sheets: Add a registry (2168:16335) and Edit and Release in the same build. */
:is(#sr-add, #sr-edit, #sr-release) { padding: 12px 20px calc(28px + env(safe-area-inset-bottom)); }
:is(#sr-add, #sr-edit, #sr-release) .p-sheet-top { margin-bottom: 16px; }
:is(#sr-add, #sr-edit, #sr-release) .p-sheet-title { font-size: 30px; line-height: 33px; overflow-wrap: anywhere; }
:is(#sr-add, #sr-edit, #sr-release) .p-sheet-lead { margin-top: 6px; line-height: 20px; color: var(--wk-body); }
:is(#sr-add, #sr-edit, #sr-release) .p-sheet-body { gap: 16px; margin-top: 16px; }
.sr-field {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 12px; border: 1px solid var(--wk-edge); border-radius: 14px;
  background: var(--wk-card);
}
.sr-field:focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 .5px var(--wk-ink); }
.sr-field:has([aria-invalid='true']) { border-color: var(--wk-plum); box-shadow: 0 0 0 .5px var(--wk-plum); }
.sr-field label, .sr-label { font-size: 11px; font-weight: 600; line-height: 15px; color: var(--wk-muted); }
.sr-field :is(input, textarea) {
  width: 100%; min-height: 24px; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 16px;
  line-height: 22px; outline: none; resize: vertical;
}
.sr-field :is(input, textarea)::placeholder { color: var(--wk-muted); }
.sr-field input:disabled { color: var(--wk-body); -webkit-text-fill-color: var(--wk-body); }
.sr-result-slot:empty { display: none; }
.sr-result { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--wk-wash); }
.sr-result.error { background: var(--wk-plum-wash); }
.sr-result-mark {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--wk-lime);
  color: var(--wk-on-lime); font-size: 13px; font-weight: 600;
}
.sr-result.error .sr-result-mark { background: var(--wk-plum); color: #fff; }
.sr-result-text { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.sr-result-title { font-size: 14px; font-weight: 600; line-height: 19px; }
.sr-result-sub { font-size: 12px; line-height: 16px; color: var(--wk-body); }
.sr-outline { min-height: 48px; border: 1.5px solid var(--wk-ink); background: var(--wk-card); color: var(--wk-ink); font-size: 15px; }
.sr-dark { min-height: 48px; border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); font-size: 15px; }
.sr-danger { min-height: 48px; border-color: var(--sr-red); background: var(--sr-red); color: #fff; font-size: 15px; }
.sr-buttons { display: flex; gap: 10px; }
.sr-buttons > .p-btn { flex: 1 1 0; }
.sr-remove { align-self: center; min-height: 44px; margin: -8px 0 -12px; padding: 0 8px; color: var(--sr-red); font-size: 14px; line-height: 19px; }
.sr-kind > button { line-height: 19px; }
.sr-photos-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: -6px; }
.sr-note { font-size: 13px; line-height: 18px; color: var(--wk-body); }
.sr-note .sr-inline { font-weight: 600; color: var(--wk-ink); }
.sr-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sr-photo {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 12px;
  background: var(--wk-ground); cursor: pointer;
}
.sr-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sr-photo.on::after { content: ''; position: absolute; inset: 0; border: 3px solid var(--wk-ink); border-radius: inherit; }
.sr-pick {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--wk-lime); color: var(--wk-on-lime); font-size: 14px;
}

:is(.sr-back, .sr-act, .sr-inline, .sr-connect, .sr-add, .sr-guest-view, .sr-remove, .sr-photo, .sr-outline, .sr-dark, .sr-danger):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}

@media (min-width: 860px) {
  .sr-page { max-width: 640px; margin: 0 auto; padding-top: 32px; }
}
/* The cookies and analytics card (consent/ConsentCard.tsx) for the app, the landing page and the
   vendor portal. The palette.css tokens carry their light values as fallbacks, since the landing
   page and the vendor portal don't load palette.css; every property is set here so their element
   rules (h2, p, button, a) can't reach in. A white card over the page, bottom right on desktop. */
.cookie-card {
  position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  box-sizing: border-box; max-width: 440px; margin: 0 auto; padding: 18px 18px 8px;
  border: 1px solid var(--wk-hair, #ECECF0); border-radius: 20px; background: var(--wk-card, #FFFFFF);
  color: var(--wk-ink, #141B3C); box-shadow: 0 14px 40px rgba(20, 26, 61, .16);
  font-family: var(--wk-sans, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 14px; line-height: 1.5; text-align: left; animation: cookie-in .32s cubic-bezier(.23, 1, .32, 1) both;
}
/* In the app it keeps within the 420px phone column and above the 72px tab bar and the Ask
   button that rides 20px over it; where the tab bar is hidden it drops to the bottom. */
.cookie-card.in-app { max-width: 396px; bottom: calc(100px + env(safe-area-inset-bottom)); }
body:has(#bottom-nav[style*='none']) .cookie-card.in-app { bottom: calc(12px + env(safe-area-inset-bottom)); }
@media (min-width: 860px) {
  .cookie-card, .cookie-card.in-app, body:has(#bottom-nav[style*='none']) .cookie-card.in-app {
    left: auto; right: 24px; bottom: 24px; width: 400px; max-width: none; margin: 0;
  }
}
.cookie-card .cookie-title {
  margin: 0 0 6px; padding: 0; font-family: inherit; font-size: 16px; font-style: normal; font-weight: 700;
  line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--wk-ink, #141B3C);
}
.cookie-card .cookie-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--wk-body, #3A4060); }
.cookie-card .cookie-chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 3px 10px; border-radius: 999px;
  background: var(--wk-wash, #EEF6C4); color: var(--wk-moss, #5C6B12); font-size: 12.5px; font-weight: 600; line-height: 1.5;
}
.cookie-card .cookie-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--wk-olive, #9BB51E); }
.cookie-card .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; }
.cookie-card .cookie-btn {
  min-height: 44px; margin: 0; padding: 0 12px; box-sizing: border-box; border: 1.5px solid var(--wk-ink, #141B3C);
  border-radius: 999px; background: var(--wk-card, #FFFFFF); color: var(--wk-ink, #141B3C); font: inherit;
  font-size: 15px; font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: 0; cursor: pointer;
  transition: transform .12s ease, background-color .15s;
}
.cookie-card .cookie-btn:hover:not(:disabled) { background: var(--wk-track, #F3F3F6); }
.cookie-card .cookie-btn:active:not(:disabled) { transform: scale(.97); }
.cookie-card .cookie-btn:focus-visible { outline: 3px solid var(--wk-ink, #141B3C); outline-offset: 2px; }
.cookie-card .cookie-btn:disabled { opacity: .6; cursor: wait; }
.cookie-card .cookie-error { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--wk-plum, #8E1F5A); }
.cookie-card .cookie-error:empty { margin: 0; }
.cookie-card .cookie-foot { margin: 4px 0 0; font-size: 13px; }
.cookie-card .cookie-foot a {
  display: inline-flex; align-items: center; min-height: 36px; color: var(--wk-muted, #62667A);
  font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
.cookie-card .cookie-foot a:focus-visible { outline: 3px solid var(--wk-ink, #141B3C); outline-offset: 2px; border-radius: 4px; }
[data-ck-focus]:focus { outline: none; }
/* While the card shows, the page scrolls far enough for its last buttons to clear it. */
body:has(#cookie-card:not(.in-app)) { padding-bottom: var(--cookie-room, 0px); }
body:has(#cookie-card.in-app) .screen.active { padding-bottom: var(--cookie-room, 0px); }
@keyframes cookie-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .cookie-card { animation: none; }
  .cookie-card .cookie-btn { transition: none; }
}