/* Occasi "Film + Pass" (js/occasi-pass.js). Layout, spacing and the FIXED type scale; the look comes from the design's
 * skin (--wk-* variables, e.g. collection/the-season/dance-card/weekend-skin.css). Designed pages, no squeezing:
 * nothing here scales text to fit; lists switch layouts by count (JS) and overflow into swipe cards.
 * Phone first. On a wide screen the same phone column (--wk-app) stands centred on the design's own backdrop. */
.wk-root {
  --wk-app: min(100vw, 430px);
  --wk-bg: #f6f2ea; --wk-paper: #fffdf8; --wk-ink: #2b2a33; --wk-soft: #6c6875; --wk-gold: #a88c5c; --wk-rule: rgba(160, 140, 100, .45);
  --wk-display: Georgia, serif; --wk-text: Georgia, serif; --wk-display-style: normal; --wk-r: 10px; --wk-btn: #2b2a33; --wk-onbtn: #fff;
  --wk-shadow: 0 10px 28px -14px rgba(30, 25, 50, .4);
  --wk-h1: 30px; --wk-h2: 22px; --wk-big: 26px; --wk-val: 14.5px; --wk-body: 13px; --wk-tiny: 11px; --wk-label: 9px;
  --wk-safe-t: env(safe-area-inset-top, 0px); --wk-safe-b: env(safe-area-inset-bottom, 0px);
  color: var(--wk-ink); font: 400 var(--wk-body) / 1.45 var(--wk-text);
}
.wk-root *, .wk-sheet * { box-sizing: border-box; }
.wk-app { position: fixed; top: 0; bottom: 0; left: calc(50% - var(--wk-app) / 2); width: var(--wk-app); z-index: 2; overflow: hidden; contain: layout paint; }
.wk-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- type ---------------------------------------------------------------------------------------------------------- */
.wk-kicker, .wk-label { margin: 0; font: 700 var(--wk-label) / 1.35 var(--wk-text); letter-spacing: .22em; text-transform: uppercase; color: var(--wk-soft); }
.wk-h1 { margin: 6px 0 0; font: var(--wk-display-style) 400 var(--wk-h1) / 1.06 var(--wk-display); color: var(--wk-ink); text-wrap: balance; overflow-wrap: anywhere; }
.wk-h2 { margin: 4px 0 0; font: var(--wk-display-style) 400 var(--wk-h2) / 1.12 var(--wk-display); color: var(--wk-ink); text-wrap: balance; overflow-wrap: anywhere; }
.wk-sub { margin: 6px 0 0; font: italic 400 var(--wk-body) / 1.45 var(--wk-text); color: var(--wk-soft); text-wrap: pretty; }
.wk-val { font: 400 var(--wk-val) / 1.3 var(--wk-text); color: var(--wk-ink); overflow-wrap: anywhere; }
.wk-tiny { margin: 2px 0 0; font: 400 var(--wk-tiny) / 1.4 var(--wk-text); color: var(--wk-soft); overflow-wrap: anywhere; }
.wk-note { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--wk-rule); font: italic 400 var(--wk-body) / 1.4 var(--wk-text); }
.wk-made { margin: 6px 0 0; font: 400 9.5px / 1 var(--wk-text); letter-spacing: .14em; text-transform: uppercase; color: var(--wk-soft); opacity: .8; text-align: center; }
.wk-ok { color: #2f6b3f; }
.wk-sig { display: inline-block; margin-left: 6px; padding: 3px 6px 2px; background: var(--wk-gold); color: #fff; font: 700 8px/1 var(--wk-text); letter-spacing: .14em; text-transform: uppercase; vertical-align: 1px; }

/* ---- buttons and links ------------------------------------------------------------------------------------------- */
.wk-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 10px 0 0; padding: 0 18px; border: 0; border-radius: var(--wk-r);
  background: var(--wk-btn); color: var(--wk-onbtn); font: 700 11px / 1.2 var(--wk-text); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.wk-btn.wk-ghost { background: transparent; color: var(--wk-ink); box-shadow: inset 0 0 0 1px var(--wk-rule); }
.wk-btn[disabled] { opacity: .55; cursor: default; }
.wk-btn .wk-ico { width: 18px; height: 18px; }
.wk-link { appearance: none; border: 0; background: none; padding: 10px 2px; min-height: 40px; font: italic 400 var(--wk-body) / 1.2 var(--wk-text); color: var(--wk-ink); text-decoration: underline; text-decoration-color: var(--wk-gold); text-underline-offset: 4px; cursor: pointer; }
.wk-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 6px 0; min-height: 32px; border: 0; background: none; font: italic 400 var(--wk-tiny) / 1.2 var(--wk-text); color: var(--wk-ink); text-decoration: underline; text-decoration-color: var(--wk-gold); text-underline-offset: 3px; cursor: pointer; }
.wk-iconbtn[hidden] { display: none; }
.wk-iconbtn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--wk-ink); cursor: pointer; }
.wk-root :focus-visible, .wk-sheet :focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; }
.wk-chev { color: var(--wk-gold); font: 400 20px/1 var(--wk-display); }

/* ---- the film: full-screen scenes that snap ---------------------------------------------------------------------- */
.wk-film { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; }
.wk-film::-webkit-scrollbar { display: none; }
.wk-film.is-single { overflow: hidden; }
.wk-scene { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; display: grid; place-items: center; padding: calc(16px + var(--wk-safe-t)) 16px calc(16px + var(--wk-safe-b)); }
.wk-progress { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 20; display: grid; gap: 2px; }
.wk-progress button { display: grid; place-items: center; width: 15px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.wk-progress i { display: block; width: 6px; height: 6px; transform: rotate(45deg); background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px var(--wk-gold); transition: background .3s ease, transform .3s ease; }
.wk-progress [aria-current] i { background: var(--wk-gold); transform: rotate(45deg) scale(1.35); }
.wk-app[data-scene="0"] .wk-progress { opacity: .85; }

/* ---- cards (a design may draw its own paper behind [data-wk-card]) ------------------------------------------------- */
.wk-card { position: relative; width: 100%; max-width: 390px; padding: 22px 20px 16px; background: var(--wk-paper); border-radius: var(--wk-r); box-shadow: var(--wk-shadow); text-align: center; }

/* ---- will you join us? ------------------------------------------------------------------------------------------- */
.wk-join { text-align: center; }
.wk-join .wk-sub b { font-style: normal; font-weight: 400; color: var(--wk-ink); }
.wk-jlist { margin: 14px 0 0; border-top: 1px solid var(--wk-rule); text-align: left; }
.wk-jrow, .wk-drow { position: relative; display: grid; grid-template-columns: 4px 58px 1fr 14px; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--wk-rule); background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.wk-jrow.is-compact { grid-template-columns: 4px 84px 1fr 14px; min-height: 33px; padding: 3px 2px; }
.wk-bar { align-self: stretch; width: 3px; border-radius: 2px; background: var(--ec); }
.wk-jwhen { display: grid; font: italic 400 12px / 1.2 var(--wk-text); color: var(--wk-soft); white-space: nowrap; }
.wk-jwhen b { font: 700 var(--wk-label) / 1.3 var(--wk-text); letter-spacing: .2em; text-transform: uppercase; color: var(--wk-ink); font-style: normal; }
.wk-jrow.is-compact .wk-jwhen { display: flex; gap: 6px; align-items: baseline; }
.wk-tbc { display: block; white-space: normal; font-size: .8em; line-height: 1.15; overflow-wrap: anywhere; }   /* v285: "Time to follow" wraps in the time column */
.wk-jname { display: grid; font: var(--wk-display-style) 400 17px / 1.15 var(--wk-display); color: var(--ec); overflow-wrap: anywhere; }
.wk-jrow.is-compact .wk-jname { font-size: 15px; }
.wk-jname small { font: 400 var(--wk-tiny) / 1.35 var(--wk-text); color: var(--wk-soft); font-style: normal; }
.wk-jmore { width: 100%; min-height: 36px; border: 0; border-bottom: 1px solid var(--wk-rule); background: none; font: italic 400 12px / 1.2 var(--wk-text); color: var(--wk-ink); cursor: pointer; }
.wk-meal { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 10px 0 0; padding: 6px 10px; border: 1px solid var(--wk-rule); border-radius: var(--wk-r); text-align: left; }
.wk-mealtxt { display: grid; gap: 2px; font: 400 var(--wk-tiny) / 1.35 var(--wk-text); color: var(--wk-soft); }
.wk-mealtxt b { font-weight: 400; color: var(--wk-ink); }
.wk-mealtxt i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
.wk-meal .wk-link { padding: 6px 2px; min-height: 32px; }
/* v284 (sense-check #1): no meal is chosen for the guest; the one-tap button waits (still tappable: it opens the meal choice) */
.wk-mealneed { grid-column: 1 / -1; font: 400 var(--wk-tiny) / 1.35 var(--wk-text); color: var(--wk-ink); }
.wk-yes.is-wait { opacity: .55; }
/* v284 (sense-check #8): "Your reply is sent · names" on the card at once, before a design's film */
.wk-yes.is-sent, .wk-yes.is-sent:disabled { opacity: 1; cursor: default; }
.wk-sentwho { margin: 8px 0 0; font: 400 var(--wk-small, var(--wk-tiny)) / 1.35 var(--wk-text); color: var(--wk-ink); text-align: center; }
.wk-whole { white-space: nowrap; }   /* v282: a dish (and "· everyone") never breaks inside */
.wk-meal.is-narrow { grid-template-columns: 1fr auto; row-gap: 0; }
.wk-meal.is-narrow > .wk-label { grid-column: 1 / -1; }
.wk-meal.is-small .wk-mealtxt { font-size: calc(var(--wk-tiny) * .9); }
.wk-yes { min-height: 58px; margin-top: 14px; font-size: 13px; letter-spacing: .14em; }
.wk-yes .wk-ico { width: 22px; height: 22px; stroke-width: 2; }
.wk-joinlinks { display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--wk-soft); }
.wk-joinlinks.is-measure { flex-wrap: nowrap !important; }
.wk-joinlinks.is-measure > * { flex: none !important; min-width: auto !important; white-space: nowrap !important; }
.wk-joinlinks.is-stacked { flex-direction: column; flex-wrap: nowrap; row-gap: 0; }   /* v282: too long for one line: stacked, centred, no dot */
.wk-joinlinks.is-stacked > span[aria-hidden] { display: none; }
.wk-extras { display: inline-flex; align-items: center; gap: 6px; margin-top: -4px; font-size: 12px; color: var(--wk-soft); }
.wk-extras .wk-ico { width: 14px; height: 14px; }
.wk-extras i { color: var(--wk-soft); }
.wk-error { margin: 8px 0 0; color: #a3263a; font: italic 400 12.5px / 1.35 var(--wk-text); }
.wk-privlink { padding: 4px 2px; min-height: 30px; font-size: 11px; color: var(--wk-soft); }
.wk-privacy { margin: 8px 0 0; font: 400 9.5px / 1.4 var(--wk-text); color: var(--wk-soft); text-align: center; }
.wk-field { display: grid; gap: 4px; margin: 12px 0 0; text-align: left; }
.wk-field input, .wk-field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--wk-rule); border-radius: var(--wk-r); background: rgba(255, 255, 255, .6); font: 400 16px / 1.3 var(--wk-text); color: var(--wk-ink); }
.wk-namefield { margin-top: 10px; }
/* v282: the shared link's other guests: one more name under "Your name" (with its ×), then "Your household" on a sheet */
.wk-gfield { grid-template-columns: 1fr auto; align-items: center; gap: 4px; margin-top: 6px; }
.wk-gfield label { display: block; min-width: 0; }
.wk-gremove { width: 40px; min-height: 44px; border: 0; background: none; font: 400 22px / 1 var(--wk-text); color: var(--wk-soft); cursor: pointer; }
.wk-addguest { display: block; margin: 4px auto 0; padding: 4px 2px; min-height: 36px; }
.wk-guestline { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 6px 0 0; font: 400 var(--wk-body) / 1.35 var(--wk-text); color: var(--wk-soft); }
.wk-guestline b { font-weight: 500; color: var(--wk-ink); }
.wk-guestline .wk-link { padding: 4px 2px; min-height: 32px; }
.wk-glist .wk-gfield:first-child { margin-top: 0; }
.wk-namerow { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px; }
.wk-namerow .wk-namefield { min-width: 0; }
.wk-gchip { min-width: 44px; min-height: 44px; padding: 0 8px; border: 1px solid var(--wk-rule); border-radius: var(--wk-r); background: rgba(255, 255, 255, .6); font: 500 17px / 1 var(--wk-text); color: var(--wk-ink); cursor: pointer; }
.wk-glist + .wk-addguest + .wk-btn, .wk-glist + .wk-btn { margin-top: 12px; }
/* v282 (item 4B, option A): "Any allergies or dietary needs?" on the reply: bold, a box and two chips for each person coming
   (the chips go under the box when the line is narrow); one line with "None" and "Add" for three people or more */
.wk-diet { margin: 10px 0 0; padding: 6px 10px 8px; border: 1px solid var(--wk-rule); border-left: 3px solid var(--wk-gold); border-radius: var(--wk-r); text-align: left; }
.wk-dieth { display: block; font: 700 var(--wk-body) / 1.3 var(--wk-text); color: var(--wk-ink); }
.wk-diet.is-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-block: 4px; }
.wk-diet.is-line .wk-dieth { flex: 1 1 10em; }
.wk-dietrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
.wk-dname { flex: 0 0 100%; font: 600 var(--wk-tiny) / 1.2 var(--wk-text); letter-spacing: .04em; color: var(--wk-soft); overflow-wrap: anywhere; }
.wk-dietin { flex: 1 1 9em; min-width: 0; margin: 0; }
.wk-dietin textarea, .wk-dietp textarea, .wk-gdrow textarea { display: block; resize: none; overflow: hidden; field-sizing: content; overflow-wrap: anywhere; }   /* v285 (u12, u20a): a long note wraps and the box grows, on every reply sheet */
.wk-dchips { display: flex; gap: 6px; margin-left: auto; }
.wk-dchip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; padding: 0 12px; border: 1px solid var(--wk-rule); border-radius: 999px; background: rgba(255, 255, 255, .6); font: 400 12.5px / 1 var(--wk-text); color: var(--wk-ink); cursor: pointer; white-space: nowrap; }
.wk-dchip .wk-ico { width: 13px; height: 13px; }
.wk-dchip[aria-pressed="true"], .wk-dchip.is-on { background: var(--wk-btn); border-color: var(--wk-btn); color: var(--wk-onbtn); }
.wk-dlist .wk-dietrow:first-child { margin-top: 0; }
.wk-diet.is-row { flex-wrap: nowrap; gap: 8px; margin-top: 4px; padding: 0 2px 0 10px; border-width: 0 0 0 3px; border-radius: 0; }
.wk-diet.is-row .wk-dchip { min-height: 32px; }
.wk-dietq { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 4px; min-width: 0; min-height: 32px; padding: 0; border: 0; background: none; text-align: left; font: 700 var(--wk-body) / 1.25 var(--wk-text); color: var(--wk-ink); text-decoration: underline; text-decoration-color: var(--wk-gold); text-underline-offset: 3px; cursor: pointer; }
.wk-dietq b { font-weight: 700; }
.wk-dietq .wk-ico { width: 14px; height: 14px; }
.is-diet .wk-extras { display: flex; margin: 8px auto 0; }
.wk-algrid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wk-algrid .wk-dchip { flex: 1 1 auto; }
.wk-dlist + .oc-diet-line, .wk-algrid + .oc-diet-line, .wk-diet > .oc-diet-line { margin: 8px 0 0; }
.is-diet .wk-btn, .is-allergens .wk-btn { margin-top: 12px; }
/* v248: the reply's email (one field, one small line; the walk-through designs size their object to this) and "Send me my Pass" */
.wk-emailfield { margin-top: 8px; }
.wk-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wk-emailhint { margin: 4px 0 0; text-align: left; }
.wk-sendpass { display: block; margin: 6px auto 0; padding: 4px 2px; min-height: 30px; font-size: 11px; color: var(--wk-soft); }
/* v252 (B7): "Find your invitation" where only the guest list may reply */
.wk-findform { display: grid; gap: 8px; margin-top: 4px; }
.wk-findform .wk-note { margin: 0; }
.wk-findform .wk-btn { width: 100%; }
.wk-findform .wk-sendpass[hidden] { display: none; }   /* shown only after "already replied" */
/* v262 (study #3 row 4): already replied is a calm line in the ink, not an error; "Email me my Pass" is the main button */
.wk-join .wk-findform [hidden] { display: none; }
.wk-findreplied { margin: 0; font: italic 400 var(--wk-body) / 1.35 var(--wk-text); color: var(--wk-ink); text-align: center; }
.wk-findagain { justify-self: center; min-height: 44px; font-size: 14px; }
.wk-nobr { white-space: nowrap; }   /* v262 (row 18): "joindrez-vous" stays whole */
/* v262 (row 5): where the Pass link was emailed (the address masked) */
.wk-emailed { margin: 8px 0 0; font: italic 400 14px / 1.35 var(--wk-text); color: var(--wk-ink); }

/* ---- sheets ------------------------------------------------------------------------------------------------------- */
.wk-sheet { position: fixed; inset: 0; width: var(--wk-app, min(100vw, 430px)); max-width: 100vw; height: 100%; max-height: 100%; margin: 0 auto; padding: 0; border: 0; background: transparent; color: var(--wk-ink); overflow: hidden; }
.wk-sheet::backdrop { background: rgba(30, 26, 45, .42); }
/* v285 gather-r7: a card the editors' preview opened without taking the focus (no top layer): the same backdrop, painted */
.wk-sheet.is-quiet { z-index: 2147483000; box-shadow: 0 0 0 100vmax rgba(30, 26, 45, .42); }
.wk-sheetin { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - 40px - var(--wk-safe-t)); display: flex; flex-direction: column; background: var(--wk-paper); border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px -12px rgba(30, 25, 50, .5); animation: wk-rise .32s cubic-bezier(.2, .8, .2, 1); }
.wk-sheet.is-event .wk-sheetin { top: calc(10px + var(--wk-safe-t)); max-height: none; }
/* owner (theme rule, tester u17): the reply card off a design's face is that design's own object (opts.replyCard), laid
   over its scene, which stays in view: a card as tall as its side, centred, never a panel sliding up. The design draws it. */
.wk-sheet.is-card::backdrop { background: rgba(30, 26, 45, .2); }
.wk-sheet.is-card .wk-sheetin { top: calc(12px + var(--wk-safe-t)); bottom: calc(12px + var(--wk-safe-b)); left: 12px; right: 12px; height: fit-content; max-height: calc(100% - 24px - var(--wk-safe-t) - var(--wk-safe-b)); margin-block: auto; border-radius: 4px; animation: wk-lay .34s cubic-bezier(.2, .8, .2, 1); }
.wk-sheet.is-card .wk-sheetbody { padding: 46px 20px 18px; }
@keyframes wk-lay { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wk-sheet.is-card .wk-sheetin { animation: none; } }
@keyframes wk-rise { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.wk-sheetbar { position: absolute; top: 4px; right: 4px; left: 4px; display: flex; justify-content: space-between; z-index: 3; pointer-events: none; }
.wk-sheetbar .wk-iconbtn { pointer-events: auto; background: rgba(255, 255, 255, .7); }
.wk-sheetclose { margin-left: auto; }
.wk-sheetbody { overflow-y: auto; overscroll-behavior: contain; padding: 48px 18px calc(18px + var(--wk-safe-b)); }
.wk-sheet.is-event .wk-sheetbody { padding: 0 0 calc(12px + var(--wk-safe-b)); flex: 1; }
.wk-sheethead { padding: 0 0 10px; }
.wk-sheethead .wk-h2 { font-size: 26px; }
.wk-sheet .wk-btn + .wk-btn { margin-top: 8px; }

/* change sheet */
.wk-quick { display: flex; gap: 6px; align-items: center; color: var(--wk-soft); }
.wk-crow { display: grid; grid-template-columns: 4px 1fr auto; align-items: center; gap: 4px 10px; min-height: 52px; padding: 7px 0; border-bottom: 1px solid var(--wk-rule); }
.wk-cname { display: grid; font: var(--wk-display-style) 400 16px / 1.15 var(--wk-display); color: var(--ec); overflow-wrap: anywhere; }
.wk-cname small { font: 400 var(--wk-tiny) / 1.3 var(--wk-text); color: var(--wk-soft); font-style: normal; }
.wk-yn { display: flex; gap: 4px; }
.wk-yn button { min-width: 50px; min-height: 36px; padding: 0 10px; border: 1px solid var(--wk-rule); border-radius: var(--wk-r); background: transparent; font: 700 10px / 1 var(--wk-text); letter-spacing: .14em; text-transform: uppercase; color: var(--wk-ink); cursor: pointer; }
.wk-yn [aria-checked="true"] { background: var(--wk-btn); border-color: var(--wk-btn); color: var(--wk-onbtn); }
.wk-mealpick { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; font: 700 var(--wk-label) / 1 var(--wk-text); letter-spacing: .2em; text-transform: uppercase; color: var(--wk-soft); }
.wk-mealpick select { flex: 1; min-height: 36px; padding: 0 8px; border: 1px solid var(--wk-rule); border-radius: var(--wk-r); background: transparent; font: 400 15px / 1 var(--wk-text); color: var(--wk-ink); letter-spacing: 0; text-transform: none; }
.wk-check { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; font: italic 400 var(--wk-body) / 1.3 var(--wk-text); }
.wk-check input { width: 20px; height: 20px; accent-color: var(--wk-btn); }

/* chips (one per household member) */
/* v285 (fresh round 2, 360): the household wraps onto a second line, so everyone (and the one chosen) is on screen */
.wk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.wk-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 34px; padding: 0 12px 0 4px; border: 1px solid var(--wk-rule); border-radius: 999px; background: transparent; font: 400 12.5px / 1 var(--wk-text); color: var(--wk-ink); cursor: pointer; }
.wk-chip b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wk-rule); font: italic 400 13px / 1 var(--wk-display); color: var(--wk-ink); }
.wk-chip[aria-selected="true"] { background: var(--wk-btn); border-color: var(--wk-btn); color: var(--wk-onbtn); }
.wk-chip[aria-selected="true"] b { background: rgba(255, 255, 255, .2); color: var(--wk-onbtn); }
/* a household of five or more: names only, so they take two lines and the design's card still fits */
.wk-chips:has(> .wk-chip:nth-child(5)) .wk-chip { padding: 0 10px; }
.wk-chips:has(> .wk-chip:nth-child(5)) .wk-chip b { display: none; }

/* ---- decks: swipe cards, a fixed number of rows each -------------------------------------------------------------- */
.wk-deck { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline: none; }
.wk-deck::-webkit-scrollbar { display: none; }
.wk-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; clip-path: inset(0); }   /* v282: a focus ring on the next card never peeks in at the edge */
.wk-slide .wk-field input:focus-visible { outline-offset: -2px; }   /* v282: inside the box, whole on its own card (the box meets the card's edge) */
.wk-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.wk-arrow { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--wk-rule); border-radius: 50%; background: transparent; color: var(--wk-ink); cursor: pointer; }
.wk-arrow .wk-ico { width: 15px; height: 15px; }
.wk-pdots { display: flex; gap: 6px; }
.wk-pdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--wk-rule); }
.wk-pdots i.on { background: var(--wk-ink); }

/* ---- event card --------------------------------------------------------------------------------------------------- */
.wk-ev { position: relative; }
.wk-band { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 4px; padding: 12px 52px 12px 6px; background: var(--ec); color: #fff; border-radius: 14px 14px 0 0; }
.wk-bandt { display: grid; min-width: 0; }
.wk-bandt b { font: var(--wk-display-style) 400 24px / 1.1 var(--wk-display); overflow-wrap: anywhere; }
.wk-bandt small { font: 700 var(--wk-label) / 1.4 var(--wk-text); letter-spacing: .22em; text-transform: uppercase; opacity: .9; }
.wk-bandnav { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: #fff; cursor: pointer; }
.wk-bandnav[disabled] { opacity: .3; cursor: default; }
.wk-updtag { position: absolute; right: 16px; top: 66px; padding: 3px 7px 2px; border: 1.5px solid #a3263a; color: #a3263a; font: 700 8px/1 var(--wk-text); letter-spacing: .18em; text-transform: uppercase; transform: rotate(4deg); background: var(--wk-paper); }
.wk-rows { padding: 2px 18px 0; }
.wk-prow { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--wk-rule); }
.wk-prow:last-child { border-bottom: 0; }
.wk-prow > .wk-label { padding-top: 3px; color: var(--ec); }
.wk-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.wk-big { font: var(--wk-display-style) 400 var(--wk-big) / 1 var(--wk-display); color: var(--ec); }
.wk-was { font: italic 400 13px/1 var(--wk-text); color: var(--wk-soft); }
.wk-diff { display: inline-block; margin-top: 4px; padding: 2px 6px; border: 1px dashed var(--ec, var(--wk-gold)); font: italic 400 10.5px / 1.3 var(--wk-text); color: var(--ec, var(--wk-ink)); }
.wk-diff + .wk-more { margin-left: 10px; }
.wk-diff.is-muted { border-color: var(--wk-rule); color: var(--wk-soft); }
.wk-dots { display: flex; gap: 5px; margin-top: 6px; }
.wk-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.wk-dot.is-none { background: transparent; box-shadow: inset 0 0 0 1px var(--wk-rule); }
.wk-mini { display: grid; grid-template-columns: 58px 1fr; gap: 3px 8px; font: 400 12.5px / 1.35 var(--wk-text); }
.wk-mini span { color: var(--wk-soft); font-style: italic; white-space: nowrap; }
.wk-mini b { font-weight: 400; overflow-wrap: anywhere; }
.wk-mini-lg { gap: 10px 10px; font-size: 14px; }
.wk-mini-lg small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--wk-soft); }

/* menu */
.wk-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; font: 400 10.5px / 1.3 var(--wk-text); color: var(--wk-soft); }
.wk-legend span { display: inline-flex; gap: 4px; align-items: center; }
.wk-tag { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 3px; border: 1px solid var(--wk-gold); border-radius: 9px; font: 700 8px/1 var(--wk-text); color: var(--wk-ink); }
.wk-course { margin: 14px 0 4px; font: 700 var(--wk-label) / 1.3 var(--wk-text); letter-spacing: .22em; text-transform: uppercase; color: var(--ec); }
.wk-dish { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--wk-rule); }
.wk-dish b { display: block; font: var(--wk-display-style) 400 16px / 1.2 var(--wk-display); }
.wk-dish small { display: block; font: 400 11.5px / 1.35 var(--wk-text); color: var(--wk-soft); }
.wk-dish.is-mine { margin: 0 -8px; padding: 7px 8px; background: color-mix(in srgb, var(--ec) 10%, transparent); box-shadow: inset 2px 0 0 var(--ec); }
.wk-ribbon { display: inline-block; margin-top: 3px; padding: 2px 6px; background: var(--ec); color: #fff; font: 700 8px/1.3 var(--wk-text); letter-spacing: .16em; text-transform: uppercase; }
.wk-tags { display: flex; gap: 3px; align-items: flex-start; }

/* ---- the pass ---------------------------------------------------------------------------------------------------- */
.wk-pass { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; background: var(--wk-bg); }
.wk-phead { min-width: 0; padding: calc(8px + var(--wk-safe-t)) 16px 10px; border-bottom: 1px solid var(--wk-rule); }
.wk-pbrand { display: flex; align-items: center; gap: 8px; }
.wk-pbrand .wk-kicker { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-seal { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--wk-btn); color: var(--wk-onbtn); font: italic 400 12px/1 var(--wk-display); white-space: nowrap; }
.wk-seal i { font-size: .8em; opacity: .8; padding: 0 1px; }
.wk-badge { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #a3263a; color: #fff; font: 700 9.5px/16px var(--wk-text); }
.wk-pname { margin: 2px 0 0; font: var(--wk-display-style) 400 24px / 1.1 var(--wk-display); overflow-wrap: anywhere; }
.wk-pbody { position: relative; min-height: 0; overflow: hidden; }
.wk-panel { height: 100%; padding: 12px 16px 8px; overflow: hidden; }
.wk-ptop { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.wk-ptop:has(.wk-h2) { display: block; }
.wk-ptop .wk-sub { margin: 0; font-size: 12px; }
.wk-newpill { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--wk-btn); color: var(--wk-onbtn); font: 400 11px/1 var(--wk-text); cursor: pointer; }
.wk-newpill i { width: 6px; height: 6px; border-radius: 50%; background: #e7b84b; }
.wk-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px 4px calc(4px + var(--wk-safe-b)); border-top: 1px solid var(--wk-rule); background: var(--wk-paper); }
.wk-tab { display: grid; justify-items: center; gap: 3px; min-height: 52px; padding: 6px 2px 4px; border: 0; background: none; color: var(--wk-soft); font: 400 10px / 1.1 var(--wk-text); cursor: pointer; }
.wk-tab .wk-ico { width: 22px; height: 22px; }
.wk-tab[aria-selected="true"] { color: var(--wk-ink); font-weight: 700; }
.wk-tab[aria-selected="true"] .wk-ico { stroke-width: 1.9; color: var(--wk-gold); }

/* days */
.wk-dhead { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 0; padding-bottom: 3px; border-bottom: 1px solid var(--wk-ink); font: var(--wk-display-style) 400 16px / 1.2 var(--wk-display); }
.wk-dhead em { font: 700 8px / 1 var(--wk-text); letter-spacing: .2em; text-transform: uppercase; color: var(--wk-soft); font-style: normal; }
.wk-dhead.is-today em { color: #a3263a; }
.wk-drow { grid-template-columns: 4px 54px 1fr 14px; min-height: 54px; padding: 6px 0; }
.wk-drow.is-no { opacity: .55; }
.wk-drow.is-slim { min-height: 40px; }
.wk-dtime { font: var(--wk-display-style) 400 15px / 1.1 var(--wk-display); color: var(--wk-ink); white-space: nowrap; }
.wk-dmain { display: grid; min-width: 0; }
.wk-dmain b { font: var(--wk-display-style) 400 17px / 1.15 var(--wk-display); color: var(--ec); font-weight: 400; overflow-wrap: anywhere; }
.wk-dmain small { font: 400 var(--wk-tiny) / 1.35 var(--wk-text); color: var(--wk-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-dmain .wk-diff { justify-self: start; margin-top: 2px; font-size: 9.5px; padding: 1px 5px; }
.wk-gap { margin: 4px 0; padding: 6px 10px; border: 1px dashed var(--wk-rule); font: 400 var(--wk-tiny) / 1.35 var(--wk-text); color: var(--wk-soft); }
.wk-gap b { display: block; font-weight: 700; color: var(--wk-ink); }
.wk-deckwrap.is-days .wk-slide { padding-right: 2px; }

/* today */
.wk-today .wk-live { display: flex; align-items: center; gap: 6px; color: #a3263a; }
.wk-live i { width: 7px; height: 7px; border-radius: 50%; background: #a3263a; animation: wk-pulse 2s ease-in-out infinite; }
@keyframes wk-pulse { 50% { opacity: .35; } }
.wk-ribbon-day { position: relative; height: 54px; margin: 14px 10px 4px; }
.wk-rline { position: absolute; left: 0; right: 0; top: 20px; height: 2px; background: var(--wk-rule); }
.wk-rtick { position: absolute; top: 14px; left: calc(var(--p) * 100%); transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; }
.wk-rtick i { width: 14px; height: 14px; border-radius: 50%; background: var(--wk-paper); box-shadow: inset 0 0 0 2px var(--ec); }
.wk-rtick.is-past i { background: var(--ec); }
.wk-rtick.is-next i { box-shadow: inset 0 0 0 2px var(--ec), 0 0 0 4px color-mix(in srgb, var(--ec) 25%, transparent); }
.wk-rtick small { font: italic 400 10px/1 var(--wk-text); color: var(--wk-soft); white-space: nowrap; }
.wk-rnow { position: absolute; top: -6px; left: calc(var(--p) * 100%); transform: translateX(-50%); display: grid; justify-items: center; font: 700 8px/1 var(--wk-text); letter-spacing: .18em; text-transform: uppercase; color: #a3263a; }
.wk-rnow i { order: 2; width: 2px; height: 24px; margin-top: 2px; background: #a3263a; }
.wk-nowline { margin: 6px 0 0; font: italic 400 var(--wk-body) / 1.3 var(--wk-text); }
.wk-nowline small { color: var(--wk-soft); }
.wk-next { margin: 10px 0 0; padding: 14px 16px; border-radius: var(--wk-r); background: var(--wk-paper); box-shadow: var(--wk-shadow), inset 3px 0 0 var(--ec, var(--wk-gold)); }
.wk-nexth { margin: 4px 0 0; font: var(--wk-display-style) 400 26px / 1.1 var(--wk-display); }
.wk-nexth em { color: var(--ec); }
.wk-nextbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wk-nextbtns .wk-btn { margin-top: 10px; }
.wk-laterh { margin: 14px 0 0; }
.wk-weeklink { display: block; margin: 6px 0 0; padding: 6px 0; min-height: 32px; font-size: 12px; }
.wk-ptop .wk-weeklink { margin: 0; }
.wk-onecard { margin: -12px -16px 0; }
.wk-onecard .wk-band { border-radius: 0; padding-right: 6px; }
.wk-onecard .wk-updtag { top: 60px; }

/* wear */
.wk-wrow { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--wk-rule); background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.wk-wdots { display: flex; }
.wk-wdots .wk-dot { width: 26px; height: 26px; margin-right: -8px; box-shadow: 0 0 0 2px var(--wk-bg), inset 0 0 0 1px rgba(0, 0, 0, .1); }
.wk-wmain { display: grid; min-width: 0; }
.wk-wmain b { font: var(--wk-display-style) 400 17px / 1.15 var(--wk-display); font-weight: 400; color: var(--ec); }
.wk-wmain small { font: 400 var(--wk-tiny) / 1.35 var(--wk-text); color: var(--wk-soft); }
.wk-wmain .wk-wnote { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-avoid { margin-top: 10px; }

/* seat */
.wk-placecard { position: relative; margin: 4px auto 0; max-width: 300px; padding: 18px 16px 16px; text-align: center; background: var(--wk-paper); box-shadow: var(--wk-shadow); border-radius: var(--wk-r); }
.wk-tablename { margin: 6px 0 2px; font: var(--wk-display-style) 400 40px / 1 var(--wk-display); color: var(--wk-ink); overflow-wrap: anywhere; }
.wk-mateh { margin: 14px 0 4px; }
.wk-mates { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin: 0; padding: 0; list-style: none; }
.wk-mates li { padding: 7px 0; border-bottom: 1px solid var(--wk-rule); font: italic 400 14px / 1.25 var(--wk-text); overflow-wrap: anywhere; }
.wk-room { display: block; width: 100%; max-width: 330px; margin: 12px auto 0; }
.wk-room-wall { fill: none; stroke: var(--wk-rule); stroke-width: 1.5; }
.wk-room-top { fill: var(--wk-paper); stroke: var(--wk-gold); }
.wk-room-t { font: italic 400 9px var(--wk-text); fill: var(--wk-soft); text-anchor: middle; }
.wk-room-table circle { fill: var(--wk-paper); stroke: var(--wk-rule); stroke-width: 1.2; }
.wk-room-table text { font: 400 13px var(--wk-display); fill: var(--wk-soft); text-anchor: middle; }
.wk-room-table.is-me circle { fill: var(--wk-btn); stroke: var(--wk-gold); stroke-width: 2.5; }
.wk-room-table.is-me text { fill: var(--wk-onbtn); }
.wk-room-table.is-me .wk-room-you { fill: var(--wk-ink); font: 700 8px var(--wk-text); letter-spacing: .14em; text-transform: uppercase; }

/* getting there */
.wk-mapcard { margin: 6px 0 0; padding: 6px; background: var(--wk-paper); box-shadow: var(--wk-shadow); border-radius: var(--wk-r); }
.wk-map { display: block; width: 100%; height: auto; }
.wk-map-paper { fill: #f7f2e6; stroke: var(--wk-rule); }
.wk-map-water { fill: none; stroke: #bfd1e3; stroke-width: 12; stroke-linecap: round; opacity: .9; }
.wk-map-lane { fill: none; stroke: #e2d6bf; stroke-width: 4; stroke-linecap: round; }
.wk-map-road { fill: none; stroke: var(--wk-gold); stroke-width: 1.5; stroke-dasharray: 4 4; }
.wk-map-tree circle { fill: #c9d3b4; }
.wk-map-compass circle { fill: none; stroke: var(--wk-soft); stroke-width: .8; }
.wk-map-compass path { fill: var(--wk-soft); }
.wk-map-compass text { font: 700 10px var(--wk-text); fill: var(--wk-soft); text-anchor: middle; }
.wk-pin circle { fill: var(--wk-paper); stroke: var(--wk-ink); stroke-width: 1.4; }
.wk-pin.is-venue circle { fill: var(--pc, var(--wk-btn)); stroke: #fff; stroke-width: 2; }
.wk-pin-s { font: 700 10.5px var(--wk-text); fill: var(--wk-ink); text-anchor: middle; }
.wk-pin.is-venue .wk-pin-s { fill: #fff; }
.wk-pin-l { font: italic 400 10.5px var(--wk-text); fill: var(--wk-ink); paint-order: stroke; stroke: #f7f2e6; stroke-width: 3px; }
.wk-pin-l.is-venue { font-weight: 700; font-size: 11px; }
/* v285.1 (character caps): the venue numbers in the list under the map, matching their pins */
.wk-li > .wk-pinno { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pc, var(--wk-btn)); color: #fff; font: normal 700 12px / 1 var(--wk-text); }
/* the Where card's two links (Directions, Your stay) keep a clear gap, never touching */
.wk-more + .wk-more[data-wk-stay] { margin-left: 18px; }
.wk-sheet .wk-updtag { font-size: 12px; letter-spacing: .08em; }
.wk-gbtns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.wk-gbtn { display: grid; justify-items: center; gap: 4px; min-height: 60px; padding: 8px 2px; border: 1px solid var(--wk-rule); border-radius: var(--wk-r); background: var(--wk-paper); color: var(--wk-ink); font: 400 11px/1.1 var(--wk-text); cursor: pointer; }
.wk-gbtn .wk-ico { color: var(--wk-gold); }

/* memories */
.wk-mem { display: grid; justify-items: center; text-align: center; padding-top: 10px; }
.wk-mem .wk-sub { max-width: 30ch; }
.wk-count b { font: var(--wk-display-style) 400 64px/1 var(--wk-display); }
.wk-lockline { display: inline-flex; align-items: center; gap: 6px; }
.wk-lockline .wk-ico { width: 14px; height: 14px; }
.wk-tymsg { max-width: 32ch; }
.wk-empty { display: grid; justify-items: center; align-content: center; height: 100%; text-align: center; padding: 20px; }
.wk-empty > .wk-ico { width: 30px; height: 30px; color: var(--wk-gold); margin-bottom: 8px; }

/* the "you're in" / thank-you moment */
.wk-moment { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(40, 34, 60, .3); animation: wk-fade .3s ease; }
@keyframes wk-fade { from { opacity: 0; } }
.wk-momentcard { position: relative; width: 100%; max-width: 360px; padding: 26px 22px 18px; text-align: center; background: var(--wk-paper); box-shadow: var(--wk-shadow); border-radius: var(--wk-r); animation: wk-rise .5s cubic-bezier(.2, .9, .3, 1.1); }
.wk-momentcard .wk-h1 span { font-size: .8em; }
.wk-mlist { margin: 12px 0 0; padding: 0; list-style: none; text-align: left; border-top: 1px solid var(--wk-rule); }
.wk-mlist li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0 6px 10px; border-bottom: 1px solid var(--wk-rule); box-shadow: inset 3px 0 0 var(--ec); font: var(--wk-display-style) 400 15px/1.2 var(--wk-display); }
.wk-mlist li.is-no { opacity: .5; }
.wk-mlist em { font: italic 400 11.5px/1.3 var(--wk-text); color: var(--wk-soft); white-space: nowrap; }
.wk-wallet { margin-top: 10px; opacity: .7; }

/* more, links, questions, help */
.wk-moregrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wk-moreitem { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 84px; padding: 10px 4px; border: 1px solid var(--wk-rule); border-radius: var(--wk-r); background: transparent; color: var(--wk-ink); font: 400 11.5px/1.2 var(--wk-text); text-align: center; cursor: pointer; }
.wk-moreitem .wk-ico { width: 24px; height: 24px; color: var(--wk-gold); }
.wk-links { display: grid; border-top: 1px solid var(--wk-rule); }
.wk-linkrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--wk-rule); color: inherit; text-decoration: none; }
.wk-linkrow b { font: var(--wk-display-style) 400 17px/1.2 var(--wk-display); font-weight: 400; }
.wk-linkrow small { grid-column: 1; font: 400 var(--wk-tiny)/1.35 var(--wk-text); color: var(--wk-soft); }
.wk-linkrow .wk-chev { grid-row: 1 / span 2; grid-column: 2; }
.wk-qa { margin: 0; }
.wk-qa div { padding: 10px 0; border-bottom: 1px solid var(--wk-rule); }
.wk-qa dt { font: var(--wk-display-style) 400 16px/1.25 var(--wk-display); }
.wk-qa dd { margin: 4px 0 0; font: 400 13px/1.45 var(--wk-text); color: var(--wk-soft); }
.wk-hh { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wk-rule); }
.wk-hh li { display: grid; padding: 9px 0; border-bottom: 1px solid var(--wk-rule); }
.wk-hh b { font: var(--wk-display-style) 400 16px/1.2 var(--wk-display); font-weight: 400; }
.wk-hh small { font: 400 var(--wk-tiny)/1.4 var(--wk-text); color: var(--wk-soft); }
.wk-help { margin: 0; border-top: 1px solid var(--wk-rule); }
.wk-help div { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--wk-rule); }
.wk-help dt { font: 700 var(--wk-label)/1.5 var(--wk-text); letter-spacing: .2em; text-transform: uppercase; color: var(--wk-soft); }
.wk-help dd { margin: 0; font: 400 13px/1.45 var(--wk-text); }
.wk-why summary { margin-top: 4px; font: italic 400 11px/1.3 var(--wk-text); color: var(--wk-ink); text-decoration: underline; text-decoration-color: var(--wk-gold); text-underline-offset: 3px; cursor: pointer; list-style: none; }
.wk-why summary::-webkit-details-marker { display: none; }
.wk-why p { margin: 6px 0 0; padding: 8px 10px; background: rgba(0, 0, 0, .03); font: 400 11.5px/1.45 var(--wk-text); }
.wk-uitem { display: grid; grid-template-columns: 12px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--wk-rule); }
.wk-udot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--ec); }
.wk-uh { display: flex; justify-content: space-between; gap: 8px; margin: 0; }
.wk-uh b { font: 700 13px/1.3 var(--wk-text); }
.wk-uh small { flex: none; font: 400 10.5px/1.6 var(--wk-text); color: var(--wk-soft); }
.wk-uitem.is-new .wk-uh small { color: #a3263a; }

/* language */
.wk-langscreen { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; }
.wk-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.wk-lang { min-height: 48px; padding: 0 10px; border: 1px solid var(--wk-rule); border-radius: var(--wk-r); background: transparent; font: 400 16px/1.2 var(--wk-text); color: var(--wk-ink); cursor: pointer; }

/* print my weekend: a preview on screen, one page on paper */
.wk-printview { position: fixed; inset: 0; z-index: 2147483000; overflow: auto; padding: 0 12px 16px; background: rgba(40, 34, 60, .82); }
.wk-printbar { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; max-width: 760px; margin: 0 auto 10px; padding: 10px 0; background: rgba(40, 34, 60, .96); }
.wk-printbar .wk-btn.wk-ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.wk-printbar .wk-btn { margin: 0; }
.wk-printsheet { max-width: 760px; margin: 0 auto; padding: 28px 30px; background: #fff; color: #222; font: 400 12px/1.45 Georgia, serif; }
.wk-printsheet header h1 { margin: 4px 0 0; font: italic 400 28px/1.1 Georgia, serif; }
.wk-printsheet header p { margin: 4px 0 0; }
.wk-printsheet table { width: 100%; margin: 16px 0; border-collapse: collapse; }
.wk-printsheet th { padding: 6px 6px; border-bottom: 1.5px solid #222; font: 700 11px/1.3 Georgia, serif; letter-spacing: .16em; text-transform: uppercase; text-align: left; }
.wk-printsheet td { padding: 8px 6px; border-bottom: 1px solid #ccc; vertical-align: top; }
.wk-printsheet small { font-size: 11px; color: #555; }
.wk-printsheet footer { margin-top: 14px; font-size: 10.5px; color: #555; }
.wk-printsheet .wk-help div { grid-template-columns: 90px 1fr; padding: 5px 0; }
@media print {
  html.wk-printing body > *:not(.wk-printview) { display: none !important; }
  html.wk-printing, html.wk-printing body { background: #fff !important; }
  html.wk-printing::before, html.wk-printing body::after { display: none !important; }
  .wk-printview { position: static; padding: 0; background: none; overflow: visible; }
  .wk-printbar { display: none; }
  .wk-printsheet { max-width: none; padding: 0; }
  @page { size: A4; margin: 14mm; }
}
/* ---- v188: the regrouped pass (top bar, segments, rows with a button, the guest features) ------------------------- */
.wk-pass .wk-iconbtn, .wk-sheetbar .wk-iconbtn { width: 44px; height: 44px; }
.wk-langbtn { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 44px; padding: 0 10px; border: 1px solid var(--wk-rule); border-radius: 22px; background: transparent; color: var(--wk-ink); font: 700 11px / 1 var(--wk-text); letter-spacing: .08em; cursor: pointer; }
.wk-langbtn .wk-ico { width: 16px; height: 16px; }
.wk-party { margin-top: 6px; }
.wk-party .wk-chip { min-height: 44px; padding-right: 14px; font-size: 13.5px; }
.wk-party .wk-chip b { width: 32px; height: 32px; font-size: 14px; }
.wk-chip[aria-pressed="true"] { background: var(--wk-btn); border-color: var(--wk-btn); color: var(--wk-onbtn); }
.wk-chip[aria-pressed="true"] b { background: rgba(255, 255, 255, .2); color: var(--wk-onbtn); }
.wk-sharechip { padding-left: 12px; color: var(--wk-soft); }
.wk-sharechip .wk-ico { width: 16px; height: 16px; }
.wk-panel { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.wk-panel::-webkit-scrollbar { display: none; }
.wk-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--wk-rule); border-radius: 22px; background: var(--wk-paper); color: var(--wk-ink); font: 700 10.5px / 1.1 var(--wk-text); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; }
.wk-pill.is-dark { background: var(--wk-btn); border-color: var(--wk-btn); color: var(--wk-onbtn); }
.wk-pill .wk-ico { width: 16px; height: 16px; }
.wk-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.wk-acts .wk-pill { padding: 0 11px; letter-spacing: .04em; font-size: 10px; }
.wk-closed { margin: 6px 0 0; }   /* v285 claims gate 7: the "Replies closed on" line, under the buttons */
.wk-seg { display: flex; gap: 3px; margin: 0 0 10px; padding: 3px; border-radius: 24px; background: color-mix(in srgb, var(--wk-rule) 45%, transparent); }
.wk-segb { flex: 1; min-height: 44px; padding: 0 6px; border: 0; border-radius: 22px; background: transparent; color: var(--wk-soft); font: 700 10.5px / 1.1 var(--wk-text); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.wk-segb[aria-selected="true"] { background: var(--wk-paper); color: var(--wk-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.wk-list { border-top: 1px solid var(--wk-rule); }
.wk-li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--wk-rule); font: var(--wk-display-style) 400 15.5px / 1.2 var(--wk-display); color: var(--wk-ink); }
.wk-li > .wk-ico { width: 20px; height: 20px; color: var(--wk-gold); }
.wk-li span { min-width: 0; overflow-wrap: anywhere; }
.wk-li small { display: block; margin-top: 2px; font: normal 400 var(--wk-tiny) / 1.35 var(--wk-text); color: var(--wk-soft); }
.wk-li .wk-sig { font-style: normal; }
.wk-call { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 12px; min-height: 56px; margin: 0 0 10px; padding: 8px 14px; border-radius: var(--wk-r); background: var(--wk-btn); color: var(--wk-onbtn); text-decoration: none; }
.wk-call .wk-ico { width: 24px; height: 24px; }
.wk-call b { display: block; font: 700 14px / 1.2 var(--wk-text); }
.wk-call small { display: block; font: 400 11.5px / 1.3 var(--wk-text); opacity: .9; }
.wk-note.wk-inline { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; margin: 12px 0 0; border-style: dashed; border-color: var(--wk-gold); font-size: 12.5px; color: var(--wk-soft); }
.wk-note.wk-inline > .wk-ico { width: 18px; height: 18px; color: var(--wk-gold); margin-top: 1px; }
.wk-asklink { display: inline; min-height: 0; padding: 0; font: inherit; color: var(--wk-ink); }
.wk-note.wk-inline .wk-asklink { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.wk-mealrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wk-mealh { margin: 12px 0 4px; color: var(--ec, var(--wk-soft)); }
.wk-mealfoot { margin-top: 8px; font-style: italic; }
.wk-know .wk-know, .wk-know b { font-weight: 700; color: var(--wk-ink); }
.wk-prow .wk-tiny .wk-ico, .wk-more .wk-ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.wk-pass .wk-more, .wk-sheet .wk-more { min-height: 44px; }
.wk-wrow { grid-template-columns: 1fr 14px; min-height: 64px; }
.wk-wmain b i { font-style: normal; color: var(--wk-ink); font-family: var(--wk-text); font-size: 12.5px; }
.wk-wmain .wk-wnote { white-space: normal; }
.wk-swatches { display: flex; gap: 7px; margin-top: 6px; }
.wk-swatch { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.wk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wk-empty.is-short { height: auto; padding: 18px 10px 14px; }
.wk-memlock { padding: 12px 14px; text-align: center; background: var(--wk-paper); box-shadow: var(--wk-shadow); border-radius: var(--wk-r); }
.wk-memlock .wk-count b { font-size: 40px; }
.wk-memlock .wk-count { margin: 2px 0 6px; font: italic 400 15px / 1.2 var(--wk-display); }
.wk-soon { display: inline-block; padding: 4px 8px; border: 1px dashed var(--wk-gold); font: 700 8.5px / 1.2 var(--wk-text); letter-spacing: .14em; text-transform: uppercase; color: var(--wk-soft); }
.wk-giftmsg { margin: 0 0 6px; font-size: 12.5px; }
.wk-notebox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.wk-notebox textarea, .wk-field select { width: 100%; min-height: 56px; padding: 10px 12px; border: 1px solid var(--wk-rule); border-radius: var(--wk-r); background: rgba(255, 255, 255, .7); font: 400 16px / 1.35 var(--wk-text); color: var(--wk-ink); resize: vertical; }
.wk-field select { min-height: 44px; }
.wk-error.is-ok { color: #2f6b3f; }
.wk-chairkind { margin: 8px 0 0; }
.wk-chairkind button { min-height: 44px; flex: 1; }
.wk-chairevs { margin: 10px 0 0; padding: 0; border: 0; }
.wk-chairevs .wk-check { min-height: 44px; margin: 0; }
.wk-chair { margin-top: 12px; }
/* Readable event colours (v188, WCAG AA): text in an event's colour uses a deeper shade of it inside the pass and its
   sheets; bars, dots and swatches keep the colour itself. The film's scenes are unchanged. */
.wk-pass .wk-dmain b, .wk-pass .wk-wmain b, .wk-sheet .wk-cname, .wk-pass .wk-big, .wk-sheet .wk-big, .wk-pass .wk-prow > .wk-label, .wk-sheet .wk-prow > .wk-label,
.wk-sheet .wk-course, .wk-pass .wk-mealh, .wk-sheet .wk-mealh, .wk-pass .wk-nexth em { color: color-mix(in srgb, var(--ec, var(--wk-ink)) 58%, #1e1a28); }
.wk-pass .wk-diff, .wk-sheet .wk-diff { color: color-mix(in srgb, var(--ec, var(--wk-ink)) 58%, #1e1a28); border-color: color-mix(in srgb, var(--ec, var(--wk-gold)) 70%, #1e1a28); }
.wk-pass .wk-diff.is-muted { color: var(--wk-soft); border-color: var(--wk-rule); }
.wk-sheet .wk-band, .wk-pass .wk-band, .wk-sheet .wk-ribbon { background: color-mix(in srgb, var(--ec) 58%, #1e1a28); }
.wk-sheet .wk-kicker.is-ec { color: color-mix(in srgb, var(--ec) 58%, #1e1a28); }
.wk-pass .wk-sig, .wk-sheet .wk-sig { background: color-mix(in srgb, var(--wk-gold) 55%, #1e1a28); }
.wk-segb { color: var(--wk-ink); font-weight: 400; }
.wk-segb[aria-selected="true"] { font-weight: 700; }
.wk-newpill { min-height: 44px; }
.wk-why summary { display: flex; align-items: center; min-height: 44px; margin-top: 0; }
.wk-sheet .wk-check { min-height: 44px; }
/* tap targets of 44 px inside the pass and its sheets (the film's scenes keep their own sizes) */
.wk-sheet .wk-yn button { min-height: 44px; }
.wk-sheet .wk-mealpick select { min-height: 44px; }
.wk-pass .wk-arrow, .wk-sheet .wk-arrow { width: 44px; height: 44px; }
.wk-pass .wk-link, .wk-sheet .wk-link { min-height: 44px; }
.wk-sheet .wk-bandnav { width: 44px; height: 44px; }
.wk-sheet .wk-band { grid-template-columns: 44px 1fr 44px; }
@media (min-width: 700px) {
  .wk-app[data-view="film"], .wk-app[data-view="std"], .wk-app[data-view="lang"] { left: 0; width: 100%; }
  .wk-app[data-view="film"] .wk-scene > *, .wk-app[data-view="std"] .wk-scene > * { max-width: min(100%, 430px); }
  .wk-app[data-view="film"] .wk-progress { right: calc(50% - 215px - 34px); }
}
@media (prefers-reduced-motion: reduce) {
  .wk-root *, .wk-sheet * { animation: none !important; transition: none !important; }
  .wk-film { scroll-behavior: auto; }
}

/* ---- v190: the guest's backups (js/occasi-guest-backup.js): calendar subscription, "Lost your link?", the home-screen tip */
.wk-callist { margin-top: 14px; }
.wk-sheet .wk-calrow { color: var(--wk-ink); text-decoration: none; }
.wk-sheet .wk-calrow.is-preview { opacity: .62; }
.wk-sheet .wk-calrow .wk-chev { padding: 0 4px; }
.wk-join .wk-lostlink { display: flex; align-items: center; justify-content: center; gap: 6px; width: max-content; max-width: 100%; min-height: 44px; margin: 4px auto 0; }
.wk-join .wk-lostlink .wk-ico { width: 18px; height: 18px; flex: none; }
.wk-hometip { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; padding: 12px 12px 12px 14px; border: 1px solid var(--wk-rule); border-radius: calc(var(--wk-r) + 4px);
  background: var(--wk-paper); color: var(--wk-ink); box-shadow: 0 10px 30px rgba(30, 26, 45, .22); }
.wk-tiphead { display: grid; grid-template-columns: 30px minmax(0, 1fr) 44px; gap: 10px; align-items: start; }
.wk-tipico .wk-ico { width: 28px; height: 28px; margin-top: 2px; color: var(--wk-gold); }
.wk-tiph { margin: 2px 0 0; font: var(--wk-display-style) 400 17px / 1.2 var(--wk-display); color: var(--wk-ink); }
.wk-pass .wk-tiphead .wk-iconbtn { margin: -8px -6px 0 0; }
.wk-tipsteps { margin: 8px 0 0; padding-left: 22px; font: 400 var(--wk-body) / 1.45 var(--wk-text); color: var(--wk-ink); }
.wk-tipsteps li + li { margin-top: 2px; }
.wk-tipglyph .wk-ico { width: 18px; height: 18px; vertical-align: -3px; }
.wk-hometip .wk-btn { margin-top: 10px; }
.wk-pass.has-tip .wk-panel { padding-bottom: calc(var(--wk-tiph, 170px) + 20px); }
@media (prefers-reduced-motion: no-preference) { .wk-hometip { animation: wk-tipin .32s ease-out both; } }
@keyframes wk-tipin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* ---- v199: the desktop (a computer: at least 1024 x 600; js/occasi-pass.js P.desk). Phones and tablets never match, so they
 * draw exactly as before. The Film is a split: the film framed on the left at the window's height (9:16, never more than
 * the renders' own pixels), its words in a paper panel beside it that follows the scene. The Pass is a wide page: a side
 * column (the top bar, the party, the Updates), the tabs across the top, wide panels. Every colour and font is the skin's
 * (--wk-*), so each design's Pass skin carries over; --wkd-names (optional) is a design's display face for the names. */
.wkd-panel { display: none; }
@media (min-width: 1024px) and (min-height: 600px) {
  :root { --wkd-tm: 28px; --wkd-bm: 28px; --wkd-fh: min(calc(100vh - var(--wkd-tm) - var(--wkd-bm)), 1200px); --wkd-fw: calc(var(--wkd-fh) * .5625);
    --wkd-pw: clamp(340px, 34vw, 520px); --wkd-gap: clamp(40px, 5vw, 96px);
    --wkd-x: max(24px, calc(50vw - (var(--wkd-fw) + var(--wkd-gap) + var(--wkd-pw)) / 2)); --wkd-side: clamp(300px, 26vw, 380px); }
  html.osv-on { --wkd-tm: 80px; }
  /* the film, framed */
  .wk-root .wk-app[data-view="film"], .wk-root .wk-app[data-view="std"] { top: var(--wkd-tm); bottom: auto; left: var(--wkd-x); width: var(--wkd-fw); height: var(--wkd-fh); border-radius: 6px;
    box-shadow: 0 0 0 1px var(--wk-rule), 0 40px 90px -40px rgba(30, 25, 50, .55); }
  .wk-root .wk-app[data-view="film"] .wk-progress { display: none; }
  .wk-root .wk-app[data-view="film"] .wk-arrow { width: 44px; height: 44px; }
  /* the words beside it */
  .wk-root .wkd-panel { position: fixed; z-index: 2; top: var(--wkd-tm); left: calc(var(--wkd-x) + var(--wkd-fw) + var(--wkd-gap)); width: var(--wkd-pw); height: var(--wkd-fh);
    display: flex; flex-direction: column; padding: clamp(28px, 4.5vh, 52px) clamp(28px, 3vw, 48px) 18px; background: var(--wk-paper); color: var(--wk-ink); border-radius: var(--wk-r);
    box-shadow: var(--wk-shadow), inset 0 0 0 1px var(--wk-rule); overflow: hidden; }
  .wkd-in { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; }
  .wkd-scene { margin: auto 0; text-align: center; animation: wkd-in .45s ease both; }
  @keyframes wkd-in { from { opacity: 0; transform: translateY(6px); } }
  .wkd-panel .wk-kicker { font-size: 10.5px; letter-spacing: .26em; }
  .wkd-names { display: grid; justify-items: center; margin: 14px 0 4px; font: var(--wk-display-style) 400 clamp(40px, 3.6vw, 60px) / 1.02 var(--wkd-names, var(--wk-display)); color: var(--wk-ink); overflow-wrap: anywhere; text-wrap: balance; }
  .wkd-amp { font-size: .55em; margin: .1em 0; color: color-mix(in srgb, var(--wk-gold) 62%, var(--wk-ink)); }
  .wkd-h { margin: 10px 0 4px; font: var(--wk-display-style) 400 clamp(30px, 2.6vw, 40px) / 1.1 var(--wkd-names, var(--wk-display)); color: var(--wk-ink); text-wrap: balance; overflow-wrap: anywhere; }
  .wkd-rule { display: block; width: 64px; height: 1px; margin: 16px auto; background: linear-gradient(90deg, transparent, var(--wk-gold), transparent); }
  .wkd-date { margin: 0; font: 700 12px / 1.4 var(--wk-text); letter-spacing: .2em; text-transform: uppercase; color: var(--wk-ink); }
  .wkd-place, .wkd-line, .wkd-sum, .wkd-sub, .wkd-for { margin: 6px 0 0; font: italic 400 16.5px / 1.45 var(--wk-text); color: var(--wk-soft); text-wrap: balance; }
  .wkd-line { color: var(--wk-ink); font-size: 18px; }
  .wkd-for b { font-weight: 400; color: var(--wk-ink); }
  .wkd-count { margin: 18px 0 0; font: italic 400 15px / 1 var(--wk-text); color: var(--wk-soft); }
  .wkd-count b { display: block; margin-bottom: 4px; font: var(--wk-display-style) 400 44px / 1 var(--wk-display); color: var(--wk-ink); }
  .wkd-days { margin: 16px 0 0; text-align: left; }
  .wkd-dayh { margin: 12px 0 2px; padding-bottom: 4px; border-bottom: 1px solid var(--wk-rule); font: 700 10.5px / 1.3 var(--wk-text); letter-spacing: .2em; text-transform: uppercase; color: var(--wk-soft); }
  .wkd-ev { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: baseline; gap: 12px; width: 100%; min-height: 48px; padding: 8px 4px 8px 10px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--wk-rule) 60%, transparent);
    background: none; box-shadow: inset 2px 0 0 var(--ec); color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .wkd-ev:hover { background: color-mix(in srgb, var(--ec) 7%, transparent); }
  .wkd-evt { font: italic 400 14px / 1.2 var(--wk-text); color: var(--wk-soft); white-space: nowrap; }
  .wkd-evn { display: grid; font: var(--wk-display-style) 400 18px / 1.2 var(--wk-display); color: color-mix(in srgb, var(--ec, var(--wk-ink)) 58%, #1e1a28); overflow-wrap: anywhere; }
  .wkd-evn small { font: normal 400 13px / 1.35 var(--wk-text); color: var(--wk-soft); }
  .wkd-more { min-height: 44px; font-size: 14px; }
  .wkd-story { list-style: none; margin: 16px 0 0; padding: 0; text-align: left; display: grid; gap: 12px; }
  .wkd-story li { display: grid; padding-left: 14px; border-left: 1px solid var(--wk-gold); }
  .wkd-year { font: 700 10.5px / 1.3 var(--wk-text); letter-spacing: .2em; color: var(--wk-soft); }
  .wkd-story b { font: var(--wk-display-style) 400 19px / 1.2 var(--wk-display); font-weight: 400; color: var(--wk-ink); }
  .wkd-story small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font: 400 14px / 1.45 var(--wk-text); color: var(--wk-soft); }
  .wkd-people { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; text-align: left; }
  .wkd-people li { display: grid; padding-top: 8px; border-top: 1px solid var(--wk-rule); }
  .wkd-people b { font: var(--wk-display-style) 400 18px / 1.2 var(--wk-display); font-weight: 400; overflow-wrap: anywhere; }
  .wkd-people small { font: 400 12.5px / 1.35 var(--wk-text); color: var(--wk-soft); }
  .wkd-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--wk-rule); }
  .wkd-nav button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 9px; border: 0; background: none; color: var(--wk-soft); font: 400 12.5px / 1.2 var(--wk-text); cursor: pointer; }
  .wkd-nav i { width: 6px; height: 6px; transform: rotate(45deg); box-shadow: 0 0 0 1px var(--wk-gold); }
  .wkd-nav [aria-current] { color: var(--wk-ink); }
  .wkd-nav [aria-current] i { background: var(--wk-gold); }
  .wkd-nav button:hover span { text-decoration: underline; text-decoration-color: var(--wk-gold); text-underline-offset: 4px; }

  /* sheets: a centred card instead of a sheet from the bottom */
  .wk-root .wk-sheet, .wk-sheet { inset: 0; width: min(620px, calc(100vw - 48px)); max-width: none; height: fit-content; max-height: calc(100vh - 48px); margin: auto; }
  .wk-root .wk-sheet .wk-sheetin, .wk-root .wk-sheet.is-event .wk-sheetin { position: relative; inset: auto; top: auto; max-height: calc(100vh - 48px); border-radius: 10px; animation: wkd-pop .28s cubic-bezier(.2, .8, .2, 1); }
  .wk-root .wk-sheet .wk-sheetbody { min-height: 0; padding-bottom: 22px; }
  @keyframes wkd-pop { from { transform: translateY(12px) scale(.985); opacity: 0; } }

  /* the Pass: a wide page */
  .wk-root .wk-app[data-view="pass"] { left: 0; width: 100%; }
  .wk-pass.is-desk { --wk-h2: 30px; --wk-body: 14.5px; --wk-tiny: 12.5px; --wk-label: 10px; --wk-val: 16px; --wk-big: 30px;
    grid-template-columns: var(--wkd-side) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .wk-pside { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: thin; border-right: 1px solid var(--wk-rule); background: color-mix(in srgb, var(--wk-paper) 70%, transparent); }
  .wk-pass.is-desk .wk-phead { padding: 26px 26px 18px; }
  .wk-pass.is-desk .wk-pname { font-size: 30px; margin-top: 8px; }
  .wk-pass.is-desk .wk-party { flex-wrap: wrap; overflow: visible; }
  .wkd-side { padding: 6px 26px 28px; }
  .wkd-sideh { margin: 18px 0 8px; }
  .wkd-upds { list-style: none; margin: 0 0 10px; padding: 0; border-top: 1px solid var(--wk-rule); }
  .wkd-upd { display: grid; gap: 2px; padding: 10px 0 10px 12px; border-bottom: 1px solid var(--wk-rule); box-shadow: inset 2px 0 0 var(--ec); }
  .wkd-upd b { font: 700 13.5px / 1.3 var(--wk-text); color: var(--wk-ink); }
  .wkd-upd small { font: 400 12.5px / 1.4 var(--wk-text); color: var(--wk-soft); }
  .wkd-upd em { font: italic 400 11.5px / 1.3 var(--wk-text); color: var(--wk-soft); }
  .wkd-upd.is-new em { color: #a3263a; }
  .wk-pmain { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
  .wk-root .wk-pass.is-desk .wk-tabbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 12px clamp(24px, 3.4vw, 56px) 0; border-top: 0; border-bottom: 1px solid var(--wk-rule); background: transparent; box-shadow: none; }
  .wk-root .wk-pass.is-desk .wk-tab { display: inline-flex; align-items: center; gap: 9px; min-height: 52px; margin-bottom: -1px; padding: 0 16px; border-bottom: 2px solid transparent; font-size: 14px; color: var(--wk-soft); }
  .wk-root .wk-pass.is-desk .wk-tab:hover { color: var(--wk-ink); }
  .wk-root .wk-pass.is-desk .wk-tab[aria-selected="true"] { border-bottom-color: var(--wk-ink); color: var(--wk-ink); }
  .wk-pass.is-desk .wk-panel { padding: 30px clamp(24px, 3.4vw, 56px) 48px; scrollbar-width: thin; }
  .wk-pass.is-desk .wk-panel::-webkit-scrollbar { display: block; width: 8px; }
  .wk-pass.is-desk .wk-panel > * { max-width: 1240px; }
  .wkd-ptop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 22px; }
  .wkd-ptop .wk-h2 { margin-top: 4px; }
  .wkd-ptop .wk-acts { margin: 0; gap: 8px; }
  .wkd-ptop .wk-acts .wk-pill { padding: 0 16px; font-size: 11px; }
  /* Days: a timeline across the weekend, a column of cards a day */
  .wkd-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 30px 26px; }
  .wkd-tlday { position: relative; min-width: 0; }
  .wkd-tlday::before { content: ''; position: absolute; top: 7px; left: 14px; right: -26px; height: 1px; background: var(--wk-rule); }
  .wkd-tlday:last-child::before { right: 0; }
  .wkd-tlh { position: relative; display: grid; gap: 2px; margin: 0 0 14px; padding-top: 26px; }
  .wkd-tlh i { position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--wk-bg); box-shadow: inset 0 0 0 2px var(--wk-gold); }
  .wkd-tlday.is-today .wkd-tlh i { background: #a3263a; box-shadow: 0 0 0 4px color-mix(in srgb, #a3263a 20%, transparent); }
  .wkd-tlh b { font: var(--wk-display-style) 400 21px / 1.15 var(--wk-display); font-weight: 400; color: var(--wk-ink); }
  .wkd-tlh em { font: 700 9.5px / 1.3 var(--wk-text); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--wk-soft); }
  .wkd-tlday.is-today .wkd-tlh em { color: #a3263a; }
  .wkd-tlcards { display: grid; gap: 12px; }
  .wkd-card { position: relative; display: grid; justify-items: start; gap: 4px; width: 100%; min-height: 44px; padding: 14px 32px 14px 18px; border: 0; border-radius: var(--wk-r); background: var(--wk-paper);
    box-shadow: var(--wk-shadow), inset 3px 0 0 var(--ec); color: var(--wk-ink); font: inherit; text-align: left; cursor: pointer; transition: transform .2s ease; }
  .wkd-card:hover { transform: translateY(-2px); }
  .wkd-card.is-no { opacity: .6; }
  .wkd-ct { font: var(--wk-display-style) 400 22px / 1.1 var(--wk-display); color: var(--wk-ink); }
  .wkd-ct small { font: italic 400 13px / 1 var(--wk-text); color: var(--wk-soft); }
  .wkd-cn { font: var(--wk-display-style) 400 20px / 1.18 var(--wk-display); color: color-mix(in srgb, var(--ec, var(--wk-ink)) 58%, #1e1a28); overflow-wrap: anywhere; }
  .wkd-cw { font: 400 13px / 1.4 var(--wk-text); color: var(--wk-soft); overflow-wrap: anywhere; }
  .wkd-cd { display: flex; align-items: center; gap: 8px; font: italic 400 13px / 1.35 var(--wk-text); color: var(--wk-ink); }
  .wkd-cd .wk-dots { margin: 0; gap: 3px; }
  .wkd-cd .wk-dot { width: 11px; height: 11px; }
  .wkd-cm { display: inline-flex; align-items: center; gap: 6px; font: 400 13px / 1.3 var(--wk-text); color: var(--wk-ink); }
  .wkd-cm .wk-ico { width: 15px; height: 15px; color: var(--wk-gold); }
  .wkd-card .wk-diff { margin-top: 4px; }
  .wkd-cgo { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--wk-soft); font: 400 22px / 1 var(--wk-display); }
  .wk-pass.is-desk .wk-gap { margin: 0; }
  .wk-pass.is-desk .wk-note.wk-inline { max-width: 760px; margin-top: 26px; }
  .wk-pass.is-desk .wk-onecard { margin: 0; max-width: 940px; border-radius: var(--wk-r); overflow: hidden; background: var(--wk-paper); box-shadow: var(--wk-shadow); }
  .wk-pass.is-desk .wk-onecard .wk-band { border-radius: 0; }
  .wk-pass.is-desk .wk-onecard .wk-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 8px 28px 16px; }
  .wk-pass.is-desk .wk-onecard .wk-prow:last-child { border-bottom: 1px solid var(--wk-rule); }
  .wk-pass.is-desk .wk-panel > .wkd-narrow { max-width: 760px; }
  .wk-pass.is-desk .wk-pbrand .wk-kicker { white-space: normal; overflow: visible; line-height: 1.5; }
  /* Wear: a card an event */
  .wkd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
  .wkd-grid .wk-wrow { align-items: start; min-height: 120px; padding: 18px 18px 16px 20px; border: 0; border-radius: var(--wk-r); background: var(--wk-paper); box-shadow: var(--wk-shadow), inset 3px 0 0 var(--ec); }
  .wkd-grid .wk-wmain b { font-size: 20px; }
  .wkd-grid .wk-swatch { width: 30px; height: 30px; }
  .wkd-grid .wk-swatches { margin-top: 12px; gap: 8px; }
  .wkd-grid .wk-chev { color: var(--wk-soft); }
  .wk-pass.is-desk [data-wk-panel="wear"] > .wk-ptop { display: none; }
  /* Your table, Getting there, Memories: their parts side by side */
  .wkd-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; align-items: start; }
  .wkd-cols.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wkd-col { min-width: 0; padding: 20px 22px 22px; border-radius: var(--wk-r); background: color-mix(in srgb, var(--wk-paper) 82%, transparent); box-shadow: inset 0 0 0 1px var(--wk-rule); }
  .wkd-colh { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--wk-rule); }
  .wkd-col .wk-empty { height: auto; padding: 18px 6px 10px; }
  .wkd-col .wk-placecard { max-width: none; }
  .wkd-col .wk-room { max-width: 420px; }
  .wk-pass.is-desk .wkd-cols .wk-deck { display: grid; grid-template-columns: 1fr; overflow: visible; scroll-snap-type: none; }
  .wk-pass.is-desk .wkd-cols .wk-deckwrap > .wk-pager { display: none; }
  .wk-pass.is-desk .wk-mem { padding-top: 0; }
  .wk-pass.is-desk .wk-mem .wk-sub { max-width: 40ch; }
  .wk-pass.is-desk .wk-moment { padding: 32px; }
  .wk-pass.is-desk .wk-momentcard { max-width: 440px; padding: 32px 30px 24px; }
  .wk-pass.is-desk .wk-made { opacity: 1; }
}

/* ---- v221: the Guest guide (js/occasi-guest-guide.js) ------------------------------------------------------------------
 * A calm, scrollable, printable page over the Pass, in the design's own look: the --wk-* tokens and the ornament (--wk-orn,
 * else the Guest Pass skin's --opa-orn) are copied from the Pass root onto .wk-guide. Light ground; 16 px body text. */
.wk-guidehint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; text-align: center; }
.wk-guidehint .wk-ico { width: 15px; height: 15px; color: var(--wk-gold); }
.wk-guidelist { margin-top: 12px; }
html.wk-guide-open, html.wk-guide-open body { overflow: hidden; }
.wk-guide { position: fixed; inset: 0; z-index: 2147483100; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--wk-bg, #f6f2ea); color: var(--wk-ink, #2b2a33); font: 400 16px / 1.6 var(--wk-text, Georgia, serif); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  animation: wkg-in .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes wkg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wk-guide *, .wk-guide *::before, .wk-guide *::after { box-sizing: border-box; }
/* the design page underneath may style bare elements (button, a, h1, h3, figure, img): keep them out of the guide */
.wk-guide :where(button, a) { letter-spacing: normal; text-transform: none; text-shadow: none; box-shadow: none; }
.wk-guide :where(h1, h2, h3, p) { letter-spacing: normal; text-transform: none; text-shadow: none; }
.wk-guide :where(figure) { padding: 0; border: 0; }
.wk-guide :where(img) { max-width: 100%; height: auto; border: 0; box-shadow: none; }
.wk-guide :focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; }
.wkg-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wkg-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; background: var(--wk-paper, #fffdf8); border-bottom: 1px solid var(--wk-rule); }
.wkg-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--wk-r, 8px);
  background: var(--wk-btn); color: var(--wk-onbtn); font: 600 15px / 1.2 var(--wk-text); cursor: pointer; }
.wkg-btn.is-ghost { padding-left: 10px; background: transparent; color: var(--wk-ink); box-shadow: inset 0 0 0 1px var(--wk-rule); }
.wkg-page { max-width: 680px; margin: 0 auto; padding: 28px 16px calc(44px + env(safe-area-inset-bottom, 0px)); }
.wkg-head { padding: 6px 0 22px; text-align: center; }
.wkg-orn { display: block; width: min(220px, 60%); height: 6px; margin: 0 auto 18px; background: var(--wk-orn, linear-gradient(var(--wk-gold), var(--wk-gold)) 0 2px / 100% 1.5px no-repeat); }
.wkg-orn.is-small { width: 96px; margin: 18px auto 0; }
.wkg-kicker { margin: 0; font: 700 13px / 1.4 var(--wk-text); letter-spacing: .16em; text-transform: uppercase; color: var(--wk-soft); overflow-wrap: anywhere; }
.wkg-h1 { margin: 8px 0 0; font: var(--wk-display-style, normal) 400 clamp(34px, 9vw, 46px) / 1.08 var(--wk-display); color: var(--wk-ink); text-wrap: balance; }
.wkg-h1:focus { outline: none; }
.wkg-sub { max-width: 34ch; margin: 10px auto 0; font: italic 400 17px / 1.5 var(--wk-text); color: var(--wk-soft); text-wrap: pretty; }
.wkg-sample { max-width: 42ch; margin: 18px auto 0; padding: 8px 12px; border: 1px dashed var(--wk-rule); font: 400 15px / 1.45 var(--wk-text); color: var(--wk-soft); }
.wkg-toc { margin: 6px 0 4px; padding: 14px 0; border-top: 1px solid var(--wk-rule); border-bottom: 1px solid var(--wk-rule); }
.wkg-toc ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.wkg-toc button { min-height: 44px; padding: 0 14px; border: 1px solid var(--wk-rule); border-radius: 22px; background: var(--wk-paper); color: var(--wk-ink); font: 400 16px / 1.2 var(--wk-text); cursor: pointer; }
.wkg-sec { padding-top: 30px; scroll-margin-top: 76px; }
.wkg-h2 { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--wk-rule); font: var(--wk-display-style, normal) 400 28px / 1.15 var(--wk-display); color: var(--wk-ink); text-wrap: balance; }
.wkg-h2:focus { outline: none; }
.wkg-block { margin-top: 16px; padding: 18px 18px 16px; border-radius: var(--wk-r, 8px); background: var(--wk-paper); box-shadow: 0 0 0 1px var(--wk-rule); }
.wkg-for { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 13px / 1.35 var(--wk-text); letter-spacing: .08em; text-transform: uppercase; color: var(--wk-soft); }
.wkg-for i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ec, var(--wk-gold)); }
.wkg-h3 { margin: 0; font: 600 20px / 1.3 var(--wk-text); color: var(--wk-ink); overflow-wrap: anywhere; text-wrap: balance; }
.wkg-photo { margin: 12px 0 0; }
.wkg-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: calc(var(--wk-r, 8px) * .6); background: var(--wk-bg); }
.wkg-text p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.wkg-linkp { margin: 10px 0 0; }
.wkg-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--wk-ink); font: 600 16px / 1.3 var(--wk-text); text-decoration: underline; text-decoration-color: var(--wk-gold); text-underline-offset: 4px; overflow-wrap: anywhere; }
.wkg-link .wkg-ico { width: 16px; height: 16px; }
.wkg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wkg-foot { margin-top: 40px; text-align: center; color: var(--wk-soft); }
.wkg-foot p { margin: 12px 0 0; font-size: 16px; }
.wkg-foot .wkg-made { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 760px) { .wkg-page { padding-top: 52px; } .wkg-block { padding: 22px 26px 20px; } .wkg-bar { padding-left: max(16px, calc(50% - 340px)); padding-right: max(16px, calc(50% - 340px)); } }
@media (prefers-reduced-motion: reduce) { .wk-guide { animation: none; } }
@media print {
  html.wk-guide-open.wk-guide-open, html.wk-guide-open.wk-guide-open body { height: auto !important; overflow: visible !important; background: #fff !important; }
  html.wk-guide-open body > *:not(.wk-guide) { display: none !important; }
  .wk-guide { position: static; overflow: visible; animation: none; background: #fff; }
  .wkg-bar, .wkg-toc { display: none !important; }
  .wkg-page { max-width: none; padding: 0; }
  .wkg-block { break-inside: avoid; box-shadow: none; border: 1px solid #c8c2b8; background: #fff; }
  .wkg-h2 { break-after: avoid; }
  .wkg-link::after { content: " · " attr(href); font-weight: 400; font-size: 12px; word-break: break-all; }
  .wkg-link .wkg-ico { display: none; }
  @page { size: A4; margin: 14mm; }
}

/* v228 (usability brief §8): exactly what was recorded, per person, after the save (js/occasi-pass.js recordedHTML) */
.wk-recorded{margin:12px 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.12);text-align:left;font-size:16px;line-height:1.4;color:inherit}
.wk-recorded-h{margin:0 0 6px;font-weight:600;font-size:15px}
.wk-recorded ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:40vh;overflow:auto}
.wk-recorded li{display:grid;gap:1px;min-width:0;overflow-wrap:anywhere}
.wk-recorded li span{font-size:15px;opacity:.9}
.wk-recorded li.is-no span{font-style:italic}
.wk-saved{margin:10px 12px 0;display:grid;gap:8px;justify-items:start}
.wk-saved .wk-recorded{margin:0;width:100%}
/* v242 (usability study, blocker): the per-person reply summary, and the line naming who can't make it on the Pass */
.wk-recorded .wk-summary{margin:0 0 4px;font-size:16px;line-height:1.4}
.wk-partyno{margin:2px 0 0;font-size:14px;font-style:italic;opacity:.85}
/* v242: the day beside each time when the events list spans several days (Details of every event) */
.wk-dtime .wk-dday { display: block; margin-bottom: 2px; font: 600 11px / 1.2 var(--wk-text); letter-spacing: .06em; text-transform: uppercase; color: var(--wk-soft); }
/* v238: the event card's "Join the wedding chat" (js/occasi-group-chat.js): a link styled as the Pass's own pill, the note under it */
.wk-chat-item { margin-top: 4px; }
.wk-chat-btn { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--wk-gold); border-radius: 999px; background: none; font: 400 var(--wk-tiny) / 1.25 var(--wk-text); color: var(--wk-ink); text-decoration: none; overflow-wrap: anywhere; max-width: 100%; }
.wk-chat-btn:focus-visible { outline: 2px solid var(--wk-ink); outline-offset: 2px; }
.wk-chat-app { font-style: italic; }
.wk-chat-item + .wk-chat-item { margin-top: 6px; }
.wk-chat-note { margin: 6px 0 0; font: 400 var(--wk-tiny) / 1.35 var(--wk-text); color: var(--wk-ink); }
/* v244 (usability study #2, #1): the guest Pass reads at phone size. Nothing under 12 px; the tab bar 12.5 px; venue and
 * dress lines 15 px (they wrap rather than cut off); "Day 1 of 3" 12 px; "Not going" 13 px in the Pass's own ink, not a
 * faded tag. The whole not-going row no longer fades (its name and time do). */
.wk-pass { --wk-label: 12px; --wk-tiny: 13px; }
.wk-pass .wk-kicker, .wk-pass .wk-label { letter-spacing: .14em; }
.wk-pass .wk-tab { font-size: 12.5px; line-height: 1.15; text-align: center; }
.wk-pass .wk-ptop .wk-sub { font-size: 13px; }
.wk-pass .wk-acts .wk-pill, .wk-pass .wk-pill, .wk-pass .wk-segb { font-size: 12px; letter-spacing: .04em; }
.wk-pass .wk-langbtn, .wk-pass .wk-newpill, .wk-pass .wk-gbtn, .wk-pass .wk-moreitem { font-size: 12.5px; }
.wk-pass .wk-seal { font-size: 13px; }
.wk-pass .wk-seal i { font-size: 1em; }
.wk-pass .wk-made, .wk-pass .wk-privacy, .wk-pass .wk-legend, .wk-pass .wk-uh small, .wk-pass .wk-mlist em, .wk-pass .wk-dish small, .wk-pass .wk-why summary, .wk-pass .wk-why p, .wk-pass .wk-rtick small { font-size: 12px; }
.wk-pass .wk-sig, .wk-pass .wk-tag, .wk-pass .wk-ribbon, .wk-pass .wk-updtag, .wk-pass .wk-rnow, .wk-pass .wk-soon, .wk-pass .wk-badge { font-size: 12px; letter-spacing: .08em; }
.wk-pass .wk-tag { height: auto; min-height: 20px; padding: 1px 5px; }
.wk-pass .wk-badge { line-height: 18px; height: 18px; min-width: 18px; }
.wk-pass .wk-dhead em { font-size: 12px; letter-spacing: .12em; }
.wk-pass .wk-dmain small { font-size: 15px; line-height: 1.3; white-space: normal; overflow: visible; text-overflow: clip; }
.wk-pass .wk-wmain small, .wk-pass .wk-jname small, .wk-pass .wk-li small, .wk-pass .wk-linkrow small, .wk-pass .wk-hh small { font-size: 13px; }
.wk-pass .wk-gap { font-size: 13px; }
.wk-pass .wk-dmain .wk-diff { margin-top: 3px; padding: 1px 6px; font-size: 13px; }
.wk-pass .wk-drow.is-no { opacity: 1; }
.wk-pass .wk-drow.is-no .wk-dtime, .wk-pass .wk-drow.is-no .wk-dmain b, .wk-pass .wk-drow.is-no .wk-dmain small, .wk-pass .wk-drow.is-no .wk-bar { opacity: .6; }
.wk-pass .wk-diff.is-muted { color: var(--wk-ink); border-color: color-mix(in srgb, var(--wk-ink) 45%, transparent); font-style: normal; }
.wk-pass .wk-acts .wk-pill { padding: 0 12px; font-size: 13px; letter-spacing: 0; text-transform: none; }
.wk-pass .wk-acts { flex-wrap: nowrap; }
.wk-pass .wk-acts .wk-pill { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: left; }
html .wk-root .wk-pass :is(.wk-kicker, .wk-label) { font-size: 12px; }
.wk-pass .wk-panel { padding-top: 10px; }
.wk-pass .wk-dhead { margin-top: 4px; }
.wk-pass .wk-drow { min-height: 48px; padding: 5px 0; }
.wk-pass .wk-gap { margin: 3px 0; padding: 5px 10px; }
.wk-pass .wk-note.wk-inline { margin-top: 8px; padding: 8px 10px; }
/* v244: the event card the Pass opens reads at the same floor (labels 12 px); the walk's reply sheet keeps its fitted sizes */
.wk-sheet:not(.wp-rsvp) { --wk-label: 12px; }
html .wk-root .wk-sheet:not(.wp-rsvp) :is(.wk-kicker, .wk-label) { font-size: 12px; letter-spacing: .14em; }
.wk-sheet:not(.wp-rsvp) .wk-bandt small { font-size: 12px; letter-spacing: .14em; }
/* v244 (#16): "Gifts & memories" takes two lines in the tab bar; the bar stays compact */
.wk-pass .wk-tab { gap: 2px; padding: 4px 2px 3px; line-height: 1.08; }
.wk-pass .wk-tab .wk-ico { width: 20px; height: 20px; }
/* v244 (lead review, one-shot rule): on a short phone (740 px and under) the Pass sits tighter so Days and Your table fit
 * one screen with nothing under 12 px: smaller margins and padding, venue and dress at 14 px (wrapping, never cut),
 * a slimmer header and tab bar, a smaller place card. Phones only (a computer has its own layout). */
@media (max-height: 760px) and (max-width: 767px) {
  .wk-pass .wk-phead { padding-top: calc(4px + var(--wk-safe-t)); padding-bottom: 6px; }
  .wk-pass .wk-pname { font-size: 21px; }
  .wk-pass .wk-party { margin-top: 3px; }
  .wk-pass .wk-party .wk-chip { min-height: 38px; }
  .wk-pass .wk-party .wk-chip b { width: 28px; height: 28px; }
  .wk-pass .wk-panel { padding: 6px 14px 4px; }
  .wk-pass .wk-ptop { margin-bottom: 2px; }
  .wk-pass .wk-ptop .wk-sub { font-size: 12.5px; }
  .wk-pass .wk-acts { margin: 2px 0 0; }
  .wk-pass .wk-acts .wk-pill, .wk-pass .wk-pill { min-height: 38px; }
  .wk-pass .wk-dhead { margin-top: 2px; padding-bottom: 1px; font-size: 15px; }
  .wk-pass .wk-drow { grid-template-columns: 4px 50px 1fr 12px; gap: 8px; min-height: 40px; padding: 2px 0; }
  .wk-pass .wk-dmain b { font-size: 16px; line-height: 1.12; }
  .wk-pass .wk-dmain small { font-size: 14px; line-height: 1.25; }
  .wk-pass .wk-dtime { font-size: 14px; }
  .wk-pass .wk-gap { margin: 2px 0; padding: 3px 8px; font-size: 12.5px; line-height: 1.3; }
  .wk-pass .wk-note.wk-inline { margin-top: 4px; padding: 5px 8px; font-size: 12.5px; line-height: 1.3; }
  .wk-pass .wk-made { margin-top: 4px; }
  .wk-pass .wk-seg { margin-bottom: 6px; }
  .wk-pass .wk-segb { min-height: 38px; }
  .wk-pass .wk-placecard { padding: 10px 12px 10px; }
  .wk-pass .wk-tablename { margin: 2px 0 0; font-size: 32px; }
  .wk-pass .wk-mates li { padding: 4px 0; }
  .wk-pass .wk-room { margin-top: 6px; }
  .wk-pass .wk-tab { min-height: 46px; padding: 3px 2px 2px; font-size: 12px; }
  .wk-pass .wk-tab .wk-ico { width: 18px; height: 18px; }
  .wk-pass .wk-tabbar { padding-top: 2px; padding-bottom: calc(2px + var(--wk-safe-b)); }
}
/* v244 (lead review): the Pass header's "Simran & Arjun · Your pass" wraps rather than being cut off */
.wk-pass .wk-pbrand .wk-kicker { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
/* v246: a couple's photo opened large (OccasiPass.zoom): light, sharp, tap anywhere to close */
.sbw-photo, .sbw-ppwin img, .pww-photo, .pww-ppwin img, .tbw-stgrid img, .tbw-ppwin img { cursor: zoom-in; }
dialog.wk-zoom { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; margin: 0; display: grid; place-items: center; }
dialog.wk-zoom:not([open]) { display: none; }
dialog.wk-zoom::backdrop { background: rgba(251, 247, 238, .96); }
dialog.wk-zoom img { max-width: calc(100vw - 32px); max-height: calc(100dvh - 96px); object-fit: contain; border-radius: 6px; box-shadow: 0 12px 40px rgba(28, 22, 12, .22); cursor: zoom-out; }
.wk-zoom-x { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #2a241b; background: #fbf7ee; color: #2a241b; font-size: 26px; line-height: 1; cursor: pointer; }
/* v247: after the day, a guest who did not reply yes sees only the closing note (the Pass is not shown behind it) */
.wk-moment.is-final { position: fixed; inset: 0; z-index: 60; background: #f6f1e7; animation: none; }
.wk-copypass { display: block; margin: 8px auto 0; font-size: 13px; }
/* v282: the dietary pages keep the reply's 12 px floor (study #3 row 6): the person's name and who sees the answer */
.wk-diet .oc-diet-line, .is-diet .oc-diet-line, .is-allergens .oc-diet-line, .wk-dname { font-size: max(12px, var(--wk-tiny)); }
/* v285 (#8, B14): the language globe on the opening and the film, bottom right (the Skip ribbon is top right, the music bottom left) */
.wk-filmlang { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 50; background: var(--wk-paper, #fffdf8); box-shadow: 0 2px 10px rgba(40, 30, 20, .12); }
/* v285 (fresh round 3 #7): the allergens a guest gave, each a chip they can remove, above their dietary note */
.wk-dietp .wk-algchips { flex-wrap: wrap; margin: 2px 0 4px; }

/* ---- V4 (owner + lead, 2 Nov 2026): the reply card -------------------------------------------------------------------
 * A printed card, not app controls: drawn squares that take an ink tick (or a cross), printed circles a dish is ringed on,
 * ruled writing lines and a wax seal (the design's own button colour) that sends. No pills, chips or rounded toggles.
 * Every tap area is 44 px; text is 10.5 px or more. Which people and events a side holds is measured in JS (drawGrid). */
.wk-grid { display: flex; flex-direction: column; text-align: left; }
.wk-ghead { padding: 0 0 4px; }
.wk-gkick { margin: 0; font: 600 10.5px / 1.3 var(--wk-text); letter-spacing: .16em; text-transform: uppercase; color: var(--wk-soft); }
.wk-ghead .wk-h2 { margin-top: 2px; }
.wk-ghead .wk-sub { margin-top: 2px; }
.wk-glink { appearance: none; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: italic 400 14px / 1.15 var(--wk-text); color: var(--wk-ink); text-align: left; text-decoration: underline; text-decoration-color: var(--wk-gold); text-underline-offset: 4px; }
.wk-glink.is-go { font: 600 12px / 1.2 var(--wk-text); font-style: normal; letter-spacing: .16em; text-transform: uppercase; text-decoration-color: var(--wk-ink); text-underline-offset: 5px; }
.wk-gall { align-self: flex-start; }
/* owner (2 Nov): who's coming, one event per row. A straight heading (the event's dot, its name in small capitals, day and
   time), then the household's names as tick boxes, two to a row; a long name wraps onto a second line, never cut */
.wk-gevs { margin-top: 2px; border-bottom: 1px solid var(--wk-rule); }
.wk-gevrow { padding: 7px 0 1px; border-top: 1px solid var(--wk-rule); }
.wk-gevh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 0; font: 400 13px / 1.3 var(--wk-text); color: var(--wk-soft); }
.wk-gevh i { flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--ec, var(--wk-gold)); }
.wk-gevh b { font: 600 12.5px / 1.3 var(--wk-text); letter-spacing: .12em; text-transform: uppercase; color: var(--wk-ink); }
.wk-gpeople { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
.wk-gpick { appearance: none; display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 44px; margin: 0; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: italic 400 14px / 1.15 var(--wk-text); color: var(--wk-ink); text-align: left; }
.wk-gpick .wk-gbox { flex: none; }
.wk-gpn { min-width: 0; overflow-wrap: break-word; }
.wk-gpick.is-off { cursor: default; color: var(--wk-soft); }
.wk-gpick.is-off > span { min-width: 0; }
.wk-gpick.is-off small { display: block; font: 400 11px / 1.2 var(--wk-text); }
.wk-gdash { flex: none; width: 17px; text-align: center; font: 400 14px / 1 var(--wk-text); }
.wk-gtable { display: grid; margin-top: 2px; border-bottom: 1px solid var(--wk-rule); }
.wk-gname { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 3px 6px 3px 0; border-top: 1px solid var(--wk-rule);
  font: italic 400 14px / 1.08 var(--wk-text); color: var(--wk-ink); overflow-wrap: anywhere; }
.wk-gname small { font: 400 11px / 1.2 var(--wk-text); font-style: normal; color: var(--wk-soft); }
.wk-gcell { appearance: none; display: grid; place-items: center; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--wk-rule); background: none; cursor: pointer; color: var(--wk-ink); }
.wk-gcell.is-off { cursor: default; font: 400 14px / 1 var(--wk-text); color: var(--wk-soft); }
.wk-gbox { position: relative; width: 17px; height: 17px; border: 1.3px solid var(--wk-soft); border-radius: 1.5px; }
:is(.wk-gcell, .wk-gpick)[data-v="yes"] .wk-gbox::after, :is(.wk-gcell, .wk-gpick)[data-v="no"] .wk-gbox::after { content: ''; position: absolute; left: -2px; top: -9px; width: 25px; height: 25px; background: var(--wk-ink);
  -webkit-mask: var(--wk-gmark) center / contain no-repeat; mask: var(--wk-gmark) center / contain no-repeat; }
:is(.wk-gcell, .wk-gpick)[data-v="yes"] { --wk-gmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 14c3 1.5 5 4 6 6.5C12 13 16.5 7 22.5 2.5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:is(.wk-gcell, .wk-gpick)[data-v="no"] { --wk-gmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8.5c4 3.5 8 8 11.5 12.5M17.5 8C13 12 9.5 16.5 6.5 20.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
:is(.wk-gcell, .wk-gpick)[data-v="no"] .wk-gbox::after { top: -4px; }
.wk-gtable.is-menu { grid-template-columns: minmax(84px, 1fr) repeat(var(--n), minmax(44px, 72px)); }
.wk-gdh { display: flex; align-items: flex-end; justify-content: center; padding: 0 2px 4px; text-align: center; font: 400 12.5px / 1.12 var(--wk-text); color: var(--wk-ink); overflow-wrap: anywhere; }
.wk-gtable.is-num .wk-gdh { font: 600 13px / 1 var(--wk-text); }
.wk-glegend { margin: 4px 0 2px; padding: 0 0 0 20px; font: 400 13px / 1.35 var(--wk-text); color: var(--wk-ink); }
.wk-gdot { position: relative; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--wk-soft); }
.wk-gdish[aria-pressed="true"] .wk-gdot { background: var(--wk-ink); box-shadow: none; }
.wk-gdish[aria-pressed="true"] .wk-gdot::after, .wk-gword.is-on::after { content: ''; position: absolute; left: -13px; right: -13px; top: -9px; bottom: -9px; pointer-events: none; background: var(--wk-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M16 6C42 0 104 1 115 14c8 12-15 22-57 23C20 38 3 30 6 18 8 10 22 5 42 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M16 6C42 0 104 1 115 14c8 12-15 22-57 23C20 38 3 30 6 18 8 10 22 5 42 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.wk-gdiet { margin-top: 8px; }
.wk-gq { margin: 0; font: 600 13.5px / 1.25 var(--wk-text); color: var(--wk-ink); }
.wk-gline { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--wk-soft); }
.wk-gword { appearance: none; position: relative; min-height: 44px; margin-left: 5px; padding: 0 8px; border: 0; background: none; cursor: pointer; font: italic 400 14.5px / 1 var(--wk-text); color: var(--wk-ink); white-space: nowrap; }
.wk-gword.is-on::after { left: -5px; right: -5px; top: 7px; bottom: 7px; }
.wk-gdrow .wk-gname { flex: 0 0 38%; border-top: 0; }
.wk-gline textarea { flex: 1; min-width: 0; min-height: 44px; padding: 12px 2px; border: 0; background: transparent; font: italic 400 14px / 1.3 var(--wk-text); color: var(--wk-ink); }   /* (u20a: the dietary row, as the line below) */
.wk-gline input { flex: 1; min-width: 0; min-height: 44px; padding: 0 2px; border: 0; background: transparent; font: italic 400 14px / 1.2 var(--wk-text); color: var(--wk-ink); }
.wk-gline textarea::placeholder, .wk-gline input::placeholder { color: var(--wk-soft); opacity: 1; }
.wk-gnote { margin-top: 6px; }
.wk-gnote textarea { display: block; resize: none; overflow: hidden; field-sizing: content; overflow-wrap: anywhere; }   /* v285 (u22 S1): the note wraps and grows too */
.wk-grid .oc-diet-line { margin-top: 4px; font-size: 10.5px; }
.wk-gfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.wk-gfoot > :only-child { margin-left: auto; }
.wk-gseal { appearance: none; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 12px / 1.25 var(--wk-text); letter-spacing: .14em; text-transform: uppercase; color: var(--wk-ink); text-align: left; }
.wk-gseal i { position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 49% 51% 47% 53% / 52% 48% 52% 48%; background: var(--wk-btn); color: var(--wk-onbtn);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .16), inset 0 -3px 6px rgba(0, 0, 0, .22), 0 3px 8px -4px rgba(0, 0, 0, .45); }
.wk-gseal span { max-width: 10.5em; }
.wk-gseal[disabled] { opacity: .55; cursor: default; }
.wk-grid .wk-error { margin-top: 6px; min-height: 1.35em; }
.wk-grid .wk-error[hidden] { display: block; visibility: hidden; }   /* its line is kept, so a message never pushes the side past its card */

/* v285 (podcast gems #1, #3): the weekend at a glance links under the Days line; the couple's "what happens" line */
.wk-glance { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 0 0 4px; }
.wk-glance .wk-link { padding: 4px 2px; min-height: 32px; font-size: 13px; }
.wk-pass .wk-glance .wk-link { min-height: 32px; }
.wk-about { text-wrap: pretty; }
.wk-ptop:has(.wk-glance) { flex-wrap: wrap; align-items: baseline; }
.wk-ptop .wk-glance { flex-basis: 100%; order: 3; margin: 2px 0 0; }
/* v285 (podcast gem #8): the couple's call sheet lines for this household only, a ruled note in the event's colour */
.wk-calls { margin: 0 0 8px; padding: 2px 0 2px 10px; border-left: 3px solid var(--ec, var(--wk-accent, #8a6d3b)); font: 400 13px / 1.4 var(--wk-text); }
.wk-calls > b { display: block; font-size: max(12px, var(--wk-tiny, 12px)); letter-spacing: .06em; text-transform: uppercase; color: var(--wk-ink); }
.wk-cline { margin-top: 2px; }
.wk-cline span { font-weight: 700; }
.wk-cline small { color: var(--wk-mute, #6b6258); }