/* 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: 'Gloock', Georgia, serif; font-weight: 400; font-style: normal; }

  /* 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: 400; color: #2a2724; font-family: 'Gloock', 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-display: 'Gloock', 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; }

/* Desktop widths (Figma "Desktop · Widths", 2555:44394). Beside the sidebar, 240 from 1280 and a 72 icon rail from
   860 to 1279, a wide screen's content runs up to 1120 with 40px gutters. Cards sit in two columns from 1024 and
   stack below it; under 860 is the phone layout. --wk-side is how much room the sidebar takes. */
:root { --wk-side: 0px; --wk-desk-col: 1120px; --wk-desk-gutter: 40px; }
@media (min-width: 860px) { :root { --wk-side: 72px; } }
@media (min-width: 1280px) { :root { --wk-side: 240px; } }

.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-display); font-size: 22px;
  font-weight: 400; 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-foots { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.side-foot.active { background: var(--color-bg-surface); color: var(--color-text); }
.side-foot.tab.active { background: var(--wk-lime); color: var(--wk-on-lime); }
.side-count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
  background: var(--wk-plum); color: var(--wk-card); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.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: var(--wk-side); 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; }
  /* The toast and "Back to your checklist" clear the tab bar on a phone. Without one they sit 24px
     up, centred on the content beside the sidebar, as Explore's undo toast does. */
  #site-toast, #checklist-breadcrumb { left: calc(var(--wk-side) + (100vw - var(--wk-side)) / 2) !important; bottom: 24px !important; }

  /* A wide screen (ScreenFrame's `wide`) drops the 960 column for the desktop one. Its undo bar (Vendors) sits like
     the toast. */
  .screen.wide { max-width: none; }
  .screen.wide .ck-undo-slot { left: calc(var(--wk-side) + (100vw - var(--wk-side)) / 2); bottom: 24px; }
  .screen.wide :is(.p-page, .k-page, .ix-page, .cm-page, .ed-page) {
    max-width: calc(var(--wk-desk-col) + 2 * var(--wk-desk-gutter)); margin-inline: auto; box-sizing: border-box;
    padding-inline: var(--wk-desk-gutter);
  }
}

/* Plan's and Guests' pages under their tab (2536:37305): open while the tab is, and on hover or keyboard focus from
   elsewhere, when the tab takes the raised fill. Rows are 34 tall with the words at 44, lime with ink for the open page;
   then the tab itself keeps its words and loses the lime. Hover opens them only where there is a pointer that hovers:
   a touch screen's first tap would open them instead of following the tab. */
.side-pages { display: none; flex-direction: column; gap: 2px; padding: 2px 0 6px; }
.side-pages-title { display: none; }
.side-page {
  display: flex; align-items: center; min-height: 34px; padding: 8px 12px 8px 44px; box-sizing: border-box; border: 0;
  border-radius: 10px; background: none; font: inherit; font-size: 13.5px; font-weight: 500; line-height: 18px;
  text-align: left; color: var(--wk-muted); cursor: pointer; transition: background .15s, color .15s;
}
.side-page:hover { background: var(--color-bg-surface); color: var(--color-text); }
.side-page.active { background: var(--wk-lime); color: var(--wk-on-lime); font-weight: 600; }
.side-page:focus-visible { outline: 3px solid var(--color-text); outline-offset: 2px; }
@media (min-width: 1280px) {
  .side-item.active.paged { background: none; color: var(--color-text); }
  .side-group:is(.current, .focus) > .side-pages { display: flex; }
  .side-group:not(.current).focus > .side-item { background: var(--color-bg-raised); color: var(--color-text); }
}
@media (min-width: 1280px) and (hover: hover) {
  .side-group:hover > .side-pages { display: flex; }
  .side-group:not(.current):hover > .side-item { background: var(--color-bg-raised); color: var(--color-text); }
}

/* The icon rail, 860 to 1279 (2556:43289): 48px squares, the brand mark alone, and each label as a navy tooltip on
   hover and focus. The labels stay in the page, so every button keeps its name. The brand row's button sits under the
   mark, as on the rail collapsed from 1280, and opens the full sidebar over the page (`data-side="open"`, below). */
@media (min-width: 860px) and (max-width: 1279px) {
  :root:not([data-side="open"]) .sidebar { position: relative; z-index: 40; align-items: center; padding: 24px 12px; }
  :root:not([data-side="open"]) .side-brand { flex-direction: column; justify-content: center; gap: 8px; width: 48px; margin-bottom: 32px; padding: 0; }
  :root:not([data-side="open"]) .side-brand .side-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  :root:not([data-side="open"]) .side-collapse { margin-left: 0; }
  :root:not([data-side="open"]) .side-nav { gap: 4px; }
  :root:not([data-side="open"]) :is(.side-item, .side-foot) { position: relative; justify-content: center; width: 48px; height: 48px; padding: 0; }
  :root:not([data-side="open"]) :is(.side-item, .side-foot) i { font-size: 24px; }
  :root:not([data-side="open"]) .side-foots { align-items: center; }
  :root:not([data-side="open"]) .side-count { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
  :root:not([data-side="open"]) .side-ask { margin: 0 0 4px; border: 0; }
  :root:not([data-side="open"]) .side-ask-disc { margin: 0; }
  :root:not([data-side="open"]) :is(.side-item, .side-foot) .side-label {
    position: absolute; left: calc(100% + 18px); top: 50%; z-index: 1; transform: translateY(-50%); padding: 6px 10px;
    border-radius: 8px; background: var(--wk-btn); color: var(--wk-on-navy); box-shadow: var(--wk-shadow-sm);
    font-size: 13px; font-weight: 600; line-height: 18px; white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity .12s;
  }
  :root:not([data-side="open"]) :is(.side-item, .side-foot):focus-visible .side-label { opacity: 1; }
  /* Beside the rail a tab with pages opens them as a flyout, its name on top in place of the tooltip. */
  :root:not([data-side="open"]) .side-group { position: relative; }
  :root:not([data-side="open"]) .side-group > .side-item .side-label { clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; }
  :root:not([data-side="open"]) .side-group.focus > .side-pages {
    display: flex; position: absolute; left: calc(100% + 18px); top: 0; z-index: 1; width: 208px; padding: 6px;
    box-sizing: border-box; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-bg);
    box-shadow: var(--wk-shadow);
  }
  /* The gap between the rail and the flyout keeps the hover. */
  :root:not([data-side="open"]) .side-group:hover > .side-pages::before { content: ''; position: absolute; inset: 0 auto 0 -20px; width: 20px; }
  :root:not([data-side="open"]) .side-pages-title { display: block; padding: 6px 12px 4px; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--color-text); }
  :root:not([data-side="open"]) .side-page { padding-left: 12px; }

  /* Opened from the rail: the 240 sidebar as it is from 1280, laid over the page so nothing beside it moves. */
  :root[data-side="open"] .sidebar {
    position: relative; z-index: 41; width: 240px; margin-right: calc(var(--wk-side) - 240px); box-shadow: var(--wk-shadow);
  }
  :root[data-side="open"] .side-item.active.paged { background: none; color: var(--color-text); }
  :root[data-side="open"] .side-group:is(.current, .focus) > .side-pages { display: flex; }
  :root[data-side="open"] .side-group:not(.current).focus > .side-item { background: var(--color-bg-raised); color: var(--color-text); }
}
@media (min-width: 860px) and (max-width: 1279px) and (hover: hover) {
  :root:not([data-side="open"]) :is(.side-item, .side-foot):hover .side-label { opacity: 1; }
  :root:not([data-side="open"]) .side-group:hover > .side-pages {
    display: flex; position: absolute; left: calc(100% + 18px); top: 0; z-index: 1; width: 208px; padding: 6px;
    box-sizing: border-box; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-bg);
    box-shadow: var(--wk-shadow);
  }
  :root[data-side="open"] .side-group:hover > .side-pages { display: flex; }
  :root[data-side="open"] .side-group:not(.current):hover > .side-item { background: var(--color-bg-raised); color: var(--color-text); }
}

/* Collapsed from 1280 (the brand row's collapse button, as the desktop frames draw it): the 72px icon rail, the same as
   860 to 1279, until it's opened again. Remembered in this browser (shell/Chrome.tsx). From 860 to 1279 the same
   button opens the rail into the full sidebar for the moment. */
.side-collapse {
  display: none; flex: none; width: 32px; height: 32px; margin-left: auto; padding: 0; border: 0; border-radius: 8px; background: none;
  color: var(--wk-muted); font: inherit; cursor: pointer;
}
.side-collapse i { font-size: 18px; }
.side-collapse:hover { background: var(--color-bg-surface); color: var(--color-text); }
.side-collapse:focus-visible { outline: 3px solid var(--color-text); outline-offset: 2px; }
@media (min-width: 860px) { .side-collapse { display: grid; place-items: center; } }
@media (min-width: 1280px) {
  :root[data-side="rail"] { --wk-side: 72px; }
  :root[data-side="rail"] .sidebar { position: relative; z-index: 40; align-items: center; padding: 24px 12px; }
  :root[data-side="rail"] .side-brand { flex-direction: column; justify-content: center; gap: 8px; width: 48px; margin-bottom: 32px; padding: 0; }
  :root[data-side="rail"] .side-brand .side-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  :root[data-side="rail"] .side-collapse { margin-left: 0; }
  :root[data-side="rail"] .side-nav { gap: 4px; }
  :root[data-side="rail"] :is(.side-item, .side-foot) { position: relative; justify-content: center; width: 48px; height: 48px; padding: 0; }
  :root[data-side="rail"] :is(.side-item, .side-foot) i { font-size: 24px; }
  :root[data-side="rail"] .side-foots { align-items: center; }
  :root[data-side="rail"] .side-count { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
  :root[data-side="rail"] .side-ask { margin: 0 0 4px; border: 0; }
  :root[data-side="rail"] .side-ask-disc { margin: 0; }
  :root[data-side="rail"] :is(.side-item, .side-foot) .side-label {
    position: absolute; left: calc(100% + 18px); top: 50%; z-index: 1; transform: translateY(-50%); padding: 6px 10px;
    border-radius: 8px; background: var(--wk-btn); color: var(--wk-on-navy); box-shadow: var(--wk-shadow-sm);
    font-size: 13px; font-weight: 600; line-height: 18px; white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity .12s;
  }
  :root[data-side="rail"] :is(.side-item, .side-foot):is(:hover, :focus-visible) .side-label { opacity: 1; }
  :root[data-side="rail"] .side-group { position: relative; }
  :root[data-side="rail"] .side-group > .side-item .side-label { clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; }
  /* Pages open as the rail's flyout on hover or focus, not under the open tab; the open tab keeps its lime. */
  :root[data-side="rail"] .side-group > .side-pages { display: none; }
  :root[data-side="rail"] .side-group:is(.focus, :hover) > .side-pages {
    display: flex; position: absolute; left: calc(100% + 18px); top: 0; z-index: 1; width: 208px; padding: 6px;
    box-sizing: border-box; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-bg);
    box-shadow: var(--wk-shadow);
  }
  :root[data-side="rail"] .side-group:hover > .side-pages::before { content: ''; position: absolute; inset: 0 auto 0 -20px; width: 20px; }
  :root[data-side="rail"] .side-pages-title { display: block; padding: 6px 12px 4px; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--color-text); }
  :root[data-side="rail"] .side-page { padding-left: 12px; }
  :root[data-side="rail"] .side-item.active.paged { background: var(--wk-lime); color: var(--wk-on-lime); }
}

/* The sidebar's pages take the place of the Plan header's tabs (Overview v3, 3437:56612) where they can always be
   reached: under the open tab from 1280, and beside the rail with a pointer that hovers. A touch screen beside the
   rail keeps the tabs. */
@media (min-width: 1280px), (min-width: 860px) and (hover: hover) { .p-seg[aria-label="Plan"] { display: none; } }

/* Two columns of cards on a wide screen from 1024 (`.desk-2col` holding `.desk-col`s, `.desk-span` for a full-width
   row). Below 1024 the wrappers step aside, so the cards stack in the page's own order and spacing. */
.desk-2col, .desk-col { display: contents; }
@media (min-width: 1024px) {
  .desk-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .desk-col { display: flex; flex-direction: column; gap: var(--desk-gap, 24px); min-width: 0; }
  .desk-2col > .desk-span { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-item, .nav-ask-disc, .side-item, .side-foot, .side-label, .side-page { transition: none; }
}

/* You're offline (shell/OfflineNotice.tsx): a navy bar under the top of the screen while the device is offline. */
/* Above the tab bar and the toast (bottom 96px, toast.tsx), so it never covers the top bar's buttons or a
   toast saying a save didn't go through. On a desktop there's no tab bar, so it sits near the bottom. */
.wk-offline {
  position: fixed; z-index: 90; left: 50%; transform: translateX(-50%);
  bottom: 144px; width: min(calc(100% - 32px), 560px);
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px;
  background: var(--wk-btn); color: var(--wk-on-navy); box-shadow: var(--wk-shadow);
  font-family: var(--wk-sans); font-size: 14px; line-height: 20px;
}
.wk-offline b { font-weight: 700; }
.wk-offline .ti { flex: none; font-size: 18px; color: var(--wk-lime); }
/* In dark mode the bar is lime with navy words (palette.css), so the icon goes navy too. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wk-offline .ti { color: var(--wk-on-btn); } }
:root[data-theme="dark"] .wk-offline .ti { color: var(--wk-on-btn); }
@media (min-width: 860px) { .wk-offline { bottom: 24px; } }

/* The status bar. The iPhone app draws under it (mobile/capacitor.config.ts), so the scroll area starts with a strip
   as tall as the top safe area that stays put as the page scrolls, translucent like iOS's own bars, so nothing
   scrolls under the clock. A browser's top safe area is 0 (Safari keeps the page below its bar), so the strip has no
   height there. Explore, Talk to Wickette and the site editor reach under the status bar themselves. */
.viewport::before {
  content: ''; display: block; position: sticky; top: 0; z-index: 30; height: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--wk-paper) 84%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.viewport:has(> :is(#s-feed, #s-braindump, #s-site-edit).active)::before { content: none; }
.viewport > .screen { min-height: calc(100% - env(safe-area-inset-top, 0px)); }
/* A full-height page under the strip is the screen less the strip, or the sign-in steps sit low enough for the
   keyboard to cover their button. */
#s-onboard :is(.ob, .ob-sign, .ob-loading) { min-height: calc(100dvh - env(safe-area-inset-top, 0px)); }
/* 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-display); font-size: 34px; line-height: 1.08; font-weight: 400;
  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; }
}

/* Somewhere that takes a file, while one is dragged over it (fileDrop in app/files.ts). */
.drop-over { outline: 2px dashed var(--wk-olive); outline-offset: 4px; }
/* 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: 400 40px/36px var(--wk-display); 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; }

/* Got an invite code?: sign out, or delete the login the email code made. */
.ob-leave { flex-wrap: wrap; justify-content: center; }
.ob-leave-confirm {
  box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px;
  border-radius: 18px; background: var(--wk-plum-wash);
}
.ob-leave-title { margin: 0; font: 600 15px/1.4 var(--wk-sans); color: var(--wk-ink); }
.ob-leave-confirm .ob-sign-text { margin: 0; }
.ob-text-link.ob-danger-link { color: var(--wk-plum); font-weight: 600; }

/* 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: 400 38px/36px var(--wk-display); 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; }
/* About you: the wedding-only line lives inside the email box, under what they type. */
.ob-glass-help { margin-top: 2px; font: 400 12px/17px var(--wk-sans); color: var(--wk-muted); }
:is(.ob-glass, .ob-field):focus-within { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
/* The box's dark border is the focus mark, so the page-wide ring would only cover the label. */
.ob-field input:focus-visible { outline: none; }

/* 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; }
/* Each link's padding makes a 32px-tall tap area; the negative margin keeps a one-link box its usual height. */
.ob-field-links { display: flex; flex-direction: column; align-items: flex-end; margin: -8px 0; }
.ob-field.split { flex-direction: row; align-items: center; gap: 12px; }
.ob-field-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#ob-when::placeholder { letter-spacing: -.3px; }
.ob-field-input { position: relative; display: flex; align-items: center; gap: 6px; }
.ob-field-link {
  padding: 8px 0 8px 8px; 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;
}
/* Marked Not sure yet: the box fills and its "Not sure yet" reads in ink, so it isn't mistaken for an empty box,
   and the link becomes a pressed pill like the Not sure yet chip. Typing in the box, or the pill, undoes it. */
.ob-field.unsure { background: var(--wk-track); }
.ob-field.unsure input::placeholder { color: var(--wk-ink); }
.ob-field-link.on {
  margin: 4px 0; padding: 4px 10px; border-radius: 999px; background: var(--wk-btn); color: var(--wk-on-btn); text-decoration: none;
}
.ob-pick-date {
  position: relative; flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: -4px 0 -4px -5px; 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-priorities { display: flex; flex-direction: column; gap: 8px; }
/* Ten one-word chips, three to a row, then Guest experience beside Decor and Not sure yet. */
.ob-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 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: span 2; }

/* 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; }

/* How Wickette uses AI: who the provider is, what goes to it and what doesn't, then Allow. One
   column on a phone; on a desktop the column widens and the two cards sit side by side. */
.ob-ai { gap: 18px; }
.ob-ai-badge {
  align-self: flex-start; display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
  background: var(--wk-wash); color: var(--wk-moss); font: 600 12px/16px var(--wk-sans);
}
.ob-ai-lead { font: 400 15px/22px var(--wk-sans); color: var(--wk-body); }
.ob-ai-lead b { font-weight: 600; color: var(--wk-ink); }
.ob-ai-grid { display: flex; flex-direction: column; gap: 12px; }
/* Lime, not plum: plum is the app's warning colour, and this is information (3618:18993). */
.ob-ai-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 22px; background: var(--wk-wash); }
.ob-ai-card.quiet { background: var(--wk-track); }
.ob-ai-h { margin: 0; font: italic 500 18px/22px var(--wk-serif); color: var(--wk-ink); }
.ob-ai-fold { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: -8px; }
.ob-ai-fold p { font: 400 13px/18px var(--wk-sans); color: var(--wk-muted); }
.ob-ai-show {
  min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font: 600 13px/18px var(--wk-sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.ob-ai-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ob-ai-list li { display: flex; align-items: flex-start; gap: 11px; font: 400 13px/18px var(--wk-sans); color: var(--wk-body); }
.ob-ai-list .ti { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--wk-paper); color: var(--wk-ink); font-size: 16px; }
.ob-ai-list span { padding-top: 5px; }
.ob-ai-list b { display: block; margin-bottom: 1px; font-weight: 600; color: var(--wk-ink); }
.ob-ai-more { font: 400 12px/17px var(--wk-sans); color: var(--wk-muted); }
.ob-ai-more a { color: var(--wk-ink); text-underline-offset: 2px; }
.ob-ai-notes { display: flex; flex-direction: column; gap: 8px; }
.ob-ai-note { display: flex; align-items: flex-start; gap: 10px; font: 400 13px/19px var(--wk-sans); color: var(--wk-body); }
.ob-ai-note .ti { flex: none; margin-top: 1px; font-size: 17px; color: var(--wk-muted); }
.ob-ai-actions { display: flex; flex-direction: column; gap: 14px; }
/* The same lists in Privacy and terms' What's shared with AI sheet. */
.st-ai-lists { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
/* The sheet is phone-width on a desktop too, so the cards stay stacked there. */
.st-ai-lists .ob-ai-grid { display: flex; flex-direction: column; }
.st-ai-lists .ob-ai-card { padding: 16px; }
@media (min-width: 860px) {
  .ob-col.wide { max-width: 780px; }
  .ob-ai { gap: 22px; padding-top: 88px; }
  .ob-ai-lead { max-width: 560px; font-size: 16px; line-height: 24px; }
  .ob-ai-grid { display: grid; grid-template-columns: 1.25fr 1fr; align-items: start; gap: 16px; }
  .ob-ai-card { padding: 22px; }
  .ob-ai-actions { flex-direction: row-reverse; align-items: center; justify-content: flex-start; gap: 20px; }
  .ob-ai-notes { flex-direction: row; gap: 24px; }
  .ob-ai-note { flex: 1; }
  .ob-ai-actions :is(.ob-lime, .ob-line-btn) { width: auto; min-width: 240px; }
}

/* 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: 400 27px/1 var(--wk-display); 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; }
/* On a desktop the sidebar's foot has Notifications, Inbox and Your wedding (the desktop frames draw no initials, bell or
   inbox here): only a screen's own actions stay, and a row with none goes. */
@media (min-width: 860px) {
  .p-top .p-in-sidebar { display: none; }
  .p-top:not(:has(.p-actions > :not(.p-in-sidebar))) { display: none; }
  .p-top:has(.p-actions > :not(.p-in-sidebar)) { justify-content: flex-end; }
}
.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-display); font-size: 38px; line-height: 44px; font-weight: 400; text-wrap: balance; }
.p-hello em { font-style: normal; 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-display); font-size: 38px; line-height: 1.1; font-weight: 400; 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 .ti { font-size: 20px; }
.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-display); font-size: 34px; line-height: normal; font-weight: 400; 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; }
}
/* Desktop dialogs ("Desktop · Widths"): 600 and centred from 1024 (2556:43346), the full height from 860 to 1023. */
@media (min-width: 1024px) {
  .p-sheet { max-width: 600px; max-height: calc(100dvh - 64px); }
}
@media (min-width: 860px) and (max-width: 1023px) {
  .p-sheet { top: 0; bottom: 0; transform: none; max-width: 600px; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}
@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 three numbers and the bar (Numbers.tsx, styled in guests-list.css), then how many have replied. */
.rs-count-line { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.rs-card .sn-row:not(.desk) .sn-share { display: inline; }
@container (max-width: 520px) { .rs-card .sn-share { display: none !important; } }
.rs-card { container-type: inline-size; }

/* "New since Tuesday: 4 RSVPs, 1 change ›" under the numbers (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-display); font-size: 34px; font-weight: 400; 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-display); font-size: 38px; font-weight: 400; 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-display); font-size: 24px; font-weight: 400; 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-summary .ru-hold { font-weight: 500; color: var(--wk-plum); }
.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; }
/* Their answers to the ride, the song and the couple's questions: the question over what they wrote. */
.rh-answers { margin: 0; }
.rh-answer { display: flex; flex-direction: column; gap: 4px; padding: 11px 0; border-top: 1px solid var(--wk-off); }
.rh-answer dt { font-size: 13px; line-height: 18px; color: var(--wk-muted); overflow-wrap: anywhere; }
.rh-answer dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--wk-ink); overflow-wrap: anywhere; }
.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-display); font-size: 38px; line-height: 36px; font-weight: 400; 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-display); font-size: 24px; font-weight: 400; 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-display); font-size: 38px; font-weight: 400; 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. */
/* The Guests tab's header on Guest list, Website and RSVP (GuestsTabs.tsx): the toggle 22px under the one-line
   subtitle on all three, as every mobile frame puts it (y=215), whatever gap the page's own stack has. */
.gx-head { display: contents; }
.gx-head > .p-stack { gap: 22px; }
.gx-head .p-sub { line-height: 19px; }

.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-street { font-weight: 600; }
.g-address-rest { color: var(--wk-muted); }
.g-address-list > li[aria-selected='true'] { font-weight: 600; }

/* ── Desktop widths (Desktop · Widths 2555:44394): the Guests screens set their own, so they don't depend on the
   app-wide .screen 960 and .p-page 640 caps. Content is fluid up to 1120px between 40px gutters: 1120 at 1440,
   960 at 1280. Unlayered, so these beat @layer legacy; the class pairs beat plan.css's .p-page. */
@media (min-width: 860px) {
  :is(#s-guests, #s-guests-add, #s-guests-check, #s-guests-contacts, #s-guests-paste, #s-guests-needs, #s-guests-setup,
      #s-guests-household).screen { max-width: none; }
  :is(.gl-page, .gn-page, .gh-page, .ga-page, .gsu-page).p-page { max-width: 1200px; padding-left: 40px; padding-right: 40px; }
}

/* Full screen (GU-150): no sidebar and no tab bar while the list fills the window. */
body:has(#s-guests.active .gl-full) :is(#sidebar, #bottom-nav) { display: none !important; }

/* The Undo toast (pending.ts, GU-20e/26a/47a/20i): centred on the Guests page, above the tab bar. */
.gx-toast-slot { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60; pointer-events: none; }
@media (min-width: 860px) {
  /* --wk-side is the sidebar's width (the desktop-width PR: 72 rail to 1279, 240 from 1280); 240 until it lands. */
  .gx-toast-slot { left: calc(var(--wk-side, 240px) + (100vw - var(--wk-side, 240px)) / 2); bottom: 32px; }
  body:has(#s-guests.active .gl-full) .gx-toast-slot { left: 50%; }
}
/* GU-20i, GU-47a: a navy pill whatever the theme, as the app's other toasts stay dark. */
.gx-toast {
  display: flex; align-items: center; gap: 16px; padding: 15px 22px 15px 18px; border-radius: 26px;
  background: #141B3C; color: #F7F4EC; font-size: 13.5px; font-weight: 500; line-height: 18px; pointer-events: auto;
  box-shadow: 0 16px 32px rgba(20, 27, 60, .3); max-width: calc(100vw - 32px);
}
.gx-toast-mark { flex: none; color: #CFE83A; }
.gx-toast-text { min-width: 0; }
.gx-toast-undo {
  flex: none; margin-left: auto; border: 0; padding: 0; background: none; color: #CFE83A; font: inherit; font-weight: 600;
  cursor: pointer;
}
.gx-toast-close {
  flex: none; border: 0; padding: 0 4px; min-width: 24px; height: 25px; background: none;
  color: #fff; font: 500 18px/25px var(--wk-sans, inherit); cursor: pointer;
}
.gx-toast-close:focus-visible, .gx-toast-undo:focus-visible { outline: 2px solid #CFE83A; outline-offset: 2px; }

/* Once the desktop sidebar lists the Guests pages (Figma 2536:37305, the desktop-width PR's sub-nav), they replace the
   in-page Guest list / Website / RSVP toggle and the settings gear on all three screens: from 1280, where the pages
   show under the tab, and beside the rail only where a pointer can hover to open them (a tablet keeps the toggle). */
@media (min-width: 1280px), (min-width: 860px) and (hover: hover) {
  body:has(#sidebar .side-pages[data-pages="guests"]) :is(#s-guests, #s-site, #s-site-rsvps)
    :is(.p-seg[aria-label="Guests"], .p-round[aria-label="Guest settings"]) { display: none; }
}
/* 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: 14px; padding: 16px; }
.gl-count-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gl-count-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.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-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
/* Group colours in order (lime, navy, olive, sky, berry); sand for who's left out, light grey for Not set. */
:is(.gl-count, .rs-card) { --gl-navy: #141B3C; --gl-sky: #8FAEDC; --gl-unset: var(--wk-bar); }
:root[data-theme='dark'] /* Group colours in order (lime, navy, olive, sky, berry); sand for who's left out, light grey for Not set. */
:is(.gl-count, .rs-card) { --gl-navy: #8E9BD0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) /* Group colours in order (lime, navy, olive, sky, berry); sand for who's left out, light grey for Not set. */
:is(.gl-count, .rs-card) { --gl-navy: #8E9BD0; } }
.gl-dot.lime { background: var(--wk-lime); }
.gl-dot.navy { background: var(--gl-navy); }
.gl-dot.sand { background: var(--wk-grip); }
.gl-dot.olive { background: var(--wk-olive); }
.gl-dot.sky { background: var(--gl-sky); }
.gl-dot.plum { background: var(--wk-plum); }
.gl-dot.unset { background: var(--gl-unset); }
.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; }

/* 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; }
/* Only the pill whose menu is open is lit (GU-23b; lime on this navy bar). */
.gl-bulk-chip[aria-expanded='true'] { 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-display); font-size: 38px; font-weight: 400; 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, .sn-cell, .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; } }

/* ── Desktop width (Figma GU-20 to GU-28, Oct 23): "Your guests", the action cards, search and the one-line list
   head, the lime-tint Edit multiple bar, the Filter dropdown and the centred sheets. Only drawn from 860px. */
.gld-card, .gld-bulk, .gl-drop { --gld-tint: #FBF4F7; --gld-rule: #E8DBE3; --gld-edge: #CFCFD8; --gld-bar: #EEF4C6; --gld-pick: #F6FAE3; }
:root[data-theme='dark'] :is(.gld-card, .gld-bulk, .gl-drop, .gld-listhead) {
  --gld-tint: color-mix(in srgb, var(--wk-plum-wash) 45%, var(--wk-paper)); --gld-rule: var(--wk-line); --gld-edge: var(--wk-stroke);
  --gld-bar: var(--wk-wash); --gld-pick: var(--wk-wash);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) :is(.gld-card, .gld-bulk, .gl-drop, .gld-listhead) {
    --gld-tint: color-mix(in srgb, var(--wk-plum-wash) 45%, var(--wk-paper)); --gld-rule: var(--wk-line); --gld-edge: var(--wk-stroke);
    --gld-bar: var(--wk-wash); --gld-pick: var(--wk-wash);
  }
}
.gld-listhead { --gld-edge: #CFCFD8; }

/* "Your guests" (GU-20; GU-28 tighter while nobody is on the list). */
.gld-card {
  display: flex; flex-direction: column; gap: 20px; margin-bottom: 6px; padding: 24px 28px 20px; border: 1px solid var(--wk-hair);
  border-radius: 24px; background: var(--wk-card); color: var(--wk-ink); --gl-navy: #141B3C; --gl-sky: #8FAEDC; --gl-unset: var(--wk-bar);
}
:root[data-theme='dark'] .gld-card { --gl-navy: #8E9BD0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .gld-card { --gl-navy: #8E9BD0; } }
.gld-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gld-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 23px; }
.gld-break { display: flex; align-items: center; gap: 8px; }
.gld-break-label { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-muted); }
/* The frames write "Priority ⌄" with a small glyph; a 9px chevron one pixel after the word keeps their widths. */
.gld-pill {
  display: inline-flex; align-items: center; gap: 1px; padding: 8px 12px 8px 14px; border: 1px solid var(--wk-grip); border-radius: 999px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 600; line-height: 19px; cursor: pointer;
}
.gld-pill i { font-size: 9px; }
.gld-body { display: flex; flex-direction: column; gap: 16px; }
.gld-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gld-maybe { color: var(--wk-on-sand); }
/* Docked beside the household panel (GU-43): the action cards as pills, and the list head wrapping rather than
   running under the panel. The number row shrinks with the card. */
.gl-docked .gld-actions { gap: 8px; }
.gl-docked .gld-action { flex: none; height: auto; padding: 6px 12px; border-color: var(--ghp-pill); border-radius: 999px; }
.gl-docked :is(.gld-action-tile, .gld-action-line, .gld-action-go) { display: none; }
.gl-docked .gld-action-name { font-size: 13px; font-weight: 500; line-height: 18px; }
.gl-docked .gld-listhead { flex-wrap: wrap; row-gap: 8px; }
.gl-docked .sn-row.desk { --sn-size: 44px !important; }
/* Too narrow for the total beside its parts: it heads the card on its own line. */
.gl-docked .sn-row.desk:has(.sn-total) { display: flex; flex-wrap: wrap; row-gap: 16px; }
.gl-docked .sn-row.desk:has(.sn-total) > .sn-li { flex: 1 1 20%; }
.gl-docked .sn-row.desk:has(.sn-total) > .sn-li:has(.sn-total) { flex: 0 0 100%; }
.gl-docked .sn-row.desk:has(.sn-total) > .sn-li:nth-child(2) { border-left: 0; }

/* The action cards (GU-20, GU-28). */
.gld-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.gld-action {
  display: flex; flex: 1 1 260px; align-items: center; gap: 14px; box-sizing: border-box; min-width: 0; height: 92px; padding: 16px 18px 16px 16px;
  border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-card); color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.gld-action-tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--wk-plum-wash); }
.gld-action-tile > i { font-size: 18px; color: var(--wk-plum); }
.gld-action-mail { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5.4px; background: var(--wk-track); }
.gld-action-mail i { font-size: 10px; color: var(--wk-plum); }
.gld-action-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.gld-action-name { font-size: 15px; font-weight: 600; line-height: 20px; }
.gld-action-line { font-size: 13px; line-height: 18px; }
.gld-action-go { flex: none; font-size: 18px; }

/* Search, Filter and the filters in force (GU-20, GU-23). The field takes the 3:1 edge, not the frame's hairline. */
.gld-search-row { display: flex; align-items: center; gap: 8px; }
.gld-search {
  flex: 1; min-width: 0; box-sizing: border-box; height: 47px; padding: 13px 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: 19px; outline: none;
}
.gld-search::placeholder { color: var(--wk-muted); opacity: 1; }
.gld-search:focus-visible { border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.gld-filter {
  display: inline-flex; align-items: center; gap: 5px; flex: none; height: 45px; 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;
}
.gld-filter i { font-size: 9px; }
.gld-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 30px; }

/* The line over the table. */
.gld-listhead { display: flex; align-items: center; gap: 12px; min-height: 32px; padding: 0 4px; }
.gld-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.gld-count { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.gld-badge, .gld-chart-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 0; border-radius: 999px;
  background: var(--wk-plum-wash); color: var(--wk-plum); font: inherit; font-size: 12px; font-weight: 600; line-height: 17px; cursor: pointer;
}
.gld-badge.lime { background: var(--wk-lime); color: var(--wk-on-lime); }
.gld-chart-chip { font-weight: 500; }
.gld-chart-chip i { font-size: 10px; }
.gld-badge::after, .gld-chart-chip::after { content: ''; position: absolute; inset: -8px 0; }
.gld-clear-search {
  position: relative; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; font-size: 13px; font-weight: 500;
  line-height: 18px; cursor: pointer;
}
.gld-download {
  position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px;
  font-weight: 600; line-height: 19px; cursor: pointer;
}
.gld-download::after, .gld-clear-search::after { content: ''; position: absolute; inset: -12px -4px; }
.gld-head-pill {
  flex: none; padding: 6px 12px; border: 1px solid var(--gld-edge); border-radius: 999px; background: var(--wk-card); color: var(--wk-ink);
  font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer;
}
.gld-head-pill.lime { border-color: var(--wk-lime); background: var(--wk-lime); color: var(--wk-on-lime); }

/* Edit multiple (GU-23): the lime tint over the table, outlined pills, the open one navy, Save navy. */
.gld-bulk {
  display: flex; flex-direction: column; gap: 16px; padding: 16px 20px; border: 1px solid var(--wk-lime); border-radius: 22px;
  background: var(--gld-bar); color: var(--wk-ink);
}
.gld-bulk-top { display: flex; align-items: center; gap: 16px; }
.gld-bulk-text { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.gld-bulk-count { margin: 0; font-size: 14px; font-weight: 600; line-height: 19px; }
.gld-bulk-hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.gld-bulk-link {
  position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--wk-body); font: inherit; font-size: 13px;
  font-weight: 500; line-height: 18px; cursor: pointer;
}
.gld-bulk-link::after { content: ''; position: absolute; inset: -12px -6px; }
.gld-bulk-save {
  flex: none; padding: 8px 16px; 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;
}
.gld-bulk-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.gld-bulk .gld-pill { padding: 8px 12px; border-color: var(--wk-edge); font-size: 13px; font-weight: 500; line-height: 18px; }
.gld-bulk .gld-pill.berry { color: var(--wk-plum); }
.gld-bulk .gld-pill[aria-expanded='true'] { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
.gld-bulk .gld-pill:disabled { opacity: .55; cursor: default; }
.gld-menu { top: calc(100% + 37px); width: 260px; margin-left: -5px; padding: 8px 0; border-color: var(--wk-stroke); border-radius: 14px; box-shadow: 0 8px 24px rgba(20, 26, 61, .14); }
.gld-menu .gl-menu-label { padding: 8px 16px 4px; }
.gld-menu .gl-menu-item { min-height: 39px; padding: 10px 16px; }
.gld-menu .gl-menu-item.on { background: var(--gld-pick); }
.gld-menu .gl-menu-item.on .gl-menu-name { font-weight: 500; }
.gld-menu .gl-menu-item i { font-size: 14px; }
.gl-menu-note { margin: 0; padding: 8px 16px 4px; border-top: 1px solid var(--wk-stroke); font-size: 12px; line-height: 16px; color: var(--wk-muted); }

/* Filter your list as a dropdown (GU-24). */
.gl-drop {
  position: fixed; inset: auto; box-sizing: border-box; width: 600px; max-width: calc(100vw - 32px); margin: 0; padding: 12px 20px 28px;
  overflow: auto; border: 0; border-radius: 20px; background: var(--wk-paper); color: var(--wk-ink); font-family: var(--wk-sans);
  box-shadow: 0 12px 20px rgba(20, 26, 61, .18);
}
.gl-drop[open] { display: flex; flex-direction: column; gap: 14px; }
.gl-drop::backdrop { background: rgba(20, 27, 60, .35); }
.gl-drop-head { display: flex; align-items: center; gap: 8px; }
.gl-drop-title { flex: 1; min-width: 0; margin: 0; font-family: var(--wk-display); font-size: 30px; font-weight: 400; line-height: 36px; outline: none; }
.gl-drop .gl-clear-all { position: relative; top: auto; right: auto; }
.gl-drop .gl-filter-part { gap: 14px; }
.gl-drop .gl-show { min-height: 48px; font-size: 15px; }

/* The sheets Edit multiple opens, centred at 600 (GU-26, Remove households). */
@media (min-width: 860px) {
  :is(#gl-merge, #gl-move-homes) { max-width: 600px; padding: 12px 20px 28px; border-radius: 20px; }
  :is(#gl-merge, #gl-move-homes) .p-sheet-top { display: none; }
  :is(#gl-merge, #gl-move-homes) .p-sheet-title { font-size: 30px; line-height: 43px; }
  :is(#gl-merge, #gl-move-homes) .p-sheet-lead { margin-top: 12px; font-size: 13px; line-height: 19px; color: var(--wk-body); }
  :is(#gl-merge, #gl-move-homes) .p-sheet-body { gap: 12px; margin-top: 12px; }
  :is(#gl-merge, #gl-move-homes) .p-btn.line { padding: 0 18px; border-color: #CFCFD8; font-weight: 500; }
}
.gl-move-search { height: 44px; }
.gl-move-list { max-height: 280px; overflow-y: auto; }
.gl-move-none { margin: 0; padding: 12px 0; }

:is(.gld-pill, .gld-action, .gld-filter, .gld-badge, .gld-chart-chip, .gld-clear-search, .gld-download, .gld-head-pill,
  .gld-bulk-link, .gld-bulk-save):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.gld-search::-webkit-search-cancel-button { appearance: none; }

/* The summary numbers (Numbers.tsx; Guest list on a phone and at desktop width, and RSVP's Replies): equal columns,
   centred, with hairlines between; the total sits on a cream panel so it reads as the whole, not one more group. */
.sn-row { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.sn-li { display: flex; min-width: 0; }
.sn-li + .sn-li { border-left: 1px solid var(--wk-hair); }
.sn-li:has(.sn-total) + .sn-li { border-left: 0; }
.sn-cell {
  display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; margin: 0;
  padding: 4px 6px; border: 0; border-radius: 12px; background: none; color: var(--wk-ink); font: inherit; text-align: center;
}
button.sn-cell { cursor: pointer; }
button.sn-cell:hover, .sn-cell.on { background: var(--wk-plum-wash); }
.sn-n { font-family: var(--wk-display); font-size: var(--sn-size, 60px); font-weight: 400; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.sn-label {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; min-height: 16px; font-size: 12px;
  font-weight: 500; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere;
}
.sn-share { color: var(--wk-muted); font-weight: 400; }
.sn-cell.over .sn-n { color: var(--wk-plum); }
/* The total is the headline: larger, set left, a wider first column, no rule after it. Its parts follow. */
.sn-row:has(.sn-total) { grid-template-columns: minmax(0, 1.5fr); }
.sn-total { align-items: flex-start; text-align: left; padding-inline: 0 24px; }
.sn-total .sn-n { font-size: calc(var(--sn-size, 60px) * 1.45); }
.sn-total .sn-label { justify-content: flex-start; color: var(--wk-ink); font-weight: 600; }
/* Seats left is about the venue, so it labels the bar's empty end rather than standing in the row. */
.gld-seats { order: 9; margin-left: auto; text-align: right; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink); }
.gld-seats.over { color: var(--wk-plum); }
/* Nobody tagged yet: the way in to Edit multiple. */
.gld-nudge {
  padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.gld-nudge:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.sn-row.desk .sn-label { font-size: 13px; line-height: 18px; }
.sn-row.desk .sn-cell { padding-inline: 12px; }
.sn-row:not(.desk) .sn-share { display: none; }
.sn-bar { display: flex; height: 8px; overflow: hidden; border-radius: 4px; background: var(--wk-track); }
.sn-bar > span { flex: none; height: 100%; }
.sn-bar > .lime { background: var(--wk-lime); } .sn-bar > .navy { background: var(--gl-navy); } .sn-bar > .sand { background: var(--wk-grip); }
.sn-bar > .olive { background: var(--wk-olive); } .sn-bar > .sky { background: var(--gl-sky); } .sn-bar > .plum { background: var(--wk-plum); }
.sn-bar > .unset { background: var(--gl-unset); }
/* 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-display); font-size: 34px; font-weight: 400; 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); }
.gh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gd-inline { gap: 10px; }
.gd-inline .gd-actions .p-btn { min-width: 0; }

/* ── The household panel (GU-43), docked beside the list at desktop width: 480px below a 1440px window (SP-2, SP-12),
   560px from 1440, where its first 25px are the shadow and the hairline sits inside (GU-43). The list's dock takes
   --ghp-w. A pale ground right of the hairline, sections under hairlines, a lime card for each person opened. Values
   sit under 13px labels and change in place. ── */
#s-guests {
  --ghp-w: 480px;
  --ghp-ground: color-mix(in srgb, var(--wk-track) 50%, var(--wk-paper));
  --ghp-wash: color-mix(in srgb, var(--wk-wash) 50%, var(--wk-paper));
  --ghp-pill: color-mix(in srgb, var(--wk-stroke) 80%, var(--wk-edge));
}
.ghp { display: none; }
@media (min-width: 860px) {
  .ghp {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 7; display: block; width: var(--ghp-w); box-sizing: border-box;
    overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 48px; border-left: 1px solid var(--wk-stroke);
    background: var(--ghp-ground); box-shadow: -12px 0 28px rgba(20, 26, 61, .05); color: var(--wk-ink); font-family: var(--wk-sans);
  }
}
@media (min-width: 1440px) {
  #s-guests { --ghp-w: 560px; }
  .ghp {
    padding-left: 50px; border-left: 0; box-shadow: none;
    background: linear-gradient(to right, rgba(20, 26, 61, 0), rgba(20, 26, 61, .055) 25px, var(--wk-stroke) 25px,
      var(--wk-stroke) 26px, var(--ghp-ground) 26px);
  }
}
.ghp-top { display: flex; justify-content: flex-end; }
.ghp-pill {
  display: inline-flex; align-items: center; justify-content: center; height: 33px; box-sizing: border-box; padding: 0 12px;
  border: 1px solid var(--ghp-pill); border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit;
  font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.ghp-dots { width: 38px; padding: 0; letter-spacing: 1px; }
.ghp-head { padding-bottom: 20px; }
.ghp-title { margin: 20px 0 0; font-family: var(--wk-display); font-size: 34px; font-weight: 400; line-height: 41px; outline: none; overflow-wrap: anywhere; }
.ghp-sub { margin: 20px 0 0; font-size: 14px; line-height: 19px; color: var(--wk-muted); }
.ghp-actions { display: flex; align-items: center; gap: 8px; margin-top: 21px; }
.ghp-more { position: relative; }
.ghp-menu {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; width: 300px; margin: 0; padding: 8px 0; list-style: none;
  border: 1px solid var(--wk-hair); border-radius: 14px; background: var(--wk-card); box-shadow: 0 8px 24px rgba(20, 26, 61, .14);
}
.ghp-menu-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 16px; border: 0; background: none; color: var(--wk-ink);
  font: inherit; text-align: left; cursor: pointer;
}
.ghp-menu-title { font-size: 14px; font-weight: 600; line-height: 19px; }
.ghp-menu-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.ghp-menu-item.plum .ghp-menu-title { color: var(--wk-plum); }
@media (hover: hover) and (pointer: fine) { .ghp-menu-item:hover { background: var(--wk-track); } }

.ghp-section { display: flex; flex-direction: column; align-items: stretch; padding: 22px 0 24px; border-top: 1px solid var(--wk-line); }
.ghp-heading { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; }
.ghp-label { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.ghp-value { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }
.ghp-value.empty { color: var(--wk-muted); }
.ghp-ask { color: var(--wk-plum); }
:is(button.ghp-value, .ghp-pick .lm-btn) {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 0; border: 0; background: none; font: inherit;
  font-size: 14px; font-weight: 500; line-height: 20px; color: var(--wk-ink); text-align: left; cursor: pointer;
}
button.ghp-value.empty { color: var(--wk-muted); }
:is(.ghp-value, .ghp-pick .lm-btn, .ghp-link) i { flex: none; font-size: 10px; color: var(--wk-edge); }
.ghp-pick { display: inline-block; max-width: 100%; }
.ghp-pick .lm-menu { min-width: 200px; }

/* People: a row per person, the one opened on a lime card with their values two to a row. */
.ghp-people { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.ghp-person { border-radius: 12px; }
.ghp-person.open { background: var(--ghp-wash); }
.ghp-person-head { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 15px 9px 14px; }
.ghp-toggle {
  display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.ghp-toggle::after { content: ''; position: absolute; inset: 0; border-radius: 12px; }
.ghp-toggle > i { flex: none; width: 20px; font-size: 12px; color: var(--wk-muted); text-align: center; }
.ghp-person-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ghp-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); }
.ghp-line { font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.ghp-move {
  position: relative; z-index: 1; flex: none; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; font-size: 14px;
  font-weight: 500; line-height: 19px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.ghp-move::after { content: ''; position: absolute; inset: -12px -8px; }
.ghp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 0; margin: 0; padding: 1px 38px 12px 14px; }
.ghp-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ghp-cell dd { margin: 0; min-width: 0; }
.ghp-cell.wide { grid-column: 1 / -1; }

.ghp-fields { display: flex; flex-direction: column; gap: 9px; margin: 7px 0 0; }
.ghp-link + .ghp-fields { margin-top: 8px; }
.ghp-field { display: flex; flex-direction: column; gap: 7px; }
.ghp-field dd { margin: 0; }
.ghp-section > .gd-inline { margin-top: 10px; }
.ghp-section > .ghp-fields + .ghp-link, .ghp-section > .gd-inline + .ghp-link { margin-top: 10px; }
.ghp-link {
  position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; padding: 0; border: 0;
  background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; cursor: pointer;
}
.ghp-link::after { content: ''; position: absolute; inset: -12px -4px; }
.ghp-link.plum { color: var(--wk-plum); }
.ghp-link.plum i { color: var(--wk-plum); }
.ghp-link i { color: inherit; }
.ghp-help { margin: 9px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.ghp-notes {
  display: block; width: 100%; min-height: 80px; box-sizing: border-box; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--wk-edge);
  border-radius: 8px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; resize: none;
}
.ghp-notes:focus { outline: none; border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.ghp-change { display: flex; gap: 20px; margin: 8px 0 0; font-size: 14px; line-height: 20px; }
.ghp-change time { flex: none; width: 40px; font-size: 13px; color: var(--wk-muted); }
.ghp-section .ghp-change + .ghp-link { margin-top: 8px; }
:is(.ghp-pill, .ghp-menu-item, .ghp-toggle, .ghp-move, button.ghp-value, .ghp-pick .lm-btn, .ghp-link):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}
.ghp-menu-item:focus-visible { outline-offset: -3px; }
.ghp-toggle:focus-visible { outline: none; }
.ghp-toggle:focus-visible::after { outline: 3px solid var(--wk-ink); outline-offset: 0; }

/* ── The household sheets (GU-46, GU-47, GU-20c, GU-20d): 600px dialogs on desktop, and their pieces at both widths.
   `.p-sheet.lite[id^='ghx-']` outranks budget.css's lite sheets, which every lite sheet would otherwise take. ── */
.p-sheet.lite[id^='ghx-'] .p-sheet-top { margin-bottom: 14px; }
.p-sheet.lite[id^='ghx-'] .p-sheet-title { font-size: 30px; line-height: 41px; letter-spacing: 0; }
.p-sheet.lite#ghx-move .p-sheet-title { font-size: 34px; }
.p-sheet.lite:is([id^='ghx-'], #gh-move, #gh-add) .p-sheet-lead { margin-top: 13px; font-size: 13px; line-height: 19px; color: var(--wk-body); }
.p-sheet.lite[id^='ghx-'] .p-sheet-body { gap: 12px; margin-top: 12px; }
.p-sheet.lite[id^='ghx-'] .gd-form { gap: 12px; }
@media (min-width: 860px) {
  .p-sheet.lite[id^='ghx-'] { max-width: 600px; padding: 12px 20px 30px; border-radius: 20px; }
  .p-sheet.lite[id^='ghx-'] .p-sheet-top { display: none; }
  .p-sheet.lite#ghx-move { padding-top: 4px; }
}
.p-sheet.lite[id^='ghx-'] .gh-search { min-height: 45px; border-radius: 20px; background: var(--wk-card); font-size: 14px; line-height: 19px; }
.p-sheet.lite#ghx-add .gh-search { min-height: 41px; padding: 10px 14px; border-color: transparent; border-radius: 12px; background: var(--wk-track); }
.p-sheet.lite#ghx-add .gh-search:focus { border-color: var(--wk-ink); }
.p-sheet.lite[id^='ghx-'] .gd-card { border-color: var(--wk-hair); border-radius: 18px; }
.p-sheet.lite[id^='ghx-'] .gd-list { padding: 0 16px; }
.p-sheet.lite[id^='ghx-'] .gd-radio { gap: 14px; min-height: 60px; padding: 11px 0; }
.p-sheet.lite[id^='ghx-'] .gd-radio-label { font-size: 15px; font-weight: 500; line-height: 20px; }
.p-sheet.lite[id^='ghx-'] .gd-row-sub { font-size: 12px; line-height: 16px; }
.ghx-people > li + li { border-top-color: var(--wk-off); }
.ghx-people .gh-pick { min-height: 58px; padding: 9px 0; }
.ghx-people .gh-box { width: 22px; height: 22px; border-radius: 6px; }
.ghx-people .gh-box i { font-size: 14px; }
.ghx-hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.gh-new-chev { flex: none; font-size: 14px; color: var(--wk-muted); }
.p-sheet.lite[id^='ghx-'] .gh-new { padding: 12px 16px; border-radius: 14px; }

/* What changes: the box on Move, Add to a household and Split up. */
.ghx-changes { padding: 14px 16px 15px; border: 1px solid var(--wk-stroke); border-radius: 12px; background: color-mix(in srgb, var(--wk-wash) 50%, var(--wk-paper)); }
.ghx-changes-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); }
.ghx-rows { display: flex; flex-direction: column; gap: 10px; margin: 9px 0 0; }
.ghx-row { display: grid; grid-template-columns: 122px 1fr; align-items: baseline; }
.ghx-row dt { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.ghx-row dd { margin: 0; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink); }
.ghx-was { font-weight: 400; color: var(--wk-muted); }
.ghx-arrow { margin: 0 8px; font-weight: 400; color: var(--wk-plum); }
.ghx-changes:has(.ghx-note) { padding-bottom: 11px; }
.ghx-note { margin: 13px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }

/* Split up and Remove: who it's about, a row each, the name left and a short line right. */
.ghx-names { padding: 0 14px; }
.ghx-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 37px; box-sizing: border-box; padding: 9px 0; }
.ghx-name > span:first-child { font-size: 14px; font-weight: 400; line-height: 19px; color: var(--wk-ink); }
.ghx-name-line { font-size: 12px; line-height: 16px; color: var(--wk-muted); text-align: right; }
.ghx-names > li + li { border-top: 1px solid var(--wk-off); }

/* The buttons: Cancel outlined, the main one lime (Remove plum), full width but on Move. Figma draws Cancel's stroke
   outside its 44px, so its border sits outside the height. */
.p-sheet.lite[id^='ghx-'] .gd-actions { gap: 12px; }
.p-sheet.lite[id^='ghx-'] .gd-actions .p-btn { min-width: 0; min-height: 0; height: 44px; padding: 0 20px; font-size: 15px; font-weight: 500; }
.p-sheet.lite[id^='ghx-'] .gd-actions .p-btn.line { box-sizing: content-box; font-size: 14px; }
.p-sheet.lite[id^='ghx-'] .gd-actions .p-btn:not(.line) { box-sizing: border-box; border: 0; background: var(--wk-lime); color: var(--wk-on-lime); }
.p-sheet.lite#ghx-remove .gd-actions .p-btn:not(.line) { background: var(--wk-plum); color: var(--wk-on-navy); }
.p-sheet.lite#ghx-move .gd-actions .p-btn { height: 39px; padding: 0 10px; }
.p-sheet.lite#ghx-move .gd-actions .p-btn.line { padding: 0 16px; }

/* Four households or people show at a time (GU-46, GU-47); the rest scroll inside the card. */
.p-sheet.lite[id^='ghx-'] .gd-card:has(> .gd-radios) { max-height: 244px; overflow-y: auto; }
.p-sheet.lite[id^='ghx-'] .ghx-people { max-height: 236px; overflow-y: auto; }
/* 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); }

/* ── Desktop: adding in the guest table (GU-29, GU-30, GU-30a), pasted "New" rows and their banner (GU-34), Paste a
   list as a page (GU-33, GU-33a). The rows sit in table/GuestTable's `top` slot and take its cells' look. ── */
.gt-table { --ga-row: color-mix(in srgb, var(--wk-wash) 50%, var(--wk-card)); --ga-person: color-mix(in srgb, var(--wk-wash) 22%, var(--wk-card)); }
.gt-table .ga-nr-home > :is(th, td), .gt-table .ga-pr > :is(th, td) { background: var(--ga-row); }
.gt-table .ga-nr-person > :is(th, td) { background: var(--ga-person); }
.ga-nr-person > td, .ga-pr-person > td { font-size: 13px; line-height: 18px; }
.gt-table .ga-nr-person > .gt-frozen, .gt-table .ga-pr-person > .gt-frozen { padding-left: 44px; }
.gt-cell-in.ga-nr-in { gap: 7px; }
.ga-nr .gt-field { height: 32px; padding: 6px 10px; }
/* The frames draw the focused field's stroke inside its box. */
.ga-nr .gt-field:focus { box-shadow: inset 0 0 0 1px var(--wk-ink); }
.ga-nr-chev {
  position: relative; display: grid; flex: none; place-items: center; width: 9px; height: 19px; padding: 0; border: 0;
  background: none; color: var(--wk-muted); font: inherit; font-size: 14px; font-weight: 600; line-height: 19px; cursor: pointer;
}
.ga-nr-chev::after { content: ''; position: absolute; inset: -12px -8px; }
/* GU-30 draws this row's open arrow lower than the table's own. */
.ga-nr-chev.open > span { transform: translateY(4px) rotate(90deg); }
.ga-nr-chev + .ga-nr-home-name { margin-right: 4px; }
.ga-new-badge {
  flex: none; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--wk-lime) 50%, var(--wk-hair));
  color: var(--wk-ink); font-size: 11px; font-weight: 600; line-height: 15px;
}
/* Dark mode: lime with navy words, as the light mix with light words would fall under 4.5:1. */
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ga-new-badge { background: var(--wk-lime); color: var(--wk-on-lime); } }
:root[data-theme='dark'] .ga-new-badge { background: var(--wk-lime); color: var(--wk-on-lime); }
.ga-pr-home .gt-name { cursor: default; }

/* "+ Add guest" under the last household, on the card, with no tint on hover. */
.gt-table .ga-foot-row > :is(th, td) { background: var(--wk-card); }
.ga-foot-add {
  white-space: nowrap; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500;
  line-height: 19px; cursor: pointer;
}

/* The line under the table while a household is typed. */
.ga-hint { display: flex; align-items: center; gap: 11px; }
.ga-hint p { margin: 0; }
.ga-hint-chip {
  flex: 0 1 auto; min-width: 0; padding: 4px 12px; border-radius: 12px; background: var(--wk-plum-wash); color: var(--wk-plum); font-size: 12px;
  font-weight: 500; line-height: 16px;
}
.ga-hint-text { font-size: 13px; font-weight: 400; line-height: 18px; color: var(--wk-ink); }
.ga-hint-error { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-plum); }
.ga-hint-link {
  flex: none; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600;
  line-height: 18px; cursor: pointer;
}

/* GU-34's banner over the "New" rows. */
.ga-banner {
  display: flex; align-items: center; gap: 24px; padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--wk-lime) 50%, var(--wk-hair));
  border-radius: 16px; background: color-mix(in srgb, var(--wk-wash) 50%, var(--wk-card));
}
.ga-banner-main { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.ga-banner p, .ga-banner h2 { margin: 0; }
.ga-banner h2 { font-size: 16px; font-weight: 600; line-height: 22px; color: var(--wk-ink); outline: none; }
.ga-banner-main > p { font-size: 13px; font-weight: 400; line-height: 18px; color: var(--wk-muted); }
.ga-banner-main > p.ga-banner-ink { margin-top: 2px; color: var(--wk-ink); }
.ga-banner-link {
  margin-left: 4px; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; font-weight: 500; cursor: pointer;
}
.ga-banner-error { color: var(--wk-plum) !important; font-weight: 500 !important; }
.ga-banner-acts { display: flex; flex: none; align-items: center; gap: 16px; }
.ga-banner-back {
  padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer;
}
.ga-banner .ga-banner-add { border-radius: 23px; }
.ga-banner .ga-banner-add:disabled { opacity: .6; cursor: default; }

:is(.ga-nr, .ga-pr, .ga-foot-row, .ga-hint, .ga-banner) :is(button, input):focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; }
.ga-nr .gt-field:focus-visible { outline: none; }

/* Paste a list as a desktop page (GU-33, GU-33a): the field the content's full width, Back then Read my list. */
@media (min-width: 860px) {
  .ga-page.ga-paste-desk { gap: 0; padding-top: 40px; }
  .ga-paste-desk .ga-title { font-size: 40px; line-height: 44px; }
  .ga-paste-desk .ga-lead-lg { margin-top: 8px; color: var(--wk-body); }
  .ga-paste-desk .ga-paste-field { gap: 0; margin-top: 22px; }
  .ga-paste-desk .ga-paste-field p:not(.p-error) { margin-top: 16px !important; }
  /* The field fits what's in it, placeholder included (GU-33's five lines, GU-33a's two). */
  .ga-paste-desk .ga-paste-field textarea {
    box-sizing: border-box; field-sizing: content; min-height: 94px; max-height: 60vh; margin-top: 17px; padding: 12px 14px;
    border-radius: 16px; font-size: 14px; line-height: 22px;
  }
  .ga-paste-desk .ga-paste-field textarea[aria-invalid] { border: 2px solid var(--wk-plum); box-shadow: none; }
  .ga-paste-desk .p-error { margin: 18px 0 0; color: var(--wk-plum); font-size: 13px; font-weight: 500; line-height: 18px; }
  .ga-paste-desk .ga-paste-btns { flex-direction: row; align-items: center; gap: 25px; margin-top: 72px; }
  .ga-paste-desk .ga-plain { align-self: auto; min-height: 0; padding: 0; font-size: 15px; line-height: 20px; color: var(--wk-body); }
  .ga-paste-desk .ga-done { width: auto; min-height: 50px; padding: 15px 36px; font-size: 15px; font-weight: 600; }
}
/* 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; }
/* A value never ends in an ellipsis: a long one wraps under itself, right-aligned. */
.gs-row-value { min-width: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); text-align: right; overflow-wrap: anywhere; }
.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; }

/* Invite status's value: the frames draw "Save the date + invite…" cut in a narrow slot. It keeps every word instead,
   on two lines: "Save the date + invite," then the other statuses. */
.gs-row-value.gs-slot { flex: 0 1 210px; }

/* 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); }

/* ── The Guest settings page at desktop width (GU-7 2529:45823, GU-7a 2985:47132, GU-7b 2985:47444). Line heights are
   pinned in px; the frames' tints are mixed from palette tokens so dark mode follows. */
.gs-page {
  --gs-tint: color-mix(in srgb, var(--wk-wash) 50%, var(--wk-card));
  --gs-tint-edge: color-mix(in srgb, var(--wk-lime) 45%, var(--wk-card));
  --gs-shelf: color-mix(in srgb, var(--wk-wash) 22%, var(--wk-card));
  --gs-rule: color-mix(in srgb, var(--wk-line) 65%, var(--wk-card));
  color: var(--wk-ink);
}
@media (min-width: 860px) {
  .p-page.gs-page { max-width: 1200px; box-sizing: border-box; padding: 40px 40px 80px; }
}
.gs-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.gs-back {
  position: relative; display: flex; align-items: center; gap: 4px; width: fit-content; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.gs-back i { margin-left: -2px; font-size: 12px; }
.gs-back::after { content: ''; position: absolute; inset: -12px -8px; }
.gs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 24px; }
.gs-head-text { max-width: 720px; }
.gs-title { margin: 0; font-family: var(--wk-display); font-size: 34px; line-height: 41px; font-weight: 400; color: var(--wk-ink); outline: none; }
.gs-lead { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }
.gs-done-page {
  flex: none; margin-top: 4px; padding: 10px 16px; border: 0; 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;
}

.gs-sec { margin-top: 24px; }
.gs-h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 23px; color: var(--wk-ink); outline: none; scroll-margin-top: 24px; }
.gs-h2-sub { margin: 4px 0 0; font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-muted); }
.gs-h2-sub strong { font-weight: 700; color: var(--wk-ink); }

/* Your wedding: five cards in a row; the one being edited grows to hold its field (GU-7b). */
/* Five across from 940px of content; fewer, wrapping, when the window is narrower. */
.gs-wcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); align-items: start; gap: 12px; margin-top: 12px; }
.gs-wcard {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; box-sizing: border-box; min-height: 83px; margin: 0;
  padding: 16px 18px; border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-card); color: var(--wk-ink);
  font: inherit; text-align: left;
}
button.gs-wcard { cursor: pointer; }
.gs-wcard-label { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.gs-wcard-value { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; font-weight: 600; line-height: 22px; }
.gs-wcard-value .gs-chev { line-height: 25px; }
.gs-wcard.editing { border-color: var(--gs-tint); background: var(--gs-tint); }
.gs-venue-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 14px; line-height: 19px; color: var(--wk-body); }
.gs-venue-input {
  width: 80px; box-sizing: border-box; height: 34px; padding: 0 10px; border: 1px solid var(--wk-edge); border-radius: 8px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 19px;
}
.gs-venue-btns { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; white-space: nowrap; }
.gs-venue-btns button { position: relative; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; line-height: 18px; cursor: pointer; }
.gs-venue-btns button::after { content: ''; position: absolute; inset: -8px -6px; }
.gs-venue-btns .gs-venue-save { font-weight: 600; color: var(--wk-ink); }
.gs-venue-btns .gs-venue-none { font-weight: 500; color: var(--wk-muted); }
.gs-venue-error { margin: 0; font-size: 12px; line-height: 16px; }

.gs-explain {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin: 24px 0 0; padding: 14px 18px;
  border: 1px solid var(--gs-tint-edge); border-radius: 16px; background: var(--gs-tint); font-size: 14px; font-weight: 500; line-height: 19px;
}
.gs-explain strong { font-size: 15px; font-weight: 600; line-height: 20px; }

.gs-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 24px; }
.gs-h2-row { display: flex; align-items: center; gap: 10px; }
.gs-col-head .gs-h2-sub { margin-top: 6px; }
.gs-badge {
  display: inline-flex; padding: 3px 10px; border: 0; border-radius: 999px; background: var(--wk-btn); color: var(--wk-on-navy);
  font-size: 12px; font-weight: 600; line-height: 16px;
}
.gs-badge.line { border: 1px solid var(--wk-ink); background: none; color: var(--wk-ink); }
.gs-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.gs-example { padding: 4px 10px; border-radius: 999px; background: var(--wk-track); color: var(--wk-ink); font-size: 12px; font-weight: 600; line-height: 16px; }
.gs-pcard { margin-top: 12px; padding: 4px 16px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }

/* Tags: a row each; the one open (GU-7a) turns lime and shows its options under it. */
.gs-tag + .gs-tag { border-top: 1px solid var(--gs-rule); }
.gs-tag.open { background: var(--gs-tint); }
.gs-tag-head {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 65px; padding: 13px 0; border: 0;
  background: none; color: var(--wk-ink); font: inherit; text-align: left;
}
button.gs-tag-head { cursor: pointer; }
.gs-tag-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.gs-tag-name { font-size: 14px; line-height: 19px; }
.gs-tag-line { font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.gs-tag-value {
  flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); text-align: right;
  overflow-wrap: anywhere;
}
.gs-tag-value.gs-slot { flex: 0 0 auto; width: min(210px, 50%); }
.gs-tag-head .gs-chev { width: 12px; text-align: center; transition: transform .15s; }
.gs-tag.open .gs-chev { width: 25px; transform: rotate(90deg); }
.gs-tag-editor { padding: 4px 16px 16px; }
.gs-te-hint, .gs-te-note, .gs-te-none { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gs-te-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.gs-te-option { display: flex; align-items: center; gap: 10px; }
.gs-te-option.held { opacity: .7; }
.gs-te-grip {
  position: relative; display: grid; place-items: center; flex: none; width: 6px; height: 34px; padding: 0; border: 0; background: none;
  color: var(--wk-muted); cursor: grab; touch-action: none;
}
.gs-te-grip i { font-size: 12px; }
.gs-te-grip::after { content: ''; position: absolute; inset: 0 -9px; }
.gs-te-option.held .gs-te-grip { cursor: grabbing; }
.gs-te-input {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 34px; padding: 0 10px; border: 1px solid var(--wk-edge); border-radius: 8px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px;
}
.gs-te-input::placeholder { color: var(--wk-muted); opacity: 1; }
.gs-te-fixed { display: flex; align-items: center; border-color: var(--wk-hair); }
.gs-te-add { display: block; width: 100%; margin-top: 8px; }
.gs-te-count { flex: none; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.gs-te-remove {
  position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; font-size: 12px;
  font-weight: 500; line-height: 16px; cursor: pointer;
}
.gs-te-remove::after { content: ''; position: absolute; inset: -9px -5px; }
.gs-te-note, .gs-te-none { margin-top: 8px; }
.gs-te-error { margin-top: 8px; }
.gs-te-btns { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.gs-te-cancel {
  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;
}
.gs-te-save {
  padding: 13px 13px 13px 14px; border: 0; border-radius: 16px; background: var(--wk-btn); color: var(--wk-on-navy);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.gs-te-save:disabled { opacity: .6; cursor: wait; }

/* Add-ons: Other events on plum, About your guests on lime, a hairline between rows. */
.gs-addons-card { padding: 4px 16px; }
.gs-group { padding: 16px 16px 8px; border-radius: 16px; }
.gs-group + .gs-group { margin-top: 16px; }
.gs-group.events { background: var(--wk-plum-wash); }
.gs-group.guests { background: var(--gs-tint); }
.gs-group-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 20px; color: var(--wk-ink); }
.gs-group-sub { margin: 3px 0 8px; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gs-paddon { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.gs-paddon + .gs-paddon, .gs-places + .gs-paddon { border-top: 1px solid var(--gs-rule); }
.gs-paddon-text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.gs-paddon-name { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--wk-ink); }
.gs-paddon-line { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gs-pask {
  position: relative; display: flex; align-items: center; gap: 8px; 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-pask::after { content: ''; position: absolute; inset: -6px -4px -10px -12px; }
.gs-pask:disabled { cursor: default; opacity: .25; }
.gs-pask[aria-checked='true'] .gs-box { border: 0; background: var(--wk-btn); color: var(--wk-on-navy); }
span.gs-pask { cursor: default; }
.gs-places { margin: 0 0 0; padding: 6px 16px; border-radius: 12px; background: var(--gs-shelf); }
.gs-place-list { margin: 0; padding: 0; list-style: none; }
.gs-place { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--wk-hair); }
.gs-place-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.gs-place-name { font-size: 14px; font-weight: 600; line-height: 19px; }
.gs-place-line, .gs-place-help { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gs-place-edit {
  position: relative; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500;
  line-height: 18px; cursor: pointer;
}
.gs-place-edit::after { content: ''; position: absolute; inset: -13px -8px; }
.gs-place-add { padding: 10px 0 8px; }
.gs-place-add-btn {
  position: relative; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; font-size: 14px; font-weight: 600;
  line-height: 19px; cursor: pointer;
}
.gs-place-add-btn::after { content: ''; position: absolute; inset: -12px -6px; }
.gs-place-help { margin: 2px 0 0; }

:is(.gs-back, .gs-done-page, .gs-wcard, .gs-venue-btns button, .gs-tag-head, .gs-te-grip, .gs-te-remove, .gs-te-cancel, .gs-te-save,
    .gs-pask, .gs-place-edit, .gs-place-add-btn):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 6px; }
:is(.gs-wcard, .gs-te-cancel, .gs-done-page):focus-visible { border-radius: 16px; }
:is(.gs-te-input, .gs-venue-input):focus { outline: none; border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
@media (prefers-reduced-motion: reduce) { .gs-tag-head .gs-chev { transition: none; } }
/* Guests setup (Figma T1·1–T1·5, T2·1–T2·9; desktop GU-1 to GU-18): the step frame shared by both tracks. Steps
   add their own rules below their section comments; each section's desktop rules are in the block at the end.
   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: -12.5px 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-display); font-size: 38px; line-height: 44px; font-weight: 400; color: var(--wk-ink);
  font-variant-numeric: lining-nums; }
.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-actions { display: flex; flex-direction: column; gap: 24px; }
.gsu-primary { min-height: 50px; font-size: 15px; line-height: 20px; }
.gsu-secondary.p-btn.line { min-height: 50px; font-size: 15px; line-height: 20px; border-color: var(--wk-ink); }
.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-step-back { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; line-height: 20px; font-weight: 600;
  color: var(--wk-ink); 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-step-back, .gsu-chip, .gsu-link, .gsu-stage-go):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); }

/* Desktop's named stepper (GU-3 to GU-17): done stages lime with a check, the current one navy, later ones grey.
   Each stage after the first carries the connector before it; they share the room left, so connectors match. */
.gsu-stepper { display: flex; flex-direction: column; gap: 14px; container-type: inline-size; }
.gsu-stepper-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.gsu-stepper-name { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--wk-ink); }
.gsu-stepper-note { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--wk-muted); text-align: right; }
.gsu-stages { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.gsu-stage { flex: 1 0 auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.gsu-stage:first-child { flex: none; }
.gsu-stage-line { flex: 1 1 0; min-width: 8px; height: 2px; background: var(--wk-stroke); }
.gsu-stage:is(.done, .now) .gsu-stage-line { background: var(--wk-ink); }
.gsu-stage-go { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 14px; line-height: 19px; font-weight: 500; color: var(--wk-muted); white-space: nowrap; }
button.gsu-stage-go { cursor: pointer; }
button.gsu-stage-go::after { content: ''; position: absolute; inset: -9px -4px; }
.gsu-stage:is(.done, .now) .gsu-stage-go { color: var(--wk-ink); }
.gsu-stage.now .gsu-stage-go { font-weight: 600; }
.gsu-stage-mark { display: grid; place-items: center; width: 26px; height: 26px; box-sizing: border-box; border: 1.5px solid var(--wk-stroke);
  border-radius: 50%; background: var(--wk-card); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--wk-muted); }
.gsu-stage.done .gsu-stage-mark { border-color: var(--wk-lime); background: var(--wk-lime); color: var(--wk-on-lime); }
.gsu-stage.now .gsu-stage-mark { border-color: var(--wk-ink); background: var(--wk-ink); color: var(--wk-card); }
/* Narrower than the frames' 1120 (a 1024 window beside the sidebar), every name doesn't fit on one line: the other
   stages keep their mark and say their name to screen readers only. */
@container (max-width: 820px) {
  .gsu-stage:not(.now) .gsu-stage-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* T1·2 / T2·2 relationships: a plain field per name, or on Track 2 the side it stands for above it. A side still on
   its default name shows it as grey placeholder text (GU-3). */
.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::placeholder { color: var(--wk-muted); opacity: 1; }
.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); }
/* T2·2's groups from the list, each with the relationship it joins; several can join one. */
.gsu-joins { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; padding: 0; border: 0; }
.gsu-joins-title { margin: 0 0 4px; padding: 0; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-body); }
.gsu-join {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px; border: 1px solid var(--wk-edge);
  border-radius: 14px; background: var(--wk-card);
}
.gsu-join-name { flex: 1 1 160px; min-width: 0; font-size: 15px; font-weight: 500; color: var(--wk-ink); overflow-wrap: anywhere; }
.gsu-join-pick {
  flex: 1 1 180px; min-height: 44px; max-width: 100%; padding: 0 12px; border: 1px solid var(--wk-edge); border-radius: 12px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 14px;
}
.gsu-join-pick:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
@supports (-webkit-touch-callout: none) { .gsu-join-pick { font-size: 16px; } }
.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-groups { display: flex; flex-direction: column; gap: 16px; }
.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); }

/* All set (T1·5, T2·9; GU-6, GU-17): three numbered first steps, titles only. */
.gsu-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.gsu-step { display: flex; gap: 14px; align-items: center; }
.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-title { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--wk-ink); }

/* Check: Check a few matches, Check your list (T2·7, T2·8). 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); }
@media (forced-colors: active) { .p-chip.gsc-chip { border: 1px solid; } }

/* Upload (T2·1, GU-8): the two ways in with the lists under each, then the paste box; GU-8a's banner for a file
   that couldn't be read sits under the buttons. */
.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-rows) { padding-bottom: 4px; }
.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; list-style: none; }
.gsu-up-row { display: flex; align-items: center; gap: 12px; min-height: 53px; box-sizing: border-box; padding: 8px 0 8px 54px; }
.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-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-remove { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -12px -8px 0; padding: 0; border: 0;
  background: none; color: var(--wk-muted); cursor: pointer; }
.gsu-up-remove span { font-size: 13px; line-height: 18px; }
.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; 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); }
.gsu-up-errors { display: flex; flex-direction: column; gap: 12px; }
.gsu-up-error { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 12px; padding: 14px 16px; border-radius: 12px; background: var(--wk-plum-wash); }
.gsu-up-error-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gsu-page .gsu-up-error p { font-size: 13px; line-height: 18px; color: var(--wk-ink); }
.gsu-page .gsu-up-error .gsu-up-error-title { font-size: 14px; line-height: 19px; font-weight: 600; color: var(--wk-plum); overflow-wrap: anywhere; }
.gsu-up-error-link { order: 2; flex-basis: 100%; min-height: 44px; margin: -8px 0 -14px; padding: 0; border: 0; background: none; font: inherit;
  font-size: 13px; line-height: 18px; font-weight: 500; color: var(--wk-plum); text-align: left; cursor: pointer; }
.gsu-up-error-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -13px -14px -13px 0; padding: 0; border: 0;
  background: none; color: var(--wk-plum); font-size: 13px; line-height: 18px; cursor: pointer; }
:is(.gsu-up-remove, .gsu-up-error-link, .gsu-up-error-x):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: -3px; border-radius: 10px; }

/* GU-1: no guests yet, before setup (desktop): two ways to start as cards side by side. The start card is the
   lime-tinted one (#f6fae3 with #dfeaa6, mixed from tokens) and Start covers it; the upload card is a drop zone. */
.gsu-begin { display: flex; flex-direction: column; gap: 12px; font-family: var(--wk-sans); }
.gsu-begin-title { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--wk-ink); }
.gsu-begin-cards { display: flex; gap: 16px; }
.gsu-begin-card { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  min-height: 260px; box-sizing: border-box; padding: 24px; border-radius: 24px; }
.gsu-begin-card.start { border: 1px solid color-mix(in srgb, var(--wk-olive) 20%, var(--wk-wash));
  background: color-mix(in srgb, var(--wk-wash) 52%, var(--wk-card)); }
.gsu-begin-card.drop { border: 1.5px dashed color-mix(in srgb, var(--wk-ink) 35%, transparent); background: var(--wk-card); }
.gsu-begin-card.drop.drop-over { border-color: var(--wk-ink); background: var(--wk-track); }
.gsu-begin-tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--wk-track); color: var(--wk-ink); }
.gsu-begin-card.start .gsu-begin-tile { background: var(--wk-card); }
.gsu-begin-tile i { font-size: 22px; }
.gsu-begin-text { display: flex; flex-direction: column; gap: 6px; }
.gsu-begin-text h3 { margin: 0; font-size: 18px; line-height: 25px; font-weight: 600; color: var(--wk-ink); }
.gsu-begin-text p { margin: 0; font-size: 14px; line-height: 19px; font-weight: 500; color: var(--wk-muted); }
.gsu-begin-card .p-btn { margin-top: auto; min-height: 39px; padding: 0 18px; font-size: 14px; line-height: 19px; }
.gsu-begin-go::after { content: ''; position: absolute; inset: 0; border-radius: 24px; }
.gsu-begin-actions { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.gsu-begin-actions .p-btn { margin-top: 0; }
.gsu-begin-choose.p-btn.line { border-color: var(--wk-ink); }
.gsu-begin-paste { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 19px; font-weight: 500;
  color: var(--wk-muted); text-decoration: underline; text-underline-position: from-font; cursor: pointer; }
.gsu-begin-paste:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 6px; }

/* Match your columns (T2·5, T2·6; GU-12, GU-14, GU-18) */
.gsu-mt-body { display: flex; flex-direction: column; gap: 16px; }
.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-cols { display: flex; align-items: flex-start; gap: 10px; padding: 0 17px; }
.gsu-mt-col { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.gsu-mt-col.us { flex: none; width: calc(var(--gsu-mt-field) + 25px); }
.gsu-mt-col.file { flex: 1; padding-left: 12px; }
.gsu-mt-col-icon { flex: none; display: flex; align-items: center; height: 20px; color: var(--wk-muted); }
.gsu-mt-col-icon i { font-size: 16px; }
.gsu-mt-col-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gsu-mt-col-title { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--wk-ink); overflow-wrap: anywhere; }
.gsu-mt-col-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.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-arrow { flex: none; width: 15px; font-size: 14px; line-height: 19px; font-weight: 500; color: var(--wk-dot); }
.gsu-mt-need { margin-top: -4px; padding: 0 0 12px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--wk-plum); }
.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, .gsu-vp-chev { 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; }
/* The phone frames draw these boxes 40px tall: the select keeps a 44px target, its outer 2px a clear band. */
@media (max-width: 859px) {
  .gsu-select select { margin: -2px 0; border: 2px solid transparent; border-radius: 14px; background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--wk-line); }
  .gsu-select.empty select, .gsu-select select.empty { border-style: solid; box-shadow: none; outline: 1px dashed var(--wk-line); outline-offset: -3px; }
  .gsu-select select:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: -1px; }
}

/* Under a valued field: its answers ("Wickette input") on a lime rule, each with the file's values sorted into it. */
.gsu-mt-values { padding: 0 0 14px; }
.gsu-mt-answers { display: flex; flex-direction: column; gap: 6px; padding-left: 12px; border-left: 3px solid var(--wk-lime); }
.gsu-page .gsu-mt-answers-head { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--wk-muted); }
.gsu-mt-answers-head > :first-child, .gsu-mt-answer-label { flex: none; width: 118px; }
.gsu-mt-answers-arrow { visibility: hidden; }
.gsu-mt-answers-arrow, .gsu-mt-answer-arrow { flex: none; width: 12px; font-size: 12px; line-height: 16px; }
.gsu-mt-answer { display: flex; align-items: center; gap: 10px; }
.gsu-mt-answer-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--wk-ink); overflow-wrap: anywhere; }
.gsu-mt-answer-arrow { color: var(--wk-muted); }
.gsu-page .gsu-mt-unsorted { padding-top: 2px; font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.gsu-vp { position: relative; flex: 1; min-width: 0; }
.gsu-vp-btn { position: relative; display: flex; align-items: center; width: 100%; min-height: 40px; box-sizing: border-box; margin: 0;
  padding: 8px 30px 8px 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-align: left; cursor: pointer; }
.gsu-vp-btn::after { content: ''; position: absolute; inset: -2px 0; }
.gsu-vp-btn.empty { color: var(--wk-muted); font-weight: 400; }
.gsu-vp-now { min-width: 0; overflow-wrap: anywhere; }
.gsu-vp-btn:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 1px; }
.gsu-vp-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow: auto; box-sizing: border-box;
  padding: 6px; border: 1px solid var(--wk-line); border-radius: 12px; background: var(--wk-card); box-shadow: var(--wk-shadow); }
.gsu-vp-opt { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px 8px; border-radius: 8px; cursor: pointer; }
.gsu-vp-opt:hover { background: var(--wk-track); }
.gsu-vp-opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--wk-ink); }
.gsu-vp-opt input:disabled + .gsu-vp-text { opacity: 1; }
.gsu-vp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gsu-vp-cell { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--wk-ink); overflow-wrap: anywhere; }
.gsu-vp-meta { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gsu-vp-meta:empty { display: none; }
.gsu-page .gsu-vp-note { padding: 6px 8px 4px; font-size: 12px; line-height: 16px; color: var(--wk-muted); }

/* Columns without a match: bring each one into notes or leave it out. */
.gsu-mt-free { padding: 4px 16px; }
.gsu-page .gsu-mt-free-intro { padding: 12px 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--wk-muted); }
.gsu-mt-free-rows { margin: 0; padding: 0; list-style: none; }
.gsu-mt-free-row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0; border-top: 1px solid var(--wk-hair); }
.gsu-mt-free-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gsu-mt-free-name { font-size: 14px; line-height: 19px; font-weight: 600; color: var(--wk-ink); overflow-wrap: anywhere; }
.gsu-mt-free-ex { font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.gsu-mt-free-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.gsu-mt-pill { position: relative; padding: 9px 16px; border: 1px solid var(--wk-ink); border-radius: 999px; background: var(--wk-card); color: var(--wk-ink);
  font: inherit; font-size: 13px; line-height: 18px; font-weight: 600; cursor: pointer; }
.gsu-mt-pill::after { content: ''; position: absolute; inset: -4px 0; }
.gsu-mt-pill[aria-pressed='true'] { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
.gsu-mt-pill:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.gsu-mt-free-preview { padding: 5px 10px; border-radius: 8px; background: var(--wk-track); font-size: 12px; line-height: 16px; font-weight: 500;
  color: var(--wk-ink); overflow-wrap: anywhere; }

.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-left.tab { gap: 2px; }
.gsu-mt-left.tab p { color: var(--wk-muted); }
.gsu-mt-remember { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }

/* ── Desktop (GU-1 to GU-18): the stepper, one full-width column, the buttons right under the answers. */
@media (min-width: 860px) {
  #s-guests-setup .gsu-page.p-page { padding-top: 40px; padding-bottom: 40px; }
  .gsu-back { gap: 5px; }
  .gsu-foot { margin-top: 0; padding-top: 0; }
  .gsu-actions { flex-direction: row; align-items: center; }
  .gsu-primary.p-btn.wide, .gsu-secondary.p-btn.wide { width: auto; padding: 0 36px; }
  .gsu-skip { align-self: auto; margin: 0; padding: 0; }
  .gsu-body > .gsu-tip { margin-top: 8px; }
  .gsu-chip[aria-pressed='true'] { color: var(--wk-on-navy); }
  .gsu-chips.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gsu-chips.grid .gsu-chip { min-height: 60px; }
  .gsu-groups { flex-direction: row; gap: 24px; }
  .gsu-groups > .gsu-group { flex: 1 1 0; min-width: 0; }
  .gsu-steps { flex-direction: row; gap: 16px; }
  .gsu-step { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 148px; box-sizing: border-box;
    padding: 20px; border: 1px solid var(--wk-hair); border-radius: 20px; background: var(--wk-card); }

  /* GU-15: every match at once, each its own card, three across. */
  .gsc-card { display: grid; grid-template-columns: repeat(3, minmax(0, 361px)); gap: 16px; padding: 0; border: 0; border-radius: 0; background: none; }
  /* Where three won't fit their choices on one line (a 1024 window beside the sidebar), two across. */
  .gsc-body.review { container-type: inline-size; }
  @container (max-width: 860px) { .gsc-card { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .gsc-match, .gsc-match:last-child { padding: 16px; border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-card); }
  .gsc-choice { align-items: flex-start; }
  .p-chip.gsc-chip { border: 1px solid var(--gsc-outline); box-shadow: none; }
  .p-chip.gsc-chip[aria-pressed='true'] { padding-block: 7px; border: 0; }

  .gsu-up-paste { font-size: 14px; line-height: 22px; }
  .gsu-up-error { flex-wrap: nowrap; align-items: center; }
  .gsu-up-error-link { order: 0; flex-basis: auto; margin: -13px 0; }
  /* GU-8a puts the bare ✕ at the banner's edge, 12 after the link: its 44px target hangs past the glyph both ways. */
  .gsu-up-error-x { margin: -13px -16px -13px -15px; }

  /* GU-12's rhythm: 8 between the pieces, 24 over each section title and the notes after the cards. */
  .gsu-mt-body { gap: 8px; }
  .gsu-mt-lists { margin-bottom: 16px; }
  .gsu-mt-group { gap: 8px; }
  .gsu-mt-title { padding-top: 24px; }
  .gsu-mt-group + :is(.gsu-mt-offer, .gsu-mt-done, .gsu-mt-left, .gsu-mt-remember) { margin-top: 24px; }
  :is(.gsu-mt-offer, .gsu-mt-done, .gsu-mt-left) + :is(.gsu-mt-offer, .gsu-mt-done, .gsu-mt-left) { margin-top: 8px; }
  :is(.gsu-mt-offer, .gsu-mt-done, .gsu-mt-left) + .gsu-mt-remember { margin-top: 16px; }
  /* The field column is GU-12's 340 at 1440 and shrinks with the card below that, so the answers keep their room. */
  .gsu-mt-body { --gsu-mt-field: min(340px, 31.3%); }
  .gsu-mt-field { width: var(--gsu-mt-field); }
  .gsu-select select { min-height: 40px; }
  .gsu-mt-values, .gsu-mt-need { padding-left: calc(var(--gsu-mt-field) + 35px); }
  .gsu-mt-answers-head > :first-child, .gsu-mt-answer-label { width: 180px; }
  .gsu-mt-answer-label { font-size: 13px; line-height: 18px; font-weight: 600; }
  .gsu-vp-btn { min-height: 34px; padding-block: 7px; }   /* a long pick wraps and the box grows */
  .gsu-vp-btn::after { display: none; }
  .gsu-mt-free-row { flex-direction: row; align-items: center; }
  .gsu-mt-free-col { flex: none; width: var(--gsu-mt-field); }
}
/* 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; }

/* ── Shared by the mailing page and its sheets: the frames' light tints, mixed from tokens so dark mode follows
   (#F6FAE3 lime, #FAFAFB header gray, #FCF7FA berry row, #CFCFD8 button outline), the square tick, hidden labels. */
:root {
  --gm-lime: color-mix(in srgb, var(--wk-wash) 47%, var(--wk-card));
  --gm-gray: color-mix(in srgb, var(--wk-track) 40%, var(--wk-card));
  --gm-berry: color-mix(in srgb, var(--wk-plum-wash) 35%, var(--wk-card));
  --gm-outline: color-mix(in srgb, var(--wk-edge) 40%, var(--wk-card));
}
.gm-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gm-box {
  flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--wk-edge);
  border-radius: 5px; background: var(--wk-card); appearance: none; cursor: pointer; vertical-align: middle;
}
.gm-box:checked { border-color: var(--wk-ink); background: var(--wk-ink); }
.gm-box:checked::after { content: '✓'; color: var(--wk-paper); font-size: 11px; font-weight: 700; line-height: 1; }
.gm-box:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
:is(.gm-opt, .gm-sent-opt) input[type='radio'] {
  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;
}
:is(.gm-opt, .gm-sent-opt) input[type='radio']:checked { border: 6px solid var(--wk-ink); }
:is(.gm-opt, .gm-sent-opt) input[type='radio']:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* The page's toasts (GU-55, GU-59): white regular words, a small ×, 45px tall, no shadow. */
.gx-toast.gm-toast {
  gap: 20px; padding: 14px 15px 13px 16px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 400; line-height: 18px; box-shadow: none;
}
.gm-toast .gx-toast-close { position: relative; display: grid; place-items: center; width: 18px; min-width: 0; height: 18px; padding: 0; font-size: 12px; }
.gm-toast .gx-toast-close::after { content: ''; position: absolute; inset: -13px; }

/* "See who's not getting a save the date ›" (both widths; on the page it's GU-50's 90px box). */
.gm-ng { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 12px 14px; border-radius: 16px; background: var(--gm-gray);
  font-size: 13px; font-weight: 500; line-height: 18px; }
.gm-ng-link { position: relative; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; text-align: left; cursor: pointer; }
.gm-ng.quiet .gm-ng-link { color: var(--wk-ink); }
.gm-ng-link::after { content: ''; position: absolute; inset: -12px -6px; }
.gm-ng-count { color: var(--wk-muted); }
.gm-ng-link:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 4px; }

/* ── The mailing page (GU-50 to GU-59a): inside #s-guests on desktop, between the 40px gutters guests.css sets. */
.p-page.gl-page.gm-page { display: flex; flex-direction: column; gap: 20px; padding-top: 40px; padding-bottom: 48px; }
.p-page.gl-page.gm-page.who { gap: 24px; padding-top: 36px; }
.gm-page-back {
  position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; font-size: 15px; font-weight: 500; line-height: 20px; cursor: pointer;
}
.gm-page-back::after { content: ''; position: absolute; inset: -12px -8px; }
.gm-steps { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.gm-st { flex: none; }
.gm-st-line { flex: 1 1 0; min-width: 1px; height: 2px; background: var(--wk-stroke); }
.gm-st-line.on { background: var(--wk-ink); }
.gm-st-go {
  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;
}
button.gm-st-go { cursor: pointer; }
.gm-st.current .gm-st-go { font-weight: 600; }
.gm-st.todo .gm-st-go { color: var(--wk-muted); }
.gm-st-mark {
  display: grid; place-items: center; box-sizing: border-box; width: 26px; height: 26px; border-radius: 13px; background: var(--wk-ink);
  color: var(--wk-paper); font-size: 12px; font-weight: 700; line-height: 16px;
}
.gm-st.done .gm-st-mark { background: var(--wk-lime); color: var(--wk-on-lime); }
.gm-st.todo .gm-st-mark { border: 1.5px solid var(--wk-stroke); background: var(--wk-card); color: var(--wk-muted); }
.gm-page-head { display: flex; flex-direction: column; gap: 20px; }
.gm-page.who .gm-page-head { gap: 6px; }
.gm-title { margin: 0; font-family: var(--wk-display); font-size: 34px; font-weight: 400; line-height: 41px; font-variant-numeric: lining-nums; color: var(--wk-ink); outline: none; }
.gm-lead { margin: 0; font-size: 14px; line-height: 19px; color: var(--wk-muted); }
.gm-page:is(.who, .dl) .gm-lead { font-size: 13px; line-height: 18px; color: var(--wk-body); }
.gm-tabs.p-seg { align-self: flex-start; }
.gm-tabs.p-seg > button { min-height: 0; padding: 9px 18px; line-height: 19px; }
.gm-page .gm-note { font-size: 14px; line-height: 19px; }

/* Buttons: outlined pills, the lime next step, plain berry links. */
.gm-pill {
  display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 10px 16px; border: 1px solid var(--gm-outline);
  border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 19px;
  white-space: nowrap; cursor: pointer;
}
.gm-pill.sm { padding: 6px 12px; font-size: 13px; line-height: 18px; }
.gm-pill.go { border: 0; background: var(--wk-lime); color: var(--wk-on-lime); }
.gm-pill:disabled { opacity: .5; cursor: default; }
.gm-link {
  position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; font-size: 13px;
  font-weight: 500; line-height: 18px; white-space: nowrap; cursor: pointer;
}
.gm-link::after { content: ''; position: absolute; inset: -13px -6px; }
.gm-page-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 10px; padding-top: 4px; }
.gm-page-foot.spread { align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 12px; padding-top: 0; }
.gm-page .gm-foot-note { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.gm-spacer { flex: 1; }
:is(.gm-page-back, .gm-st-go, .gm-pill, .gm-link, .gm-chip, .gm-add-addr, .gm-save, .gm-copy, .gm-mark-link):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}

/* Step 1 (GU-50, 50a, 51, 51a): the choices in a row, then the preview. */
.gm-who-body { display: flex; flex-direction: column; gap: 16px; }
.gm-opts { display: flex; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.gm-opt {
  display: flex; flex: 1 1 0; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--wk-line);
  border-radius: 14px; background: var(--wk-card); cursor: pointer;
}
.gm-opt.on { padding: 15.5px; border: 1.5px solid var(--wk-ink); background: var(--gm-lime); }
.gm-opt-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.gm-opt-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); }
.gm-opt-line { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gm-opt-cat { display: flex; margin: 4px 0 2px; }
.gm-preview { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border: 1px solid var(--wk-stroke); border-radius: 16px; background: var(--wk-card); }
.gm-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
.gm-count strong { font-size: 26px; font-weight: 700; line-height: 36px; color: var(--wk-ink); }
.gm-count span { font-size: 16px; line-height: 22px; color: var(--wk-muted); }
.gm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-chip { padding: 6px 12px; border: 0; border-radius: 999px; background: var(--gm-lime); color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; }
.gm-chip.need { background: var(--wk-plum-wash); color: var(--wk-plum); cursor: pointer; }
.gm-search {
  box-sizing: border-box; width: 100%; padding: 7px 10px; border: 1px solid var(--wk-edge); border-radius: 8px; background: var(--wk-card);
  color: var(--wk-ink); font: inherit; font-size: 13px; line-height: 18px;
}
.gm-search::placeholder { color: var(--wk-muted); }
.gm-tbl { max-height: 389px; overflow-y: auto; border: 1px solid var(--wk-hair); border-radius: 12px; scrollbar-width: thin; scrollbar-color: #d1d4db transparent; }
.gm-tbl.pick { max-height: 391px; }   /* its header row holds a tick box: 2px taller */
.gm-tbl:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.gm-tbl table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.gm-tbl :is(th, td) { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--wk-hair); text-align: left; vertical-align: middle; }
.gm-tbl :is(th, td):first-child { padding-left: 14px; }
.gm-tbl :is(th, td):last-child { padding-right: 14px; }
.gm-tbl th {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1; padding-top: 9px; padding-bottom: 9px; background: var(--gm-gray); color: var(--wk-muted);
  font-size: 12px; font-weight: 500; line-height: 16px;
}
.gm-tbl td { color: var(--wk-ink); font-size: 13px; line-height: 18px; }
.gm-tbl :is(th, td) { box-sizing: border-box; }
.gm-tbl .gm-tbl-name { width: 242px; font-weight: 600; overflow-wrap: anywhere; }
.gm-tbl .gm-tbl-name:first-child { width: 256px; }
.gm-tbl th.gm-tbl-name { font-weight: 500; }
.gm-tbl .gm-tbl-n { width: 72px; }
.gm-tbl .gm-tbl-tick { width: 44px; }
.gm-tbl .gm-tbl-tick .gm-box { display: grid; }
.gm-tbl tr.none td { background: var(--gm-berry); }
.gm-tbl tr.none .gm-tbl-addr { color: var(--wk-plum); }
.gm-tbl tr.off td { color: var(--wk-muted); font-weight: 400; }
.gm-tbl tr.off .gm-tbl-name { font-weight: 500; }
.gm-tbl-more { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.gm-page .gm-ng { min-height: 66px; box-sizing: border-box; gap: 8px; border-radius: 12px; font-size: 14px; line-height: 19px; }
.gm-page .gm-ng.tall { min-height: 90px; }

/* Step 2 (GU-52, 53, 55): the table and the side card. */
.gm-cols { display: flex; align-items: flex-start; gap: 24px; }
.gm-need, .gm-to-card { flex: 1; min-width: 0; border: 1px solid var(--wk-stroke); border-radius: 16px; background: var(--wk-card); overflow: hidden; }
/* GU-52's 220 / 210 / 272 at 1440, scaled when narrower, the address column never under 240. */
.gm-need-head, .gm-need-row {
  display: grid; grid-template-columns: minmax(0, 220fr) minmax(0, 210fr) minmax(240px, 272fr); gap: 16px; padding: 14px 20px;
  border-bottom: 1px solid var(--wk-hair);
}
.gm-need-head, .gm-to-head { background: var(--gm-gray); color: var(--wk-muted); font-size: 12px; font-weight: 500; line-height: 16px; }
.gm-need-head { padding-top: 10px; padding-bottom: 10px; }
.gm-need-row { align-items: start; }
.gm-need-row.open { background: var(--gm-lime); }
.gm-need-who, .gm-need-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.gm-need-name { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.gm-need-sub, .gm-need-note { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gm-tag { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--wk-track) 75%, var(--wk-card)); color: var(--wk-ink); font-size: 12px; font-weight: 600; line-height: 16px; }
.gm-tag.wait { background: var(--gm-lime); }
.gm-tag.none { background: var(--wk-plum-wash); color: var(--wk-plum); }
.gm-addr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.gm-add-addr {
  flex: 1; min-width: 120px; padding: 7px 10px; border: 1px solid var(--wk-plum); border-radius: 8px; background: var(--wk-card); color: var(--wk-plum);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; text-align: left; overflow-wrap: break-word; cursor: pointer;
}
.gm-addr { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gm-addr .g-address { gap: 4px; }
.gm-addr .p-field { padding: 7px 8px; border: 2px solid var(--wk-ink); border-radius: 8px; background: var(--wk-card); box-shadow: none; }
.gm-addr .p-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gm-addr .p-field input { min-height: 18px; margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; }
.gm-addr .g-address-list {
  padding: 6px 0 0; border: 1px solid var(--wk-stroke); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--wk-card);
  box-shadow: 0 6px 18px rgba(20, 26, 61, .12);
}
.gm-addr .g-address-list > li { padding: 8px 14px; font-size: 13px; line-height: 18px; }
.gm-addr .g-address-list > li + li { border-top: 0; }
.gm-addr .g-address-list > li[aria-selected='true'] { background: var(--wk-track); }
.gm-addr .g-address-list + .k-map-credit {
  margin: -4px 0 0; padding: 2px 12px 14px; border: 1px solid var(--wk-stroke); border-top: 0; border-radius: 0 0 12px 12px; background: var(--wk-card);
  box-shadow: 0 6px 18px rgba(20, 26, 61, .12); text-align: right; font-size: 12px; line-height: 16px;
}
.gm-addr-btns { display: flex; align-items: center; gap: 8px; }
.gm-save {
  padding: 13px 12px 13px 14px; border: 0; border-radius: 18px; background: var(--wk-ink); color: var(--wk-paper); font: inherit;
  font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.gm-save:disabled { opacity: .5; cursor: wait; }
.gm-row-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-body); }
.gm-side {
  flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; box-sizing: border-box; width: 320px; padding: 20px;
  border-radius: 16px; background: var(--gm-lime);
}
.gm-side h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 22px; color: var(--wk-ink); }
.gm-side > p { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }

/* Ask for missing details (GU-54): Send by, Send to, and what they get. */
.gm-to-card { padding-bottom: 8px; }
/* GU-54's 190 and 284 at 1440, scaled when narrower. */
.gm-to-head, .gm-to-row {
  display: grid; grid-template-columns: 18px minmax(120px, 190fr) 120px minmax(160px, 284fr); align-items: center; gap: 14px; padding: 14px 20px;
}
.gm-to-head { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--wk-hair); }
/* GU-54's header has its own grid: Household 222 (32 of it before the label), 16px gaps, Send by 120. */
.gm-to-head { grid-template-columns: minmax(152px, 222fr) 120px minmax(160px, 280fr); column-gap: 16px; }
.gm-to-head > :first-child { padding-left: 32px; }
.gm-to-row + .gm-to-row { border-top: 1px solid var(--wk-hair); }
.gm-to-row.waiting { grid-template-columns: 18px minmax(120px, 190fr) minmax(0, 418fr); }
.gm-to-tick { display: flex; }
.gm-to-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gm-to-name { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.gm-to-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gm-to-row.waiting .gm-to-name, .gm-to-row.off .gm-to-name { color: var(--wk-muted); }
.gm-to-again { justify-self: end; }
.gm-to-by { position: relative; }
.gm-to-by::after { content: '⌄'; position: absolute; right: 8px; top: 3px; color: var(--wk-muted); font-size: 12px; line-height: 16px; pointer-events: none; }
.gm-select, .gm-to-field {
  box-sizing: border-box; width: 100%; border: 1px solid var(--wk-edge); border-radius: 8px; background: var(--wk-card); color: var(--wk-ink);
  font: inherit; font-size: 13px; font-weight: 500; line-height: 18px;
}
.gm-select { padding: 6px 24px 6px 10px; appearance: none; cursor: pointer; }
.gm-to-field { padding: 7px 10px; }
.gm-to-field.empty { border-color: var(--wk-plum); }
.gm-to-field::placeholder { color: var(--wk-muted); }
:is(.gm-select, .gm-to-field):disabled { opacity: .55; }
:is(.gm-select, .gm-to-field):focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 1px; }
.gm-to-field[aria-invalid='true'] { border-width: 2px; padding: 6px 9px; }
.gm-side.wide { align-items: stretch; gap: 12px; width: 400px; }
.gm-what-head { display: flex; align-items: baseline; gap: 8px; }
.gm-what-head h2 { flex: 1; font-size: 14px; line-height: 19px; }
.gm-mail { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border: 1px solid var(--wk-stroke); border-radius: 12px; background: var(--wk-card); }
.gm-mail p { margin: 0; }
.gm-mail-from { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gm-mail-title { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.gm-mail-text { font-size: 13px; line-height: 18px; color: var(--wk-ink); white-space: pre-line; }
.gm-mail-edit {
  box-sizing: border-box; width: 100%; min-height: 96px; padding: 8px 10px; border: 1px solid var(--wk-edge); border-radius: 8px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 13px; line-height: 18px; resize: vertical;
}
.gm-mail-btn { padding: 10px 18px; border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime); font-size: 14px; font-weight: 600; line-height: 19px; }
.gm-side .gm-what-foot { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gm-copy {
  position: relative; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500;
  line-height: 18px; cursor: pointer;
}
.gm-copy::after { content: ''; position: absolute; inset: -13px -6px; }
.gm-copy:disabled { color: var(--wk-muted); cursor: default; }
.gm-texts { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.gm-texts-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 22px; color: var(--wk-ink); }

/* Step 3 (GU-58, 59, 59a): the envelopes, the QR code, the download, Mark them sent. */
.gm-envs { margin: 0; padding: 4px 16px; list-style: none; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.gm-envs > li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
.gm-envs > li + li { border-top: 1px solid var(--wk-off); }
.gm-env-name { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-ink); overflow-wrap: anywhere; }
.gm-env-line { font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.gm-envs > li.gm-env-more { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.gm-qr-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--wk-hair); border-radius: 20px; background: var(--wk-card); }
.gm-qr-mark { flex: none; box-sizing: border-box; width: 36px; height: 36px; overflow: hidden; border: 1px solid var(--wk-ink); border-radius: 3px; background: var(--wk-card); color: var(--wk-ink); }
.gm-qr-mark svg { display: block; width: 34px; height: 34px; }
.gm-qr-row .gm-qr-text { color: var(--wk-muted); }
.gm-qr-row .p-switch[aria-checked='true']::after { background: var(--wk-card); }
.gm-dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 4px; }
.gm-dl-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gm-dl-row .gm-pill.go { padding: 10px 28px; }
.gm-pill.again { padding: 10px 28px; }
.gm-mark-box { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border-radius: 18px; background: var(--wk-wash); }
.gm-mark-box p { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-body); }
.gm-mark-link {
  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-link::after { content: ''; position: absolute; inset: -13px -6px; }

/* Narrower than the frames' 1120 (1280, 1024): the side card goes under the table, so the table keeps room for its
   status chips and fields; under 1100 the choices go two by two. */
@media (max-width: 1359px) {
  .gm-cols { flex-direction: column; align-items: stretch; }
  .gm-side, .gm-side.wide { width: auto; }
}
@media (max-width: 1100px) {
  .gm-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  .gm-need-head { display: none; }
  .gm-need-row, .gm-to-row { grid-template-columns: minmax(0, 1fr); }
  .gm-to-head { display: none; }
  .gm-page-foot.spread { flex-wrap: wrap; }
}

/* The not-getting sheet (3242:50625, 3250:50715): a bottom sheet on the phone, 760px wide on desktop. */
#gm-notgetting .p-sheet-title { padding-top: 2px; font-size: 30px; line-height: 43px; }
#gm-notgetting .p-sheet-lead { margin-top: 11px; font-size: 13px; line-height: 19px; color: var(--wk-body); }
#gm-notgetting .p-sheet-body { gap: 12px; margin-top: 12px; }
.gm-ng-search { display: flex; gap: 8px; }
.gm-ng-field {
  flex: 1; min-width: 0; box-sizing: border-box; padding: 13px 14px 12px; border: 1px solid var(--wk-edge); border-radius: 18px; background: var(--wk-card);
  color: var(--wk-ink); font: inherit; font-size: 14px; line-height: 19px;
}
.gm-ng-field::placeholder { color: var(--wk-muted); }
.gm-ng-field:focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 1px; }
.gm-ng-filter .lm-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 13px 12px 13px 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;
}
.gm-ng-filter { display: flex; }
.gm-ng-filter .lm-btn i { font-size: 12px; }
.gm-ng-filter .lm-btn:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.gm-ng-filter .lm-menu { right: 0; left: auto; min-width: 220px; }
.gm-ng-people { box-sizing: border-box; max-height: 50dvh; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-card); }
.gm-ng-group + .gm-ng-group { margin-top: 10px; }
.gm-ng-head { display: flex; align-items: center; gap: 8px; padding: 8px 0 4px; }
.gm-ng-head h3 { flex: 1; margin: 0; font-size: 13px; font-weight: 400; line-height: 19px; color: var(--wk-muted); }
.gm-ng-all {
  position: relative; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; font-size: 13px; line-height: 19px;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.gm-ng-all::after { content: ''; position: absolute; inset: -12px -6px; }
.gm-ng-group ul { margin: 0; padding: 0; list-style: none; }
.gm-ng-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; }
.gm-ng-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.gm-ng-line { flex: 1; min-width: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gm-ng-add {
  flex: none; height: 32px; padding: 0 14px; border: 1px solid var(--wk-edge); border-radius: 16px; background: var(--wk-card); color: var(--wk-ink);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 16px; cursor: pointer;
}
.gm-ng-add.on { border-color: var(--wk-lime); background: var(--wk-lime); color: var(--wk-on-lime); }
@media (max-width: 859px) {
  /* The phone's narrow rows: the side and priority under the name, Add beside both. */
  .gm-ng-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .gm-ng-row .gm-ng-add { grid-row: 1 / span 2; grid-column: 2; }
}
.gm-ng-none { margin: 0; padding: 8px 0; font-size: 13px; line-height: 19px; color: var(--wk-muted); }
.gm-ng-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gm-ng-added { margin: 0; font-size: 13px; line-height: 19px; color: var(--wk-muted); }
.p-btn.gm-ng-done { min-height: 0; padding: 12px 32px; font-size: 15px; font-weight: 600; line-height: 20px; }
:is(.gm-ng-all, .gm-ng-add):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* Did every household get one? (GU-60, GU-61): a bottom sheet on the phone, a 480px popup on desktop. */
#gm-sent .p-sheet-title { font-size: 34px; line-height: 37px; }
#gm-sent .p-sheet-lead { margin-top: 12px; font-size: 13px; line-height: 19px; color: var(--wk-body); }
#gm-sent .p-sheet-body { gap: 12px; margin-top: 12px; }
.gm-sent-opts { display: flex; flex-direction: column; padding: 0 16px; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.gm-sent-opt { display: flex; align-items: center; gap: 14px; padding: 11px 0; cursor: pointer; }
.gm-sent-opt + .gm-sent-opt { border-top: 1px solid var(--wk-line); }
.gm-sent-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.gm-sent-title { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--wk-ink); }
.gm-sent-line { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.gm-sent-see {
  position: relative; align-self: flex-start; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 12px;
  line-height: 16px; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.gm-sent-see::after { content: ''; position: absolute; inset: -4px -4px -12px; }
.gm-sent-see:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.gm-sent-pickhead { display: flex; align-items: baseline; gap: 8px; }
.gm-sent-pickhead p { flex: 1; margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.gm-sent-pickhead button {
  position: relative; 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;
}
.gm-sent-pickhead button::after { content: ''; position: absolute; inset: -13px -6px; }
.gm-sent-pick { max-height: 150px; margin: 0; padding: 0 16px; overflow-y: auto; list-style: none; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); }
.gm-sent-pick > li { padding: 9px 0; }
.gm-sent-pick > li + li { border-top: 1px solid var(--wk-off); }
.gm-sent-pick label { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); cursor: pointer; }
.gm-sent-pick .gm-box { width: 20px; height: 20px; border-radius: 6px; }
.gm-sent-pick .gm-box:checked::after { font-size: 12px; font-weight: 600; }
.gm-sent-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--wk-ground); }
.gm-sent-card p { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-body); }
.gm-sent-card .gm-sent-card-title { font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink); }
.gm-sent-on {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--wk-edge); border-radius: 18px;
  background: var(--wk-card); cursor: pointer;
}
.gm-sent-on:focus-within { outline: 2px solid var(--wk-ink); outline-offset: 1px; }
.gm-sent-on-label { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.gm-sent-on input { height: 20px; padding: 0; border: 0; background: none; color: transparent; font: inherit; font-size: 15px; line-height: 20px; outline: none; }
.gm-sent-on input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
.gm-sent-on input:focus { color: var(--wk-ink); }
.gm-sent-on-day { position: absolute; left: 14px; bottom: 10px; font-size: 15px; line-height: 20px; color: var(--wk-ink); pointer-events: none; }
.gm-sent-on input:focus + .gm-sent-on-day { visibility: hidden; }
.gm-sent-btns { display: flex; gap: 10px; }
.gm-sent-btns .p-btn { min-height: 0; padding: 10px 16px; font-size: 14px; font-weight: 500; line-height: 19px; }
.gm-sent-btns .p-btn.line { border-color: var(--gm-outline); }

/* Budget's lite sheets tighten their titles; these frames don't. */
:is(#gm-notgetting, #gm-sent, #al-sheet) .p-sheet-title { letter-spacing: normal; }

/* The sheets on desktop: centered, no grip, the frames' widths. */
@media (min-width: 860px) {
  :is(#gm-notgetting, #gm-sent, #al-sheet) .p-sheet-top { display: none; }
  #gm-notgetting.p-sheet { max-width: 760px; padding: 12px 20px 28px; border-radius: 20px; box-shadow: 0 12px 20px rgba(20, 26, 61, .18); }
  #gm-notgetting .gm-ng-people { height: 440px; max-height: calc(100dvh - 360px); }
  #gm-sent.p-sheet { max-width: 480px; padding: 24px 20px; border-radius: 20px; box-shadow: 0 12px 20px rgba(20, 26, 61, .18); }
  #al-sheet.p-sheet { max-width: 600px; padding: 12px 20px 28px; border-radius: 20px; box-shadow: 0 12px 20px rgba(20, 26, 61, .18); }
  #al-sheet .p-sheet-title { line-height: 43px; }
  #al-sheet .p-sheet-lead { margin-top: 12px; }
  #al-sheet .p-sheet-body { gap: 12px; margin-top: 12px; }
  .al-done { min-height: 44px; font-weight: 500; }
  #al-sheet .al-card { border-radius: 18px; }
  #al-sheet .al-link { border-radius: 12px; }
  #al-sheet .al-option .al-main { gap: 2px; }
}
.al-card.al-long { max-height: max(150px, calc(100dvh - 580px)); overflow-y: auto; }   /* the phone sheet's header wraps taller */
@media (min-width: 860px) { .al-card.al-long { max-height: max(183px, calc(100dvh - 480px)); } }
.al-card.al-long:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.al-again-btn {
  position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; font-size: 12px; font-weight: 500;
  line-height: 16px; cursor: pointer;
}
.al-again-btn::after { content: ''; position: absolute; inset: -14px -6px; }
.al-again-btn:focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; border-radius: 4px; }
/* The desktop guest table (Figma GU-20 2529:48381, GU-150 2817:42530, GU-151 2871:43092, GU-151a 2986:48464) and the
   desktop list page around it. Line heights pinned in px (Manrope runs 1px tall in Chrome); fields use --wk-edge for
   WCAG 1.4.11 where the frames draw #DEDFE6. */

/* ── The page: one column at desktop width, the household panel docked on the right (GU-43, SP-2, SP-12), full screen
   without the sidebar (GU-150; guests.css hides it). ── */
.gl-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
@media (min-width: 860px) {
  /* The panel fixes itself to the window's right edge at --ghp-w (560 from a 1440 window, 480 below; guests-detail.css);
     the list ends 40px before it: at 840 (1440), 760 (1280), 504 (1024), as GU-43, SP-2 and SP-12 draw it. */
  .p-page.gl-page.gl-docked { max-width: none; margin: 0; padding-right: calc(var(--ghp-w, 480px) + 40px); }
  .p-page.gl-page.gl-full { max-width: none; padding: 28px 40px 40px; }
}
@media (min-width: 1440px) { .p-page.gl-page.gl-docked { padding-right: calc(var(--ghp-w, 560px) + 40px); } }
/* Docked, the list keeps SP-12's 392px down to 1024: 72 (the rail, chrome.css) + 40 + 392 + 40 + 480 = 1024. */
/* The subtitle is 19px tall in the frames (plan.css's 1.45 makes it 20.3, which also puts the table on a fraction of
   a pixel and blurs its hairlines). */
.gl-desk .p-sub { line-height: 19px; }
/* Full screen sits tighter (GU-150): 18px under its header, 14px between search, list head and table. */
.gl-full > .gl-main { gap: 14px; }
.gl-full-head { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 4px; }
.gl-full-head > div { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.gl-full-head .p-sub { margin: 0; line-height: 19px; }
.gl-full-head > .gt-pill { flex: none; margin-top: 6px; }

/* ── The table ── */
.gt { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.gt-box { position: relative; overflow: hidden; border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-card); }
.gt-scroll { max-height: 760px; overflow: auto; scrollbar-width: none; }
.gt-scroll::-webkit-scrollbar { display: none; }
.gt.full .gt-scroll { max-height: max(320px, calc(100dvh - 316px)); }
/* The frame's thin sideways bar, drawn rather than the browser's so it looks the same everywhere: it starts past
   Household and can be dragged. No bar down the side ("Scroll to see N more"). */
.gt-box.wide { padding-bottom: 16px; }
.gt-box.wide > .gt-fade { bottom: 16px; }
.gt-bar { position: absolute; right: 18px; bottom: 6px; left: 272px; height: 4px; }
.gt-thumb { position: absolute; top: -6px; height: 16px; cursor: grab; touch-action: none; }
.gt-thumb::after {
  content: ''; position: absolute; top: 6px; right: 0; left: 0; height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--wk-ink) 18%, var(--wk-card));
}
.gt-fade {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; width: 64px; pointer-events: none;
  background: linear-gradient(to right, color-mix(in srgb, var(--wk-card) 0%, transparent), var(--wk-card));
}
.gt-below { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }

.gt-table {
  border-collapse: separate; border-spacing: 0; table-layout: fixed;
  font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink);
}
.gt-table :is(th, td) { padding: 0 16px 0 0; background: var(--wk-card); text-align: left; vertical-align: middle; font-weight: 500; }
.gt-table tbody :is(th, td) { height: 48px; border-top: 1px solid var(--wk-hair); }
.gt-table .gt-center { padding-right: 0; text-align: center; }
.gt-table .gt-rest { padding: 0; }
.gt-head-row > th { position: sticky; top: 0; z-index: 2; height: 40px; }
.gt-table .gt-frozen { position: sticky; left: 0; z-index: 1; padding: 0 12px 0 18px; border-right: 1px solid var(--wk-hair); }
.gt-head-row > .gt-frozen { z-index: 3; }
.gt-cell-in { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gt-cell-in:has(.gt-box-check) { gap: 12px; }

/* Rows: a light tint on hover, the people of an opened household on their own tint (GU-20a), picked ones in the
   Edit multiple bar's lime (GU-23). */
.gt-row:hover > :is(th, td), .gt-row.current > :is(th, td) { background: color-mix(in srgb, var(--wk-wash) 45%, var(--wk-card)); }
.gt-person > :is(th, td), .gt-person:hover > :is(th, td) { background: color-mix(in srgb, var(--wk-wash) 20%, var(--wk-card)); }
.gt-row.picked > :is(th, td) { background: var(--wk-wash); }
.gt-person > td { font-size: 13px; line-height: 18px; }
.gt-person.marked > :is(th, td) { background: var(--wk-wash); }
.gt-person > .gt-frozen { padding-left: 44px; }

.gt-text { overflow-wrap: anywhere; }
.gt-text.muted, .gt-none { color: var(--wk-muted); }

/* Household cell: › opens it in place, the name opens its panel, ⋯ its menu. */
.gt-chev {
  position: relative; display: grid; flex: none; place-items: center; width: 9px; height: 19px; padding: 0; border: 0;
  background: none; color: var(--wk-muted); font: inherit; font-size: 14px; font-weight: 600; line-height: 19px; cursor: pointer;
}
.gt-chev::after { content: ''; position: absolute; inset: -12px -8px; }
.gt-chev.open { width: 19px; }
.gt-chev.open > span { transform: rotate(90deg); }
.gt-name {
  flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px;
  font-weight: 600; line-height: 19px; text-align: left; overflow-wrap: anywhere; cursor: pointer;
}
span.gt-name { cursor: default; }
.gt-more {
  display: grid; flex: none; place-items: center; width: 30px; height: 28px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--wk-muted); cursor: pointer;
}
.gt-more svg { fill: currentColor; }
.gt-more:hover, .gt-more.on { background: var(--wk-hair); }
.gt-box-check, .gt-tick input {
  display: grid; flex: none; place-items: center; width: 18px; height: 18px; margin: 0; appearance: none;
  border: 1.5px solid var(--wk-ink); border-radius: 5px; background: var(--wk-card); cursor: pointer;
}
.gt-box-check:checked, .gt-tick input:checked { background: var(--wk-ink); }
.gt-box-check:checked::after, .gt-tick input:checked::after {
  content: '✓'; color: var(--wk-paper); font-size: 11px; font-weight: 700; line-height: 11px;
}
.gt-box-check:indeterminate::after { content: ''; width: 8px; height: 2px; border-radius: 1px; background: var(--wk-ink); }
.gt-person-name {
  flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px;
  font-weight: 400; line-height: 19px; text-align: left; overflow-wrap: anywhere;
}
button.gt-person-name { cursor: pointer; }
.gt-move {
  flex: none; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; font-size: 13px; line-height: 18px;
  text-decoration: underline; cursor: pointer;
}
.gt-add-row > .gt-frozen { padding-right: 0; }
.gt-add-someone {
  white-space: nowrap; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 18px;
  cursor: pointer;
}

/* Fields in cells: address 34px tall, dropdowns 32 (GU-20); a person's fields 32 (GU-20a). "Choose" and
   "+ Add address" in berry when empty. */
.gt-field, .gt-add-address, .gt-pick select {
  box-sizing: border-box; display: block; width: 100%; margin: 0; border: 1px solid var(--wk-edge); border-radius: 8px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px;
}
.gt-field, .gt-add-address { height: 34px; padding: 7px 10px; }
.gt-person .gt-field { height: 32px; padding: 6px 10px; }
.gt-field::placeholder { color: var(--wk-muted); opacity: 1; }
.gt-add-address { border-color: var(--wk-plum); color: var(--wk-plum); font-weight: 600; text-align: left; cursor: pointer; }
.gt-pick { position: relative; display: block; }
.gt-pick select { height: 32px; padding: 6px 26px 6px 10px; appearance: none; text-overflow: ellipsis; cursor: pointer; }
.gt-pick.empty select { border-color: var(--wk-plum); color: var(--wk-plum); font-weight: 600; }
.gt-pick option { color: var(--wk-ink); font-weight: 500; }
.gt-chev-down { position: absolute; top: 7px; right: 8px; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--wk-muted); pointer-events: none; }
.gt-field:focus, .gt-pick select:focus-visible { outline: none; border-color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-ink); }
.gt-address { display: block; }

/* Headers (GU-150): muted at rest; on hover or focus a pill with the grip, the name in ink and × for someone who can
   edit; an edge to drag for width; a line where a dragged header lands. */
.gt-table .gt-th { padding-right: 10px; }
.gt-table .gt-th.gt-center { padding-right: 0; }
.gt-head-pill { display: flex; align-items: center; gap: 6px; height: 20px; padding: 2px 6px 2px 0; border-radius: 6px; }
.gt-center > .gt-head-pill { justify-content: center; padding-right: 0; }
.gt-head-pill.can:focus-within, .gt-th:hover > .gt-head-pill.can { padding-left: 4px; background: var(--wk-track); }
.gt-grip {
  display: none; flex: none; width: 10px; height: 14px;
  background: radial-gradient(circle, var(--wk-muted) 1.1px, transparent 1.4px) 0 0 / 5px 5px;
}
.gt-head {
  flex: none; padding: 0; border: 0; background: none; color: var(--wk-muted); font: inherit; font-size: 12px; font-weight: 600;
  line-height: 16px; white-space: nowrap; cursor: pointer;
}
.gt-head-pill.can, .gt-head-pill.can .gt-head { cursor: grab; touch-action: none; }
.gt-head-pill.can:focus-within .gt-head, .gt-th:hover > .gt-head-pill.can .gt-head { color: var(--wk-ink); }
.gt-hide {
  display: none; flex: none; place-items: center; width: 10px; height: 10px; margin-left: auto; padding: 0; border: 0;
  background: none; color: var(--wk-muted); cursor: pointer;
}
.gt-hide i { font-size: 13px; line-height: 10px; }
.gt-head-pill.can:focus-within :is(.gt-grip, .gt-hide), .gt-th:hover > .gt-head-pill.can :is(.gt-grip, .gt-hide) { display: grid; }
.gt-th.dragging > .gt-head-pill { opacity: .5; }
.gt-sort { color: var(--wk-ink); }
.gt-edge { position: absolute; top: 0; right: 0; z-index: 1; width: 12px; height: 40px; cursor: col-resize; touch-action: none; }
.gt-edge > span { position: absolute; opacity: 0; pointer-events: none; }
.gt-edge-grip { top: 9px; left: 4px; width: 4px; height: 22px; border-radius: 2px; background: var(--wk-ink); }
.gt-edge-line { top: 0; left: 5px; width: 2px; height: var(--gt-h, 40px); background: color-mix(in srgb, var(--wk-ink) 18%, transparent); }
.gt-edge.on > span { opacity: 1; }
.gt-drop { position: absolute; top: 0; left: -9px; width: 2px; height: var(--gt-h, 40px); background: var(--wk-ink); pointer-events: none; }
.gt-drop.end { right: 7px; left: auto; }
.gt-tip {
  position: fixed; z-index: 70; margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--wk-ink); font-family: var(--wk-sans);
  color: var(--wk-paper); font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap;
}
.gt-tip::before {
  content: ''; position: absolute; top: -6px; left: 0;
  border: solid transparent; border-width: 0 6px 6px; border-bottom-color: var(--wk-ink);
}
.gt-add-col {
  display: inline-flex; align-items: center; height: 18px; padding: 0 10px; border: 1px dashed var(--wk-stroke);
  border-radius: 999px; background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 12px; font-weight: 600;
  line-height: 16px; white-space: nowrap; cursor: pointer;
}
.gt-add-col.on { border-style: solid; border-color: var(--wk-ink); }

/* ── Menus and the small dialogs (GU-20b, GU-151, GU-151a, GU-152), fixed to the window ── */
.gt-pop {
  position: fixed; top: 0; left: 0; z-index: 70; border: 1px solid var(--wk-hair); border-radius: 14px; background: var(--wk-card);
  box-shadow: 0 8px 24px rgba(20, 26, 61, .14); color: var(--wk-ink); font-family: var(--wk-sans);
}
.gt-menu { display: flex; flex-direction: column; width: 300px; padding: 8px 0; }
.gt-item, .gt-colmenu-opt {
  display: flex; width: 100%; padding: 10px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.gt-item { flex-direction: column; gap: 2px; }
.gt-item-title { font-size: 14px; font-weight: 600; line-height: 19px; }
.gt-item.berry .gt-item-title { color: var(--wk-plum); }
.gt-item-sub { font-size: 12px; font-weight: 400; line-height: 16px; color: var(--wk-muted); }
.gt-pop [role^='menuitem']:is(:hover, :focus-visible) { outline: none; background: var(--wk-track); }

.gt-colmenu { display: flex; flex-direction: column; width: 320px; max-height: calc(100vh - 16px); padding: 10px 0; overflow-y: auto; border-radius: 16px; }
.gt-colmenu-section { display: flex; flex-direction: column; }
.gt-colmenu-section + .gt-colmenu-section, .gt-colmenu-foot { border-top: 1px solid var(--wk-hair); }
.gt-colmenu-head { margin: 0; padding: 8px 16px 4px; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--wk-muted); }
.gt-colmenu-head:has(+ .gt-colmenu-sub) { padding-bottom: 0; }
.gt-colmenu-sub { margin: 0; padding: 2px 16px 4px; font-size: 12px; font-weight: 400; line-height: 16px; }
.gt-colmenu-opt { align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; }
.gt-colmenu-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gt-colmenu-name { font-size: 14px; font-weight: 500; line-height: 19px; }
.gt-colmenu-meta { font-size: 12px; font-weight: 400; line-height: 16px; color: var(--wk-muted); }
.gt-colmenu-act {
  flex: none; padding: 4px 10px; border-radius: 999px; background: var(--wk-plum-wash); color: var(--wk-plum);
  font-size: 12px; font-weight: 600; line-height: 16px;
}
.gt-colmenu-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 16px 4px; }
.gt-colmenu-link {
  padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 600; line-height: 19px; cursor: pointer;
}
.gt-pop .gt-colmenu-link:is(:hover, :focus-visible) { background: none; text-decoration: underline; }
.gt-colmenu-note { margin: 0; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--wk-muted); }

.gt-hidecols { width: 300px; padding: 10px 0; border-color: var(--wk-stroke); }
.gt-hidecols-title { margin: 0; padding: 0 16px; font-size: 14px; font-weight: 600; line-height: 19px; }
.gt-hidecols-sub { margin: 0; padding: 2px 16px 8px; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--wk-muted); }
.gt-hidecols-list { margin: 0; padding: 0; list-style: none; }
.gt-tick { display: flex; align-items: center; gap: 10px; padding: 7px 16px; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer; }
.gt-tick input:not(:checked) { border-color: var(--wk-edge); }
.gt-tick input:not(:checked) + span { color: var(--wk-muted); }
.gt-hidecols-foot { display: flex; justify-content: flex-end; padding: 10px 16px 0; }
.gt-done, .gt-navy {
  padding: 13px 12px 13px 14px; border: 0; border-radius: 18px; background: var(--wk-ink); color: var(--wk-paper);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}

.gt-suggest { width: 300px; padding: 4px 0; }
.gt-suggest[hidden] { display: none; }
.gt-suggest ul { margin: 0; padding: 0; list-style: none; }
.gt-suggest li { padding: 9px 14px; font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer; }
.gt-suggest li[aria-selected='true'], .gt-suggest li:hover { background: var(--wk-track); }
.gt-suggest .k-map-credit { margin: 0; padding: 6px 14px 4px; }

/* ── Nothing matches (GU-20h) ── */
.gt-nomatch {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 24px; border: 1px solid var(--wk-stroke);
  border-radius: 16px; background: var(--wk-card); text-align: center;
}
.gt-nomatch-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 25px; color: var(--wk-ink); }
.gt-nomatch-sub { margin: 0; font-size: 14px; font-weight: 400; line-height: 19px; color: var(--wk-muted); }
.gt-nomatch-acts { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 10px; }
.gt-pill {
  padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--wk-ink) 20%, var(--wk-card)); border-radius: 999px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer;
}

.gt :is(button, input, select):focus-visible, .gt-pop :is(button, input):focus-visible,
:is(.gl-full-head, .gt-nomatch) button:focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; }
.gt-pop [role^='menuitem']:focus-visible { outline: 2px solid var(--wk-ink); outline-offset: -2px; }
/* Needs more details (Figma GU-44 2530:37426) at both widths, and its See all view. Line heights pinned in px. */

.gn-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── The phone (5a): three per section, then Show N more / Show fewer, or See all; Might be the same person? ── */
/* 5a's measures over the list's .gn- rules (guests-list.css): 20px gutters, the lead 2px nearer the title, warm hairlines. */
@media (max-width: 859px) {
  .p-page.gn-page { padding-left: 20px; padding-right: 20px; }
}
.gn-page .gn-title { gap: 2px; }
.gn-page .gn-row + .gn-row { border-top-color: color-mix(in srgb, var(--wk-line) 68%, var(--wk-card)); }
.gn-page .gn-count { line-height: 16px; }
.gn-page .gn-row { padding: 11px 0 10px; }
.gn-page .gn-why { line-height: 17px; }
.gn-page .gn-ask { min-height: 39px; }
.gn-page :is(.gn-group, .gn-pair-btn) { min-height: 41px; }
.gn-page :is(.gn-group, .gn-pair-btn.line) { border-color: color-mix(in srgb, var(--wk-ink) 20%, var(--wk-card)); }
.gn-more {
  position: relative; align-self: flex-start; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit;
  font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer;
}
.gn-more::after { content: ''; position: absolute; inset: -13px -8px; }
.gn-pair-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.gn-main > .gn-pair-acts { margin-top: 8px; }
.gn-pair-btn { padding: 0 16px; font-size: 14px; font-weight: 500; }
.gn-title h1:focus { outline: none; }
:is(.gn-more, .gn-pair-btn):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* ── Desktop (GU-44): fluid up to 1120 between 40px gutters (guests.css), the GU-7 page head. ── */
.p-page.gn-page.gnd-page { gap: 24px; padding-top: 40px; padding-bottom: 0; color: var(--wk-ink); }   /* the screen adds GU-44's 48px under the last card */
.gnd-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.gnd-back {
  position: relative; display: flex; align-items: center; gap: 4px; width: fit-content; padding: 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.gnd-back i { margin-left: -2px; font-size: 12px; }
.gnd-back::after { content: ''; position: absolute; inset: -12px -8px; }
.gnd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.gnd-head-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gnd-title { margin: 0; font-family: var(--wk-display); font-size: 34px; font-weight: 400; line-height: 41px; color: var(--wk-ink); outline: none; }
.gnd-lead { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }
.gnd-done {
  flex: none; margin-top: 4px; padding: 10px 16px; border: 0; 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;
}

/* The four tiles: a count and what's missing, never links. */
.gnd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.gnd-tile { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 14px; border-radius: 14px; background: var(--wk-plum-wash); }
.gnd-tile-top { display: flex; align-items: baseline; gap: 8px; line-height: 32px; }
.gnd-tile-n { font-size: 26px; font-weight: 500; line-height: 32px; color: var(--wk-plum); }
.gnd-tile-name { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); }
.gnd-tile-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }

/* A section: title, count and why on the left, its action on the right; then the rows, hairline between. */
.gnd-card { display: flex; flex-direction: column; padding: 20px 24px 8px; border: 1px solid var(--wk-stroke); border-radius: 16px; background: var(--wk-card); }
.gnd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 15px; }
.gnd-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gnd-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.gnd-card-title h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 23px; color: var(--wk-ink); outline: none; }
.gnd-chip { padding: 2px 8px; border-radius: 999px; background: var(--wk-plum-wash); color: var(--wk-plum); font-size: 12px; font-weight: 500; line-height: 16px; }
.gnd-why { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.gt-pill.gnd-pill { flex: none; }

.gnd-rows { margin: 0; padding: 0; list-style: none; }
.gnd-row { display: flex; align-items: center; min-height: 62px; border-top: 1px solid var(--wk-hair); }
/* The name column is GU-44's 296px at full width, narrower (not under 200) when the window is. */
.gnd-who { flex: none; display: flex; flex-direction: column; gap: 1px; width: clamp(200px, 27.67%, 296px); padding: 12px 16px 10px 0; box-sizing: border-box; }
.gnd-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.gnd-line { font-size: 12px; line-height: 17px; color: var(--wk-muted); overflow-wrap: anywhere; }
.gnd-fix { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 0; }
.gnd-wide { flex: 0 1 420px; min-width: 160px; }
.gnd-fix:has(> :is(.gnd-wide, .gnd-half)) { flex-wrap: nowrap; }   /* fields narrow before they stack */
.gnd-fix > .gnd-link { flex: none; }
.gnd-half { flex: 0 1 260px; min-width: 160px; }
.gnd-address { display: block; }
.gt-add-address.gnd-address { width: 100%; }
.gnd-tag { display: flex; align-items: center; }
.gnd-tag + .gnd-tag { margin-left: 8px; }
.gnd-tag-label { width: 110px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.gnd-pick { width: 200px; }
.gnd-missing, .gnd-tag .gnd-missing { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
/* Same last name as …, the button and the link stay on one line; the sentence wraps first. */
.gnd-fix:has(> .gnd-navy) { flex-wrap: nowrap; }
.gnd-fix > .gnd-navy { flex: none; }
.gnd-same { flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 400; line-height: 18px; color: var(--wk-ink); }
.gnd-link {
  position: relative; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; font-size: 13px; font-weight: 500;
  line-height: 18px; cursor: pointer;
}
.gnd-link::after { content: ''; position: absolute; inset: -12px -6px; }
.gnd-navy {
  min-height: 45px; padding: 0 15px; border: 0; border-radius: 999px; background: var(--wk-btn); color: var(--wk-on-navy); font: inherit;
  font-size: 14px; font-weight: 500; line-height: 19px; cursor: pointer;
}
.gnd-more {
  position: relative; align-self: stretch; padding: 12px 0; border: 0; border-top: 1px solid var(--wk-hair); background: none;
  color: var(--wk-plum); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; text-align: left; cursor: pointer;
}

/* Suggested addresses under the field, on the page's body so the card can't clip them. */
.gnd-suggest {
  position: fixed; z-index: 70; box-sizing: border-box; padding: 4px 0; border: 1px solid var(--wk-stroke); border-radius: 12px;
  background: var(--wk-card); box-shadow: var(--wk-shadow);
}
.gnd-suggest[hidden] { display: none; }
.gnd-suggest ul { margin: 0; padding: 0; list-style: none; }
.gnd-suggest li { padding: 9px 14px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-ink); cursor: pointer; }
.gnd-suggest li[aria-selected='true'], .gnd-suggest li:hover { background: var(--wk-track); }
.gnd-suggest .k-map-credit { margin: 0; padding: 6px 14px 4px; }

:is(.gnd-back, .gnd-done, .gnd-link, .gnd-navy, .gnd-more, .gnd-pill, .gnd-address):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.gnd-more:focus-visible { outline-offset: -3px; }
/* Check your list on desktop (Figma GU-16 2529:47649): the stat tiles, From chips, Missing details tiles, filter chips
   and the table's frame. Line heights pinned in px (Manrope runs 1px tall in Chrome). */
.gsc-body.gck { gap: 0; }
.gck p { margin: 0; }

.gck-stats, .gck-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.gck-stat, .gck-tile {
  display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; padding: 18px; border: 1px solid var(--wk-hair);
  border-radius: 16px; background: var(--wk-card); color: var(--wk-ink);
}
.gck-stat { gap: 9px; padding-top: 22px; }
.gck-stat-n { font-family: var(--wk-display); font-size: 40px; font-weight: 400; line-height: 36px; font-variant-numeric: lining-nums; }
.gck-stat-label { font-size: 14px; font-weight: 500; line-height: 18px; }

.gck-from { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-ink); }
.gck-sources { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; list-style: none; }
.gck-sources > li { padding: 4px 8.5px; border-radius: 12px; background: var(--wk-track); font-size: 12px; font-weight: 500; line-height: 16px; overflow-wrap: anywhere; }

.gck-section { display: flex; flex-direction: column; margin-top: 38px; }
.gck-head { display: flex; flex-direction: column; gap: 1px; margin-bottom: 11px; color: var(--wk-ink); }
.gck-head h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 22px; }
.gck-head p { font-size: 14px; font-weight: 500; line-height: 20px; }

.gck-tile-title { font-size: 16px; font-weight: 600; line-height: 22px; }
.gck-tile-title > span { color: var(--wk-plum); }
.gck .gck-tile-text { margin-top: 5px; font-size: 13px; font-weight: 400; line-height: 18px; }
.gck-show {
  position: relative; align-self: flex-start; margin-top: 7px; padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit;
  font-size: 13px; font-weight: 600; line-height: 18px; cursor: pointer;
}
.gck-show::after { content: ''; position: absolute; inset: -13px -6px; }

.gck-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.gck-chip {
  position: relative; padding: 7px 13px; 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; white-space: nowrap; cursor: pointer;
}
.gck-chip::after { content: ''; position: absolute; inset: -5px 0; }
.gck-chip[aria-pressed='true'] { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
:is(.gck-show, .gck-chip):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
@media (forced-colors: active) { .gck-chip[aria-pressed='true'] { outline: 2px solid; } }

/* The table at the frame's height: about six and a half households, the rest a scroll away. */
.gck .gt-scroll { max-height: 352px; }
.gck .gt-below { display: none; }
.gck .gsc-note { margin-top: 28px; }
.gck > .p-error { margin-top: 16px; }
/* 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, 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-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-display); font-size: 28px; font-weight: 400; 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); overflow-wrap: anywhere; }
.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;
}
/* A long sender name or a link in an email wraps inside the card instead of running past its edge. */
.ov-source {
  align-self: flex-start; gap: 0; max-width: 100%; margin: -14px 0; font-size: 12px; font-weight: 500; color: var(--wk-muted);
  overflow-wrap: anywhere;
}
.ov-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; margin: -13px 0; }
.ov-foot-start { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.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 (prefers-reduced-motion: reduce) {
  .ov-front { transition: none; }
}

/* The open Up next step on a desktop is navy in both themes (dark mode lifts it off the page). */
:root { --ovd-navy: #141B3C; --ovd-navy-soft: #C9CCDA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --ovd-navy: #232c47; --ovd-navy-soft: #b9bfd6; } }
[data-theme='dark'] { --ovd-navy: #232c47; --ovd-navy-soft: #b9bfd6; }

/* The desktop Overview (the Nov 2 prototype): the names with Notes at their right, then Up next across the page as a
   numbered list, Your vendors, Your wedding and Your inspiration, in serif section titles. */
@media (min-width: 860px) {
  #s-home .ovd { gap: 32px; padding-top: 40px; }
  #s-home .ovd .p-head { flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; }
  .ovd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
  .ovd-head > div { min-width: 0; }
  .ovd-sub { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
  .ovn-vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* Notes (top right): the word with its icon and a lime count; it opens a panel under it. */
  .ovn { position: relative; flex: none; }
  .ovn-btn {
    display: flex; align-items: center; gap: 8px; height: 44px; 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: 14px; font-weight: 700;
    cursor: pointer; transition: transform .2s, background-color .2s;
  }
  .ovn-btn:only-child, .ovn-btn:not(:has(.ovn-count)) { padding-right: 16px; }
  .ovn-btn i { font-size: 20px; }
  .ovn-btn:hover { transform: translateY(-1px); background: var(--wk-ground); }
  .ovn-btn[aria-expanded='true'] { border-color: var(--ovd-navy); background: var(--ovd-navy); color: var(--wk-lime); }
  .ovn-count {
    display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--wk-lime); color: var(--wk-on-lime); font-size: 11px; font-weight: 800; box-sizing: border-box;
  }
  .ovn-pop {
    position: absolute; top: 56px; right: 0; z-index: 20; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px));
    padding: 18px 18px 12px; border: 1px solid var(--wk-stroke); border-radius: 18px; background: var(--wk-card);
    box-shadow: 0 14px 30px rgba(20, 26, 61, .14); box-sizing: border-box; text-align: left;
    max-height: calc(100vh - 160px); overflow-y: auto; overscroll-behavior: contain;
  }
  :is(.ovn-pop, .ovs-drawer)[hidden] { display: none; }
  .ovn-title { margin: 0; font-family: var(--wk-display); font-size: 22px; font-weight: 400; line-height: 26px; color: var(--wk-ink); }
  .ovn-list { margin: 0; padding: 0; list-style: none; }
  .ovn-list li { padding: 9px 0; border-top: 1px solid var(--wk-hair); }
  .ovn-body { margin: 0; font-size: 14px; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; }
  .ovn-meta { margin: 0; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
  .ovn-form { display: flex; gap: 8px; }
  .ovn-form input, .ovv-add input {
    flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 1px solid var(--wk-edge); border-radius: 12px; background: var(--wk-card);
    color: var(--wk-ink); font: inherit; font-size: 14px;
  }
  .ovn-problem { margin: 0; font-size: 12px; color: var(--wk-plum); }
  .ovn-pop .ovl-link { justify-self: start; }
  #s-home .ovd h2.p-label { font-family: var(--wk-display); font-size: 28px; font-weight: 400; line-height: 31px; color: var(--wk-ink); }
  .ovd-cols { display: flex; flex-direction: column; gap: 32px; }
  .ovd-main, .ovd-rail { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
  .ovd-main { gap: 32px; }

  /* Up next (3437:56768): the count and Open checklist, a line saying what's in it, then the list. */
  .ovl-section .ov-head { gap: 8px; }
  .ovl-section .ov-head > p, .ovl-dot { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
  .ovl-link {
    display: inline-flex; align-items: center; flex: none; min-height: 32px; padding: 0; border: 0; background: none; font: inherit;
    font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-plum); cursor: pointer;
  }
  .ovl-scope { margin: 2px 0 2px; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
  .ovl {
    display: flex; flex-direction: column; gap: 4px; max-height: 596px; margin: 0; padding: 0 10px 0 0; overflow-y: auto;
    overscroll-behavior: contain; list-style: none;
  }
  .ovl::-webkit-scrollbar { width: 4px; }
  .ovl::-webkit-scrollbar-track { border-radius: 2px; background: var(--wk-track); }
  .ovl::-webkit-scrollbar-thumb { border-radius: 2px; background: var(--wk-grip); }
  .ovl-below { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }

  /* The path: a line from each number to the next, under the open card rather than through it. */
  .ovl-item { position: relative; flex: none; border-radius: 16px; }
  .ovl-item::before { content: ''; position: absolute; left: 23px; top: 35px; bottom: -39px; width: 2px; background: var(--wk-line); }
  .ovl-item:last-child::before { display: none; }
  .ovl-item:has(+ .ovl-item.open)::before { bottom: -4px; }
  .ovl-num {
    position: absolute; left: 8px; top: 19px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px;
    border-radius: 50%; background: var(--wk-off); color: var(--wk-ink); font-size: 13px; font-weight: 600; line-height: 18px;
    pointer-events: none;
  }
  .ovl-toggle {
    display: flex; align-items: center; gap: 16px; width: 100%; min-height: 70px; padding: 14px 12px 14px 56px; border: 0;
    border-radius: 16px; background: none; color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
  }
  .ovl-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
  .ovl-title { font-size: 16px; font-weight: 500; line-height: 22px; overflow-wrap: anywhere; }
  .ovl-meta { font-size: 13px; line-height: 18px; color: var(--wk-muted); overflow-wrap: anywhere; }
  .ovl-chip {
    flex: none; padding: 3px 10px; border: 1px solid var(--wk-stroke); border-radius: 999px; background: var(--wk-card);
    font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap;
  }
  .ovl-chev, .ovl-item.open .ovl-toggle {
    display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--wk-stroke); border-radius: 50%;
    background: var(--wk-card); color: var(--wk-ink);
  }
  .ovl-chev i, .ovl-item.open .ovl-toggle i { font-size: 16px; }
  .ovl-item:not(.open):hover .ovl-toggle { background: var(--wk-ground); }
  .ovl-item:not(.open):hover .ovl-num { background: var(--ovd-navy); color: #FFFFFF; }
  .ovl-item:not(.open):hover .ovl-chev { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }

  /* The open step (3437:56776): the deck card's body beside its number, the collapse button where the card's
     corner is, and its actions on one row with Not now and the link to the rest. */
  .ovl-item.open {
    --wk-ink: #FFFFFF; --wk-body: var(--ovd-navy-soft); --wk-muted: var(--ovd-navy-soft); --wk-plum: var(--wk-lime);
    --wk-stroke: rgba(255, 255, 255, .28); --wk-card: transparent;
    padding: 18px 20px 22px 56px; border: 1px solid var(--ovd-navy); border-radius: 20px; background: var(--ovd-navy); color: var(--wk-ink);
    box-shadow: 0 14px 30px rgba(20, 26, 61, .14);
  }
  .ovl-item.open .ovl-num { background: var(--wk-lime); color: var(--wk-on-lime); }
  .ovl-item.open .ovl-toggle { border-color: var(--wk-lime); background: var(--wk-lime); color: var(--wk-on-lime); }
  .ovl-item.open .p-tag { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
  .ovl-item.open .p-tag.urgent { background: var(--wk-lime); color: var(--wk-on-lime); }
  .ovl-item.open .p-tag.good { background: var(--wk-wash); color: #5C6B12; }
  .ovl-item.open::before { left: 22px; top: calc(100% + 1px); bottom: -40px; }
  .ovl-item.open .ovl-num { left: 8px; top: 18px; }
  .ovl-item.open .ovl-toggle { position: absolute; top: 18px; right: 20px; min-height: 0; padding: 0; }
  .ovl-item.open .ovl-toggle::after { content: ''; position: absolute; inset: -6px; }
  .ovl-panel { container-type: inline-size; }
  .ovl-panel .ov-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 20px; padding: 0; border: 0;
    border-radius: 0; background: none; box-shadow: none;
  }
  .ovl-panel .ov-card > * { grid-column: 1 / -1; }
  .ovl-panel .ov-step { align-items: center; min-height: 32px; padding-right: 44px; }
  .ovl-panel .ov-effort { padding: 0; background: none; color: var(--wk-muted); font-size: 13px; font-weight: 500; }
  .ovl-panel :is(.ov-tag, .ov-source) { justify-self: start; }
  .ovl-panel .ov-headline { font-weight: 500; line-height: 34px; }
  .ovl-panel .ov-body { font-size: 15px; line-height: 23px; }
  .ovl-panel .p-btns > .p-btn { flex: none; padding-inline: 22px; }
  .ovl-panel .ov-more { color: var(--wk-plum); }
  /* The desktop list's open card (3437:56775) has no subtask dashes, and Not now has no icon. */
  .ovl-panel .ov-step .p-dashes, .ovl-panel .ov-notnow i { display: none; }

  /* All caught up (3444:57030): the card fills the list's place. */
  .ovl-section .ov-caught {
    justify-content: center; min-height: 420px; padding: 32px; border: 1px solid var(--wk-line); border-radius: 24px;
    background: var(--wk-card); box-sizing: border-box;
  }
  .ovl-section .ov-check { width: 48px; height: 48px; background: var(--wk-wash); color: var(--wk-moss); }
  .ovl-section .ov-caught .ov-headline { font-size: 32px; font-weight: 500; line-height: 36px; }
  .ovl-section .ov-caught .ov-body { font-size: 16px; line-height: 23px; }
  .ovl-section .ov-caught .ov-small { font-size: 13px; line-height: 18px; }
  .ovl-section .ov-caught .p-btn { flex: none; }

  /* Since you were last here (3437:56854): how many are new, rows with where each leads, then the two links. */
  .ovr-since { gap: 4px; }
  .ovr-new {
    margin: 0; padding: 3px 9px; border-radius: 999px; background: var(--wk-plum-wash); color: var(--wk-plum);
    font-size: 13px; font-weight: 600; line-height: 18px;
  }
  .ovr-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .ovr-row {
    display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 0; border: 0; border-radius: 12px;
    background: none; color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
  }
  .ovr-who {
    display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--wk-track);
    color: var(--wk-ink); font-size: 14px; font-weight: 600;
  }
  .ovr-who i { font-size: 18px; }
  .ovr-who.plum { background: var(--wk-plum-wash); color: var(--wk-plum); }
  .ovr-who.sand { background: var(--wk-off); }
  .ovr-who.navy { background: var(--wk-btn); color: var(--wk-on-navy); }
  .ovr-text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
  .ovr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .ovr-row .ovr-title { font-size: 15px; font-weight: 500; line-height: 20px; }
  .ovr-row.unread .ovr-title { font-weight: 600; }
  .ovr-top time { flex: none; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
  .ovr-row .ovr-sub { margin: 0; font-size: 13px; line-height: 18px; }
  .ovr-act { font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-plum); }
  .ovr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .ovr-mark, .ovr-all {
    min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; line-height: 18px; cursor: pointer;
  }
  .ovr-mark { font-weight: 500; color: var(--wk-muted); }
  .ovr-all { font-weight: 600; color: var(--wk-ink); }
  #s-home .ovr-since h2.p-label:focus { outline: none; }

  /* Your notes (3437:56894): the title and one line open Notes; + New starts one. */
  .ovr-notes { position: relative; flex-direction: row; align-items: center; gap: 12px; }
  .ovr-notes-open { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; }
  .ovr-notes-text { position: relative; display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; pointer-events: none; }
  #s-home .ovr-notes h2.p-label { font-size: 22px; line-height: 24px; }
  #s-home .ovr-notes h2.p-label:focus { outline: none; }
  .ovr-notes-sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); overflow-wrap: anywhere; }
  .ovr-notes-new {
    position: relative; flex: none; min-height: 36px; padding: 0 15px; 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;
  }

  /* Budget (navy) and Guests (3441:56910): they grow to meet the bottom of Up next, up to the empty frame's height. */
  .ovt { display: flex; gap: 16px; min-height: 202px; }
  .ovt-tile {
    display: flex; flex: 1 1 0; flex-direction: column; gap: 6px; min-width: 0; padding: 20px; border: 1px solid var(--wk-stroke);
    border-radius: 24px; background: var(--wk-card); color: var(--wk-ink); box-sizing: border-box;
  }
  .ovt-tile.ink { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
  .ovt-label { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
  .ovt-value { margin: 0; font-family: var(--wk-display); font-size: 36px; font-weight: 400; line-height: 39px; overflow-wrap: anywhere; }
  .ovt-value.none { font-size: 28px; line-height: 31px; }
  .ovt-detail { margin: 0; font-size: 13px; line-height: 19px; color: var(--wk-muted); }
  .ovt-tile.ink :is(.ovt-label, .ovt-detail) { color: color-mix(in srgb, var(--wk-on-navy) 80%, var(--wk-btn)); }
  .ovt-bar { display: block; height: 6px; margin-top: 2px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--wk-on-navy) 22%, var(--wk-btn)); }
  .ovt-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--wk-on-navy); }
  .ovt-space { flex: 1; min-height: 8px; }
  .ovt-line { margin: 0; font-size: 13px; line-height: 18px; }
  .ovt-open {
    align-self: flex-start; min-height: 32px; margin: -7px 0; padding: 0; border: 0; background: none; color: var(--wk-plum);
    font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; text-align: left; cursor: pointer;
  }
  .ovt-tile.ink .ovt-open { color: var(--wk-on-navy); }

  /* Your vision (3437:56901): the newest six photos edge to edge; with none, the panel asking for some (3438:56942). */
  .ovv { gap: 16px; }
  .ovv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  #s-home .ovv h2.p-label em { font-style: normal; color: var(--wk-plum); }
  .ovv-sub { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
  .ovv-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ovv-tile {
    position: relative; display: block; min-width: 0; max-width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px;
    background: var(--wk-track); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s;
  }
  .ovv-tile:nth-child(2) { --tilt: 1.5deg; }
  .ovv-tile:hover { transform: rotate(var(--tilt, -1.5deg)) translateY(-4px); box-shadow: 0 14px 30px rgba(20, 26, 61, .14); }
  .ovv-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ovv-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .ovv-idea { padding: 7px 14px; border-radius: 999px; background: var(--wk-plum-wash); color: var(--wk-plum); font-size: 13px; font-weight: 700; line-height: 18px; }
  .ovv-add { display: flex; flex-wrap: wrap; gap: 8px; }
  .ovv-add input { flex-basis: 220px; }

  /* Your vendors: a stamp a category, in a row that scrolls; solid navy is booked, dashed navy on wash is in
     progress, and a lime dot pulses on one with a proposal in. */
  .ovs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
  .ovs-tally { margin: 0; font-size: 13px; font-weight: 700; color: var(--wk-ink); }
  .ovs-tally b { font-family: var(--wk-display); font-size: 22px; font-weight: 400; color: var(--wk-plum); }
  .ovs-scroll { display: flex; gap: 6px; }
  .ovs-scroll button {
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--wk-stroke); border-radius: 50%;
    background: var(--wk-card); color: var(--wk-ink); cursor: pointer;
  }
  .ovs-scroll button:disabled { opacity: .35; cursor: default; }
  .ovs-key {
    display: inline-block; width: 9px; height: 9px; margin: 0 2px 0 4px; border-radius: 50%; background: var(--wk-lime);
    box-shadow: 0 0 0 1.5px var(--ovd-navy); vertical-align: 0; animation: ovs-pulse 1.8s infinite;
  }
  .ovs-row {
    --l: 0px; --r: 0px; display: grid; grid-auto-flow: column; grid-auto-columns: 118px; gap: 10px; padding: 6px 2px 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--l), #000 calc(100% - var(--r)), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--l), #000 calc(100% - var(--r)), transparent);
  }
  .ovs-row.fade-start { --l: 40px; }
  .ovs-row.fade-end { --r: 56px; }
  .ovs-stamp {
    display: grid; justify-items: center; align-content: start; gap: 8px; padding: 6px 2px; border: 0; border-radius: 16px;
    background: none; color: var(--wk-ink); font: inherit; text-align: center; cursor: pointer; scroll-snap-align: start;
  }
  .ovs-stamp[aria-expanded='true'] { background: var(--wk-track); }
  .ovs-seal {
    position: relative; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; box-sizing: border-box;
    transition: transform .25s cubic-bezier(.2, 1.5, .4, 1);
  }
  .ovs-seal i { font-size: 32px; }
  .ovs-stamp:hover .ovs-seal { transform: rotate(-6deg) scale(1.06); }
  .ovs-stamp.booked .ovs-seal {
    background: var(--ovd-navy); color: var(--wk-lime); transform: rotate(-4deg);
    box-shadow: inset 0 0 0 4px var(--ovd-navy), inset 0 0 0 5px rgba(207, 232, 58, .55);
  }
  .ovs-stamp.booked:hover .ovs-seal { transform: rotate(-10deg) scale(1.06); }
  .ovs-stamp:is(.needs, .talking) .ovs-seal { border: 2px dashed var(--ovd-navy); background: var(--wk-wash); color: var(--ovd-navy); }
  .ovs-stamp.needs .ovs-seal::after {
    content: ''; position: absolute; top: 4px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--wk-lime);
    box-shadow: 0 0 0 2px var(--ovd-navy), 0 0 0 4px var(--wk-paper); animation: ovs-pulse 1.8s infinite;
  }
  .ovs-stamp.none .ovs-seal { border: 2px dashed var(--wk-stroke); color: var(--wk-edge); }
  .ovs-stamp.landed .ovs-seal { animation: ovs-thump .6s cubic-bezier(.2, 1.6, .4, 1); }
  .ovs-cat { font-size: 13px; font-weight: 800; line-height: 18px; overflow-wrap: anywhere; }
  .ovs-who { font-size: 12px; font-weight: 600; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
  .ovs-drawer {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; padding: 18px 22px; border-radius: 18px;
    background: var(--wk-ground);
  }
  .ovs-text { flex: 1 1 320px; min-width: 0; animation: ovs-swap .45s ease; }
  .ovs-say { margin: 0; font-family: var(--wk-display); font-size: 22px; line-height: 26px; color: var(--wk-ink); }
  .ovs-more { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--wk-body); }
  .ovs-drawer .p-btn { flex: none; }
  @keyframes ovs-pulse { 50% { transform: scale(1.35); } }
  @keyframes ovs-thump { 0% { transform: scale(1.5) rotate(8deg); opacity: .2; } 60% { transform: scale(.92) rotate(-6deg); opacity: 1; } }
  @keyframes ovs-swap { from { opacity: 0; transform: translateY(10px); } }

  /* Your wedding: under construction until schedule events link to vendors. */
  .ovw-soon {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 24px; border: 1.5px dashed var(--wk-stroke);
    border-radius: 18px;
  }
  .ovw-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--wk-sand);
    color: var(--wk-on-sand); font-size: 13px; font-weight: 700; line-height: 18px;
  }
  .ovw-badge i { font-size: 16px; }
  .ovw-text { flex: 1 1 280px; min-width: 0; margin: 0; font-size: 14px; line-height: 20px; color: var(--wk-body); }
  @media (prefers-reduced-motion: reduce) {
    .ovs-key, .ovs-stamp.needs .ovs-seal::after, .ovs-stamp.landed .ovs-seal, .ovs-text { animation: none; }
    .ovs-seal, .ovv-tile, .ovn-btn { transition: none; }
    .ovs-stamp:hover .ovs-seal, .ovv-tile:hover, .ovn-btn:hover { transform: none; }
    .ovs-stamp.booked:hover .ovs-seal { transform: rotate(-4deg); }
    .ovs-row { scroll-behavior: auto; }
  }
  /* A pin: the Pinterest mark in its corner, and its board's name over a shade on hover or focus. */
  .ovv-mark {
    position: absolute; left: 10px; bottom: 10px; display: grid; place-items: center; width: 24px; height: 24px;
    border-radius: 50%; background: #fff; color: #e60023; font-size: 15px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
  }
  .ovv-cap {
    position: absolute; inset: auto 0 0; padding: 28px 10px 12px 42px; overflow: hidden; color: #fff;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.55)); font-size: 12px; font-weight: 600; line-height: 16px;
    white-space: nowrap; text-overflow: ellipsis; opacity: 0; transition: opacity 0.15s ease;
  }
  .ovv-pin:is(:hover, :focus-visible) .ovv-cap { opacity: 1; }
  .ovv-pin:focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { .ovv-cap { transition: none; } }
  .ovv-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 24px; border-radius: 24px;
    background: var(--wk-off); text-align: center;
  }
  .ovv-empty-title { margin: 0; font-family: var(--wk-display); font-size: 26px; font-weight: 400; line-height: 29px; color: var(--wk-ink); }
  .ovv-empty-text { margin: 0; font-size: 15px; line-height: 23px; color: var(--wk-body); }
  .ovv-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
  .ovv-btns .p-btn { border-color: var(--wk-card); }
  .ovv-upload { margin: 0; font-size: 12px; font-weight: 500; color: var(--wk-body); }
  .ovv-upload:empty { display: none; }

  :is(.ovl-link, .ovl-toggle, .ovr-row, .ovr-mark, .ovr-all, .ovr-notes-open, .ovr-notes-new, .ovt-open, .ovn-btn, .ovs-stamp, .ovs-scroll button):focus-visible {
    outline: 3px solid var(--wk-ink); outline-offset: 2px;
  }
  .ovl-item:not(.open) .ovl-toggle:focus-visible { outline-offset: -3px; }
  /* Not now and the link sit beside the card's buttons when the card has room for all three. */
  @container (min-width: 460px) {
    .ovl-panel .ov-card > .p-btns { grid-column: 1; }
    .ovl-panel .ov-card > .p-btns + .ov-foot { grid-column: 2; margin: 0; }
  }
  .ovt-tile.ink .ovt-open:focus-visible { outline-color: var(--wk-on-navy); }
}
@media (min-width: 1024px) {
  .ovd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: stretch; }
  .ovt { flex: 1 1 auto; max-height: 350px; }
}
/* 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; }
/* Invite your team: a short line with Invite someone on the right of it, like an Add costs row. */
.su-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.su-inline .su-btn { flex: none; }
.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); }
/* Done and Removed open other lists rather than heading a month: they read at a row's size (15px, 500), like the
   removed tasks under them, not a month's. */
:is(.ck-done-row, .ck-removed) .ck-month-title { font-size: 15px; font-weight: 500; 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); }
/* The task's name opens the whole task: drawn as text, with a taller hit area that stays inside the card, so the
   focus ring hugs the name. */
.ck-parent-open {
  position: relative; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.ck-parent-open::before { content: ''; position: absolute; inset: -8px 0; }
.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-display); font-size: 34px; font-weight: 400; }
.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; }
/* Several booked at once: one row each, its name and its own Upload. */
.ck-cele-contracts { align-self: stretch; margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ck-cele-contracts li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ck-cele-contracts span { min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; color: var(--wk-ink); }
.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-parent-open, .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; }
/* Group by: Month or Task, a two-way pill beside the filters. */
.ck-by { display: inline-flex; align-items: center; gap: 4px; }
.ck-by-label { margin-right: 6px; font-size: 13px; font-weight: 500; color: var(--wk-body); }
.ck-by-pick {
  min-height: 36px; padding: 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: 500; cursor: pointer;
}
.ck-by-pick[aria-pressed="true"] { border-color: var(--wk-ink); background: var(--wk-ink); color: var(--wk-card); font-weight: 600; }
.ck-by-pick:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.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: calc(var(--wk-side) / 2); }   /* centred beside the sidebar or the rail */
  .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; }

/* Desktop (Figma "Desktop · Widths", 2555:44394): from 860 up the checklist and Completed tasks drop the screen's 960
   and the page's 640 caps for one column up to 1120 wide with 40px gutters. The undo bar sits 24px up, centred on the
   content beside the sidebar like the app's toast. */
@media (min-width: 860px) {
  :is(#s-timeline-detail, #s-completed) { max-width: none; }
  :is(#s-timeline-detail, #s-completed) > .p-page { max-width: calc(1120px + 2 * 40px); padding-inline: 40px; }
  #s-timeline-detail .ck-undo-slot { bottom: 24px; margin-left: calc(var(--wk-side) / 2); }
  #s-timeline-detail .ck-picking .ck-undo-slot { bottom: 110px; }
}
/* 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); }
/* The whole task's tick sits before its progress, the size of a subtask's: its circle on the column's edge, and
   the rest of its 44px target over the gap. */
.ck-task-progress { display: flex; align-items: center; gap: 12px; padding-top: 6px; }
.ck-task-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ck-task-progress .p-check-hit { position: relative; z-index: 1; justify-items: start; margin: -11px -22px -11px 0; }
.ck-task-progress .p-check { width: 22px; height: 22px; }
.ck-task-progress .p-check i { font-size: 14px; }
.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 it. The status ticks with the same circle; its button sits with Ask Wickette 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 { 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; }
/* An open subtask (Monday 13361632668): its why as a short lead, its tips, where its date came from,
   then its button with Ask Wickette beside it, and its notes. */
.ck-step-why { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--wk-body); }
.ck-task .ck-step-tips { align-self: stretch; gap: 8px; padding: 12px 14px; border-radius: 16px; }
.ck-step-source { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; line-height: normal; color: var(--wk-muted); }
.ck-step-source i { flex: none; font-size: 14px; }
.ck-step-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* 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-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); }
/* With the task's own button and Ask Wickette, the pair stays together and Add subtasks goes under it. */
.ck-task-actions:has(> :nth-child(3)) > .ck-add-subs { order: 1; flex-basis: 100%; }

/* 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-cost { gap: 16px; }
.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); }

/* Desktop: the task page's column, as the checklist's (checklist.css). */
@media (min-width: 860px) {
  #s-task { max-width: none; }
  #s-task > .p-page { max-width: calc(1120px + 2 * 40px); padding-inline: 40px; }
  #s-task .ck-undo-slot { bottom: 24px; margin-left: calc(var(--wk-side) / 2); }
}
/* 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); }

/* Desktop: Add a task's column, as the checklist's (checklist.css). */
@media (min-width: 860px) {
  #s-task-add { max-width: none; }
  #s-task-add > .p-page { max-width: calc(1120px + 2 * 40px); padding-inline: 40px; }
}
/* 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.weekend { background: var(--wk-wash); }
/* Tabler draws this glyph larger in its box than the frame's icon. */
.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-pick:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* Desktop: Tailor's column, as the checklist's (checklist.css). */
@media (min-width: 860px) {
  #s-tailor { max-width: none; }
  #s-tailor > .p-page { max-width: calc(1120px + 2 * 40px); padding-inline: 40px; }
}
/* The question after a tick, on the celebration card (screens/checklist/AskAfterTick.tsx): a soft box like
   the card's "Got their contract?", with chips to tap, a white field when it takes words, then Save and Skip. */
.ck-ask {
  display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 14px 16px; box-sizing: border-box; border-radius: 18px;
  background: var(--wk-track); text-align: left;
}
.ck-ask-q { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--wk-ink); }
.ck-ask-sub { margin: 2px 0 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--wk-ink); }
.ck-ask .p-chip { max-width: 100%; box-sizing: border-box; text-align: left; overflow-wrap: anywhere; }
.ck-ask .p-chip[aria-expanded='true'] { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); font-weight: 600; }
.ck-ask-field { background: var(--wk-card); }
.ck-ask-field.money { display: flex; align-items: baseline; gap: 2px; font-size: 16px; color: var(--wk-ink); }
.ck-ask .p-error { margin: 0; }
.ck-ask-foot { display: flex; align-items: center; gap: 16px; }
.ck-ask-foot .p-btn { min-width: 88px; }

/* A card with a question can be taller than a small phone: it scrolls inside the dimmed page, opening at
   its top (Celebration.tsx), and nothing in it shrinks to fit. */
.ck-cele-card:has(.ck-ask) { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.ck-cele-card:has(.ck-ask) > * { flex-shrink: 0; }
/* A decision task's page (Figma 46a deciding, 46b decided; PL-40/41 from 1024): the options card, where everyone
   leans, Decide and the decision card, on plan.css and task.css. On the palette.css tokens, so dark mode follows; the
   frames' #f7f7f9 card is mixed from tokens as task.css's tips are. Plus the checklist row's plum eyebrow. */
.dc-caption { margin: 0; font-size: 12px; line-height: 1.4; color: var(--wk-muted); }

/* Options: a radio, the name, its line and price; whoever leans that way on the right; the quote under it. */
.dc-options { padding: 0 18px; border-radius: 24px; }
/* One grid for every option, so the initials column (and on a desktop the prices before it) line up row to row. */
.dc-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.dc-opt {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start;
  padding: 16px 0; border-top: 1px solid var(--wk-hair);
}
.dc-opt:first-child { border-top: 0; }
.dc-pick {
  display: grid; grid-template-areas: 'radio name' '. line' '. price'; grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 13px; align-items: start; width: 100%; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font: inherit; line-height: normal; text-align: left;
}
.dc-opt.bare .dc-pick { grid-template-areas: 'name' 'line' 'price'; grid-template-columns: minmax(0, 1fr); }
button.dc-pick { cursor: pointer; }
.dc-pick .p-radio { grid-area: radio; }
.dc-opt-name { grid-area: name; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.dc-opt-line { grid-area: line; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--wk-muted); overflow-wrap: anywhere; }
.dc-opt-price { grid-area: price; margin-top: 4px; font-size: 12px; font-weight: 500; }
.dc-leans { display: flex; gap: 4px; }
.dc-leans .p-avatar { width: 24px; height: 24px; font-size: 9px; }
.dc-quote {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 0; padding-left: 33px;
  font-size: 13px; font-weight: 600; line-height: normal; color: var(--wk-ink);
}
.dc-opt.bare .dc-quote { padding-left: 0; }
.dc-quote-link {
  position: relative; padding: 0; border: 0; background: none; color: var(--wk-plum); font: inherit; cursor: pointer;
}
.dc-quote-link::after { content: ''; position: absolute; inset: -13px -8px; }
.dc-add {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0; border: 0;
  border-top: 1px solid var(--wk-hair); background: none; color: var(--wk-ink); font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer;
}
.dc-add i { font-size: 16px; }

/* Where you each lean: a row per person, then where that leaves them and Compare these two. */
.dc-lean-card {
  display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 24px;
  background: color-mix(in srgb, var(--wk-track) 60%, var(--wk-card));
}
.dc-lean-rows { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dc-lean-rows li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--wk-muted); }
.dc-lean-rows .p-avatar { width: 28px; height: 28px; font-size: 10px; }
.dc-lean-rows b { font-weight: 600; color: var(--wk-ink); }
.dc-lean-note { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--wk-muted); }
.dc-compare { align-self: flex-start; margin-top: 2px; }

.dc-decide { display: flex; flex-direction: column; gap: 8px; }
.dc-decide-btn { width: 100%; }
.dc-decide-btn:disabled { cursor: default; }
.dc-helper { margin: 0; font-size: 12px; line-height: 1.4; color: var(--wk-muted); }

/* Your decision: the pick on a lime tick, who and when, What changed with lime dots, then its two buttons. */
.dc-decided { display: flex; flex-direction: column; padding: 18px; border-radius: 24px; }
.dc-picked { display: flex; align-items: flex-start; gap: 12px; }
.dc-tick {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--wk-lime); color: var(--wk-on-lime);
}
.dc-tick i { font-size: 16px; }
.dc-decided.fresh .dc-tick { animation: dc-tick .32s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes dc-tick { from { transform: scale(.4); } to { transform: none; } }
.dc-picked-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.dc-picked-name { margin: 0; font-size: 17px; font-weight: 600; line-height: normal; color: var(--wk-ink); overflow-wrap: anywhere; }
.dc-picked-name:focus:not(:focus-visible) { outline: none; }
.dc-picked-by { margin: 0; font-size: 13px; line-height: normal; color: var(--wk-muted); }
.dc-changed { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--wk-hair); }
.dc-changed-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--wk-muted); }
.dc-changed ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.dc-changed li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.4; color: var(--wk-ink); overflow-wrap: anywhere; }
.dc-changed li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--wk-lime);
}
.dc-changed b { font-weight: 600; }
.dc-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.dc-actions > .p-btn { width: 100%; }
.dc-actions > .p-btn.line { border-color: var(--ck-outline, var(--wk-stroke)); }

:is(.dc-pick, .dc-quote-link, .dc-add):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 8px; }

/* The checklist row: a plum eyebrow over the task's name, and a circle that opens the task (lime once decided). */
.ck-row-eyebrow { font-size: 11px; font-weight: 500; line-height: normal; color: var(--wk-plum); }
.ck-decision.on > .p-check { border-color: var(--wk-lime); background: var(--wk-lime); color: var(--wk-on-lime); }

/* PL-40/41: each price on its option's first line, Decide and the decided buttons hugging their labels, and Notes
   before Related on your checklist. */
@media (min-width: 1024px) {
  .dc-pick { grid-template-areas: 'radio name price' '. line .'; grid-template-columns: 20px minmax(0, 1fr) auto; }
  .dc-opt.bare .dc-pick { grid-template-areas: 'name price' 'line .'; grid-template-columns: minmax(0, 1fr) auto; }
  .dc-opt-price { margin: 0 0 0 16px; justify-self: end; font-size: 13px; }
  .dc-decide-btn { align-self: flex-start; width: auto; }
  .dc-actions { flex-direction: row; flex-wrap: wrap; }
  .dc-actions > .p-btn { width: auto; }
  .dc-page > .ck-rows { order: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-decided.fresh .dc-tick { animation: none; }
}
/* Attire per person: the question sheet and the "For Caroline · Wedding dress · Change" line (screens/checklist/Attire*.tsx). */

/* The line sits under an attire task's title, set like the "handled by" line (checklist.css .ck-handled). */
.ck-attire-line {
  display: flex; align-items: flex-start; gap: 5px; margin: 0; padding-top: 2px; font-size: 13px; font-weight: 500;
  line-height: 1.35; color: var(--wk-on-sand);
}
.ck-attire-line i { margin-top: 1px; font-size: 13px; }
.ck-attire-change {
  position: relative; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--wk-ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ck-attire-change::after { content: ''; position: absolute; inset: -12px -8px; }
.ck-attire-change:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 4px; }

/* The question: the action sheets' white card of rows, each a choice with its radio at the end. */
.ck-attire-choice .p-radio { margin-left: 4px; }
.ck-attire-choice[aria-checked='true'] .p-icon-disc { background: var(--wk-wash); }
/* The vendor picker an email button opens (screens/checklist/VendorPicker.tsx): the Oct 26 action sheets'
   card of rows (task.css .ck-menu), with a check at the end of each row when several can be picked. */
#vendor-picker .p-check { flex: none; }
#vendor-picker .p-tag { flex: none; }
#vendor-picker .p-tag i { font-size: 13px; }
#vendor-picker .vp-go:disabled { cursor: default; }
#vendor-picker .ck-menu[aria-busy='true'] { cursor: progress; }
/* 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-display); font-size: 26px; font-weight: 400; 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); }

/* Break down by on the split (Breakouts.tsx): the Guest list's pill and menu in the card's head, the ring's hint
   under it, and the other breakouts as the Guest list's number row (money, so smaller), a share list or a table. */
.fin-split-top { flex-wrap: wrap; row-gap: 8px; }
.fin-break { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fin-split-hint { align-self: center; margin-top: -8px; }
.fin-brk { display: flex; flex-direction: column; gap: 14px; }
.fin-brk-bar { display: flex; gap: 2px; height: 12px; overflow: hidden; border-radius: 6px; background: var(--fin-track); }
.fin-brk-bar > span { flex: none; width: var(--w); height: 100%; background: var(--hue); }
.fin-brk-bar > :is(.est, .misc, .buffer) { background: color-mix(in srgb, var(--hue) 40%, transparent); }
.fin-brk-list { margin: 0; padding: 0; list-style: none; }
.fin-brk-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 48px; align-items: center; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--wk-hair); font-size: 13px; line-height: 18px; color: var(--wk-ink);
}
.fin-brk-item:first-child { border-top: 0; }
.fin-brk-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.fin-brk-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-brk-share { text-align: right; color: var(--wk-muted); font-variant-numeric: tabular-nums; }
.fin-brk-foot, .fin-brk-lead { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
.fin-brk-foot.over { color: var(--wk-plum); }
.fin-brk-empty { margin: 0; padding: 24px 0; font-size: 13px; line-height: 19px; text-align: center; color: var(--wk-muted); }
.fin-brk-row { --sn-size: 36px; padding-block: 12px 4px; }
.fin-brk-row.three { --sn-size: 26px; }
.fin-brk-row.desk { --sn-size: 44px; }
.fin-brk-row.desk.three { --sn-size: 32px; }
.fin-brk-row .sn-cell { justify-content: flex-start; }
.fin-brk-row .fin-stand-dot { flex: none; }
.fin-brk-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; color: var(--wk-ink); }
.fin-brk-table :is(th, td) { padding: 8px 0 8px 12px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.fin-brk-table :is(th, td):first-child { padding-left: 0; font-weight: 600; text-align: left; }
.fin-brk-table thead th { padding-block: 0 6px; font-size: 12px; font-weight: 600; color: var(--wk-muted); }
.fin-brk-table tbody tr { border-top: 1px solid var(--wk-hair); }
.fin-brk-gap { width: 36px; color: var(--wk-muted); }
.fin-brk-table tr.above .fin-brk-gap { font-weight: 600; color: var(--wk-plum); }

/* 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-display); font-size: 32px; font-weight: 400; 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-wrap; overflow-wrap: anywhere; text-align: start; cursor: pointer;
}
.fin-back::after { content: ''; position: absolute; inset: -12px -8px; }
.fin-page-title { margin: 0; font-family: var(--wk-display); font-size: 38px; font-weight: 400; 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-display); font-size: 44px; font-weight: 400; 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-display); font-weight: 400; 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-save-wait { margin: 0; font-size: 13px; font-weight: 500; color: var(--wk-muted); }
.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-display); font-size: 28px; font-weight: 400; line-height: 1.15; }
.fin-hidden { display: flex; flex-direction: column; gap: 10px; }

/* Desktop. Budget (2528:44193, over budget 2528:42184): from 1024 the split on the left; where it stands, Ways to
   save and the ways in on the right; then the categories as a table. Below 1024 the phone list and buttons stay. */
@media not all and (min-width: 1024px) {
  :is(.fin-desk-actions, .fin-table-wrap) { display: none; }
}
@media (min-width: 1024px) {
  #s-budget :is(.fin-rows-card, .fin-cats > .fin-add-link, .fin-ways-in, .fin-save-ask > .fin-pill-btn) { display: none; }
  .fin-top-side { --desk-gap: 16px; }
  .fin-desk-actions { display: flex; flex-direction: column; gap: 16px; }
  .fin-desk-btns { display: flex; flex-wrap: wrap; gap: 10px 12px; }
  .fin-desk-btns .fin-pill-btn { width: auto; min-height: 42px; padding: 0 18px; }
  .fin-desk-actions .fin-ways-cap { text-align: left; }
  #s-budget .fin-cats > .fin-chips { margin-top: 10px; }

  .fin-table-wrap { display: flex; flex-direction: column; gap: 12px; }
  .fin-table-card { overflow: hidden; border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-card); }
  .fin-table { width: 100%; table-layout: fixed; border-collapse: collapse; color: var(--wk-ink); }
  .fin-table :is(th, td) {
    box-sizing: border-box; padding: 14px 8px; font-size: 13px; font-weight: 500; line-height: normal; text-align: left; vertical-align: middle;
  }
  .fin-table :is(th, td):first-child { padding-left: 16px; }
  .fin-table :is(th, td):last-child { padding-right: 16px; }
  .fin-table thead th { padding-block: 12px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--wk-muted); }
  .fin-table tbody tr { border-top: 1px solid var(--wk-hair); }
  .fin-t-status { width: 13%; }
  .fin-t-budget { width: 12.1%; }
  .fin-t-spent { width: 10.4%; }
  .fin-t-money { width: 11.25%; }
  .fin-t-go { width: 40px; }
  .fin-t-name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
  .fin-t-name i { font-size: 13px; color: var(--wk-muted); }
  .fin-t-detail { display: block; margin-top: 4px; font-size: 12px; color: var(--wk-muted); }
  .fin-t-detail.alert { color: var(--fin-alert); }
  .fin-table .fin-row-bar { margin-top: 4px; }
  .fin-t-amt { display: block; font-size: 14px; font-weight: 700; }
  .fin-t-kind { display: block; margin-top: 2px; font-size: 11px; color: var(--wk-muted); }
  .fin-t-unset, .fin-table td > [aria-hidden='true'] { color: var(--wk-muted); }
  .fin-pill-tag.cushion { background: var(--wk-wash); color: var(--wk-moss); }
  .fin-pill-tag.used { background: var(--fin-alert-wash); color: var(--fin-alert); }
  .fin-table tr.open { cursor: pointer; }
  .fin-table tr.open:hover { background: color-mix(in srgb, var(--wk-ink) 3%, transparent); }
  .fin-t-open {
    display: grid; place-items: center; width: 32px; height: 32px; margin: -8px; padding: 0; border: 0; border-radius: 8px;
    background: none; color: var(--wk-muted); cursor: pointer;
  }
  .fin-t-open i { font-size: 16px; }
  .fin-t-open:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 0; }
}

/* Ways to save (2528:43138): the Ask button beside the title, then the ideas and Worth paying for in two balanced
   columns, in reading order. */
@media (min-width: 1024px) {
  #s-waystosave .fin-page > .fin-stack-16 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; }
  #s-waystosave .fin-page > .fin-stack-16 > :is(.fin-back, #waystosave-content) { grid-column: 1 / -1; }
  #s-waystosave .fin-back { justify-self: start; }
  #s-waystosave .fin-more { width: auto; min-height: 42px; padding: 0 20px; }
  #waystosave-content { display: block; columns: 2; column-gap: 24px; }
  #waystosave-content > * { margin-bottom: 16px; break-inside: avoid; }
  #waystosave-content > :is(.fin-save-sum, .fin-cats-head, .fin-save-empty, .fin-save-wait) { column-span: all; }
}

/* Adjust allocation (2528:42530): the buffer, the chips and Balance budget on the left, the categories on the
   right; the empty last row of the left column takes whatever the categories card is taller by. */
@media (min-width: 1024px) {
  #s-allocation .fin-page > .fin-stack-16 {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(6, auto) 1fr auto;
    gap: 16px 24px; align-items: start;
  }
  #s-allocation .fin-stack-16 > :is(.fin-back, .fin-page-title, .fin-page-lead) { grid-column: 1 / -1; }
  #s-allocation .fin-back { justify-self: start; }
  #s-allocation .fin-stack-16 > :is(.fin-buffer, .fin-chips, .fin-balance) { grid-column: 1; }
  #s-allocation .fin-alloc-card { grid-column: 2; grid-row: 4 / span 4; }
  #s-allocation .fin-done { grid-column: 1 / -1; grid-row: 8; flex-direction: row; flex-wrap: wrap; padding-top: 16px; gap: 16px; }
  #s-allocation .fin-done .p-error { flex-basis: 100%; }
  #s-allocation .fin-done .fin-pill-btn { width: auto; min-height: 44px; padding: 0 20px; }
  #s-allocation .fin-page-lead { max-width: 680px; }
  #s-allocation .fin-balance .fin-pill-btn { align-self: flex-start; width: auto; min-height: 43px; padding: 0 20px; }
}

/* A lite sheet follows the desktop dialogs: rounded and centred from 1024, the full height and square from 860. */
@media (min-width: 1024px) { .p-sheet.lite { border-radius: 28px; } }
@media (min-width: 860px) and (max-width: 1023px) { .p-sheet.lite { border-radius: 0; } }

@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): Settings, 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 Settings; 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-list { padding: 0; }
.pf-list > li:first-child > .p-row { border-top: 0; }
.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-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;
}

/* Settings (Figma 3908:60654, 3913:19784): rows of 13px padding with the frame's line heights, a muted 16px chevron
   and 36px gray discs. */
#s-account .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; }

/* Settings' page: the serif title, two groups (This wedding, You) under serif headings, and sections split by
   hairlines. A section's name and lead sit above its rows on a phone and in a 280px column beside them from 1024. */
.st-page > .p-back { margin-bottom: 30px; }
.st-page > .p-title { margin: 0; }
#s-account .p-row-main > span { display: block; }
.st-group { margin-top: 36px; }
.st-group-title { margin: 0 0 4px; font-family: var(--wk-display); font-size: 24px; line-height: 1.2; font-weight: 400; color: var(--wk-ink); }
.st-section { gap: 6px; padding: 22px 0; }
.st-section + .st-section { border-top: 1px solid var(--wk-hair); }
.st-side { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.st-name { margin: 0; font-size: 13px; font-weight: 600; line-height: normal; color: var(--wk-ink); }
.st-name:focus { outline: none; scroll-margin-top: 16px; }
.st-lead { margin: 0; font-size: 12px; line-height: 17px; color: var(--wk-muted); }
/* "When a guest RSVPs": how often, as a menu where the other rows have a switch. */
.pf-pick { position: relative; flex: none; display: inline-flex; align-items: center; }
.pf-pick select {
  appearance: none; -webkit-appearance: none; margin: 0; min-height: 36px; padding: 0 32px 0 14px; border: 1px solid var(--wk-stroke);
  border-radius: 999px; background: var(--wk-card); font: inherit; font-size: 14px; font-weight: 600; color: var(--wk-ink); cursor: pointer;
}
.pf-pick select:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.pf-pick i { position: absolute; right: 12px; font-size: 14px; color: var(--wk-ink); pointer-events: none; }
.st-group-lead { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.st-invite { margin-top: 12px; }
.st-body { min-width: 0; }

/* Label | value rows with hairlines between. A row that changes is a button: a chevron on a phone; on a desktop a
   tint on hover and an underlined word at its end (Edit only on hover; Add, Delete, Leave and Show always). */
.st-list { margin: 0; padding: 0; list-style: none; }
.st-list > li + li > .st-row { border-top: 1px solid var(--wk-hair); }
.st-row {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 47px; padding: 12px 0;
  box-sizing: border-box; border: 0; background: none; color: var(--wk-ink); font: inherit; text-align: left;
}
.st-key { flex: none; width: 100px; font-size: 14px; line-height: normal; color: var(--wk-muted); }
.st-row.wide .st-key { flex: 1; width: auto; }
.st-key.st-title { font-size: 15px; font-weight: 600; color: var(--wk-ink); }
.st-val {
  flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-size: 15px; font-weight: 500; line-height: normal; color: var(--wk-ink); overflow-wrap: anywhere;
}
.st-val.empty { font-weight: 400; color: var(--wk-muted); }
.st-stale { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--wk-plum); }
.st-chev { flex: none; font-size: 16px; line-height: 1; color: var(--wk-muted); }
button.st-tap { cursor: pointer; }
.st-tap:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 12px; }
.st-act { flex: none; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--wk-ink); visibility: hidden; }
.st-act.on, .st-tap:hover .st-act, .st-tap:focus-visible .st-act { visibility: visible; }
.st-tap > * { position: relative; }
.st-tap::before { content: ''; position: absolute; inset: 0 -12px; border-radius: 12px; background: var(--wk-ground); opacity: 0; transition: opacity .15s; }
.st-tap:hover::before { opacity: 1; }
.st-tap:hover, .st-list > li:has(> .st-tap:hover) + li > .st-row { border-top-color: transparent; }

/* A row edited in place: the fields where the value was, Cancel and Save at its end, and anything to say under it. */
.st-edit { flex-wrap: wrap; padding: 6px 0; }
.st-fields { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.st-stack { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.st-edit-btns { flex: none; display: flex; gap: 8px; }
.st-below { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; padding: 0 0 8px 112px; box-sizing: border-box; }
.st-below > .p-error, .st-below > .p-callout { margin: 0; }
.st-input {
  min-width: 0; height: 42px; padding: 0 14px; box-sizing: border-box; border: 1.5px solid var(--wk-ink); border-radius: 12px;
  background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 15px; font-weight: 500;
}
.st-fields > input.st-input { flex: 1; max-width: 360px; }
.st-input::placeholder { color: var(--wk-muted); font-weight: 400; opacity: 1; }
.st-input:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.st-fields .p-chips { margin: 4px 0; }

/* The date: a field that opens the picker under it (Day, Month or Season, then the calendar, months or seasons). */
.st-date-wrap { position: relative; }
.st-date { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.st-date.empty { color: var(--wk-muted); font-weight: 400; }
.st-date i { font-size: 18px; color: var(--wk-ink); }
.st-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 5; display: flex; flex-direction: column; gap: 12px;
  width: 296px; padding: 16px; box-sizing: border-box; border: 1px solid var(--wk-hair); border-radius: 20px;
  background: var(--wk-card); box-shadow: var(--wk-shadow);
}
.st-pop-head { display: flex; align-items: center; justify-content: space-between; }
.st-pop-title { font-size: 15px; font-weight: 600; color: var(--wk-ink); }
.st-pop-step {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--wk-ink); cursor: pointer;
}
.st-pop-step:hover { background: var(--wk-ground); }
.st-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.st-cal th { padding: 0 0 6px; font-size: 11px; font-weight: 500; color: var(--wk-muted); }
.st-cal td { padding: 1px 0; text-align: center; }
.st-day, .st-cell {
  padding: 0; border: 0; background: none; color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.st-day { width: 36px; height: 36px; border-radius: 50%; }
.st-grid { display: grid; gap: 6px; }
.st-grid.months { grid-template-columns: repeat(3, 1fr); }
.st-grid.seasons { grid-template-columns: repeat(2, 1fr); }
.st-cell { min-height: 40px; border-radius: 12px; }
:is(.st-day, .st-cell):hover { background: var(--wk-ground); }
:is(.st-day, .st-cell)[aria-pressed='true'] { background: var(--wk-btn); color: var(--wk-on-navy); }
:is(.st-day, .st-cell, .st-pop-step, .st-date):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.st-pop-unsure { align-self: center; min-height: 32px; font-size: 13px; font-weight: 500; color: var(--wk-body); text-decoration: underline; text-underline-offset: 3px; }

/* The foot: Sign out, and Privacy and terms in small muted words. */
.st-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; padding: 22px 0 8px;
  border-top: 1px solid var(--wk-hair);
}
.st-signout, .st-legal { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.st-signout { font-size: 15px; font-weight: 500; color: var(--wk-ink); }
.st-legal { font-size: 13px; color: var(--wk-muted); text-decoration: underline; text-underline-offset: 3px; }
:is(.st-signout, .st-legal):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* A desktop: wider labels, bigger section names, and from 1024 the name and lead beside the rows. */
@media (min-width: 860px) {
  .st-group { margin-top: 44px; }
  .st-group-title { font-size: 32px; }
  .st-group-lead { font-size: 14px; line-height: 20px; }
  .st-section { padding: 30px 0; }
  .st-name { font-size: 16px; }
  .st-lead { font-size: 14px; line-height: 20px; color: var(--wk-body); text-wrap: pretty; }
  .st-key { width: 104px; }
  .st-below { padding-left: 116px; }
}
@media (min-width: 1024px) {
  .st-section { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .st-side { padding-top: 12px; }
}

/* 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; }

/* On a desktop (Figma 2528:37502): from 1024 the header spans the page, the style card takes the left column and the
   board the right. */
@media (min-width: 1024px) {
  #s-vision .vb-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; align-items: start; }
  #s-vision :is(.vb-back, .vb-head) { grid-column: 1 / -1; }
  #s-vision .vb-back { justify-self: start; }
}
/* Notifications (Figma "Notifications" and the Overview's "Since you were last here"): a glass
   back button, the serif title and one list (opening it reads everything, so it has no Mark all as read). 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-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 desktop list (2528:37362): Today and Earlier, each a card of rows; "Notify me about" beside it from 1024
   (3054:49577) and under it from 860 to 1023. The panel's rows are the Profile's (profile.css). */
@media (min-width: 860px) {
  #s-notifications .nt-page { padding-top: 40px; }
  .nt-cols { display: flex; flex-direction: column; gap: 40px; }
  .nt-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
  .nt-group { display: flex; flex-direction: column; gap: 10px; }
  .nt-group-name { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
  .nt-group .nt-list { padding: 0 16px; border: 1px solid var(--wk-line); border-radius: 20px; background: var(--wk-card); }
  .nt-notify {
    display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--wk-line); border-radius: 20px;
    background: var(--wk-card);
  }
  #s-notifications .nt-notify .pf-list { padding: 0; }
  .nt-notify .p-error { margin: 4px 0 0; }
  .nt-settings {
    align-self: flex-start; min-height: 32px; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--wk-plum);
    font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; cursor: pointer;
  }
  .nt-settings:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
}
@media (min-width: 1024px) {
  .nt-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
/* 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-display); font-size: 24px; line-height: 29px; font-weight: 400; 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 sheets' forms (phone, delete) and the plum Delete my account. On plan.css and the palette.css
   tokens, so dark mode follows. */
.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); }
/* 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-display); font-size: 22px; font-weight: 400; 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 {
  align-self: flex-end; 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; }
/* In place of the ask bar while AI is off for this person. */
.cx-aioff { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 22px; background: var(--wk-plum-wash); }
.cx-aioff p { margin: 0; font: 400 14px/20px var(--wk-sans); color: var(--wk-ink); }
.cx-aioff b { font-weight: 700; }
.cx-aioff-btn { align-self: flex-start; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--wk-btn); color: var(--wk-on-btn); font: 600 14px/18px var(--wk-sans); cursor: pointer; }
.cx-aioff-btn:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.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;
}
:is(.cx-icon, .cx-x, .cx-chip, .cx-attach, .cx-mic, .cx-send, .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-display); font-size: 38px; font-weight: 400; 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-failed { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.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 { font-size: 13px; line-height: 18px; color: var(--wk-muted); overflow-wrap: anywhere; }
.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-display); font-size: 24px; font-weight: 400; 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; }


/* On a desktop ("Desktop · Widths", 2555:44394) the full screen and Past chats take the column, up to 1120 with 40px
   gutters (2529:35364, 2529:35480); the sheet is 600 and centred from 1024 (2529:35182) and the full height below. */
@media (min-width: 860px) {
  :is(#s-braindump .cx, #s-pastchats .pc) {
    max-width: calc(var(--wk-desk-col) + 2 * var(--wk-desk-gutter)); box-sizing: border-box; padding-inline: var(--wk-desk-gutter);
  }
  #s-braindump :is(.cx-head, .cx-thread, .cx-dock) { padding-inline: 0; }
  #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; max-width: 600px; margin: auto; height: min(640px, calc(100dvh - 48px)); border-radius: 24px; }
  .cs-sheet[open] { animation: none; }
}
@media (min-width: 860px) and (max-width: 1023px) {
  .cs-sheet { margin: 0 auto; height: 100dvh; min-height: 0; max-height: 100dvh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-chip, :is(#s-braindump, #chat-sheet, .br-review) .cx-check::before { transition: none; }
  .cs-sheet[open] { animation: none; }
}
/* A change Talk to Wickette offers (screens/chat/ConfirmCard.tsx), from the designers' "break this task down"
   frames (3393:19015 in the sheet, 3397:55342 on a desktop) on the palette.css tokens, so dark mode follows: a
   white card with a hairline edge, its title in small muted type, numbered steps on lime-wash discs, then the lime
   button and an outlined Edit first. Frame values kept: 15/17/15/19 padding, 22px discs, 14/19 names over 12/16
   details, 45px buttons 8px apart. The frames draw only the list; a change's before and after, Done, and the card
   that only opens the thing use the same type. The frames' owner avatars aren't drawn: a card carries no owner. */
.cc {
  align-self: stretch; min-width: 0; box-sizing: border-box; padding: 15px 17px 15px 19px; border: 1px solid var(--wk-hair);
  border-radius: 16px; background: var(--wk-card); box-shadow: var(--wk-shadow); color: var(--wk-ink);
  font-family: var(--wk-sans); overflow-wrap: anywhere;
}
.cc-title { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
.cc-rows { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.cc-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.cc-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wk-wash); color: var(--wk-moss); font-size: 12px; font-weight: 600; line-height: 15px;
}
.cc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-name { margin: 0; font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); }
.cc-detail { margin: 0; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
/* A change: what it is, then the value it had and the one it gets. */
.cc-change { flex-direction: column; align-items: flex-start; gap: 2px; }
.cc-was { font-weight: 500; color: var(--wk-muted); }
.cc-change .ti-arrow-right { margin: 0 6px; font-size: 14px; color: var(--wk-muted); vertical-align: -2px; }
.cc-source { margin: 2px 0 0; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }

.cc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 15px; }
.cc-btn {
  min-height: 45px; padding: 0 16px; 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; text-align: center; cursor: pointer;
  transition: transform .12s ease;
}
.cc-btn.line { min-height: 47px; border: 1px solid var(--wk-stroke); background: var(--wk-card); color: var(--wk-body); }
.cc-btn:active:not([aria-disabled='true']) { transform: scale(.97); }
.cc-btn[aria-disabled='true'] { opacity: .6; cursor: wait; }
.cc-note { margin: 12px 0 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-body); }
.cc-actions .cc-note { margin: 0 4px 0 0; }
.cc-problem { margin: 12px 0 0; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-plum); }

/* Made: Done, and Undo while it's the newest reply. */
.cc-done { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.cc-said { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-moss); }
.cc-said i { font-size: 16px; }
.cc-done .k-link[aria-disabled='true'] { opacity: .6; cursor: wait; }
:is(.cc-btn, .cc-said):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .cc-btn { transition: 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) + var(--fx-bar, 48px) + 12px); }
#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 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-display); font-size: 33px; line-height: 36px; font-weight: 400; 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;
}

/* ---- 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-heart, .fx-ghost, .fx-btn, .fx-textbtn, .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-display); font-size: 28px; line-height: 1.15; font-weight: 400; 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; }
/* The place search (vendors/sheets/PlaceField) on the stage: its label over a dark box rather than inside a white one. */
#s-feed .fx-where .wl-field {
  display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
#s-feed .fx-where .wl-field label { margin-top: 6px; font-size: 14px; font-weight: 600; color: #fff; }
#s-feed .fx-where .wl-field input {
  width: 100%; min-height: 48px; margin: 0; 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-where .wl-field input::placeholder { color: rgba(255, 255, 255, .7); }
#s-feed .fx-where .wl-field input:focus-visible { border-color: var(--wk-lime); box-shadow: 0 0 0 2px rgba(207, 232, 58, .45); }
#s-feed .fx-where :is(.k-map-credit, .wl-none) { color: var(--fx-ink-2); }
#s-feed :is(.fx-err, .fx-where .p-error) { 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-display); font-size: 36px; line-height: 1.05; font-weight: 400; }
#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-display); font-size: 32px; line-height: 1.08; font-weight: 400; 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-display); font-size: 26px; line-height: 1.15; font-weight: 400; }
#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) {
  /* Cream (EX-3 to EX-6), and white while the board is up (SP-3, SP-13); the sticky bar takes the same --fx-ground. */
  #s-feed { --fx-ground: var(--wk-ground); max-width: none; height: 100dvh; overflow-y: auto; background: var(--fx-ground); color: var(--wk-ink); }
  #s-feed:has(#feed-grid) { --fx-ground: var(--wk-paper); }
  #s-feed .fx-root {
    position: relative; inset: auto; overflow: visible; max-width: 1240px; min-height: 100%; margin: 0 auto; padding: 0 28px 48px;
  }
  #s-feed :is(.fx-btn, .fx-textbtn, .fx-tbtn, .fx-chipbtn, .fx-undo-btn, .fx-heart):focus-visible {
    outline: 3px solid var(--wk-ink); outline-offset: 2px;
  }
  #s-feed :is(.fx-err, .fx-where .p-error) { color: var(--wk-plum); }

  /* The board (SP-3, SP-13): borderless tiles, 20 apart and 26 down, 22 under the bar. FeedGrid.tsx measures each
     tile's name and meta line (in .fx-probe, at the column's width) before placing it, so their line heights are the
     frame's whole pixels: 10 + a 25 name + 2 + 16 a meta line. */
  #s-feed .fx-gridwrap { padding-top: 22px; }
  #s-feed .fx-grid { position: relative; }
  #s-feed .fx-probe { position: absolute; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
  #s-feed .fx-tile { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; border-radius: 18px; outline: none; }
  #s-feed .fx-tile:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 3px; }
  #s-feed .fx-tile-photo { position: relative; overflow: hidden; border-radius: 18px; background: var(--wk-track); }
  #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%;
  }
  /* Over the photo the colours are fixed, as the photo is the same in dark mode. */
  #s-feed .fx-tile .fx-tags { position: absolute; top: 12px; left: 12px; right: 62px; }
  #s-feed .fx-tile .fx-cat { gap: 4px; padding: 5px 10px; font-size: 12px; line-height: 16px; font-weight: 600; background: #fff; color: var(--fx-night); }
  #s-feed .fx-tile .fx-cat i { font-size: 13px; }
  #s-feed .fx-tile-save {
    position: absolute; z-index: 2; top: 12px; right: 12px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 50%; background: #fff; color: var(--fx-night); cursor: pointer; box-shadow: 0 1px 3px rgba(20, 27, 60, .16);
  }
  /* Hover or keyboard focus shows a shade and Save and Not for us at the photo's foot. The credit sits beside them where
     it fits (SP-13) and wraps above them where it doesn't (SP-3); at rest it's alone in the corner. */
  #s-feed .fx-tile-photo::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; opacity: 0;
    background: linear-gradient(to top, rgba(20, 27, 60, .5), rgba(20, 27, 60, 0)); transition: opacity .15s var(--fx-ease-out);
  }
  #s-feed .fx-tile-foot {
    position: absolute; z-index: 2; left: 12px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap-reverse; align-items: flex-end;
    justify-content: flex-end; gap: 8px; pointer-events: none;
  }
  #s-feed .fx-tile-acts { display: none; gap: 8px; margin: 0 auto 4px 0; pointer-events: auto; animation: fx-fade .15s var(--fx-ease-out); }
  #s-feed .fx-tile.fx-kbd .fx-tile-acts { display: flex; }
  #s-feed .fx-tile.fx-kbd .fx-tile-photo::after { opacity: 1; }
  @media (hover: hover) {
    #s-feed .fx-tile:hover .fx-tile-acts { display: flex; }
    #s-feed .fx-tile:hover .fx-tile-photo::after { opacity: 1; }
  }
  /* A touch tablet can't hover: the pills stay on every tile, so Not for us is a tap away there too. */
  @media (hover: none) {
    #s-feed .fx-tile .fx-tile-acts { display: flex; }
    #s-feed .fx-tile .fx-tile-photo::after { opacity: 1; }
  }
  #s-feed .fx-tile-pill {
    padding: 8px 16px; border: 0; border-radius: 999px; background: var(--wk-lime); color: var(--fx-night);
    font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; cursor: pointer;
  }
  #s-feed .fx-tile-pill[aria-pressed="true"] { background: var(--fx-night); color: var(--wk-lime); }
  #s-feed .fx-tile-pass { padding: 8px 14px; background: #fff; }
  #s-feed .fx-tile :is(.fx-tile-save, .fx-tile-pill):focus-visible { outline: 3px solid var(--fx-night); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
  /* The credit keeps the app's navy wash (not the frame's bare white), so it reads on a white photo too. */
  #s-feed .fx-tile .fx-pcredit { max-width: 100%; }
  #s-feed .fx-tile-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 2px 0; }
  #s-feed .fx-tile-name {
    margin: 0; font-family: var(--wk-serif); font-size: 21px; line-height: 25px; font-weight: 500; color: var(--wk-ink); overflow-wrap: break-word;
  }
  #s-feed .fx-tile-open {
    display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; outline: none;
  }
  #s-feed .fx-tile .fx-tile-open::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 18px; }
  #s-feed .fx-tile .fx-tile-open:focus-visible::after { outline: 3px solid var(--wk-ink); outline-offset: 3px; }
  #s-feed .fx-tile-meta { margin: 0; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--wk-muted); overflow-wrap: break-word; }
  #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); }
  /* EX-4, EX-5, EX-6: a message sits in a white card with a hairline border, 118 below the bar, with a navy pill. */
  #s-feed .fx-empty { justify-content: flex-start; padding-top: 118px; }
  #s-feed .fx-paused { padding-top: 197px; }
  #s-feed :is(.fx-empty, .fx-paused) .fx-msg {
    max-width: 560px; gap: 12px; padding: 48px 52px; border: 1px solid var(--wk-line); border-radius: 22px; background: var(--wk-paper);
  }
  #s-feed :is(.fx-empty, .fx-paused) .fx-msg-title { font-size: 34px; }
  #s-feed :is(.fx-empty, .fx-paused) .fx-msg-body { font-size: 16px; line-height: 1.5; color: var(--wk-body); }
  #s-feed :is(.fx-empty, .fx-paused) .fx-msg-actions .fx-btn:not(.ghost) { background: var(--wk-btn); color: var(--wk-paper); border-color: var(--wk-btn); }
  #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-where .wl-field label { color: var(--wk-ink); }
  #s-feed .fx-where .wl-field input { background: var(--wk-card); color: var(--wk-ink); border-color: var(--wk-grip); }
  #s-feed .fx-where .wl-field input::placeholder { color: var(--wk-muted); }
  #s-feed .fx-where .wl-field input:focus-visible { border-color: var(--wk-ink); box-shadow: 0 0 0 2px var(--wk-wash); }
  #s-feed .fx-where .k-map-credit { color: var(--wk-muted); }
  #s-feed .fx-where .wl-none { color: var(--wk-body); }

  #s-feed .fx-undo {
    position: fixed; left: calc(var(--wk-side) + (100vw - var(--wk-side)) / 2); right: auto; bottom: 24px; transform: translateX(-50%);
    width: max-content; max-width: min(560px, calc(100vw - var(--wk-side) - 40px));
  }
  #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; }
  /* No swipe on a desktop: ‹ and › page the photos, over the dialog's edge. */
  #s-feed .fx-strip-wrap { position: relative; }
  #s-feed .fx-strip-btn {
    position: absolute; top: 50%; z-index: 1; width: 36px; height: 36px; margin-top: -20px; 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; box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  }
  #s-feed .fx-strip-btn.prev { left: -18px; }
  #s-feed .fx-strip-btn.next { right: -18px; }
  #s-feed .fx-strip-btn:disabled { opacity: .4; cursor: default; }
  #s-feed .fx-strip-btn:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

  /* A vendor's details (2527:34850): 720 wide, 40 clear above and below; the header stays at the top and the
     bar with Draft an inquiry at the bottom while the rest scrolls between them. Photos are 216 × 200 with
     their arrows inside the strip. */
  #s-feed #feed-sheet { max-width: 720px; max-height: calc(100dvh - 80px); }
  #s-feed #feed-sheet .fx-detail { padding: 0 24px; }
  #s-feed #feed-sheet .fx-sheet-head, #s-feed #feed-sheet .fx-detail-bar {
    position: sticky; z-index: 3; margin-inline: -24px; background: var(--wk-paper);
  }
  #s-feed #feed-sheet .fx-sheet-head { top: 0; margin-bottom: 4px; padding: 24px 24px 15px; border-bottom: 1px solid var(--wk-line); }
  #s-feed #feed-sheet .fx-sheet-head .fx-tags { padding-right: 40px; }
  #s-feed #feed-sheet .fx-sheet-meta { margin: 0; }
  #s-feed #feed-sheet .fx-x { top: 16px; right: 16px; width: 32px; height: 32px; font-size: 15px; }
  #s-feed #feed-sheet .fx-strip { gap: 12px; margin: 0; padding: 0; scroll-padding-inline: 0; }
  #s-feed #feed-sheet .fx-strip img { width: 216px; height: 200px; min-width: 0; max-width: none; }
  #s-feed #feed-sheet .fx-strip-btn { width: 32px; height: 32px; margin-top: -16px; font-size: 16px; }
  #s-feed #feed-sheet .fx-strip-btn.prev { left: 8px; }
  #s-feed #feed-sheet .fx-strip-btn.next { right: 8px; }
  #s-feed #feed-sheet .fx-detail-bar {
    bottom: 0; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 21px 24px 20px;
    border-top: 1px solid var(--wk-line);
  }
  #s-feed #feed-sheet .fx-detail-bar .fx-ctas { padding-top: 0; }
}
/* From 860 to 1023 the details take the window's full height ("Desktop · Widths"). */
@media (min-width: 860px) and (max-width: 1023px) {
  #s-feed #feed-sheet { height: 100dvh; max-height: 100dvh; margin: 0 auto; border-radius: 0; }
}

/* 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 { transition: none; }
  #s-feed .fx-burst { display: none; }
}

/* Report this listing (Report.tsx). */
#s-feed .fx-report-open { align-self: flex-start; color: var(--wk-muted); font-size: 14px; }
#s-feed .fx-report { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--wk-stroke); border-radius: 16px; background: var(--wk-card); }
#s-feed .fx-report fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#s-feed .fx-report legend { font-size: 15px; font-weight: 700; color: var(--wk-ink); margin-bottom: 6px; }
#s-feed .fx-report-opt { display: flex; gap: 10px; align-items: flex-start; min-height: 36px; padding: 6px 0; font-size: 14px; color: var(--wk-body); cursor: pointer; }
#s-feed .fx-report-opt input { margin-top: 3px; accent-color: var(--wk-ink); }
#s-feed .fx-report-label { font-size: 14px; font-weight: 600; color: var(--wk-ink); }
#s-feed .fx-report textarea { min-height: 88px; padding: 10px 12px; border: 1.5px solid var(--wk-stroke); border-radius: 12px; font: inherit; font-size: 16px; color: var(--wk-ink); background: var(--wk-card); }
#s-feed .fx-report-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#s-feed .fx-report-done { margin: 0; font-size: 14px; color: var(--wk-body); }
/* 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, the Where and 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-display); font-size: 30px; line-height: 1.1; font-weight: 400; }
#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); }

/* Vendors named like what's typed, under the field: a white card of hairline rows (kit.css's look) with
   the store icon, 12px below the field, and the label over it when a few share the name. No frame draws
   this state (annotation A1 describes it). */
#s-feed .fx-adv-vendors { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
#s-feed .fx-adv-same { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); }
#s-feed .fx-adv-vendors ul {
  margin: 0; padding: 0 16px; list-style: none; border: 1px solid var(--wk-line); border-radius: 16px; background: var(--wk-card);
}
#s-feed .fx-adv-vendors li + li { border-top: 1px solid var(--wk-line); }
#s-feed .fx-adv-vendors button {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 10px 0; border: 0; background: none;
  color: var(--wk-ink); font: inherit; font-size: 14px; line-height: 20px; text-align: left; cursor: pointer;
}
#s-feed .fx-adv-vendors button i { flex: none; font-size: 18px; color: var(--wk-plum); }
#s-feed .fx-adv-vendors button span { min-width: 0; overflow-wrap: anywhere; }

/* Where: a chip per place, navy with a tick when on, then + Another place, which turns into the place
   search (screens/vendors/sheets/PlaceField.tsx) with its suggestions and credit under the chips. A broad
   place asks for an area on a lime wash, as Where's the wedding? does. */
#s-feed .fx-places { display: flex; flex-wrap: wrap; gap: 8px; }
#s-feed .fx-place {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 36px; padding: 7px 14px; border-radius: 18px;
  border: 1px solid var(--wk-line); background: var(--wk-card); color: var(--wk-ink); font: inherit; font-size: 13px; font-weight: 500;
  line-height: 18px; text-align: left; overflow-wrap: anywhere; 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-place i { flex: none; font-size: 15px; }
#s-feed .fx-place[aria-pressed="true"] { background: var(--wk-ink); border-color: var(--wk-ink); color: var(--wk-on-navy); }
#s-feed .fx-place[aria-disabled="true"] { cursor: default; }
#s-feed .fx-place-home { font-weight: 400; }
#s-feed .fx-place-add { border: 1px dashed var(--wk-edge); color: var(--wk-plum); box-shadow: none; }
#s-feed .fx-places > .wl-combo { flex: 1 1 100%; min-width: 0; }
#s-feed .fx-places .wl-chip.typing { min-height: 36px; padding: 0 14px; border-radius: 18px; }
#s-feed .fx-places .wl-chip.typing:focus-within { box-shadow: 0 0 0 3px var(--wk-wash); }
#s-feed .fx-places .wl-chip.typing input { max-width: 100%; }
#s-feed .fx-place-broad { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--wk-wash); }
#s-feed .fx-place-ask { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
#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, .fx-place:not([aria-disabled="true"])):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-place, .fx-adv-apply, .fx-adv-recent button,
  .fx-adv-vendors 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; }

/* Desktop (EX-8, EX-9): centred, 640 wide with 20 inside, a ✕ in the top corner over the title and Reset,
   and no grabber or footer: the backdrop, Escape and the ✕ close it. */
@media (min-width: 860px) {
  #s-feed .fx-adv { margin: 68px auto auto; border-radius: 24px; }
  #s-feed .fx-adv .fx-sheet-in { padding: 20px; }
  #s-feed .fx-adv-head { padding-top: 41px; }
  #s-feed .fx-adv .fx-x { top: 16px; right: 16px; width: 32px; height: 32px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  #s-feed :is(.fx-what-btn, .fx-what-chev, .fx-drive, .fx-place, .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's bar over the feed (FeedBar.tsx): the search field, the saved button and the notices under
   them. A phone floats them over the card on glass (Feed 2026-10-08); desktop pins one white field and
   the saved circle over the board (SP-3, SP-13), with a filter in the field (EX-10). The field's line
   names every place searched, so it wraps rather than cuts. */
#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; white-space: normal; overflow-wrap: anywhere; }
#s-feed .fx-scoped .fx-searchfield { padding: 8px 48px 8px 16px; font-weight: 600; }
#s-feed .fx-clear {
  position: absolute; top: calc(50% - 20px); 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 :is(.fx-searchfield, .fx-clear, .fx-saved, .fx-notice-btn):focus-visible { outline: 3px solid var(--wk-lime); outline-offset: 2px; }

/* A category that failed, today's searches used up, or a search to wait for. */
#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;
}

/* Places left out or still searching: quiet rather than alerts, on navy over a phone's photo. */
#s-feed .fx-place-notes {
  display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 8px 12px; list-style: none; border-radius: 16px;
  background: rgba(20, 27, 60, .9); color: #fff; font-size: 13px; line-height: 18px;
}
#s-feed .fx-place-notes li { display: flex; align-items: flex-start; gap: 8px; }
#s-feed .fx-place-notes i { flex: none; font-size: 16px; line-height: 18px; color: var(--wk-lime); }

/* Desktop: the bar stays at the top of the page as the board scrolls, on the page's own ground (explore.css's
   --fx-ground), 20 above the field and 14 under it to the hairline; the field takes the row beside the saved
   circle (930 at 1280, 842 at 1024). Its words are the muted ink of the frames until a filter puts the search
   in them. */
@media (min-width: 860px) {
  #s-feed .fx-top {
    position: sticky; top: 0; z-index: 20; gap: 10px; padding: 20px 0 14px; pointer-events: auto; background: var(--fx-ground);
    border-bottom: 1px solid var(--wk-line);
  }
  #s-feed .fx-bar { gap: 10px; }
  #s-feed .fx-searchfield, #s-feed .fx-saved {
    border-color: var(--wk-line); background: var(--wk-card); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  #s-feed .fx-searchfield { color: var(--wk-muted); line-height: 20px; transition: border-color .15s ease; }
  #s-feed .fx-scoped .fx-searchfield { color: var(--wk-ink); font-weight: 400; }
  #s-feed .fx-searchfield svg { color: var(--wk-muted); }
  #s-feed .fx-saved { color: var(--wk-ink); transition: border-color .15s ease; }
  #s-feed .fx-clear { color: var(--wk-ink); transition: background-color .15s ease; }
  @media (hover: hover) and (pointer: fine) {
    #s-feed :is(.fx-searchfield, .fx-saved):hover { border-color: var(--wk-grip); }
    #s-feed .fx-clear:hover { background: var(--wk-track); }
  }
  #s-feed :is(.fx-searchfield, .fx-clear, .fx-saved, .fx-notice-btn):focus-visible { outline-color: var(--wk-ink); }

  #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-place-notes { padding: 0; border-radius: 0; background: none; color: var(--wk-body); font-size: 14px; line-height: 20px; }
  #s-feed .fx-place-notes i { line-height: 20px; color: var(--wk-muted); }
}

@media (prefers-reduced-motion: reduce) {
  #s-feed :is(.fx-searchfield, .fx-saved, .fx-clear) { transition: 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 board's first two rows, tiles rising in a few at a time. The bones are the tiles' own shapes
   (a photo with radius 18, the name and one meta line) in #EFEBE2, the owners' note on Desktop UX (2557:42795). */
@media (min-width: 860px) {
  #s-feed { --fx-bone: #EFEBE2; --fx-shine: rgba(255, 255, 255, .55); }
  /* In dark mode the bones are the dark surface's own track, not a light cream. */
  :root[data-theme='dark'] #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); }
  /* The board's columns (masonry.ts columnsFor): 2, then 3 from 1024 and 4 from 1280, 20 apart, rows 26 apart. */
  #s-feed .fx-skel-grid .fx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; align-items: start; }
  @media (min-width: 1024px) { #s-feed .fx-skel-grid .fx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1280px) { #s-feed .fx-skel-grid .fx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  #s-feed .fx-skel-tile { display: flex; flex-direction: column; }
  #s-feed .fx-skel-tile .fx-skel-photo { aspect-ratio: 4 / 5; border-radius: 18px; }
  #s-feed .fx-skel-tile:nth-child(3n + 2) .fx-skel-photo { aspect-ratio: 1.05; }
  #s-feed .fx-skel-tile:nth-child(4n + 3) .fx-skel-photo { aspect-ratio: .64; }
  #s-feed .fx-skel-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 2px 0; }
  #s-feed .fx-skel-tile .fx-skel-name { width: 66%; height: 20px; margin: 0; border-radius: 6px; }
  #s-feed .fx-skel-tile .fx-skel-meta { width: 88%; height: 11px; margin: 0; }
  #s-feed .fx-tile-in { animation: fx-tile-in .32s var(--fx-ease-out) backwards; }
}

@media (min-width: 860px) and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) #s-feed { --fx-bone: var(--wk-track); --fx-shine: color-mix(in srgb, var(--wk-card) 75%, transparent); }
}

/* Reduced motion keeps the bones still: the fades and the step bar's steps stay, the shimmer and the movement go. */
@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-display); font-size: 28px; line-height: 1.05; font-weight: 400; 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 swiping left from the right one (taps on the sides work too). */
#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-sweep { position: absolute; left: 42px; top: 63.6%; animation: fx-walk-sweep 2s var(--fx-ease-out) infinite; }
@keyframes fx-walk-sweep {
  0% { transform: none; opacity: 0; } 12% { opacity: 1; } 62% { transform: translateX(-96px); opacity: 1; }
  80%, 100% { transform: translateX(-96px); opacity: 0; }
}

/* 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-sweep, .fx-walk-tap2, .fx-walk-burst, .fx-walk-next) { animation: none; transition: none; }
  #s-feed .fx-walk-ring circle { animation: none; stroke-dashoffset: 25; }
}
/* How Explore works (EX-2, Intro.tsx): a white card over the dimmed board, a serif title, three points with
   lime dots and a navy Got it. */
#s-feed .fx-intro {
  width: min(480px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 0; border: 0; border-radius: 24px;
  background: var(--wk-paper); color: var(--wk-ink); box-shadow: 0 24px 60px rgba(20, 27, 60, .18);
}
#s-feed .fx-intro::backdrop { background: rgba(20, 27, 60, .32); }
#s-feed .fx-intro-in { padding: 32px; }
#s-feed .fx-intro-title { margin: 0 0 18px; font-family: var(--wk-display); font-size: 34px; line-height: 1.1; font-weight: 400; }
#s-feed .fx-intro-list { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 12px; }
#s-feed .fx-intro-list li { position: relative; padding-left: 20px; font-family: var(--wk-sans); font-size: 16px; line-height: 22px; }
#s-feed .fx-intro-list li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--wk-lime);
}
#s-feed .fx-intro-ok {
  min-height: 44px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--wk-btn); color: var(--wk-paper);
  font-family: var(--wk-sans); font-size: 15px; font-weight: 600; cursor: pointer;
}
#s-feed .fx-intro-ok:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 3px; }
/* Explore's serif numbers (the owners' note "Numbers font change (Oct 23)", Desktop UX 3209:50536): every digit set in
   the serif comes from Cormorant Infant, whose numbers sit evenly on the line, while words stay in Cormorant Garamond.
   A face limited to 0–9 sits in front of the serif inside Explore only; the rest of the app is unchanged. */
@font-face {
  font-family: 'Wickette Serif Digits'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyPU44g9vKiM1sORYSiWeAsLN997_cV2RkDTq8.woff2) format('woff2');
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: 'Wickette Serif Digits'; font-style: italic; font-weight: 500; font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/Hhy8U44g9vKiM1sORYSiWeAsLN997_IP1zv1ljKnOa3nIz_QvjprlVa3ezpwYQ.woff2) format('woff2');
  unicode-range: U+0030-0039;
}
#s-feed { --wk-serif: 'Wickette Serif Digits', 'Cormorant Garamond', Georgia, serif; }
/* 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; }
button.vd-empty-icon { padding: 0; border: 0; font: inherit; cursor: pointer; }
.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-add-cat {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; padding: 0; border: 0;
  background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--wk-plum); cursor: pointer;
}
.vd-add-cat i { font-size: 16px; }
.vd-add-cat:focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; }
.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; }

/* A computer (2529:35777): the categories in two columns 24 apart from 1024, 22 between the categories as on a phone.
   The gallery's tiles go three and four across, as Explore's cards do, rather than growing to half the page. */
@media (min-width: 1024px) {
  .vd-cols { --desk-gap: 22px; }
  .vd-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .vd-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 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, :is(#edit-vendor-sheet, #edit-money-sheet) .p-sheet-top { margin-bottom: 16px; }
#add-vendor-sheet .p-sheet-body, :is(#edit-vendor-sheet, #edit-money-sheet) .p-sheet-body { margin-top: 16px; }
/* + New category, under the category picker. */
.av-new-cat { align-self: flex-start; min-height: 44px; margin: -6px 0; font-size: 13px; }
.av-new-cat i { font-size: 15px; }
.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-bar-top.opens { cursor: pointer; }
.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-display); font-size: 38px; line-height: 36px; font-weight: 400; 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 its column, the two vendors sharing it. */
.vc-card { overflow: hidden; border: 1px solid var(--wk-hair); border-radius: 24px; background: var(--wk-card); box-shadow: var(--wk-shadow); }
.vc-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vc-col-label { width: 78px; }
.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-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.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; }

/* 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-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: the page takes the desktop column, the vendors' labels the frame's 140 (2529:37485), and the tray sits
   24 from the bottom, with no tab bar to clear. */
@media (min-width: 860px) {
  .vc-table:not(.vc-places) .vc-col-label { width: 140px; }
  .vc-picker { padding-bottom: 24px; }
  .vc-tray { bottom: 24px; }
}
/* From 1024 (2529:37485) the table and Wickette's read sit side by side in equal halves, the note and Swap a vendor
   under both; with no read the table takes the width. The picker's vendors go two across, as cards do from 1024. */
@media (min-width: 1024px) {
  .vc-page:not(.vc-picker) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; row-gap: 22px; align-items: start;
  }
  .vc-page:not(.vc-picker) > * { grid-column: 1 / -1; }
  .vc-page:not(.vc-picker) > .vc-card { grid-column: 1; }
  .vc-page:not(.vc-picker) > .vc-read-slot { grid-column: 2; }
  .vc-page:not(.vc-picker):has(> .vc-read-slot:empty) > .vc-card { grid-column: 1 / -1; }
  .vc-page:not(.vc-picker) > .vc-back { justify-self: start; }
  .vc-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 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-display); font-size: 38px; line-height: 1.15; font-weight: 400; color: var(--wk-ink);
  overflow-wrap: anywhere; text-wrap: balance;
}
/* No photos: the category's small icon beside the name. */
.vp-name.with-icon { display: flex; align-items: center; gap: 14px; }
.vp-name.with-icon > div { min-width: 0; }
.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-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-display); font-size: 24px; line-height: 1.2; font-weight: 400; 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-display); font-size: 24px; line-height: 1.2; font-weight: 400; 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-display); font-size: 21px; line-height: 1.2; font-weight: 400; 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-display); font-size: 21px; font-weight: 400; 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; flex-wrap: wrap; align-items: center; gap: 16px; }
.vp-form-actions .vp-hide-field { margin-left: auto; color: var(--wk-muted); }
/* Website: the label edits it, Visit opens it. */
.vp-row-edit {
  display: flex; flex: 1; min-width: 0; min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.vp-row-edit .vp-row-main { justify-content: center; }
/* Add a field and Show hidden fields, under the Details card. */
.vp-field-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: -10px; }
.vp-field-links .p-link { min-height: 44px; font-size: 13px; }
.vp-field-links .p-link i { font-size: 15px; }
.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-row-edit, .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, .vp-row-edit):hover .vp-row-label, button.vp-tl-item:hover .vp-tl-title { text-decoration: underline; text-underline-offset: 3px; }
}

/* From 1024 (2529:36976): Next step, Read the contract, Pricing, Timeline, Emails & documents and Notes on the left,
   Details beside them on the right, Add a note under both. There are at most six on the left; Details spans their rows
   and a last 1fr row, which takes whatever Details needs beyond them, so the left column never spreads out. */
@media (min-width: 1024px) {
  .vp-cols { grid-template-rows: repeat(6, auto) 1fr; row-gap: 0; }
  .vp-cols > * { grid-column: 1; margin-bottom: 18px; }
  .vp-cols > .vp-details { grid-column: 2; grid-row: 1 / -1; }
  .vp-cols > :is(.vp-add-note, .vp-note-form) { grid-column: 1 / -1; margin-bottom: 0; }
}

/* 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-display); font-size: 33px; line-height: 36px; letter-spacing: -.66px; font-weight: 400;
  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; }
button.vt-file { gap: 6px; align-items: center; min-height: 32px; border: 0; font-family: inherit; text-align: left; cursor: pointer; }
.vt-locked { gap: 6px; align-items: center; color: var(--wk-body); }
.vt-files-note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--wk-muted); }
.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); }
/* On a computer the thread fills the column; a message keeps a reading measure rather than running 1120 wide. */
@media (min-width: 860px) {
  .vt-body { max-width: 72ch; }
}

/* From their emails: the business a vendor's emails come from, when it isn't the name they're saved under. */
.vp-mailname-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-ink); overflow-wrap: anywhere; }
.vp-mailname .p-error { margin: 8px 0 0; }
/* Prices from a vendor's email: From their email under the vendor's Pricing (the summary card in 2595:17019), and
   Up next's Add to budget sheet (2875:17742 one price, 2852:17652 pick a package). On the palette.css tokens. */

.vp-mailprice { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 10px; border-radius: 20px; background: var(--wk-wash); color: var(--wk-ink); }
.vp-mailprice h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.vp-mp-rows { margin: 0; padding: 0; list-style: none; }
.vp-mp-rows > li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.vp-mp-rows > li + li { border-top: 1px solid color-mix(in srgb, var(--wk-ink) 12%, transparent); }
.vp-mp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vp-mp-main { font-size: 15px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.vp-mp-sub { font-size: 12.5px; line-height: 1.4; color: var(--wk-muted); overflow-wrap: anywhere; }
.vp-mp-price { flex: none; font-size: 14px; font-weight: 600; }
.vp-mp-source {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin: -4px 0 -4px; padding: 0; border: 0;
  background: none; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--wk-ink); text-align: left; cursor: pointer;
}
p.vp-mp-source { min-height: 0; margin: 4px 0 6px; font-weight: 500; color: var(--wk-muted); }
button.vp-mp-source:hover > span { text-decoration: underline; text-underline-offset: 3px; }
button.vp-mp-source:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* Add to budget: a lite sheet, its title over "Ada Films · Photography". */
.p-sheet.lite#ab-sheet .p-sheet-lead { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--wk-muted); }
.p-sheet.lite#ab-sheet .p-sheet-body { margin-top: 22px; }
.ab-form { display: flex; flex-direction: column; gap: 14px; }
.ab-lead { margin: 0; padding: 0; font-size: 13.5px; line-height: 1.45; color: var(--wk-ink); }
.ab-choices { min-width: 0; margin: 0; padding: 0; border: 0; }
.ab-choices > .ab-lead { margin-bottom: 10px; }
.ab-pkgs { display: flex; flex-direction: column; }
.ab-pkg { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 10px 0; box-sizing: border-box; cursor: pointer; }
.ab-pkg + .ab-pkg { border-top: 1px solid var(--wk-hair); }
.ab-pkg:last-child { border-bottom: 1px solid var(--wk-hair); }
.ab-pkg input {
  appearance: none; flex: none; width: 20px; height: 20px; margin: 0; box-sizing: border-box; border: 1.5px solid var(--wk-edge);
  border-radius: 50%; background: var(--wk-card); cursor: pointer;
}
.ab-pkg input:checked { border: 0; background: radial-gradient(circle, var(--wk-card) 3.5px, var(--wk-btn) 4px); }
.ab-pkg input:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.ab-pkg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ab-pkg-name { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--wk-ink); overflow-wrap: anywhere; }
.ab-pkg-sub { font-size: 13px; line-height: 1.4; color: var(--wk-muted); overflow-wrap: anywhere; }
.ab-pkg-price { flex: none; font-size: 15px; font-weight: 500; color: var(--wk-ink); }
.ab-pkg:has(input:checked) .ab-pkg-price { font-weight: 700; }
#ab-sheet .p-field.ab-amount { border-radius: 12px; background: var(--wk-card); }
.ab-money { display: flex; align-items: baseline; gap: 1px; margin-top: 2px; font-size: 16px; line-height: 1.45; color: var(--wk-ink); }
.p-field.ab-amount .ab-money input { flex: 1; width: auto; min-width: 0; margin: 0; }
.ab-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--wk-body); }
.ab-actions { margin-top: 4px; }
.ab-actions .fin-pill-btn.line { border-color: var(--wk-ink); }
.ab-why { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--wk-ink); }
/* 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-display); font-size: 33px; line-height: 36px; font-weight: 400; 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; }
}
/* On a desk the page is the desktop column (chrome.css) and Compose and the Select bar keep to it. */
@media (min-width: 860px) {
  .ix-page { width: 100%; box-sizing: border-box; padding-top: 32px; }
  .ix-dock { bottom: 0; margin-inline: 0; padding-inline: 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-legend { padding: 0; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--wk-body); }
.ix-file-newname { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 4px; }
.ix-file-newname label { font-size: 13px; font-weight: 500; color: var(--wk-body); }
.ix-file-newname input {
  min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--wk-edge); border-radius: 12px;
  background: var(--wk-paper); font: inherit; font-size: 15px; color: var(--wk-ink);
}
.ix-file-newname input:focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
@supports (-webkit-touch-callout: none) { .ix-file-newname input { font-size: 16px; } }
.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. */
/* The top bar (Close, Polish with Wickette, Send) is pinned, so the actions stay in reach under a long message. */
.cm-page { display: flex; flex-direction: column; min-height: 100dvh; box-sizing: border-box; padding: 12px 20px 0; }
.cm-top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6; display: flex; align-items: center; gap: 8px; margin: 0 -20px; padding: 8px 20px 12px;
  background: var(--wk-paper);
}
.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-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cm-quote-head { margin: 0 0 4px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-body); }
.cm-quote-all {
  flex: none; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--wk-ink);
  cursor: pointer;
}
.cm-quote-count { margin: 0 0 8px; font-size: 12px; line-height: 16px; color: var(--wk-body); }
/* The chain: a rail down the left with a dot per email, filled on the one being answered. */
.cm-chain { margin: 0; padding: 0; list-style: none; }
.cm-chain.many { position: relative; padding-left: 18px; }
.cm-chain.many::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 16px; width: 1px; background: var(--wk-line); }
.cm-chain.many .cm-link { position: relative; padding-bottom: 8px; }
.cm-chain.many .cm-link::before {
  content: ''; position: absolute; left: -18px; top: 5px; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--wk-edge); background: var(--wk-paper);
}
.cm-chain.many .cm-link.answering::before { border-color: var(--wk-ink); background: var(--wk-ink); }
.cm-link-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 2px; font-size: 13px; line-height: 18px; }
.cm-link-from { font-weight: 600; }
.cm-link-when { margin-left: auto; color: var(--wk-body); }
.cm-link-tag {
  padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--wk-ink) 7%, transparent); font-size: 11px; font-weight: 600;
  line-height: 16px;
}
.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.one { -webkit-line-clamp: 1; color: var(--wk-body); }
.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; }
}
/* On a desk the footer's hairline keeps to the column like every row's, and the bar that rides a tablet's keyboard
   starts beside the sidebar with its tools over the column. */
@media (min-width: 860px) {
  .cm-page { padding-top: 24px; }
  .cm-foot { bottom: 0; margin-inline: 0; padding-inline: 0; }
  .cm-toolbar.lifted {
    left: var(--wk-side); padding-inline: max(var(--wk-desk-gutter), (100% - var(--wk-side) - var(--wk-desk-col)) / 2);
  }
}

/* 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-display); font-size: 33px; font-weight: 400; 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-file {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; border: 0; background: none;
  font: inherit; color: var(--wk-ink); text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.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;
}

/* On a desk the reply's starters and buttons are as wide as their words. */
@media (min-width: 860px) {
  .ed-starter { flex: none; padding: 4px 18px; }
  .ed-own { align-self: flex-start; padding: 0 24px; }
  .ed-booking-actions button { flex: none; padding: 0 20px; }
}

/* ── 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, .cm-quote-all,
  .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); }

/* 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; }

/* Save to the vendor's documents: a file from the viewer's own Gmail on a vendor thread. */
.dv-save {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--wk-hair); background: var(--wk-paper);
}
.dv-save .p-btn { min-height: 40px; }
.dv-saved { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.dv-save .p-error { flex-basis: 100%; margin: 0; }

/* 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; }
}
/* What do you have so far? (onboarding, the proposed 3608:18953 and 3608:19043 frames): one card, three rows. Each
   row has an icon tile, the title and its help, the circled + on the right, and what the row added nested under
   it, rows split by hairlines. 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). */
.br-box { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--wk-edge); border-radius: 20px; background: var(--wk-card); }
.br-row { min-width: 0; }
.br-row ~ .br-row { border-top: 1px solid var(--wk-edge); }   /* ~: each row's sheet sits between them */
.br-row-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.cg-bring .br-row-head { align-items: flex-start; }
.br-tile {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 20px; background: var(--wk-track);
  color: var(--wk-ink); font-size: 20px;
}
.br-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.br-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font: 600 15px/20px var(--wk-sans); color: var(--wk-ink); outline: none; }
.br-row-help { margin: 0; font: 400 13px/18px var(--wk-sans); color: var(--wk-muted); }
.br-tag { padding: 3px 8px; border-radius: 999px; background: var(--wk-lime); color: var(--wk-on-lime); font: 600 11px/15px var(--wk-sans); }
.cg-bring .su-actions > button { flex: 1; }   /* Connect goes across the row, as on Home's Connect Gmail card */
.cg-bring .cg-done { margin-top: 8px; }
.br-row-body { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 14px; }

/* The circled +, 36px to see and 44px to hit. Upload's is a real file input over it, so Tab reaches it. */
.br-plus {
  position: relative; flex: none; display: grid; place-items: center; box-sizing: border-box; width: 36px; height: 36px; margin: 0;
  padding: 0; border: 1.5px solid var(--wk-ink); border-radius: 18px; background: var(--wk-card); color: var(--wk-ink); cursor: pointer;
  transition: transform .12s ease;
}
.br-plus::after { content: ''; position: absolute; inset: -4px; }
.br-plus:active { transform: scale(.96); }
.br-file { position: absolute; inset: -4px; z-index: 1; width: calc(100% + 8px); height: calc(100% + 8px); margin: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.br-file::file-selector-button { cursor: pointer; }
.br-plus:has(.br-file:focus-visible) { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .br-plus:hover { background: var(--wk-track); } }

/* 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 booked: a card per vendor. */
.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-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; }
.br-save:active:not(:disabled) { transform: scale(.98); }

/* Who you booked's search: matches under the name, the last row always "Add … yourself". */
.br-picked { font: 400 12px/16px var(--wk-sans); color: var(--wk-moss); }
.br-found { margin: -2px 0 0; padding: 0; list-style: none; border: 1px solid var(--wk-edge); border-radius: 12px; background: var(--wk-card); overflow: hidden; }
.br-found li + li { border-top: 1px solid var(--wk-bar); }
.br-found-row {
  box-sizing: border-box; display: flex; flex-direction: column; gap: 1px; width: 100%; margin: 0; padding: 10px 14px; border: 0;
  background: none; color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer;
}
.ob .br-found-row:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .br-found-row:hover { background: var(--wk-track); } }
.br-found-name { font: 500 14px/19px var(--wk-sans); overflow-wrap: anywhere; }
.br-found-sub { font: 400 12px/16px var(--wk-sans); color: var(--wk-muted); }
.br-found-row.add .br-found-name { font-weight: 600; }

/* 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-plus, .br-save { transition: none; }
}

/* Leaving with a guest list that wasn't added: one question, Add them or Leave without. */
.br-ask { display: flex; flex-direction: column; gap: 10px; }
.br-ask-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.br-ask-actions .ob-skip { width: auto; }
/* 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-display); font-size: 32px; font-weight: 400; 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-display); font-size: 24px; font-weight: 400; 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-display); font-size: 33px; font-weight: 400; 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-display); font-size: 26px; font-weight: 400; 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-display); font-size: 33px; font-weight: 400; 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; }
}
/* The desktop Website (Figma note 3597:58618), from 1024px: the editor's frame and the pieces every part of it shares.
   Each part's own look is in its own sheet (site-desk-*.css). At 1440 (3475:58188): the app's 72 icon rail, then the
   64 editor bar across, and under it the 76 tool rail, the 264 tool panel, the canvas and the 288 inspector. Line
   heights are pinned in px (Manrope runs 1px tall in Chrome). */

/* The editor and Start your site take the window beside the icon rail; the first visit and Using your own site are
   wide pages in the desktop column. */
:root[data-desk="editor"] #s-site.screen { max-width: none; margin: 0; padding: 0; height: 100dvh; overflow: hidden; }
:root[data-desk="editor"] .viewport:has(> #s-site.active) { overflow: hidden; }
:root[data-desk="page"] #s-site.screen { max-width: none; }
:root[data-desk="page"] .viewport:has(> #s-site.active) { background: var(--wk-paper); }
.dk-page {
  max-width: calc(var(--wk-desk-col) + 2 * var(--wk-desk-gutter)); margin: 0 auto; padding: 32px var(--wk-desk-gutter) 48px;
  box-sizing: border-box; font-family: var(--wk-sans); color: var(--wk-ink);
}

.dk {
  display: flex; flex-direction: column; height: 100dvh; min-width: 0; font-family: var(--wk-sans); color: var(--wk-ink);
  background: var(--wk-track);
}
:where(.dk, .dk-dialog) button { font: inherit; color: inherit; cursor: pointer; }
:where(.dk, .dk-dialog) button:disabled { cursor: default; }
.dk-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- the editor bar ---- */
.dk-bar {
  flex: none; display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 20px; box-sizing: border-box;
  background: var(--wk-paper); border-bottom: 1px solid var(--wk-hair);
}
.dk-status {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px; border-radius: 999px;
  background: var(--wk-track); font-size: 13px; line-height: 18px;
}
.dk-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wk-dot); }
.dk-status.draft .dk-status-dot { background: var(--wk-olive); }
.dk-status.live .dk-status-dot { background: #2f8a4c; }
.dk-status-label { font-weight: 700; }
.dk-status-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dk-bar-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; }
.dk-bar-end { display: flex; align-items: center; gap: 8px; }
.dk-saved { margin: 0 8px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); white-space: nowrap; }
.dk-saved.failed { color: var(--wk-plum); }

.dk-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--wk-track); }
.dk-seg-btn {
  min-height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font-size: 13px; font-weight: 600;
  line-height: 18px; color: var(--wk-body);
}
.dk-seg-btn.on { background: var(--wk-btn); color: var(--wk-on-navy); }
.dk-undo { display: inline-flex; gap: 4px; }
.dk-icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--wk-stroke);
  border-radius: 50%; background: var(--wk-paper);
}
.dk-icon-btn i { font-size: 18px; }
.dk-icon-btn:disabled { color: var(--wk-muted); border-color: var(--wk-hair); }
.dk-icon-btn:disabled i { opacity: .55; }

/* Buttons the editor's parts share: navy (the main one), outlined, plain text, lime. */
.dk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 37px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 999px; background: none; font-size: 14px; font-weight: 600; line-height: 19px;
  white-space: nowrap;
}
.dk-btn.navy { background: var(--wk-btn); color: var(--wk-on-navy); }
.dk-btn.line { border-color: var(--wk-edge); background: var(--wk-paper); }
.dk-btn.lime { background: var(--wk-lime); color: var(--wk-on-lime); }
.dk-btn.plain:hover { background: var(--wk-track); }
.dk-btn:disabled { opacity: .55; }
.dk-round {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: var(--wk-track); color: var(--wk-ink);
}
.dk-round i { font-size: 18px; }
:where(.dk, .dk-dialog, .dk-page) :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--wk-ink); outline-offset: 2px;
}

/* ---- the body: rail, panel, canvas, inspector ---- */
.dk-body { flex: 1; display: flex; min-height: 0; }
.dk-rail {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; padding: 12px 0;
  box-sizing: border-box; background: var(--wk-paper); border-right: 1px solid var(--wk-hair); overflow-y: auto;
}
.dk-tool {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 59px; min-height: 56px; padding: 8px 0 6px;
  box-sizing: border-box; border: 0; border-radius: 12px; background: none; color: var(--wk-body);
}
.dk-tool i { font-size: 22px; line-height: 22px; }
.dk-tool-label { font-size: 10px; font-weight: 700; line-height: 12px; letter-spacing: .04em; text-transform: uppercase; }
.dk-tool:hover { background: var(--wk-track); }
.dk-tool.on { background: var(--wk-track); color: var(--wk-ink); }

.dk-panel {
  position: relative; flex: none; width: 264px; background: var(--wk-paper); border-right: 1px solid var(--wk-hair);
  display: flex; flex-direction: column; min-height: 0;
}
.dk-panel-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 24px 32px; box-sizing: border-box; }
.dk-panel-toggle {
  position: absolute; top: 12px; right: -12px; z-index: 3; display: grid; place-items: center; width: 24px; height: 24px;
  padding: 0; border: 1px solid var(--wk-stroke); border-radius: 50%; background: var(--wk-paper); font-size: 16px; line-height: 19px;
}
.dk-panel-toggle.closed { position: relative; top: 12px; right: auto; margin: 0 -12px 0 -12px; align-self: flex-start; }

/* A panel's or inspector's head: a serif title and a line under it, as every tool panel opens. */
.dk-head { margin: 0 0 20px; }
.dk-head-title { margin: 0; font-family: var(--wk-display); font-size: 30px; font-weight: 400; line-height: 36px; color: var(--wk-ink); }
.dk-head-lead { margin: 4px 0 0; font-size: 13px; line-height: 17px; color: var(--wk-muted); }
.dk-group-title {
  margin: 20px 0 8px; font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wk-muted);
}

.dk-canvas { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--wk-track); }

.dk-inspector {
  flex: none; width: 288px; padding: 24px 24px 32px; box-sizing: border-box; overflow-y: auto; background: var(--wk-paper);
  border-left: 1px solid var(--wk-hair);
}
.dk-inspector-open {
  flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 12px; min-height: 36px;
  padding: 0 12px; border: 1px solid var(--wk-stroke); border-radius: 999px; background: var(--wk-paper); font-size: 13px;
  font-weight: 600; line-height: 18px;
}

/* Start your site: the start panel in place of the rail and tool panel. */
.dk-start {
  flex: none; width: 340px; padding: 24px 24px 32px; box-sizing: border-box; overflow-y: auto; background: var(--wk-paper);
  border-right: 1px solid var(--wk-hair);
}

/* ---- dialogs (Dialog.tsx): 600 wide and centred, 760 when wide ---- */
/* legacy.css zeroes every margin, which pins a modal dialog to the corner; auto centres it again. */
.dk-dialog {
  margin: auto; width: min(600px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); padding: 28px 32px; box-sizing: border-box;
  border: 0; border-radius: 20px; background: var(--wk-paper); color: var(--wk-ink); box-shadow: var(--wk-shadow);
  font-family: var(--wk-sans); overflow-y: auto;
}
.dk-dialog.wide { width: min(760px, calc(100vw - 48px)); }
.dk-dialog::backdrop { background: rgba(20, 27, 60, .4); }
.dk-dialog-head { display: flex; align-items: flex-start; gap: 16px; }
.dk-dialog-heading { flex: 1; min-width: 0; }
/* The frames' dialog head (3524:58387): a grey eyebrow, then the title at 34px (fitted to the frame's own width). */
.dk-dialog-eyebrow {
  margin: 0 0 12px; font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wk-muted);
}
.dk-dialog-title { margin: 0; font-family: var(--wk-display); font-size: 34px; font-weight: 400; line-height: 40px; }
.dk-dialog-title:focus { outline: none; }
.dk-dialog-lead { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--wk-body); }
.dk-dialog-body { margin-top: 20px; }
.dk-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

/* From 1024 to 1279 the tool panel and the inspector take turns (state.openTool / openInspector). */
@media (max-width: 1279px) {
  .dk-panel { width: 248px; }
  .dk-inspector { width: 272px; }
  .dk-bar { gap: 10px; padding: 0 14px; }
  .dk-status-sub { display: none; }
}

/* ---- one color's picker (ColorPicker.tsx) ---- */
.dk-pick { padding: 12px 0 4px; }
.dk-pick-title {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wk-muted);
}
.dk-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.dk-swatch {
  width: 28px; height: 28px; padding: 0; border: 1px solid var(--wk-edge); border-radius: 50%; box-sizing: border-box;
}
.dk-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--wk-paper), 0 0 0 4px var(--wk-ink); }
.dk-any { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; cursor: pointer; }
.dk-any-dot {
  width: 28px; height: 28px; border: 1px solid var(--wk-edge); border-radius: 50%; box-sizing: border-box;
  background: conic-gradient(#e8775f, #d4a73a, #3f8a4a, #2f55c4, #6a3d8f, #e8775f);
}
.dk-any input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dk-any:focus-within .dk-any-dot { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.dk-dropper {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--wk-edge);
  border-radius: 50%; box-sizing: border-box; background: var(--wk-paper); color: var(--wk-ink); cursor: pointer;
}
.dk-dropper i { font-size: 16px; }
.dk-hex { display: flex; flex-direction: column; gap: 4px; }
.dk-hex-label { font-size: 12px; font-weight: 600; line-height: 16px; color: var(--wk-body); }
.dk-hex input {
  width: 120px; min-height: 36px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--wk-edge); border-radius: 10px;
  background: var(--wk-paper); color: var(--wk-ink); font: 600 13px/18px var(--wk-sans); text-transform: uppercase;
}
.dk-hex-hint { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
/* Desktop site editor: the canvas (3475:58188, 3476:58188, 3476:58527, 3508:58573, 3496:58288). Inside the frame's
   `.dk-canvas` column: the hint or the selected block's context bar, the page on its card (scrolling), and the page
   strip. The marks drawn over the page (outline, toolbar, height bar, drop line) keep fixed colors, since they sit
   on the couple's design rather than the app's surfaces. Line heights pinned in px (Manrope runs 1px tall in Chrome). */

/* ---- above the page: the hint, or the context bar ---- */
.dkc-top {
  flex: none; position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 70px; padding: 14px 24px; box-sizing: border-box;
}
.dkc-hint {
  margin: 0; font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wk-muted); text-align: center;
}
.dkc-ctl { position: relative; display: flex; justify-content: center; max-width: 100%; }
.dkc-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; min-height: 42px; max-width: 100%;
  padding: 3px 4px; box-sizing: border-box; border: 1px solid var(--wk-hair); border-radius: 12px; background: var(--wk-paper);
  box-shadow: var(--wk-shadow-sm);
}
.dkc-bar .dkc-b, .dkc-bar .p-seg.dkc-seg > button, .dkc-pop .dkc-b {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 34px; padding: 0 11px; border: 1px solid transparent;
  border-radius: 8px; background: none; color: var(--wk-ink); font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap;
}
.dkc-bar .dkc-b:hover, .dkc-bar .p-seg.dkc-seg > button:hover { background: var(--wk-track); }
.dkc-bar .dkc-b[aria-pressed='true'], .dkc-bar .p-seg.dkc-seg > button[aria-checked='true'], .dkc-pop .p-seg.dkc-seg > button[aria-checked='true'] {
  background: var(--wk-btn); color: var(--wk-on-navy); font-weight: 600; box-shadow: none;
}
.dkc-bar .dkc-b.line { border-color: var(--wk-edge); }
.dkc-bar .dkc-b.plum { color: var(--wk-plum); }
.dkc-bar .dkc-b:disabled, .dkc-bar .dkc-b[aria-disabled='true'] { cursor: progress; }
.dkc-b.draft .gate-mark { flex: none; }
.p-seg.dkc-seg { display: inline-flex; gap: 2px; padding: 0; border-radius: 0; background: none; }
.dkc-div { flex: none; align-self: stretch; width: 1px; margin: 6px 4px; background: var(--wk-hair); }

/* Alt text and Photo behind blocks open under the bar. */
.dkc-pop {
  position: absolute; top: calc(100% + 8px); left: 50%; z-index: 5; transform: translateX(-50%); width: 320px;
  padding: 16px; box-sizing: border-box; border: 1px solid var(--wk-hair); border-radius: 14px; background: var(--wk-paper);
  box-shadow: var(--wk-shadow); color: var(--wk-ink); text-align: left;
}
.dkc-pop.wide { width: 340px; }
.dkc-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dkc-pop-title { flex: 1; margin: 0; font-size: 15px; font-weight: 600; line-height: 21px; }
.dkc-pop-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-body); }
.dkc-pop-note { margin: 6px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dkc-pop .dkc-pop-note + .dkc-pop-label { margin-top: 14px; }
.dkc-pop-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dkc-input {
  width: 100%; min-height: 40px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--wk-edge); border-radius: 10px;
  background: var(--wk-paper); color: var(--wk-ink); font: 500 14px/19px var(--wk-sans);
}
.dkc-ticks { margin: 0; padding: 0 4px; list-style: none; border: 1px solid var(--wk-hair); border-radius: 12px; }
.dkc-ticks li + li { border-top: 1px solid var(--wk-hair); }
.dkc-tick {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px; border: 0; background: none;
  text-align: left; color: var(--wk-ink);
}
.dkc-tick-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; line-height: 19px; }
.dkc-tick-box {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid var(--wk-edge);
  border-radius: 6px; font-size: 14px;
}
.dkc-tick[aria-checked='true'] .dkc-tick-box { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
.dkc-pop .p-seg.dkc-seg { display: flex; padding: 3px; border-radius: 10px; background: var(--wk-track); }
.dkc-pop .p-seg.dkc-seg > button {
  flex: 1 1 0; min-height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--wk-ink);
  font-size: 13px; font-weight: 500; line-height: 18px;
}
/* Move and zoom, the bar a photo's bar turns into: a step at a time, and the zoom slider (the budget's, in navy). */
.dkc-move-hint { padding: 0 8px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); white-space: nowrap; }
.dkc-moves { display: inline-flex; gap: 2px; }
.dkc-bar .dkc-moves .dkc-b { justify-content: center; width: 34px; padding: 0; }
.dkc-moves .dkc-b i { font-size: 16px; }
.dkc-bar .dkc-b:disabled:not([aria-disabled]) { cursor: default; opacity: .45; }
.dkc-movebar .dkc-b:disabled:hover { background: none; }
.dkc-zoomrow { display: inline-flex; align-items: center; gap: 10px; padding: 0 8px; }
.dkc-zoomlabel { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-ink); }
.dkc-zoomval { min-width: 38px; font-size: 13px; font-weight: 600; line-height: 18px; text-align: right; color: var(--wk-body); }
.dkc-range {
  --fill: 0%; width: 110px; height: 20px; margin: 0; padding: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.dkc-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--wk-btn) var(--fill), var(--wk-track) var(--fill)); }
.dkc-range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--wk-btn) var(--fill), var(--wk-track) var(--fill)); }
.dkc-range::-webkit-slider-thumb {
  width: 16px; height: 16px; margin-top: -6px; box-sizing: border-box; border: 2px solid var(--wk-btn); border-radius: 50%; background: #fff;
  -webkit-appearance: none; appearance: none;
}
.dkc-range::-moz-range-thumb { width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--wk-btn); border-radius: 50%; background: #fff; }
.dkc-range:focus { outline: none; }
.dkc-range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.dkc-range:focus-visible::-moz-range-thumb { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

/* ---- the page, on its card ---- */
.dkc-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 24px 32px; box-sizing: border-box; }
.dkc-card {
  position: relative; margin: 0 auto; border: 1px solid rgba(20, 27, 60, .1); border-radius: 12px; box-sizing: content-box;
  box-shadow: 0 1px 3px rgba(20, 26, 61, .06); overflow: hidden;
}
.dkc-sheet { position: relative; overflow: hidden; }
.dk-frame { position: absolute; top: 0; left: 0; display: block; border: 0; transform-origin: 0 0; background: transparent; }
.dkc-over { position: absolute; top: 0; left: 0; pointer-events: none; }
.dkc-over > * { pointer-events: auto; }
.dkc-drop {
  display: block; width: calc(100% - 54px); min-height: 48px; margin: 18px 27px 27px; padding: 12px; box-sizing: border-box;
  border: 1.5px dashed rgba(20, 27, 60, .35); border-radius: 10px; background: none; color: #5f6377;
  font: 600 13px/18px var(--wk-sans); cursor: pointer;
}
.dkc-card.mid .dkc-drop { color: #141b3c; border-color: rgba(20, 27, 60, .55); }
.dkc-card.dark .dkc-drop { color: #fff; border-color: rgba(255, 255, 255, .6); }
.dkc-drop:hover, .dkc-drop.over { border-color: #141b3c; background: rgba(20, 27, 60, .05); }
.dkc-card.dark .dkc-drop:hover, .dkc-card.dark .dkc-drop.over { border-color: #fff; background: rgba(255, 255, 255, .08); }
.dk .dkc-drop:focus-visible { outline: 3px solid #141b3c; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }

/* The selected block (3476:58188): a navy outline, and its toolbar in the corner. */
/* The toolbar and a photo's height bar, one group for the keyboard (useCanvas); each is placed on its own. */
.dkc-marks { display: contents; }
.dkc-sel { position: absolute; box-sizing: border-box; border: 2px solid #141b3c; box-shadow: 0 0 0 1px rgba(255, 255, 255, .85); pointer-events: none !important; }
.dkc-tools {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 4px 0 14px; box-sizing: border-box;
  border-radius: 999px; background: #141b3c; color: #fff; box-shadow: 0 6px 16px rgba(20, 28, 61, .22);
}
.dkc-tools-label { margin-right: 6px; font-size: 13px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.dk .dkc-tools button {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff;
}
.dkc-tools button i { font-size: 16px; }
.dkc-tools button:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.dkc-tools button:disabled { opacity: .4; }
.dk .dkc-tools button:focus-visible { outline: 2px solid #cfe83a; outline-offset: -2px; }
.dkc-height {
  position: absolute; z-index: 1; width: 40px; height: 6px; border-radius: 3px; background: #141b3c; box-shadow: 0 0 0 2px #fff;
  cursor: ns-resize; touch-action: none;
}
.dkc-height::after { content: ''; position: absolute; inset: -12px -4px; }
.dk .dkc-height:focus-visible { outline: 3px solid #cfe83a; outline-offset: 2px; }
/* While Move and zoom is open, a drag on the photo moves it in its frame. */
.dkc-pan { position: absolute; cursor: grab; touch-action: none; }
.dkc-pan:active { cursor: grabbing; }

/* Where a dragged block lands (a line with a dot at each end), the dragged block's name following the pointer, and a
   photo block a dropped photo would swap. */
.dkc-line {
  position: absolute; top: 0; left: 8px; right: 8px; height: 4px; margin-top: -2px; border-radius: 2px; background: #141b3c;
  box-shadow: 0 0 0 1.5px #fff; pointer-events: none !important;
}
.dkc-line::before, .dkc-line::after {
  content: ''; position: absolute; top: -3px; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%;
  background: #141b3c; box-shadow: 0 0 0 1.5px #fff;
}
.dkc-line::before { left: -5px; }
.dkc-line::after { right: -5px; }
@media (prefers-reduced-motion: no-preference) {
  .dkc-line { transition: transform .08s ease-out; }
}
.dkc-ghost {
  position: absolute; top: 0; left: 0; z-index: 3; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 10px;
  border-radius: 999px; background: #141b3c; color: #fff; box-shadow: 0 8px 20px rgba(20, 28, 61, .28); font-size: 13px;
  font-weight: 600; line-height: 18px; white-space: nowrap; will-change: transform; pointer-events: none !important;
}
.dkc-ghost i { font-size: 16px; }
.dkc-swap {
  position: absolute; display: grid; place-items: center; box-sizing: border-box; border: 3px solid #141b3c;
  background: rgba(20, 27, 60, .28); pointer-events: none !important;
}
.dkc-swap span {
  padding: 6px 12px; border-radius: 999px; background: #141b3c; color: #fff; font-size: 13px; font-weight: 600; line-height: 18px;
}

/* ---- the page strip (48 tall), with the zoom at its right end ---- */
.dkc-strip {
  flex: none; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px 0 14px; box-sizing: border-box;
  background: var(--wk-paper); border-top: 1px solid var(--wk-hair);
}
.dkc-tabs { flex: 0 1 auto; display: flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 2px; overflow-x: auto; scrollbar-width: none; }
.dkc-tabs::-webkit-scrollbar { display: none; }
.dkc-tabs.more { mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.dkc-tab {
  flex: none; min-height: 31px; padding: 0 11px; border: 1.5px solid transparent; border-radius: 8px; background: none;
  color: var(--wk-body); font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap;
}
.dkc-tab:hover { background: var(--wk-track); }
.dkc-tab[aria-selected='true'] { border-color: var(--wk-ink); background: var(--wk-track); color: var(--wk-ink); font-weight: 700; }
.dkc-tab.off { border-style: dashed; border-color: var(--wk-stroke); color: var(--wk-muted); }
.dkc-tab.off[aria-selected='true'] { border-color: var(--wk-ink); }
.dkc-more {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--wk-edge);
  border-radius: 8px; background: var(--wk-paper);
}
.dkc-more i { font-size: 14px; }
.dkc-zoom { flex: none; margin-left: auto; }
.dkc-zoom select {
  appearance: none; -webkit-appearance: none; min-height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: none;
  color: var(--wk-body); font: 500 13px/18px var(--wk-sans); cursor: pointer;
}
.dkc-zoom select:hover { background: var(--wk-track); }
/* Desktop site editor: the Blocks panel and Template layouts (Figma 3475:58188). Line heights are pinned in px
   (Manrope runs 1px tall in Chrome). The drawings' greys are mixed from the palette, so dark mode follows. */

/* ---- Blocks: three tiles a row, a 66×48 drawing over each name ---- */
.dk-blocks {
  --dkb-edge: var(--wk-grip);
  --dkb-fill: color-mix(in srgb, var(--wk-edge) 48%, var(--wk-paper));
  --dkb-fill-2: color-mix(in srgb, var(--wk-edge) 30%, var(--wk-paper));
  --dkb-fill-3: color-mix(in srgb, var(--wk-edge) 16%, var(--wk-paper));
  --dkb-line: color-mix(in srgb, var(--wk-edge) 72%, var(--wk-paper));
}
.dk-blocks-group .dk-group-title { margin-top: 20px; }
.dk-blocks-group:first-of-type .dk-group-title { margin-top: 0; }
.dk-blocks-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; row-gap: 7px; margin: 0; padding: 0;
  list-style: none;
}
.dk-blocks-tile {
  display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0; border: 0; background: none; text-align: left;
}
.dk-blocks-tile[draggable="true"] { cursor: grab; }
.dk-blocks-tile[draggable="true"]:active { cursor: grabbing; }
.dk-blocks-art {
  display: flex; align-items: center; justify-content: center; gap: 3px; height: 48px; padding: 0 8px; box-sizing: border-box;
  overflow: hidden; border: 1px solid var(--dkb-edge); border-radius: 8px; background: var(--wk-paper);
  transition: border-color .15s;
}
.dk-blocks-tile:hover .dk-blocks-art { border-color: var(--wk-edge); }
.dk-blocks-name { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-ink); overflow-wrap: anywhere; }

/* The drawings: bars, fills and type, sized for the 66 tile and shrinking with it below 1280. */
.dk-blocks-bar { display: block; flex: none; border-radius: 2px; }
.dk-blocks-bar.fill { background: var(--dkb-fill); }
.dk-blocks-bar.fill-2 { background: var(--dkb-fill-2); }
.dk-blocks-bar.fill-3 { background: var(--dkb-fill-3); }
.dk-blocks-bar.line { height: 3px; background: var(--dkb-line); }
.dk-blocks-bar.dark { height: 3px; background: var(--wk-muted); }
.dk-blocks-bar.accent { height: 3px; background: var(--wk-plum); }
.dk-blocks-bar.photo { width: 100%; height: 30px; }
.dk-blocks-bar.half { flex: 1 1 0; height: 30px; }
.dk-blocks-bar.third { flex: 1 1 0; height: 30px; }
.dk-blocks-art.strip { gap: 2px; }
.dk-blocks-bar.rule { flex: 1 1 0; max-width: 20px; }
.dk-blocks-bar.thumb { width: 22px; height: 16px; align-self: flex-start; margin-top: 9px; }
.dk-blocks-col { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; }
.dk-blocks-art.travel { gap: 6px; }
.dk-blocks-art.travel .dk-blocks-col { align-self: flex-start; margin-top: 11px; }
.dk-blocks-col.wide { gap: 8px; }
.dk-blocks-ask { display: flex; align-items: center; gap: 6px; }
.dk-blocks-ask .dk-blocks-bar { flex: 1 1 0; }
.dk-blocks-plus { flex: none; font-size: 9px; font-weight: 700; line-height: 3px; color: var(--wk-muted); }
.dk-blocks-col.form { align-items: center; gap: 3px; }
.dk-blocks-bar.head { width: 22px; margin-bottom: 4px; }
.dk-blocks-bar.field { align-self: stretch; height: 8px; }
.dk-blocks-art.registry { justify-content: flex-start; gap: 3px; padding-right: 0; }
.dk-blocks-bar.gift { width: 18px; height: 15px; border-radius: 3px; }
.dk-blocks-col.count { flex: none; align-items: center; gap: 2px; }
.dk-blocks-bar.short { width: 16px; }
.dk-blocks-aa, .dk-blocks-days, .dk-blocks-mono, .dk-blocks-quote { font-family: var(--wk-serif); color: var(--wk-ink); }
.dk-blocks-aa { font-size: 20px; font-weight: 500; line-height: 24px; }
.dk-blocks-days { font-size: 17px; font-weight: 500; line-height: 20px; }
.dk-blocks-mono { font-size: 15px; font-style: italic; line-height: 18px; color: var(--wk-plum); white-space: nowrap; }
.dk-blocks-quote { font-size: 34px; line-height: 24px; color: var(--wk-plum); transform: translateY(5px); }
.dk-blocks-star { font-size: 21px; line-height: 22px; color: var(--wk-plum); }
.dk-blocks-star.small { flex: none; font-size: 8px; line-height: 8px; }

/* ---- Template layouts: two designs a row, each a 78-tall drawing over its name; the one in use outlined in ink ---- */
.dk-tpl-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 12px; margin: 0; padding: 0;
  list-style: none;
}
.dk-tpl { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.dk-tpl-art {
  position: relative; display: flex; flex-direction: column; align-items: center; height: 78px; padding: 17px 6px 0;
  box-sizing: border-box; overflow: hidden; border: 1px solid var(--wk-grip); border-radius: 8px; background: var(--dkt-bg);
  transition: border-color .15s;
}
.dk-tpl:hover .dk-tpl-art { border-color: var(--wk-edge); }
.dk-tpl[aria-pressed="true"] .dk-tpl-art { padding: 16px 5px 0; border: 2px solid var(--wk-ink); }
.dk-tpl-photo {
  flex: none; width: 56px; max-width: 100%; height: 18px; border-radius: 2px;
  background: color-mix(in srgb, var(--dkt-accent) 25%, var(--dkt-bg));
}
.dk-tpl-names { max-width: 100%; margin-top: 7px; color: var(--dkt-accent); line-height: 18px; text-align: center; overflow-wrap: anywhere; }
.dk-tpl-tag {
  position: absolute; top: 4px; left: 4px; padding: 0 6px; border-radius: 999px; background: var(--wk-plum-wash);
  color: var(--wk-plum); font-family: var(--wk-sans); font-size: 11px; font-weight: 600; line-height: 16px;
}
.dk-tpl-name { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-ink); }

.dk-tpl-covers { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.dk-tpl-cover {
  min-height: 30px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--wk-stroke); border-radius: 999px;
  background: var(--wk-paper); font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-ink);
}
.dk-tpl-cover:hover { border-color: var(--wk-edge); }
.dk-tpl-cover[aria-pressed="true"] { padding: 0 9px; border: 2px solid var(--wk-ink); background: var(--wk-track); font-weight: 600; }

/* Keep your own choices? (templates/KeepDialog): a row for each one the couple changed, Keep mine beside the template's */
.dk-tpl-keeps { display: flex; flex-direction: column; gap: 16px; }
.dk-tpl-keep { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dk-tpl-keep-title { margin: 0 0 8px; padding: 0; font-size: 13px; font-weight: 600; line-height: 17px; }
.dk-tpl-choice {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--wk-stroke); border-radius: 14px;
  cursor: pointer;
}
.dk-tpl-choice:has(input:checked) { padding: 13px 15px; border: 2px solid var(--wk-ink); }
.dk-tpl-choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--wk-ink); }
.dk-tpl-choice-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dk-tpl-choice-title { font-size: 14px; font-weight: 600; line-height: 19px; }
.dk-tpl-choice-sub { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 17px; color: var(--wk-muted); }
.dk-tpl-dots { display: inline-flex; flex: none; }
.dk-tpl-dots span { width: 14px; height: 14px; margin-right: -3px; box-sizing: border-box; border: 1px solid var(--wk-paper); border-radius: 50%; }
.dk-tpl-keep-foot { margin: 14px 0 0; font-size: 13px; line-height: 17px; color: var(--wk-muted); }
/* Desktop site editor: the Photos and Graphics panels (Figma 3477:58188, 3477:58504), a graphic's details (3483:62184)
   and Upload a graphic (3483:62526). The panels sit in the 264 tool panel (216 inside its padding). A control's own
   outline is --wk-edge (3:1); the frames' lighter hairlines are kept for what isn't a control. */

.dkl { min-height: 100%; }
.dkl.drop-over { outline: 2px dashed var(--wk-edge); outline-offset: -2px; border-radius: 12px; }
.dkl-upload { margin: 0 0 18px; }
.dkl-link {
  padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink);
  text-decoration: underline; text-underline-offset: 2px;
}

/* ---- uploads under way ---- */
.dkl-uploads:empty { display: none; }
.dkl-uploads { margin: -6px 0 18px; }
.dkl-upfile-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.dkl-upfile { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: var(--wk-track); }
.dkl-upfile-name { font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink); overflow-wrap: anywhere; }
.dkl-upfile-state { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dkl-upfile.failed .dkl-upfile-state { color: var(--wk-plum); }

/* ---- the photo grid: two columns, each photo draggable, its More in the corner ---- */
.dkl-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.dkl-photo-cell { position: relative; }
.dkl-photo {
  display: block; width: 100%; aspect-ratio: 103 / 78; padding: 0; border: 0; border-radius: 4px; overflow: hidden;
  background: var(--wk-track); cursor: grab;
}
.dkl-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dkl-photo:active { cursor: grabbing; }

/* More / details: a small round button over the tile's corner. Where there's a mouse it shows on hover or focus. */
.dkl-more {
  position: absolute; top: 4px; right: 4px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px;
  padding: 0; border: 1px solid var(--wk-edge); border-radius: 50%; background: var(--wk-paper); color: var(--wk-ink);
}
.dkl-more span { font-size: 14px; font-weight: 700; line-height: 14px; letter-spacing: -1px; }
.dkl-more-wrap { position: static; }
@media (hover: hover) {
  .dkl-more { opacity: 0; transition: opacity .12s; }
  :is(.dkl-photo-cell, .dkl-gcell):hover .dkl-more, .dkl-more:focus-visible, .dkl-more[aria-expanded="true"] { opacity: 1; }
}

.dkl-menu {
  position: absolute; top: 36px; z-index: 5; min-width: 184px; margin: 0; padding: 6px; list-style: none; box-sizing: border-box;
  border: 1px solid var(--wk-stroke); border-radius: 12px; background: var(--wk-paper); box-shadow: var(--wk-shadow);
}
.dkl-photo-cell:nth-child(odd) .dkl-menu { left: 0; }
.dkl-photo-cell:nth-child(even) .dkl-menu { right: 0; }
.dkl-menu-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px; border: 0;
  border-radius: 8px; background: none; text-align: left; font-size: 14px; font-weight: 600; line-height: 19px;
}
.dkl-menu-item:hover, .dkl-menu-item:focus-visible { background: var(--wk-track); }
.dkl-menu-item.plum { color: var(--wk-plum); }
.dkl-menu-sub { font-size: 12px; font-weight: 400; line-height: 16px; color: var(--wk-muted); }

/* ---- guests' photos waiting to be okayed ---- */
.dkl-waiting { margin: 0 0 20px; padding: 12px; border-radius: 12px; background: var(--wk-note); border: 1px solid var(--wk-note-edge); }
.dkl-waiting-title { margin: 0; font-size: 13px; font-weight: 700; line-height: 18px; color: var(--wk-ink); }
.dkl-waiting-sub { margin: 2px 0 10px; font-size: 12px; line-height: 16px; color: var(--wk-body); }
.dkl-waiting-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dkl-wait { display: flex; gap: 10px; align-items: flex-start; }
.dkl-wait img { flex: none; width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }
.dkl-wait-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dkl-wait-from { font-size: 12px; font-weight: 600; line-height: 16px; color: var(--wk-ink); }
.dkl-wait-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.dkl-small { min-height: 30px; padding: 0 10px; font-size: 12px; line-height: 16px; }

/* ---- graphics: one column of tiles, each named under it ---- */
.dkl-graphics { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.dkl-gcell { position: relative; width: 108px; }
.dkl-gtile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 108px; padding: 0; border: 0;
  background: none; text-align: left; cursor: grab;
}
.dkl-gtile[aria-haspopup] { cursor: pointer; }
.dkl-gart {
  display: grid; place-items: center; width: 108px; height: 84px; padding: 14px; box-sizing: border-box; overflow: hidden;
  border: 1px solid var(--wk-hair); border-radius: 8px;
}
.dkl-gart img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dkl-gart .sb-mono { line-height: 1; white-space: nowrap; }
.dkl-pattern { width: 100%; height: 100%; border-radius: 4px; background-repeat: repeat; background-size: 40px; }
.dkl-gname { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-ink); overflow-wrap: anywhere; }

/* ---- the dialogs: a graphic's details, Upload a graphic, Rename this photo ---- */
.dkl-preview {
  display: grid; place-items: center; height: 110px; border-radius: 16px; background: var(--wk-ground); overflow: hidden;
}
.dkl-preview img { max-width: 80%; max-height: 70%; object-fit: contain; }
.dkl-preview.pattern { background-repeat: repeat; background-size: 80px; }
.dkl-note { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }

.dkl-field {
  display: flex; flex-direction: column; gap: 2px; margin-top: 16px; padding: 9px 14px 8px; box-sizing: border-box;
  border: 1px solid var(--wk-edge); border-radius: 10px; background: var(--wk-paper);
}
.dkl-field:first-child { margin-top: 0; }
.dkl-field label { font-size: 11px; font-weight: 500; line-height: 14px; color: var(--wk-muted); }
.dkl-field input {
  width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: 400 15px/21px var(--wk-sans);
}
.dkl-field input:focus-visible { outline: none; }
.dkl-field:focus-within { outline: 3px solid var(--wk-ink); outline-offset: 2px; }

.dkl-group { margin-top: 20px; }
.dkl-group-label { margin: 0 0 8px; padding: 0; font-size: 15px; font-weight: 600; line-height: 21px; color: var(--wk-ink); }
.dkl-seg > button { min-height: 34px; padding: 7px 8px; font-size: 13px; line-height: 18px; }
.dkl-used-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dkl-used {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px;
  padding: 0 14px; box-sizing: border-box; border: 1px solid var(--wk-edge); border-radius: 10px; background: var(--wk-paper);
  text-align: left; font-size: 15px; line-height: 21px;
}
.dkl-chev { font-size: 20px; line-height: 20px; color: var(--wk-body); }

#dkl-details .dk-dialog-foot, #dkl-upload .dk-dialog-foot { align-items: center; }
.dkl-remove { margin-right: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.dkl-remove-btn {
  padding: 0; border: 0; background: none; font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-plum);
}
.dkl-remove p { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dkl-big { min-height: 48px; min-width: 140px; padding: 0 24px; font-size: 15px; line-height: 20px; }

.dk-dialog-eyebrow:has(.dkl-back) { margin-bottom: 14px; }
.dkl-back {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font-size: 14px; font-weight: 600; line-height: 19px; letter-spacing: 0; text-transform: none;
}
.dkl-back span { font-size: 18px; line-height: 19px; }

.dkl-file {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 110px; padding: 12px; box-sizing: border-box;
  border: 1px solid var(--wk-stroke); border-radius: 16px; background: var(--wk-paper); text-align: left;
}
.dkl-file.empty {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 12px 18px;
  border: 1px dashed var(--wk-edge);
}
.dkl-file.drop-over { border-color: var(--wk-ink); background: var(--wk-track); }
.dkl-file-art {
  display: grid; place-items: center; flex: none; width: 84px; height: 84px; padding: 8px; box-sizing: border-box;
  border-radius: 10px; background: var(--wk-ground);
}
.dkl-file-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dkl-file-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dkl-file-name { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.dkl-file-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dkl-file .dkl-link { flex: none; margin-right: 4px; }

.dkl-what { margin: 20px 0 0; padding: 0; border: 0; min-width: 0; }
.dkl-types { padding: 0 14px; border: 1px solid var(--wk-edge); border-radius: 16px; }
.dkl-type {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 0; box-sizing: border-box;
  border-top: 1px solid var(--wk-hair); cursor: pointer;
}
.dkl-type:first-child { border-top: 0; }
.dkl-type input { position: absolute; top: 50%; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.dkl-type:has(input:focus-visible) { outline: 3px solid var(--wk-ink); outline-offset: 2px; border-radius: 8px; }
.dkl-type-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dkl-type-name { font-size: 15px; font-weight: 600; line-height: 21px; color: var(--wk-ink); }
.dkl-type-hint { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dkl-tick { font-size: 20px; line-height: 20px; color: var(--wk-ink); visibility: hidden; }
.dkl-type:has(input:checked) .dkl-tick { visibility: visible; }

.dkl-rename { display: flex; align-items: center; gap: 16px; }
.dkl-rename-art { flex: none; width: 96px; height: 72px; object-fit: cover; border-radius: 8px; }
.dkl-rename-form { flex: 1; min-width: 0; }

/* ---- cropping a graphic (dialogs/CropBox.tsx): the graphic at its own shape, what's cut away dimmed, and the box with
   an edge bar on each side and a square at each corner ---- */
.dkl-crop { margin-top: 16px; padding: 16px; border-radius: 16px; background: var(--wk-ground); }
#dkl-details .dkl-crop { margin-top: 0; }
.dkl-crop-frame { position: relative; margin: 0 auto; touch-action: none; user-select: none; }
.dkl-crop-frame img { display: block; width: 100%; height: 100%; }
.dkl-crop-shade { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dkl-crop-shade div { position: absolute; box-shadow: 0 0 0 2000px rgba(20, 27, 60, .55); }
.dkl-crop-box { position: absolute; box-sizing: border-box; border: 2px solid #fff; outline: 1px solid #141b3c; cursor: move; }
.dkl-crop-edge, .dkl-crop-corner {
  position: absolute; box-sizing: border-box; border: 2px solid #141b3c; background: #fff; touch-action: none;
}
.dkl-crop-edge::after, .dkl-crop-corner::after { content: ''; position: absolute; inset: -8px; }
.dkl-crop-edge { border-radius: 3px; }
.dkl-crop-edge.n, .dkl-crop-edge.s { left: 50%; width: 32px; height: 8px; margin-left: -16px; cursor: ns-resize; }
.dkl-crop-edge.n { top: -5px; }
.dkl-crop-edge.s { bottom: -5px; }
.dkl-crop-edge.e, .dkl-crop-edge.w { top: 50%; width: 8px; height: 32px; margin-top: -16px; cursor: ew-resize; }
.dkl-crop-edge.e { right: -5px; }
.dkl-crop-edge.w { left: -5px; }
.dkl-crop-corner { width: 14px; height: 14px; }
.dkl-crop-corner.nw { top: -7px; left: -7px; cursor: nwse-resize; }
.dkl-crop-corner.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.dkl-crop-corner.ne { top: -7px; right: -7px; cursor: nesw-resize; }
.dkl-crop-corner.sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.dk-dialog .dkl-crop-box:focus-visible { outline: 3px solid #cfe83a; outline-offset: 1px; }
.dk-dialog .dkl-crop-edge:focus-visible { outline: 3px solid #cfe83a; outline-offset: 2px; }
.dkl-crop-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 12px; }
.dkl-crop-hint { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-body); }
.dkl-crop-foot .dkl-link { flex: none; }
.dkl-crop-open { margin-top: 10px; }
/* The desktop site editor's look tools: Fonts (Figma 3477:58866), Colors (3477:59207) and Styles (3500:59348), each
   inside the frame's 264 tool panel (216 inside its padding). Line heights are pinned in px (Manrope runs 1px tall in
   Chrome). */

/* ---- Fonts: two grids of "Aa" tiles, then the couple's own fonts ---- */
.dk-fonts-group + .dk-fonts-group { margin-top: 28px; }
.dk-fonts-title { margin: 0; font-size: 14px; font-weight: 700; line-height: 19px; color: var(--wk-ink); }
.dk-fonts-sub { margin: 4px 0 0; font-size: 13px; line-height: 17px; color: var(--wk-muted); }
.dk-font-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.dk-font-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 72px;
  padding: 8px 6px; box-sizing: border-box; border: 2px solid transparent; border-radius: 10px; background: var(--wk-track);
  color: var(--wk-ink);
}
.dk-font-tile[aria-pressed="true"] { border-color: var(--wk-ink); background: var(--wk-paper); }
.dk-font-aa { font-size: 22px; line-height: 30px; }
.dk-font-aa.heading { font-size: 26px; font-weight: 500; }
.dk-font-name { max-width: 100%; font-size: 11px; line-height: 15px; color: var(--wk-muted); text-align: center; overflow-wrap: anywhere; }
.dk-font-tile[aria-pressed="true"] .dk-font-name { font-weight: 700; color: var(--wk-ink); }

.dk-own { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--wk-hair); }
.dk-own-list { margin: 0 0 16px; padding: 0; list-style: none; }
.dk-own-font + .dk-own-font { border-top: 1px solid var(--wk-hair); }
.dk-own-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.dk-own-aa {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--wk-track);
  font-size: 20px; line-height: 24px; color: var(--wk-ink);
}
.dk-own-main { flex: 1; min-width: 0; }
.dk-own-name { margin: 0; font-size: 13px; font-weight: 600; line-height: 18px; overflow-wrap: anywhere; }
.dk-own-line { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dk-own-flag { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-plum); }
.dk-own-use {
  flex: none; min-height: 32px; padding: 0 2px; border: 0; background: none; font-size: 13px; font-weight: 700; line-height: 18px;
  white-space: nowrap;
}
.dk-own-for { display: grid; gap: 6px; padding: 0 0 12px; }
.dk-own-for .dk-btn { min-height: 34px; font-size: 13px; line-height: 18px; }
.dk-own-upload { width: 100%; }
.dk-own-upload i { font-size: 16px; }
.dk-own-foot { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }

/* ---- Colors: a white card of the four jobs, the suggested palettes and the design's own colors back ---- */
.dk-colors {
  margin: 0; padding: 0 12px; list-style: none; border: 1px solid var(--wk-stroke); border-radius: 12px; background: var(--wk-paper);
}
.dk-color + .dk-color { border-top: 1px solid var(--wk-hair); }
.dk-color-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 0; border: 0; background: none; text-align: left;
}
.dk-color-dot { flex: none; width: 28px; height: 28px; box-sizing: border-box; border: 1px solid var(--wk-stroke); border-radius: 50%; }
.dk-color-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.dk-color-title { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--wk-ink); }
.dk-color-sub { font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.dk-color-chev { flex: none; font-size: 20px; font-weight: 500; line-height: 20px; color: var(--wk-muted); transition: transform .15s; }
.dk-color-chev.open { transform: rotate(90deg); }
.dk-color .dk-pick { padding: 0 0 16px; }

.dk-palettes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wk-hair); }
.dk-palettes > li + li { border-top: 1px solid var(--wk-hair); }
.dk-palette {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 70px; padding: 12px 0; border: 0; background: none;
  text-align: left;
}
.dk-palette-dots { display: flex; flex: none; padding-left: 2px; }
.dk-palette-dots span { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px var(--wk-paper); }
.dk-palette-dots span + span { margin-left: -4px; }
.dk-palette-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.dk-palette-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); }
.dk-palette-mood { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dk-palette-tick { flex: none; width: 18px; font-size: 18px; font-weight: 600; line-height: 22px; text-align: center; }
.dk-colors-reset {
  margin-top: 28px; padding: 8px 0; border: 0; background: none; font-size: 13px; font-weight: 600; line-height: 18px;
  text-align: left; text-decoration: underline; text-underline-offset: 3px;
}

/* ---- Styles: a row per setting, its choices opening under it ---- */
.dk-style { border-top: 1px solid var(--wk-hair); }
.dk-style-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.dk-style-title { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); }
.dk-style-btn {
  display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid var(--wk-edge);
  border-radius: 8px; background: var(--wk-paper); font-size: 13px; font-weight: 500; line-height: 18px;
}
.dk-style-btn i { font-size: 14px; transition: transform .15s; }
.dk-style-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.dk-choices {
  margin: 0 0 16px; padding: 4px; list-style: none; border: 1px solid var(--wk-stroke); border-radius: 12px; background: var(--wk-paper);
}
.dk-choice {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 8px; box-sizing: border-box; border: 0;
  border-radius: 8px; background: none; text-align: left;
}
.dk-choice:hover { background: var(--wk-track); }
/* The choices are drawn as they sit on a page, on the same pale ground in either mode. */
.dk-choice-art {
  display: grid; flex: none; place-items: center; width: 56px; height: 34px; box-sizing: border-box; overflow: hidden;
  border: 1px solid var(--wk-stroke); border-radius: 8px; background-color: #fbf9f4; color: #635c55;
}
.dk-art-divider { display: grid; place-items: center; }
.dk-art-pattern { display: block; width: 100%; height: 100%; }
.dk-choice-label { flex: 1; font-size: 14px; line-height: 19px; color: var(--wk-ink); }
.dk-choice-tick { flex: none; font-size: 16px; visibility: hidden; }
.dk-choice[aria-pressed="true"] .dk-choice-label { font-weight: 700; }
.dk-choice[aria-pressed="true"] .dk-choice-tick { visibility: visible; }
/* Desktop site editor: the Pages panel (3477:59563), the Schedule panel (3481:58285) and the anchored panels beside them
   (Edit an event 3483:61488, Wedding day). Switches use the app's own (ui/Switch), drawn at the frames' size; the off
   track keeps the app's darker color so it holds 3:1. Line heights are pinned in px. */

:is(.dk-pages, .dk-sch, .dk-anchor) .p-switch { width: 34px; height: 20px; border-radius: 10px; }
:is(.dk-pages, .dk-sch, .dk-anchor) .p-switch::after { width: 16px; height: 16px; }
:is(.dk-pages, .dk-sch, .dk-anchor) .p-switch[aria-checked='true']::after { transform: translateX(14px); }

/* A row's handle: drag it, or focus it and press the arrow keys. */
.dk-grip {
  display: grid; place-items: center; flex: none; width: 20px; height: 32px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--wk-edge); cursor: grab; touch-action: none;
}
.dk-grip svg { fill: currentColor; }
.dk-grip:hover { color: var(--wk-ink); }

/* ---- Pages ---- */
.dk-pg-list {
  margin: 0; padding: 0; list-style: none; border: 1px solid var(--wk-stroke); border-radius: 12px; overflow: hidden;
  background: var(--wk-paper);
}
.dk-pg-row {
  display: flex; align-items: center; gap: 4px; min-height: 43px; padding: 0 12px 0 4px; box-sizing: border-box;
  background: var(--wk-paper);
}
.dk-pg-row + .dk-pg-row { border-top: 1px solid var(--wk-hair); }
.dk-pg-row.current { background: var(--wk-track); }
.dk-pg-row.held { position: relative; z-index: 1; box-shadow: var(--wk-shadow); }
.dk-pg-name {
  flex: 1; min-width: 0; min-height: 36px; padding: 0 4px; border: 0; border-radius: 6px; background: none; text-align: left;
  font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere;
}
.dk-pg-row.current .dk-pg-name { font-weight: 600; }
.dk-pg-row.off .dk-pg-name { color: var(--wk-muted); }
.dk-pg-always { flex: none; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dk-pg-foot { margin: 20px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dk-pages .dk-group-title { margin-top: 28px; }

.dk-moments { margin: 0; padding: 0; list-style: none; border: 1px solid var(--wk-stroke); border-radius: 12px; overflow: hidden; }
.dk-moments li + li { border-top: 1px solid var(--wk-hair); }
.dk-moment {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 12px; border: 0; background: var(--wk-paper);
  text-align: left;
}
.dk-moment:hover, .dk-moment[aria-expanded='true'] { background: var(--wk-track); }
.dk-moment-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dk-moment-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); }
.dk-moment-sub { font-size: 11px; line-height: 15px; color: var(--wk-muted); }
.dk-moment i { flex: none; font-size: 16px; color: var(--wk-muted); }

/* ---- Schedule ---- */
.dk-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 4px; padding: 0; list-style: none; }
.dk-crumbs li { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-body); }
.dk-crumbs li + li::before { content: '/' / ''; margin-right: 6px; color: var(--wk-muted); }
.dk-crumb {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0; border: 0; background: none;
  font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-body);
}
.dk-crumb i { font-size: 13px; }
.dk-crumb:hover { color: var(--wk-ink); text-decoration: underline; }

.dk-sch-show { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 0; }
.dk-sch-name { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); }
.dk-sch .dk-group-title { margin: 24px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--wk-hair); }
.dk-sch-list { margin: 0; padding: 0; list-style: none; }
.dk-sch-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.dk-sch-row + .dk-sch-row { border-top: 1px solid var(--wk-hair); }
.dk-sch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dk-sch-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dk-sch-always { flex: none; font-size: 12px; line-height: 16px; color: var(--wk-muted); }

.dk-evs { margin: 0; padding: 0; list-style: none; }
.dk-ev { display: flex; align-items: flex-start; gap: 4px; padding: 12px 0; background: var(--wk-paper); }
.dk-ev + .dk-ev { border-top: 1px solid var(--wk-hair); }
.dk-ev .dk-grip { width: 16px; height: 20px; margin-left: -4px; }
.dk-ev.held { position: relative; z-index: 1; box-shadow: var(--wk-shadow); border-radius: 8px; }
.dk-ev-body { flex: 1; min-width: 0; }
.dk-ev-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dk-ev-name { margin: 0; font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.dk-ev-edit {
  display: inline-flex; align-items: center; gap: 2px; flex: none; min-height: 24px; margin-top: -3px; padding: 0 2px;
  border: 0; border-radius: 6px; background: none; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink);
}
.dk-ev-edit i { font-size: 14px; }
.dk-ev-edit:hover { text-decoration: underline; }
.dk-ev-when { margin: 3px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.dk-ev-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.dk-ev-who-label { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dk-pill {
  display: inline-flex; align-items: center; gap: 2px; min-height: 24px; padding: 0 6px 0 8px; border: 0; border-radius: 999px;
  background: var(--wk-track); font-size: 12px; font-weight: 600; line-height: 16px; color: var(--wk-ink);
}
.dk-pill.some { background: var(--wk-wash); }
.dk-pill i { font-size: 12px; }
.dk-evs-empty { margin: 12px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.dk-add {
  min-height: 32px; margin: 8px 0 0; padding: 0 2px; border: 0; border-radius: 6px; background: none; font-size: 14px;
  font-weight: 600; line-height: 19px; color: var(--wk-ink);
}
.dk-add:hover { text-decoration: underline; }
.dk-sch-heading { margin-top: 24px; }

/* ---- the anchored panels: Edit an event, Wedding day ---- */
.dk-anchor {
  position: fixed; inset: auto; margin: 0; padding: 0; overflow: visible; border: 0; border-radius: 20px;
  background: var(--wk-paper); color: var(--wk-ink); box-shadow: 0 0 0 1px var(--wk-hair), 0 12px 32px rgba(20, 27, 60, .16);
  font-family: var(--wk-sans);
}
.dk-anchor::before {
  content: ''; position: absolute; top: calc(var(--dk-arrow, 40px) - 8px); width: 16px; height: 16px; background: var(--wk-paper);
  transform: rotate(45deg);
}
.dk-anchor.left::before { right: -7px; box-shadow: 1px -1px 0 var(--wk-hair); }
.dk-anchor.right::before { left: -7px; box-shadow: -1px 1px 0 var(--wk-hair); }
.dk-anchor-scroll { position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px 20px 24px; box-sizing: border-box; }
.dk-ev-note {
  margin: 0 0 16px; padding: 6px 10px; border-radius: 8px; background: var(--wk-track); font-size: 12px; line-height: 16px;
  color: var(--wk-body);
}
.dk-ev-title { margin: 0; font-family: var(--wk-display); font-size: 30px; font-weight: 400; line-height: 36px; color: var(--wk-ink); }
.dk-ev-lead { margin: 4px 0 16px; font-size: 14px; line-height: 20px; color: var(--wk-body); }
.dk-ev-form { display: flex; flex-direction: column; gap: 12px; }

.dk-field {
  display: block; min-width: 0; margin: 0; padding: 9px 14px 10px; border: 1.5px solid var(--wk-ink); border-radius: 12px;
  background: var(--wk-paper);
}
.dk-field-label { display: block; padding: 0; font-size: 11px; font-weight: 500; line-height: 14px; color: var(--wk-muted); }
.dk-field :is(input, textarea) {
  display: block; width: 100%; box-sizing: border-box; margin: 4px 0 0; padding: 0; border: 0; background: transparent;
  color: var(--wk-ink); font: inherit; font-size: 15px; line-height: 21px;
}
.dk-field textarea { resize: vertical; min-height: 42px; }
.dk-field :is(input, textarea)::placeholder { color: var(--wk-muted); opacity: 1; }
.dk-field :is(input, textarea):focus-visible { outline: none; }
.dk-field:focus-within { box-shadow: 0 0 0 2px var(--wk-ink); }
.dk-field:has([aria-invalid='true']) { border-color: var(--wk-plum); box-shadow: 0 0 0 1px var(--wk-plum); }
.dk-optional { font-weight: 400; }
.dk-when legend { float: left; width: 100%; }
.dk-when-row { clear: both; display: flex; align-items: center; gap: 8px; }
.dk-when-row input { flex: 1 1 0; min-width: 0; margin-top: 4px; }
.dk-when-row input[type='date'] { flex: 1.3 1 0; }
.dk-when-dot { color: var(--wk-muted); }
/* The date field's own calendar button follows dark mode. */
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .dk-when-row input[type='date'] { color-scheme: dark; } }
[data-theme='dark'] .dk-when-row input[type='date'] { color-scheme: dark; }
.dk-ev-hint { margin: -4px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dk-ev-error { margin: -6px 0 0; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-plum); }

.dk-ev-switch { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.dk-ev-switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dk-ev-switch-name { font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); }
.dk-ev-switch-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dk-ev-remove {
  align-self: flex-start; min-height: 28px; padding: 0 2px; border: 0; border-radius: 6px; background: none; font-size: 14px;
  font-weight: 600; line-height: 19px; color: var(--wk-ink);
}
.dk-ev-remove:hover { text-decoration: underline; }
.dk-ev-confirm { padding: 12px 14px; border-radius: 12px; background: var(--wk-track); }
.dk-ev-confirm-text { margin: 0 0 10px; font-size: 13px; line-height: 18px; color: var(--wk-ink); }
.dk-ev-confirm-btns { display: flex; justify-content: flex-end; gap: 8px; }
.dk-btn.dk-danger { background: var(--wk-plum); color: var(--wk-paper); }
.dk-ev-foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.dk-ev-btn { min-width: 140px; min-height: 46px; font-size: 16px; font-weight: 500; line-height: 21px; }
.dk-ev-btn.line { border-color: var(--wk-ink); }

/* ---- Who's invited (the editor's dialog; the picker's rows are today's, site-schedule.css) ---- */
.dk-wi-pick { margin-top: 16px; }
.dk-wi-foot {
  position: sticky; bottom: -28px; align-items: center; justify-content: space-between; margin: 20px 0 -28px; padding: 12px 0 28px;
  border-top: 1px solid var(--wk-hair); background: var(--wk-paper);
}
.dk-wi-count { margin: 0; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink); }

@media (prefers-reduced-motion: reduce) {
  :is(.dk-pages, .dk-sch, .dk-anchor) .p-switch, :is(.dk-pages, .dk-sch, .dk-anchor) .p-switch::after { transition: none; }
}
/* Desktop site editor: the RSVP and Registry pages' block panels in the inspector (GU-86, GU-90), their anchored panels
   (GU-87 to GU-89, and the registry's Edit and Release) and Add a registry (GU-91). Line heights are pinned in px. */

/* ---- the block panels ---- */
.dkr { display: flex; flex-direction: column; }
.dkr-head { margin-bottom: 18px; }
.dkr-crumbs { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; line-height: 16px; color: var(--wk-body); }
.dkr-crumb {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 600;
  line-height: 16px;
}
.dkr-crumb:hover { text-decoration: underline; text-underline-offset: 2px; }
.dkr-crumb-sep { color: var(--wk-muted); }
.dkr-title:focus { outline: none; }
.dkr-group { margin: 0 0 4px; }

.dkr-message { display: flex; flex-direction: column; margin: 0 0 18px; }
.dkr-input {
  display: block; width: 100%; min-height: 40px; margin: 0; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--wk-edge);
  border-radius: 10px; background: var(--wk-paper); color: var(--wk-ink); font: 400 14px/18px var(--wk-sans); resize: none;
  overflow-y: auto;
}
.dkr-input::placeholder { color: var(--wk-muted); opacity: 1; }

.dkr-section { margin: 18px 0 0; }
.dkr-rows { margin: 0; padding: 0; list-style: none; }
.dkr-row, .dkr-mode {
  display: flex; align-items: center; gap: 12px; padding: 11px 0 10px; border-top: 1px solid var(--wk-hair);
}
.dkr-reply .dkr-row { border-top: 0; padding-top: 0; }
.dkr-row-main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1; min-width: 0; }
.dkr-row-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 18px; color: var(--wk-ink); overflow-wrap: anywhere; }
.dkr-row-sub { margin: 0; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.dkr-row-end { display: flex; align-items: center; gap: 12px; flex: none; }
.dkr-link {
  margin-top: 4px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; line-height: 17px; color: var(--wk-ink);
  white-space: nowrap;
}
.dkr-row-end .dkr-link { margin-top: 0; }
.dkr-row-main .dkr-link { white-space: normal; text-align: left; }
.dkr-link:hover, .dkr-add:hover { text-decoration: underline; text-underline-offset: 2px; }
.dkr-add {
  display: block; width: 100%; margin: 0; padding: 12px 0 2px; border: 0; border-top: 1px solid var(--wk-hair); background: none;
  font-size: 14px; font-weight: 600; line-height: 18px; text-align: left;
}
.dkr-mode { width: 100%; margin: 0; border-right: 0; border-bottom: 0; border-left: 0; background: none; text-align: left; }
.dkr-tick { flex: none; width: 12px; font-size: 13px; font-weight: 700; line-height: 16px; color: var(--wk-ink); }
.dkr-note { margin: 12px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }

/* The Registry page's panel. */
.dkr-first { margin-top: 0; }
.dkr-add-reg { display: flex; align-items: center; gap: 12px; padding: 11px 0 10px; }
.dkr-add-reg:hover .dkr-row-title { text-decoration: underline; text-underline-offset: 2px; }
.dkr-add-reg:hover { text-decoration: none; }
.dkr-chev { flex: none; font-size: 16px; font-weight: 600; line-height: 16px; }
.dkr-row-end .dkr-link:disabled { color: var(--wk-muted); }
.dkr-watch { margin-top: 16px; }
.dkr-empty { margin-top: 0; }
.dkr-empty-add { align-self: flex-start; margin: 16px 0 0; }

/* ---- an anchored panel: beside the inspector, its pointer on the row that opened it ---- */
.dkr-pop {
  position: fixed; z-index: 30; width: min(600px, calc(100vw - 72px - 76px - 288px - 40px)); box-sizing: border-box;
  border: 1px solid var(--wk-hair); border-radius: 20px; background: var(--wk-paper); color: var(--wk-ink);
  box-shadow: 0 18px 48px rgba(20, 27, 60, .16), 0 2px 6px rgba(20, 27, 60, .06); font-family: var(--wk-sans);
}
.dkr-pop-point {
  position: absolute; right: -8px; width: 14px; height: 14px; margin-top: -7px; background: var(--wk-paper);
  border-top: 1px solid var(--wk-hair); border-right: 1px solid var(--wk-hair); transform: rotate(45deg);
}
.dkr-pop-scroll { max-height: calc(100dvh - 88px); overflow-y: auto; padding: 20px; box-sizing: border-box; border-radius: 20px; }
.dkr-pop-shared {
  margin: 0 0 14px; padding: 7px 10px; border-radius: 8px; background: var(--wk-track); font-size: 12px; font-weight: 500;
  line-height: 16px; color: var(--wk-body);
}
.dkr-pop-title { margin: 0; font-family: var(--wk-display); font-size: 32px; font-weight: 400; line-height: 38px; }
.dkr-pop-title:focus { outline: none; }
.dkr-pop-lead { margin-top: 4px; }
.dkr-pop-lead p { margin: 0; font-size: 15px; line-height: 21px; color: var(--wk-body); }
.dkr-pop-lead .dkr-pop-note { margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dkr-pop-body { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.dkr-pop-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.dkr-big { min-height: 46px; min-width: 140px; padding: 0 24px; font-size: 16px; font-weight: 500; line-height: 21px; }
.dkr-pop-foot .dk-btn.line { border-color: var(--wk-ink); }
.dkr-quiet {
  margin-right: auto; min-height: 44px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; line-height: 18px;
  color: var(--wk-plum); text-decoration: underline; text-underline-offset: 3px;
}
.dkr-error { margin: 0; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-plum); }

/* A field with its label in the box. The date field shows "May 15, 2027"; the native date input lies over it. */
.dkr-field {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 14px 10px; border: 1.5px solid var(--wk-ink);
  border-radius: 12px; background: var(--wk-paper); cursor: text;
}
.dkr-field-label { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--wk-muted); }
.dkr-field input, .dkr-field textarea, .dkr-date-text {
  width: 100%; min-height: 21px; margin: 0; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font: 400 16px/21px var(--wk-sans);
}
.dkr-field textarea { resize: vertical; }
.dkr-field :is(input, textarea):focus-visible { outline: none; }
.dkr-field:focus-within { box-shadow: 0 0 0 1.5px var(--wk-ink); }
.dkr-field :is(input, textarea)::placeholder, .dkr-choice::placeholder, .dkr-inline-field input::placeholder { color: var(--wk-muted); opacity: 1; }
.dkr-date { cursor: pointer; }
.dkr-date input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dkr-field.dim { border-color: var(--wk-edge); border-width: 1px; }

.dkr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dkr-chip {
  min-height: 34px; padding: 0 12px; border: 1px solid var(--wk-edge); border-radius: 999px; background: var(--wk-paper);
  font-size: 14px; font-weight: 500; line-height: 19px;
}
.dkr-chip[aria-pressed='true'] { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }

.dkr-toggle { display: flex; align-items: center; gap: 16px; }
.dkr-card.dkr-toggle { padding: 14px 16px; }
.dkr-card { border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-paper); }
.dkr-option { display: flex; flex-direction: column; gap: 8px; }
.dkr-option-label { margin: 0; font-size: 14px; font-weight: 600; line-height: 19px; }
.dkr-seg > button { min-height: 40px; font-size: 15px; line-height: 20px; }

/* Meal options and a question's choices: rows with a handle. */
.dkr-list { padding: 0 16px; }
.dkr-list ul { margin: 0; padding: 0; list-style: none; }
.dkr-item { border-bottom: 1px solid var(--wk-hair); background: var(--wk-paper); }
.dkr-item.held { box-shadow: 0 6px 16px rgba(20, 28, 61, .16); }
.dkr-item-row { display: flex; align-items: center; gap: 12px; min-height: 46px; }
.dkr-handle {
  position: relative; display: grid; place-items: center; flex: none; width: 14px; height: 20px; padding: 0; border: 0;
  background: none; color: var(--wk-muted); fill: currentColor; cursor: grab; touch-action: none;
}
.dkr-handle::after { content: ''; position: absolute; inset: -12px -10px; }
.held .dkr-handle { cursor: grabbing; }
.dkr-item-name { flex: 1; min-width: 0; padding: 12px 0; font-size: 15px; font-weight: 600; line-height: 21px; overflow-wrap: anywhere; }
.dkr-choice {
  flex: 1; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--wk-ink);
  font: 500 15px/21px var(--wk-sans);
}
.dkr-item-row:has(.dkr-choice:focus) { box-shadow: inset 0 -2px 0 var(--wk-ink); }
.dkr-choice:focus-visible { outline: none; }
.dkr-remove, .dkr-tag-add, .dkr-tag-text, .dkr-tag-x, .dkr-pick, .dkr-inline-add { position: relative; flex: none; padding: 0; border: 0; background: none; }
.dkr-remove { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--wk-muted); text-decoration: underline; text-underline-offset: 2px; }
.dkr-tag-add {
  padding: 3px 9px; border: 1px dashed var(--wk-edge); border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 16px;
  color: var(--wk-muted);
}
.dkr-tag {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 9px; border-radius: 999px; background: var(--wk-wash);
  color: var(--wk-moss);
}
.dkr-tag-text, .dkr-tag-x { color: inherit; font-size: 12px; font-weight: 600; line-height: 16px; }
.dkr-tagging { display: flex; flex-direction: column; gap: 10px; padding: 0 0 14px 26px; }
.dkr-adding { padding: 12px 0; }
.dkr-inline-field {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1.5px solid var(--wk-ink); border-radius: 10px;
  background: var(--wk-paper);
}
.dkr-inline-field input { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--wk-ink); font: 400 15px/21px var(--wk-sans); }
.dkr-inline-field input:focus-visible { outline: none; }
.dkr-inline-field:focus-within { box-shadow: 0 0 0 1.5px var(--wk-ink); }
.dkr-inline-add { font-size: 11px; font-weight: 700; line-height: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-body); }
.dkr-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.dkr-pick { padding: 5px 10px; border-radius: 999px; background: var(--wk-track); color: var(--wk-ink); font-size: 12px; font-weight: 600; line-height: 16px; }
.dkr-add-row {
  display: block; width: 100%; padding: 14px 0; border: 0; background: none; font-size: 15px; font-weight: 600; line-height: 21px;
  text-align: left;
}

/* A fund's photo, from the library. */
.dkr-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.dkr-photo {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--wk-hair);
  border-radius: 10px; background: var(--wk-track);
}
.dkr-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dkr-photo.on { box-shadow: 0 0 0 2px var(--wk-paper), 0 0 0 4px var(--wk-ink); }
.dkr-photo-pick {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--wk-btn); color: var(--wk-on-navy); font-size: 14px;
}

/* Add a registry's fields and what the read found. */
.dkr-add-fields { display: flex; flex-direction: column; gap: 16px; }
.dkr-add-fields .dkr-field { cursor: default; }
.dkr-field input:disabled { color: var(--wk-body); }
.dkr-result-slot:empty { display: none; }
.dkr-result { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--wk-wash); }
.dkr-result.error { background: var(--wk-plum-wash); }
.dkr-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: 14px; font-weight: 700; line-height: 18px;
}
.dkr-result.error .dkr-result-mark { background: var(--wk-plum); color: var(--wk-paper); }
.dkr-result-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dkr-result-title { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--wk-ink); }
.dkr-result-sub { font-size: 12px; line-height: 16px; color: var(--wk-body); }

@media (prefers-reduced-motion: no-preference) {
  .dkr-pop { animation: dkr-pop-in .14s ease-out; }
}
@keyframes dkr-pop-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
/* Desktop site editor: Share your site (GU-78), the password (GU-79) and domain (GU-80–82) dialogs, Make site live's
   last check (3524:58387) and Preview what guests see (GU-77). The dialogs themselves are site-desk.css's
   .dk-dialog; these are their cards, rows and fields. Line heights are pinned in px (Manrope runs 1px tall). */

/* ---- cards of rows, as Share draws them ---- */
.dks-cards { display: flex; flex-direction: column; gap: 18px; }
.dks-card {
  margin: 0; padding: 0 16px; list-style: none; border: 1px solid var(--wk-stroke); border-radius: 12px;
  background: var(--wk-paper);
}
.dks-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; box-sizing: border-box; }
.dks-row + .dks-row { border-top: 1px solid var(--wk-hair); }
.dks-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dks-title { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.dks-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dks-value { overflow-wrap: anywhere; }

/* Edit, Change, Copy, the QR downloads: words that act, 44px to hit. */
.dks-act {
  position: relative; flex: none; padding: 4px 0; border: 0; background: none; font-size: 14px; font-weight: 600;
  line-height: 19px; color: var(--wk-ink); text-decoration: none; white-space: nowrap;
}
.dks-act::after { content: ''; position: absolute; inset: -8px -6px; }
.dks-act:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A row that is itself the button (Use your own domain). */
.dks-go { width: 100%; border: 0; border-radius: 0; background: none; text-align: left; }
.dks-go:focus-visible { outline-offset: -1px; border-radius: 8px; }
.dks-chev { flex: none; font-size: 16px; color: var(--wk-ink); }

/* Who can see it: native radios under labels, the pick ticked. */
.dks-choice { position: relative; cursor: pointer; }
.dks-choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.dks-choice:has(input:focus-visible) { outline: 3px solid var(--wk-ink); outline-offset: -1px; border-radius: 8px; }
.dks-tick { flex: none; width: 18px; font-size: 18px; line-height: 18px; color: var(--wk-ink); }
.dks-switch { display: inline-flex; flex: none; }
.dks-qr { display: flex; flex: none; gap: 16px; }
.dks-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }

/* The dialogs' own buttons, at the frames' 44px. */
.dks-foot-btn { min-height: 44px; padding: 0 20px; font-size: 15px; line-height: 21px; }
.dks-foot-btn.line { border: 1.5px solid var(--wk-ink); }
.dks-foot-split { justify-content: space-between; align-items: center; }
.dks-links { display: flex; gap: 16px; }
.dks-link {
  position: relative; padding: 4px 0; border: 0; background: none; font-size: 13px; font-weight: 600; line-height: 18px;
  color: var(--wk-ink); text-decoration: underline; text-underline-offset: 3px;
}
.dks-link::after { content: ''; position: absolute; inset: -10px -4px; }

/* ---- fields: the label inside the box, as the password and domain frames draw them ---- */
.dks-field {
  display: block; padding: 8px 14px 9px; border: 1px solid var(--wk-edge); border-radius: 12px; background: var(--wk-paper);
}
.dks-field:focus-within { border-color: var(--wk-ink); box-shadow: inset 0 0 0 1px var(--wk-ink); }
.dks-field.bad { border-color: var(--wk-plum); }
.dks-field.bad:focus-within { box-shadow: inset 0 0 0 1px var(--wk-plum); }
.dks-field label { display: block; font-size: 11px; line-height: 14px; color: var(--wk-muted); }
.dks-field input {
  display: block; width: 100%; min-width: 0; margin: 2px 0 0; padding: 0; border: 0; background: none; font: inherit;
  font-size: 15px; line-height: 21px; color: var(--wk-ink);
}
.dks-field input:focus-visible { outline: none; }
.dks-field-line { display: flex; align-items: baseline; }
.dks-field-line input { flex: 1; }
.dks-prefix { flex: none; margin-top: 2px; font-size: 15px; line-height: 21px; color: var(--wk-muted); }
.dks-field-pw { display: flex; align-items: center; gap: 12px; }
.dks-field-main { flex: 1; min-width: 0; }
.dks-show {
  position: relative; flex: none; padding: 4px 0; border: 0; background: none; font-size: 10px; font-weight: 600;
  line-height: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--wk-muted); text-decoration: underline;
  text-underline-offset: 2px;
}
.dks-show::after { content: ''; position: absolute; inset: -14px -8px; }
.dks-hint { margin: 16px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dks-error { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-plum); }
.dks-looking { margin: 12px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }

/* The address editor, in the address row's place. */
.dks-edit { flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 0; }
.dks-line { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dks-line.bad { color: var(--wk-plum); }
.dks-suggest { align-self: flex-start; }
.dks-warn { margin: 0; font-size: 12px; line-height: 16px; color: var(--wk-body); }
.dks-edit-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ---- the domain steps ---- */
.dks-found { margin-top: 16px; }
.dks-mark { flex: none; width: 18px; text-align: center; font-size: 16px; line-height: 18px; }
.dks-mark.done { color: var(--wk-moss); }
.dks-mark.now, .dks-mark.wait { width: 12px; height: 12px; margin: 0 3px; box-sizing: border-box; border-radius: 50%; }
.dks-mark.now { border: 1.5px dotted var(--wk-plum); }
.dks-mark.wait { border: 1.5px solid var(--wk-edge); }
#dk-domain .dks-note { margin-top: 16px; }
.dks-remove { margin-top: 16px; }

/* ---- Make site live: the last check ---- */
.dks-checks { margin: 0; padding: 0; list-style: none; }
.dks-check { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--wk-hair); }
.dks-check-mark {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--wk-wash); color: var(--wk-moss); font-size: 13px; line-height: 13px;
}
.dks-check-mark.look { background: var(--wk-plum-wash); color: var(--wk-plum); font-size: 12px; font-weight: 700; }
.dks-check .dks-act { font-size: 13px; line-height: 18px; }

/* ---- Preview what guests see: the guest page filling the window ---- */
.dkp {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 24px 40px;
  box-sizing: border-box; border: 0; background: var(--wk-ground); color: var(--wk-ink); font-family: var(--wk-sans);
}
.dkp[open] { display: flex; flex-direction: column; gap: 18px; }
.dkp:focus { outline: none; }
.dkp::backdrop { background: rgba(20, 27, 60, .4); }
.dkp-bars { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* The bars keep their navy in dark mode: white and lime on #141B3C stay readable on either ground. */
.dkp-sizes, .dkp-bar { display: inline-flex; align-items: center; border-radius: 999px; background: #141b3c; box-shadow: var(--wk-shadow); }
/* The preview isn't inside the editor's frame, so its buttons set their own font. */
.dkp-size, .dkp-btn { font-family: inherit; cursor: pointer; }
.dkp-sizes { gap: 2px; padding: 4px; }
.dkp-size {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #fff; font-size: 13px;
  font-weight: 500; line-height: 18px;
}
.dkp-size[aria-pressed='true'] { background: #fff; color: #141b3c; font-weight: 600; }
.dkp-bar { gap: 10px; padding: 8px 8px 8px 16px; color: #fff; }
.dkp-label { font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.dkp-btn {
  min-height: 34px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; background: none;
  color: #fff; font-size: 13px; font-weight: 600; line-height: 18px; white-space: nowrap;
}
.dkp-btn.go { border-color: #cfe83a; background: #cfe83a; color: #141b3c; }
.dkp .dkp-btn:focus-visible, .dkp .dkp-size:focus-visible { outline: 3px solid #cfe83a; outline-offset: 2px; }
.dkp-stage { flex: 1; min-height: 0; display: flex; justify-content: center; }
.dkp-frame { display: block; width: 100%; height: 100%; border: 0; border-radius: 12px; background: #fdfbf7; box-shadow: var(--wk-shadow); }
.dkp.phone .dkp-frame { flex: none; width: 390px; }
.dkp-loading { align-self: center; margin: 0; font-size: 14px; line-height: 20px; color: var(--wk-muted); }
/* The desktop Website's start: the first visit (3508:58290), Start your site and Your colors (3496:58288, 3572:58387),
   Start here (3507:58290) and the first open's tips (GU-74). Line heights are pinned in px (Manrope runs 1px tall in
   Chrome). */

.dst-link-line { margin: 20px 0 0; font-size: 14px; line-height: 19px; color: var(--wk-body); }
.dst-link {
  display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--wk-ink);
}
.dst-link:hover { text-decoration: underline; }
.dst-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--wk-edge); border-radius: 999px; background: var(--wk-paper); font-size: 13px; font-weight: 500;
  line-height: 17px; color: var(--wk-ink); list-style: none;
}
.dst-chip.on { background: var(--wk-btn); border-color: var(--wk-btn); color: var(--wk-on-navy); }
.dst-chip.status { border-color: var(--wk-stroke); font-weight: 500; }
.dst-chip.status.on { background: var(--wk-track); border-color: var(--wk-stroke); color: var(--wk-ink); }
.dst-chip i { font-size: 14px; }

/* ---- the first visit ---- */
.dst-first-top { display: grid; grid-template-columns: minmax(0, 470fr) minmax(0, 618fr); gap: 32px; align-items: start; }
.dst-eyebrow {
  margin: 16px 0 0; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wk-plum);
}
.dst-first-title { margin: 12px 0 0; font-family: var(--wk-display); font-size: 48px; font-weight: 400; line-height: 52px; color: var(--wk-ink); }
.dst-first-title em { font-style: normal; color: var(--wk-plum); }
.dst-first-lead { margin: 18px 0 0; font-size: 15px; line-height: 22px; color: var(--wk-body); }
.dst-plan { margin: 18px 0 0; padding: 0 16px; list-style: none; border: 1px solid var(--wk-stroke); border-radius: 12px; background: var(--wk-paper); }
.dst-plan-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.dst-plan-row + .dst-plan-row { border-top: 1px solid var(--wk-hair); }
.dst-plan-tick {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--wk-wash);
  color: var(--wk-moss);
}
.dst-plan-tick i { font-size: 14px; }
.dst-plan-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dst-plan-title { font-size: 15px; font-weight: 500; line-height: 21px; color: var(--wk-ink); }
.dst-plan-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dst-first-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dst-big { min-height: 46px; padding: 0 22px; font-size: 15px; line-height: 21px; }
.dst-first-note { margin: 18px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }

.dst-draft { margin: 8px 0 0; padding: 12px; border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-track); }
.dst-draft-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 12px; }
.dst-draft-url {
  padding: 6px 12px; border-radius: 999px; background: var(--wk-paper); font-size: 13px; font-weight: 600; line-height: 17px;
  color: var(--wk-ink); overflow-wrap: anywhere;
}
.dst-draft-tag {
  padding: 3px 8px; border-radius: 999px; background: var(--wk-plum-wash); font-size: 11px; font-weight: 600; line-height: 15px;
  color: var(--wk-plum);
}
.dst-draft-view {
  position: relative; height: 560px; overflow: hidden; border: 1px solid var(--wk-stroke); border-radius: 10px; background: var(--wk-paper);
}
.dst-draft-frame { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }

.dst-can { margin-top: 36px; }
.dst-can-title {
  margin: 0 0 12px; font-size: 11px; font-weight: 700; line-height: 15px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wk-muted);
}
.dst-can-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.dst-can-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; border-radius: 12px; background: var(--wk-track); }
.dst-can-head { font-size: 15px; font-weight: 600; line-height: 21px; color: var(--wk-ink); }
.dst-can-sub { font-size: 13px; line-height: 17px; color: var(--wk-muted); }
.dst-first > .dst-link-line { margin-top: 28px; }

/* ---- Start your site ---- */
.dst-start-title:focus, .dst-designs-title:focus { outline: none; }
.dst-build {
  --dst-on: var(--wk-on-navy);
  margin-top: 4px; padding: 18px 16px 16px; border-radius: 12px; background: var(--wk-btn); color: var(--dst-on);
}
.dst-build-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 22px; }
.dst-build-lead { margin: 4px 0 12px; font-size: 13px; line-height: 17px; color: color-mix(in srgb, var(--dst-on) 86%, transparent); }
.dst-rows { display: flex; flex-direction: column; gap: 6px; }
.dst-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 12px; box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--dst-on) 50%, transparent); border-radius: 8px; background: none; color: var(--dst-on);
  text-align: left;
}
.dst-row.ask { margin-bottom: 6px; }
.dst-row.on { border: 2px solid var(--dst-on); padding: 5px 11px; }
.dst-row[aria-disabled="true"] { cursor: default; }
.dst-row:focus-visible { outline: 3px solid var(--dst-on); outline-offset: 2px; }
.dst-row-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dst-row-title { font-size: 13px; font-weight: 500; line-height: 17px; }
.dst-row-sub { font-size: 11px; line-height: 15px; color: color-mix(in srgb, var(--dst-on) 86%, transparent); }
.dst-row-tick { flex: none; font-size: 16px; }
.dst-dots { flex: none; display: inline-flex; padding-left: 4px; }
.dst-dot {
  width: 14px; height: 14px; margin-left: -4px; box-sizing: border-box; border: 1.5px solid var(--wk-btn); border-radius: 50%;
  background: color-mix(in srgb, var(--dst-on) 35%, transparent);
}
.dst-dots.any .dst-dot { width: 16px; height: 16px; border: 1.5px dashed var(--dst-on); background: none; }
.dst-build-go { margin-top: 14px; }

.dst-blank {
  display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 18px; padding: 16px; box-sizing: border-box;
  border: 1px solid var(--wk-stroke); border-radius: 12px; background: var(--wk-paper); text-align: left;
}
.dst-blank:hover { border-color: var(--wk-edge); }
.dst-blank-title { font-size: 15px; font-weight: 700; line-height: 21px; color: var(--wk-ink); }
.dst-blank-sub { font-size: 13px; line-height: 17px; color: var(--wk-muted); }
.dst-start .dst-link-line { margin-top: 22px; font-size: 13px; line-height: 17px; }

.dst-designs { margin-top: 24px; }
.dst-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dst-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; margin: 0; padding: 0; list-style: none; }
.dst-tile { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.dst-tile-art {
  position: relative; display: block; height: 72px; overflow: hidden; border: 1px solid var(--wk-stroke); border-radius: 8px;
}
.dst-tile.on .dst-tile-art { border: 2px solid var(--wk-ink); }
/* The design is drawn at twice the tile's size and scaled down, so the names keep the phone cards' proportions. */
.dst-tile-art .sd-mini { position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0; }
.dst-tile-tag {
  position: absolute; top: 6px; left: 6px; z-index: 2; padding: 1px 6px; border-radius: 999px; background: var(--wk-plum-wash);
  font-size: 10px; font-weight: 700; line-height: 14px; color: var(--wk-plum);
}
.dst-tile-name { font-size: 13px; font-weight: 500; line-height: 17px; color: var(--wk-ink); }

/* Your colors: in the top layer beside the panel; `left` and `top` come from the panel and the row. */
.dst-own {
  position: fixed; inset: auto; margin: 0; width: 358px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px;
  box-sizing: border-box; border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-paper); color: var(--wk-ink);
  box-shadow: 0 12px 40px rgba(20, 27, 60, .18); font-family: var(--wk-sans);
}
.dst-own button { font: inherit; color: inherit; cursor: pointer; }
.dst-own :is(button, input):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.dst-own-title { margin: 0; font-family: var(--wk-display); font-size: 28px; font-weight: 400; line-height: 32px; }
.dst-own-title:focus { outline: none; }
.dst-own-lead { margin: 6px 0 8px; font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.dst-parts { margin: 0; padding: 0; list-style: none; }
.dst-part + .dst-part { border-top: 1px solid var(--wk-hair); }
.dst-part-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0; background: none; text-align: left;
}
.dst-part-swatch { flex: none; width: 28px; height: 28px; box-sizing: border-box; border: 1px solid var(--wk-edge); border-radius: 50%; }
.dst-part-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dst-part-label { font-size: 14px; font-weight: 600; line-height: 19px; }
.dst-part-sub { font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dst-part-hex {
  flex: none; padding: 6px 10px; border-radius: 8px; background: var(--wk-track); font-size: 12px; font-weight: 600; line-height: 16px;
}
.dst-own-vision { margin-top: 14px; }
.dst-own-eyebrow {
  margin: 0 0 10px; font-size: 11px; font-weight: 700; line-height: 15px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wk-muted);
}
.dst-own-hint { margin: -2px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dst-own-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.dst-own-foot .dk-btn { min-height: 40px; }

/* ---- Start here ---- */
.dst-progress { display: flex; align-items: center; gap: 8px; margin: -4px 0 16px; }
.dst-progress-bar { flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--wk-track); }
.dst-progress-bar span { display: block; height: 100%; border-radius: 2px; background: var(--wk-btn); }
.dst-progress-count { margin: 0; font-size: 11px; font-weight: 600; line-height: 15px; color: var(--wk-muted); white-space: nowrap; }
.dst-steps { margin: 0; padding: 0; list-style: none; }
.dst-step { display: flex; gap: 10px; padding: 18px 0; }
.dst-step + .dst-step { border-top: 1px solid var(--wk-hair); }
.dst-step-mark {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid var(--wk-edge);
  border-radius: 50%;
}
.dst-step.done .dst-step-mark { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
.dst-step-mark i { font-size: 13px; }
.dst-step-main { flex: 1; min-width: 0; }
.dst-step-title { margin: 0; font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); }
.dst-step-sub { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dst-step-go { min-height: 30px; margin-top: 10px; padding: 0 12px; font-size: 13px; line-height: 17px; }
.dst-step-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.dst-chip-go { min-height: 30px; padding: 0 12px; font-size: 13px; line-height: 17px; }
.dst-browse { margin: 18px 0 0; font-size: 13px; line-height: 17px; color: var(--wk-body); }

/* ---- the first open's tips ---- */
.dst-tour {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  overflow: hidden; background: transparent; font-family: var(--wk-sans); color: var(--wk-ink);
}
.dst-tour::backdrop { background: transparent; }
.dst-tour-dim { position: absolute; inset: 0; }
.dst-tour-dim path { fill: rgba(20, 27, 60, .38); }
.dst-tour-card {
  position: absolute; padding: 22px 20px 20px; box-sizing: border-box; border-radius: 16px; background: var(--wk-paper);
  box-shadow: 0 12px 40px rgba(20, 27, 60, .22);
}
.dst-tour-point { position: absolute; width: 14px; height: 14px; background: var(--wk-paper); transform: rotate(45deg); }
.dst-tour-point.left { left: -7px; }
.dst-tour-point.right { right: -7px; }
.dst-tour-count { margin: 0; font-size: 12px; font-weight: 700; line-height: 16px; color: var(--wk-plum); }
.dst-tour-title { margin: 8px 0 0; font-family: var(--wk-display); font-size: 24px; font-weight: 400; line-height: 28px; }
.dst-tour-title:focus { outline: none; }
.dst-tour-body { margin: 10px 0 0; font-size: 14px; line-height: 19px; color: var(--wk-body); }
.dst-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.dst-tour button { font: inherit; cursor: pointer; }
.dst-tour :is(button):focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.dst-tour-quiet { min-height: 40px; padding: 0; border: 0; background: none; font-size: 14px; line-height: 19px; color: var(--wk-body); }
.dst-tour-next { min-height: 40px; }

/* Below 1280 the first visit's columns and cards narrow; the preview keeps its desktop drawing, scaled. */
@media (max-width: 1279px) {
  .dst-first-top { gap: 24px; }
  .dst-first-title { font-size: 40px; line-height: 46px; }
  .dst-can-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* In dark mode the navy card turns lime (as the main button does), so Build my site turns navy on it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .dst-build-go { background: var(--wk-on-navy); color: var(--wk-btn); }
}
[data-theme='dark'] .dst-build-go { background: var(--wk-on-navy); color: var(--wk-btn); }
/* Using your own site (3573:58596) and the "Already have a wedding site?" dialog (3572:58703, 3572:58980), from 1024px.
   At 1440 the page's columns are 560 and 520 with 40 between; they shrink together below that. The red is the frames'
   destructive #b3261e, lighter in dark mode. Line heights are pinned in px (Manrope runs 1px tall in Chrome). */
:root { --ow-red: #B3261E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --ow-red: #F2B8B5; } }
:root[data-theme='dark'] { --ow-red: #F2B8B5; }

/* ---- the page ---- */
.ow-page {
  display: grid; grid-template-columns: minmax(0, 14fr) minmax(0, 13fr); column-gap: 40px; align-items: start;
  padding-top: 40px;
}
.ow-head { grid-column: 1; }
.ow-main { grid-column: 1; margin-top: 23px; }
.ow-side { grid-column: 2; grid-row: 2; margin-top: 23px; }

.ow-eyebrow {
  margin: 0; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .01em; text-transform: uppercase;
  color: var(--wk-plum);
}
.ow-title { margin: 12px 0 0; font-family: var(--wk-display); font-size: 46px; font-weight: 400; line-height: 56px; color: var(--wk-ink); }
.ow-title:focus { outline: none; }
.ow-lead { margin: 13px 0 0; font-size: 15px; line-height: 20px; color: var(--wk-body); }

.ow-card { padding: 17px 20px; border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-paper); }
.ow-card-eyebrow {
  margin: 0; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wk-muted);
}
.ow-link { margin: 4px 0 0; font-size: 18px; font-weight: 600; line-height: 24px; color: var(--wk-ink); overflow-wrap: anywhere; }
.ow-linked { margin: 5px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-muted); }

.ow-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 25px; }
.ow-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 23px; box-sizing: border-box;
  border-radius: 999px; font: 600 15px/21px var(--wk-sans); text-decoration: none; cursor: pointer;
}
.ow-btn.navy { border: 0; background: var(--wk-btn); color: var(--wk-on-navy); }
.ow-btn.line { min-height: 47px; padding: 0 22px; border: 1.5px solid var(--wk-ink); background: var(--wk-paper); color: var(--wk-ink); }
.ow-remove {
  display: block; margin: 24px 0 0; padding: 0; border: 0; background: none; font: 600 14px/19px var(--wk-sans);
  color: var(--ow-red); cursor: pointer;
}
.ow-remove:hover { text-decoration: underline; }
.ow-remove:disabled { cursor: default; opacity: .55; }

.ow-side { padding: 26px 28px 25px; border-radius: 16px; background: var(--wk-track); }
.ow-side-title { margin: 0; font-family: var(--wk-display); font-size: 28px; font-weight: 400; line-height: 34px; color: var(--wk-ink); }
.ow-side-lead { margin: 10px 0 0; font-size: 14px; line-height: 19px; color: var(--wk-body); }
.ow-side-go {
  margin: 11px 0 0; padding: 0; border: 0; background: none; font: 600 15px/20px var(--wk-sans); color: var(--wk-ink);
  cursor: pointer;
}
.ow-side-go:hover { text-decoration: underline; }

/* ---- the dialog: 520 wide, as its frames draw it, with their 19px lead lines and 17 under them ---- */
.dk-dialog#dk-external { width: min(520px, calc(100vw - 48px)); }
#dk-external .dk-dialog-lead { line-height: 19px; }
#dk-external .dk-dialog-body { margin-top: 17px; }
.ow-form { display: flex; flex-direction: column; }
.ow-label { font-size: 13px; font-weight: 600; line-height: 18px; color: var(--wk-ink); }
.ow-input {
  margin-top: 6px; min-height: 47px; padding: 0 14px; box-sizing: border-box; border: 1.5px solid var(--wk-ink); border-radius: 10px;
  background: var(--wk-paper); color: var(--wk-ink); font: 400 15px/21px var(--wk-sans);
}
.ow-input::placeholder { color: var(--wk-muted); opacity: 1; }
.ow-input.bad { border-color: var(--ow-red); }
.ow-error { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--ow-red); }
.ow-form .dk-dialog-foot { margin-top: 18px; }
.ow-dialog-btn { min-height: 41px; padding: 0 18px; font-weight: 500; font-size: 15px; line-height: 21px; }
/* The desktop editor once the site is live (Figma 3482:58645, 3525:58387): the Live chip in the editor bar. Each Live
   dialog, menu and the Website tab's live page keep their own sheet (site-desk-live-*.css). */
.dk-status-btn {
  border: 1px solid transparent; color: var(--wk-ink); font: inherit; font-size: 13px; line-height: 18px; cursor: pointer;
}
.dk-status-btn:hover { border-color: var(--wk-hair); }
.dk-status-btn[aria-expanded="true"] { border-color: var(--wk-ink); background: var(--wk-paper); }
.dk-status.offline .dk-status-dot { background: var(--wk-plum); }
.dk-status-changes {
  padding: 1px 8px; border-radius: 999px; background: var(--wk-plum-wash); font-size: 12px; font-weight: 600; line-height: 16px;
  color: var(--wk-plum); white-space: nowrap;
}

/* The word the Live dialogs set in plum italic ("Your site is <em>live</em>", "Your <em>QR code</em>"). */
.dk-dialog-title em { font-style: normal; color: var(--wk-plum); }
/* Send your site to guests (3590:58486), in site-desk.css's .dk-dialog: How (two chips), who gets it (a row with
   Change, opening the two audiences as radios), the text's words and the notes under them. Line heights are pinned
   in px (Manrope runs 1px tall in Chrome). */

.dkg-label {
  display: block; margin: 0; font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--wk-muted);
}

/* ---- How: Email and Text, navy with a tick while pressed ---- */
.dkg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dkg-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--wk-edge); border-radius: 999px; background: var(--wk-paper); font-size: 14px; font-weight: 600;
  line-height: 19px; color: var(--wk-ink); text-align: left;
}
.dkg-chip.on { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
.dkg-chip[aria-disabled="true"] { border-color: var(--wk-stroke); color: var(--wk-muted); cursor: default; }

/* Change, Edit message: words that act, 44px to hit. */
.dkg-act {
  position: relative; flex: none; padding: 4px 0; border: 0; background: none; font-size: 15px; font-weight: 600;
  line-height: 21px; color: var(--wk-ink); white-space: nowrap;
}
.dkg-act.small { font-size: 14px; line-height: 19px; }
.dkg-act::after { content: ''; position: absolute; inset: -10px -6px; }
.dkg-act:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- who gets it ---- */
.dkg-who { margin-top: 18px; border: 1px solid var(--wk-stroke); border-radius: 12px; background: var(--wk-paper); }
.dkg-who-row { display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 12px 16px; box-sizing: border-box; }
.dkg-who-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; margin: 0; }
.dkg-who-title { font-size: 15px; font-weight: 600; line-height: 21px; color: var(--wk-ink); }
.dkg-who-sub { font-size: 13px; line-height: 18px; color: var(--wk-muted); }
.dkg-who-list { min-width: 0; margin: 0 16px; padding: 4px 0 8px; border: 0; border-top: 1px solid var(--wk-hair); }
.dkg-opt { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; }
.dkg-opt input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--wk-ink); cursor: pointer; }
.dkg-opt-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dkg-opt-title { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); }
.dkg-opt-sub { font-size: 13px; line-height: 18px; color: var(--wk-muted); }

/* ---- the text's words ---- */
.dkg-msg { margin-top: 18px; padding: 18px 16px 16px; border-radius: 12px; background: var(--wk-track); }
.dkg-msg-text {
  margin: 8px 0 6px; font-size: 15px; line-height: 20px; color: var(--wk-ink); overflow-wrap: anywhere; white-space: pre-wrap;
}
.dkg-text {
  display: block; width: 100%; margin: 8px 0 0; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--wk-edge);
  border-radius: 10px; background: var(--wk-paper); font: inherit; font-size: 15px; line-height: 20px; color: var(--wk-ink);
  resize: vertical;
}

/* ---- the lines under it ---- */
.dkg-meta { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dkg-note { margin: 18px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); }
.dkg-why { margin: 12px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }
.dkg-problem { margin: 12px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-plum); }
/* Your QR code (Figma 3590:59005, live/Qr.tsx): the code's card on the left, its choices on the right, and the sign
   it prints. At 760 wide the card is 236 across with the code 196 square in it. The code is drawn for paper, so its
   ground is fixed white, or navy when it's white, in both themes. Line heights are pinned in px (Manrope runs 1px tall). */
.dkq-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; }

.dkq-card { padding: 20px 20px 16px; border-radius: 16px; background: var(--wk-track); text-align: center; }
.dkq-tile { aspect-ratio: 1; overflow: hidden; background: #ffffff; }
/* The SVG's own password line sits under the code; the card shows the code square and writes the line out below. */
.dkq-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .2s; }
.dkq-card[aria-busy="true"] .dkq-tile img { opacity: .5; }
.dkq-address { margin: 10px 0 0; font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.dkq-slug { display: inline-block; max-width: 100%; }
.dkq-pw { margin: 10px 0 0; font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }
.dkq-card.dark { background: #141b3c; }
.dkq-card.dark .dkq-tile { background: none; }
.dkq-card.dark .dkq-address { color: #ffffff; }
.dkq-card.dark .dkq-pw { color: #c5c8d6; }

.dkq-failed {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px;
  box-sizing: border-box; border-radius: 4px; background: var(--wk-paper);
}
.dkq-failed-text { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-ink); }
.dkq-retry { color: var(--wk-ink); }

.dkq-lead { margin: 0; font-size: 14px; line-height: 19px; color: var(--wk-body); }
.dkq-label {
  margin: 16px 0 8px; font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wk-muted);
}
.dkq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dkq-chips.stack { flex-direction: column; align-items: flex-start; }
.dkq-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  box-sizing: border-box; border: 1px solid var(--wk-edge); border-radius: 999px; background: var(--wk-paper);
  font-size: 14px; font-weight: 500; line-height: 19px; color: var(--wk-ink); cursor: pointer; white-space: nowrap;
}
.dkq-chip:hover { background: var(--wk-track); }
.dkq-chip.on { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
.dkq-chip i { font-size: 15px; }
.dkq-chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.dkq-chip:has(input:focus-visible) { outline: 3px solid var(--wk-ink); outline-offset: 2px; }
.dkq-toggle { margin-top: 16px; }

#dk-qr .dk-dialog-foot { margin-top: 44px; align-items: center; }
.dkq-svg { margin: 0 auto 0 -20px; }

/* Print a sign (live/qr/print.ts): only the sign prints while <html> has .dkq-printing, centred at its true size. */
.dkq-print { display: none; }
@page dkq-sign { margin: .25in; }
@media print {
  html.dkq-printing body > :not(.dkq-print) { display: none !important; }
  html.dkq-printing .dkq-print {
    page: dkq-sign; display: flex; align-items: center; justify-content: center; flex: 1 0 auto; width: 100%; height: 100vh;
    background: #ffffff; break-inside: avoid;
  }
  .dkq-sign { display: flex; flex-direction: column; align-items: center; }
  .dkq-sign img { display: block; width: 8in; height: auto; }
  .dkq-sign p { margin: .1in 0 0; font-family: var(--wk-serif); font-size: 28pt; line-height: 1.2; }
  .dkq-print.dark .dkq-sign {
    padding-bottom: .3in; background: #141b3c; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}
/* A card for your invitations (Figma 3590:59722): the card as it prints, beside what goes on it and the paper. The card
   keeps the site's own colors and fonts (set inline from the snapshot), in light and dark mode alike. Line heights are
   pinned in px (Manrope runs 1px tall). */
.dl-card-body { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 28px; align-items: center; }

/* One pixel to a hundredth of an inch: the card is 3.5 × 2 in. The edge is a shadow so it takes no room inside. */
.dl-card-preview {
  position: relative; width: 350px; height: 200px; margin: 0; border-radius: 6px;
  box-shadow: 0 0 0 1px var(--wk-stroke);
}
.dl-card-line { position: absolute; margin: 0; white-space: nowrap; }
.dl-card-qr { position: absolute; background: #ffffff; }
.dl-card-qr img { position: absolute; display: block; max-width: none; }

.dl-card-side { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.dl-card-label {
  margin: 0 0 8px; font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wk-muted);
}
.dl-card-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.dl-card-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 1px solid var(--wk-edge);
  border-radius: 999px; background: var(--wk-paper); color: var(--wk-ink); font-size: 14px; font-weight: 500; line-height: 19px;
}
.dl-card-chip i { font-size: 16px; }
.dl-card-chip[aria-pressed="true"] { border-color: var(--wk-btn); background: var(--wk-btn); color: var(--wk-on-navy); }
.dl-card-paper { margin: 0; font-size: 14px; line-height: 20px; color: var(--wk-body); }
.dl-card-error { margin: 12px 0 0; font-size: 13px; line-height: 18px; color: var(--wk-plum); }

/* Change password sits at the footer's left, its words lined up with the dialog's edge. */
.dl-card-change { margin: 0 auto 0 -12px; padding: 0 12px; font-weight: 500; }
#dk-card .dk-dialog-foot [aria-busy="true"] { cursor: progress; }
/* The live site's menus and pages: the Live chip's menu (3525:58387), the Share menu (3592:58486), Your site is live
   (3524:58903), Take it offline (3525:59380) and the Website tab's live page (3594:58486). Line heights are pinned in
   px (Manrope runs 1px tall in Chrome). */

/* ---- the menus under the editor bar ---- */
.dl-pop {
  position: fixed; z-index: 30; width: 338px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 76px); overflow-y: auto;
  box-sizing: border-box; padding: 20px 20px 18px; border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-paper);
  color: var(--wk-ink); box-shadow: 0 18px 48px rgba(20, 27, 60, .16), 0 2px 6px rgba(20, 27, 60, .06); font-family: var(--wk-sans);
}
.dl-pop:focus, .dl-pop .dl-pop-title:focus { outline: none; }
.dl-pop-title {
  margin: 0 0 12px; font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wk-muted);
}
.dl-rows { display: flex; flex-direction: column; }
.dl-row {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 11px 0; box-sizing: border-box; border: 0;
  border-top: 1px solid var(--wk-hair); border-radius: 0; background: none; text-align: left; font-family: var(--wk-sans);
  color: var(--wk-ink);
}
.dl-row:hover { background: var(--wk-track); }
.dl-row:focus-visible { outline-offset: -3px; }
.dl-row[aria-busy="true"] { cursor: progress; }
.dl-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dl-row-title { font-size: 14px; font-weight: 600; line-height: 19px; }
.dl-row-sub { font-size: 13px; font-weight: 400; line-height: 17px; color: var(--wk-muted); }
.dl-row-chev { flex: none; font-size: 14px; }
.dl-row.plum { color: var(--wk-plum); }

/* The Live chip's menu: rows inside its margins, the replies in the serif. */
.dl-stat { display: flex; flex-direction: column; margin: 14px 0 0; padding-bottom: 11px; }
.dl-stat-n { font-family: var(--wk-serif); font-size: 26px; font-weight: 500; line-height: 30px; color: var(--wk-ink); }
.dl-stat-label { font-size: 13px; line-height: 17px; color: var(--wk-muted); }
.dl-chip-block { padding: 10px 0; border-top: 1px solid var(--wk-hair); }
.dl-addr + .dl-chip-block { margin-top: 14px; }
.dl-chip-head { margin: 0; font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); }
.dl-chip-sub { margin: 2px 0 0; font-size: 13px; line-height: 17px; color: var(--wk-muted); }
.dl-addr + .dl-rows { margin-top: 14px; }

/* The Share menu: rows from edge to edge. */
.dl-share { padding: 19px 0 6px; }
.dl-share .dl-pop-title { margin: 0 18px 8px; }
.dl-share .dl-addr { margin: 0 18px; }
.dl-share .dl-addr + .dl-rows { margin-top: 15px; }
.dl-share .dl-row { padding: 11px 18px; }
.dl-share .dl-row-title { font-size: 15px; line-height: 21px; }
.dl-share .dl-row-chev { margin-right: 4px; }

/* ---- the address in its grey box ---- */
.dl-addr {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; box-sizing: border-box; border-radius: 10px;
  background: var(--wk-track);
}
.dl-addr-text { flex: 1; min-width: 0; font-weight: 600; color: var(--wk-ink); overflow-wrap: anywhere; }
.dl-addr.chip { min-height: 38px; padding: 4px 12px; }
.dl-addr.chip .dl-addr-text { font-size: 14px; line-height: 19px; }
.dl-addr.chip .dl-addr-copy {
  margin: 0; padding: 4px 0; border: 0; background: none; font-family: var(--wk-sans); font-size: 13px; font-weight: 700;
  line-height: 17px; color: var(--wk-ink);
}
.dl-addr.chip .dl-addr-copy:hover { text-decoration: underline; }
.dl-addr.menu { min-height: 42px; padding: 6px 6px 6px 12px; }
.dl-addr.menu .dl-addr-text { font-size: 14px; font-weight: 500; line-height: 19px; }
.dl-addr.menu .dl-addr-copy { min-height: 30px; padding: 0 12px; font-size: 13px; line-height: 17px; }
.dl-addr.dialog { min-height: 64px; padding: 10px 12px 10px 16px; border-radius: 12px; }
.dl-addr.dialog .dl-addr-text { font-size: 16px; line-height: 22px; }
.dl-addr.dialog .dl-addr-copy { min-height: 41px; padding: 0 20px; font-size: 15px; line-height: 21px; }
.dl-addr.page { min-height: 60px; margin-top: 20px; padding: 8px 8px 8px 18px; border-radius: 14px; }
.dl-addr.page .dl-addr-text { font-size: 16px; line-height: 22px; }
.dl-addr.page .dl-addr-copy { min-height: 44px; padding: 0 22px; font-size: 15px; line-height: 21px; }
.dl-addr-open {
  display: inline-flex; align-items: center; gap: 2px; padding: 8px 4px; font-size: 15px; font-weight: 600; line-height: 21px;
  color: var(--wk-ink); text-decoration: none;
}
.dl-addr-open:hover { text-decoration: underline; }
.dl-addr-open i { font-size: 14px; }

/* ---- the cards that open each way to share ---- */
.dl-card-item { display: flex; min-width: 0; }
.dl-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-self: stretch; }
.dl-card-title { font-size: 15px; font-weight: 600; line-height: 21px; }
.dl-card-sub { margin-top: 4px; font-size: 13px; font-weight: 400; line-height: 17px; color: var(--wk-muted); }
.dl-card-act {
  display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600;
  line-height: 19px; color: var(--wk-ink);
}
.dl-card-act i { font-size: 13px; }

/* Your site is live: three grey tiles under the address. */
.dl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.dl-tile {
  flex: 1; display: flex; align-items: flex-start; min-height: 87px; margin: 0; padding: 16px; box-sizing: border-box; border: 0;
  border-radius: 12px; background: var(--wk-track); text-align: left; font-family: var(--wk-sans); color: var(--wk-ink);
}
.dl-tile:hover { background: var(--wk-hair); }

/* Take it offline: no body between the lead and the buttons; its button is plum, with the page's color on it so it
   reads in both modes (dark mode's plum is light). */
#dk-offline .dk-dialog-body:empty { display: none; }
.dk-btn.dl-plum { background: var(--wk-plum); color: var(--wk-paper); }

/* ---- the Website tab once live ---- */
:where(.dl-page) button { font-family: inherit; color: inherit; cursor: pointer; }
.dl-top { display: grid; grid-template-columns: minmax(0, 460fr) minmax(0, 618fr); gap: 42px; align-items: start; }
.dl-eyebrow {
  margin: 8px 0 0; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wk-plum);
}
.dl-title { margin: 12px 0 0; font-family: var(--wk-display); font-size: 48px; font-weight: 400; line-height: 52px; color: var(--wk-ink); }
.dl-title em { font-style: normal; color: var(--wk-plum); }
.dl-page .dl-title:focus { outline: none; }
.dl-line { margin: 12px 0 0; font-size: 14px; line-height: 19px; color: var(--wk-muted); }
.dl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.dl-card {
  flex: 1; display: flex; align-items: flex-start; gap: 12px; min-height: 115px; margin: 0; padding: 17px 18px 16px;
  box-sizing: border-box; border: 1px solid var(--wk-stroke); border-radius: 12px; background: var(--wk-paper); text-align: left;
  color: var(--wk-ink);
}
.dl-card:hover { border-color: var(--wk-edge); }
.dl-card .dl-card-title { font-size: 16px; line-height: 22px; }
.dl-card .dl-card-sub { margin-top: 2px; }
/* The code's own quiet zone is inside the SVG (4 of its 37 modules each side): drawn at 64 its modules fill the
   frame's 52 square, and the white ground keeps it a code to scan on a dark card. */
.dl-qr { flex: none; display: block; width: 64px; height: 64px; margin: -6px -6px -6px 0; border-radius: 6px; background: #fff; }
.dl-go { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.dl-big { min-height: 44px; padding: 0 22px; font-size: 15px; line-height: 21px; }
.dk-btn.line.dl-big { border: 1.5px solid var(--wk-ink); }

.dl-preview { margin: 8px 0 0; padding: 12px; border: 1px solid var(--wk-hair); border-radius: 16px; background: var(--wk-track); }
.dl-preview-bar { display: flex; padding-bottom: 12px; }
.dl-preview-url {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px;
  background: var(--wk-paper); font-size: 13px; font-weight: 600; line-height: 17px; color: var(--wk-ink); overflow-wrap: anywhere;
}
.dl-preview-tag {
  padding: 1px 7px; border-radius: 999px; background: var(--wk-plum-wash); font-size: 11px; font-weight: 600; line-height: 15px;
  color: var(--wk-plum);
}
.dl-preview-view {
  position: relative; height: 560px; overflow: hidden; border: 1px solid var(--wk-stroke); border-radius: 10px; background: var(--wk-paper);
}
.dl-preview-frame { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }

/* Below 1280 the columns narrow, as the first visit's do; the preview keeps its desktop drawing, scaled. */
@media (max-width: 1279px) {
  .dl-top { gap: 24px; }
  .dl-title { font-size: 40px; line-height: 46px; }
}
/* Republish, review the changes (3525:58887): the changes as lines under hairlines, Undo at the right of each, and a
   quiet note before the buttons. The dialog itself is site-desk.css's .dk-dialog; its footer buttons are
   site-desk-share.css's .dks-foot-btn. Line heights are pinned in px (Chrome draws Manrope a pixel taller than Figma). */
#dk-republish .dk-dialog-foot { margin-top: 18px; }

.dlrp-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wk-hair); }
.dlrp-line { display: flex; align-items: center; gap: 16px; padding: 10px 0; }
.dlrp-line + .dlrp-line { border-top: 1px solid var(--wk-hair); }
.dlrp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dlrp-what { font-size: 14px; font-weight: 600; line-height: 19px; color: var(--wk-ink); overflow-wrap: anywhere; }
.dlrp-detail { font-size: 12px; line-height: 16px; color: var(--wk-muted); overflow-wrap: anywhere; }

/* Undo: a word that acts, with a bigger area to hit than its letters. */
.dlrp-undo {
  position: relative; flex: none; padding: 4px 0; border: 0; background: none; font-size: 14px; font-weight: 600;
  line-height: 19px; color: var(--wk-ink); white-space: nowrap;
}
.dlrp-undo::after { content: ''; position: absolute; inset: -8px -6px; }
.dlrp-undo:hover { text-decoration: underline; text-underline-offset: 3px; }

.dlrp-quiet { margin: 0; padding: 10px 0; font-size: 14px; line-height: 20px; color: var(--wk-muted); }
.dlrp-note { margin: 18px 0 0; font-size: 14px; line-height: 20px; color: var(--wk-muted); }
/* 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); }
/* Two graphics: the same illustrations, two picked in order */
.sb-art-item[aria-pressed] .sb-art-img { position: relative; }
.sb-art-item[aria-pressed='true'] .sb-art-img { border-color: var(--wk-ink); }
.sb-art-item[aria-pressed='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-display); font-size: 38px; font-weight: 400; 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; }
}

/* Guests' photos waiting for the couple's okay (Photos tab; agent/guest_photos.py). */
.sl-waiting { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--wk-wash); }
.sl-waiting-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--wk-ink); }
.sl-waiting-sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--wk-body); }
.sl-waiting-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sl-waiting-list li { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; }
.sl-waiting-list img { grid-row: 1 / span 2; width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--wk-track); }
.sl-waiting-from { font-size: 14px; font-weight: 600; color: var(--wk-ink); min-width: 0; overflow-wrap: anywhere; }
.sl-waiting-acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* 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-display); font-size: 38px; font-weight: 400; 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-display); font-size: 34px; font-weight: 400; 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-display); font-size: 38px; font-weight: 400; 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; }
}
/* Text the iPhone app enlarges to follow the phone's Text Size (app/native.ts: up to 150%, with data-text-large on
   the root above 100%). Rows, headers and boxes laid out for the standard size make room instead of breaking a word
   or cutting a sentence. Browsers never get the attribute, so none of this applies there. */
:root[data-text-large] .p-row-end { flex: 0 1 auto; min-width: 0; max-width: 55%; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
:root[data-text-large] :is(.p-row-title, .p-row-sub) { overflow-wrap: break-word; }
:root[data-text-large] .vd-title-row { flex-wrap: wrap; }
:root[data-text-large] .cx-composer textarea { line-height: 1.35; }
:root[data-text-large] .cx-composer textarea:placeholder-shown { min-height: calc(2.7em + 24px); }

/* The donut's centre is drawn to the ring's size, so it keeps the standard size; the line above the chart says the
   same amounts at the phone's size. */
.fin-donut-mid { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* The checklist search's hint can't fit beside its button at these sizes, and the label above the field says what
   it's for, so the hint goes rather than showing cut. */
:root[data-text-large] #ck-search-field::placeholder { color: transparent; }