/* App styles, option E (27 Oct 2026). One phone-shaped column of screens:
   on a phone it fills the screen; on a wide screen it sits centred on a
   paper-coloured page. Colours, fonts, sizes and spacing come from tokens.css.
   The owner dashboard keeps its earlier look (styles/legacy.css). */

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--white); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-15); line-height: var(--lh);
  font-feature-settings: "tnum" 1; -webkit-tap-highlight-color: transparent;
}
a { color: var(--blue); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 20px; height: 20px; flex: none; stroke-width: 2; }

/* ---- the column and its bars ---- */
:root { --safe-bottom: env(safe-area-inset-bottom, 0px); }   /* the iPhone home bar */
.app { position: relative; min-height: 100dvh; background: var(--white); }
.app::before { content: ""; position: fixed; z-index: 30; top: 0; height: var(--bar); background: var(--blue); left: var(--col-left, 0); width: var(--col-width, 100%); }
.app:has(.join-crew)::before, .app:has(.join-crew)::after { position: absolute; }   /* Join Crew scrolls under the lobster: its blue bars stay at the page's two ends */
.app::after { content: ""; position: fixed; z-index: 30; bottom: 0; height: var(--bar); background: var(--blue); left: var(--col-left, 0); width: var(--col-width, 100%); }
@media (min-width: 600px) {
  body { background: #E7E3DC; }
  .app { --col-width: var(--w-screen); --col-left: calc(50% - var(--w-screen) / 2); width: var(--w-screen); margin: 0 auto; box-shadow: var(--shadow-phone); }
}
.app.wide { --col-width: 100%; --col-left: 0; width: auto; max-width: none; box-shadow: none; }

/* ---- screens ---- */
.screen { position: relative; min-height: 100dvh; padding: calc(var(--bar) + 16px) var(--gutter) calc(var(--bar) + 24px + var(--safe-bottom)); display: flex; flex-direction: column; animation: screen-in var(--t-screen) ease-out; }
.screen.back-anim { animation-name: screen-back; }
@keyframes screen-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes screen-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.screen.has-nav { padding-bottom: calc(var(--nav-h) + var(--bar) + 24px + var(--safe-bottom)); }
.screen.has-cta { padding-bottom: calc(var(--btn-h) + 30px + 40px + var(--safe-bottom)); }   /* the last row always scrolls clear of the fixed button */
.screen.has-cta.has-cta2 { padding-bottom: calc(var(--btn-h) + 30px + 80px + var(--safe-bottom)); }
.screen.flush { padding-left: 0; padding-right: 0; padding-top: 0; }
.screen.center { text-align: center; }
.spacer { flex: 1; }
@media (prefers-reduced-motion: reduce) { .screen, .screen * { animation: none !important; transition: none !important; } }

/* top row: back or close on the left, a title block or a link on the right */
.top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); min-height: 44px; margin: 0 calc(10px - var(--gutter)) 0 calc(-10px); }
.top-right { margin-left: auto; text-align: right; padding-top: 4px; margin-right: calc(var(--gutter) - 22px); }
.top-link { font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--blue); padding: 8px 2px; }
.top-link.quiet { font-weight: var(--fw-medium); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.iconbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); border-radius: 50%; }
.iconbtn .ic { width: 22px; height: 22px; }
.roundbtn { width: 40px; height: 40px; border-radius: 50%; background: var(--white); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); box-shadow: 0 1px 4px rgba(11, 27, 46, .1); }
.roundbtn .ic { width: 20px; height: 20px; }
.roundbtn.heart { color: var(--orange); }
.roundbtn.heart[aria-pressed="true"] .ic { fill: var(--orange); }

/* ---- type ---- */
.serif { font-family: var(--font-serif); font-weight: var(--fw-regular); line-height: var(--lh-head); color: var(--blue); font-variation-settings: "opsz" 72; margin: 0; }
.serif .it, .serif.it { font-style: italic; }
.s56 { font-size: var(--fs-56); }
.s44 { font-size: var(--fs-44); }
.s36 { font-size: var(--fs-36); }
.s32 { font-size: var(--fs-32); font-weight: var(--fw-medium); }
.orange { color: var(--orange); }
.cap { font-size: var(--fs-11); font-weight: var(--fw-medium); letter-spacing: .02em; text-transform: uppercase; line-height: 1.35; color: var(--muted); }
.cap .plain { text-transform: none; letter-spacing: 0; }
.cap.blue { color: var(--blue); }
.fine { font-size: var(--fs-11); line-height: 1.35; color: var(--muted); }
.lead { font-size: var(--fs-17); line-height: var(--lh); color: var(--muted); margin: var(--sp-4) 0 0; }
.body17 { font-size: var(--fs-17); line-height: var(--lh); margin: 6px 0 0; }
.muted { color: var(--muted); }
.ink2 { color: var(--ink-2); }
.rating-num { font-size: var(--fs-24); font-weight: var(--fw-regular); letter-spacing: -.02em; line-height: 1; color: var(--orange); }
.rating-big { font-size: var(--fs-36); font-weight: var(--fw-regular); letter-spacing: -.03em; line-height: 34px; color: var(--orange); }
.plus7 { font-size: 40px; font-weight: var(--fw-light); letter-spacing: -.03em; line-height: .8; color: var(--orange); }
.rule { border-top: 1px solid var(--ink); }

/* ---- buttons ---- */
.btn { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; height: var(--btn-h); padding: 0 20px; border-radius: var(--r-btn);
  background: var(--blue); color: var(--white); font-size: var(--fs-15); font-weight: var(--fw-semi); text-align: left; }
.btn .ic { width: 20px; height: 20px; stroke-width: 2.2; }
.btn.center { justify-content: center; }
.btn.danger { background: var(--warn); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); padding: 0 16px; border: 1px solid var(--blue); border-radius: var(--r-btn);
  color: var(--blue); font-size: var(--fs-15); font-weight: var(--fw-semi); background: var(--white); flex: none; }
.btn-pair { display: flex; gap: 8px; }
.btn-pair .btn-outline { width: 108px; }
.btn-pair .btn { flex: 1; width: auto; }
.linkbtn { display: block; width: 100%; text-align: center; font-size: var(--fs-15); color: var(--blue); padding: 10px 0; }
.textlink { font-size: var(--fs-13); color: var(--blue); }
.textlink.strong { font-weight: var(--fw-semi); }
/* the one action at the bottom of a screen */
.cta { position: fixed; z-index: 20; bottom: calc(30px + var(--safe-bottom)); left: calc(var(--col-left, 0px) + var(--gutter-tight)); width: calc(var(--col-width, 100%) - 2 * var(--gutter-tight)); }
.cta.with-link { bottom: calc(78px + var(--safe-bottom)); }
.cta-link { position: fixed; z-index: 20; bottom: calc(30px + var(--safe-bottom)); left: var(--col-left, 0); width: var(--col-width, 100%); }
.cta-flow { margin-top: auto; padding-top: var(--sp-6); }   /* bottom actions that scroll with a long screen */

/* ---- tab bar ---- */
.nav { position: fixed; z-index: 25; bottom: var(--bar); left: var(--col-left, 0); width: var(--col-width, 100%); height: var(--nav-h); border-top: 1px solid var(--line); background: var(--white);
  display: flex; align-items: center; justify-content: space-around; padding-bottom: env(safe-area-inset-bottom, 0); }
.nav a { font-size: var(--fs-11); font-weight: var(--fw-medium); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); padding: 12px 10px; }
.nav a[aria-current="page"] { color: var(--blue); font-weight: var(--fw-semi); }

/* ---- illustrations: placed in a 390-wide frame, scaled with the column ---- */
.art { position: relative; width: 100%; max-width: 390px; margin: 0 auto; pointer-events: none; }
.art img { position: absolute; mix-blend-mode: multiply; height: auto; }
.rise img { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.rise img:nth-child(2) { animation-delay: .25s; }
.rise img:nth-child(3) { animation-delay: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.welcome-art img { animation: wrise .75s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes wrise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }

/* ---- welcome ---- */
/* padding-bottom keeps the room the old sub-line took, so the art stays where it was. */
.welcome-head { text-align: right; padding-top: 44px; padding-bottom: 55px; margin-right: 8px; }
.welcome-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 30px; }
.welcome-legal { padding-bottom: 20px; }
.welcome-legal a, .terms a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.welcome-foot .wordmark { margin-bottom: 10px; }
.welcome-tag { font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }
.stats { display: grid; grid-template-columns: auto auto auto; justify-content: start; border-top: 1px solid var(--ink); margin-top: 10px; }
.stats > div { padding: 10px 16px 0 14px; border-left: 1px solid var(--line); }
.stats > div:first-child { padding-left: 0; border-left: 0; }
.stats b { display: block; font-variant-numeric: tabular-nums; font-size: var(--fs-24); font-weight: var(--fw-medium); letter-spacing: -.03em; line-height: 1; color: var(--blue); }
.stats span { display: block; margin-top: 4px; }
.startbtn { width: 62px; height: 62px; border-radius: 50%; background: var(--orange); color: var(--white); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.startbtn .ic { width: 22px; height: 22px; stroke-width: 2.2; }

/* ---- +7 strip ---- */
.reward { display: flex; align-items: flex-end; gap: 12px; border-top: 1px solid var(--ink); padding-top: 14px; }
.reward .t { font-size: var(--fs-17); color: var(--blue); }
.reward .cap { margin-top: 2px; }

/* ---- search ---- */
.searchbox { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-top: 26px; }
.searchbox .ic { color: var(--ink); }
.searchbox input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; font-size: var(--fs-17); background: transparent; }
.searchbox input::placeholder { color: var(--muted); }
.searchbox input::-webkit-search-cancel-button { display: none; }
.coderow { display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.coderow .code { font-size: var(--fs-32); font-weight: var(--fw-medium); letter-spacing: -.03em; color: var(--blue); line-height: 1.1; }
.coderow .code.long { font-size: var(--fs-24); }
.coderow .city { font-size: var(--fs-17); min-width: 0; }
.coderow .city small { display: block; font-size: var(--fs-13); color: var(--muted); }
.list-head { margin-top: 26px; }
.list-head:first-child { margin-top: 0; }
.more { margin-top: var(--sp-4); }

/* ---- airport ---- */
.airport-top .serif { text-align: right; }
.bigcode { font-size: var(--fs-code); font-weight: var(--fw-medium); letter-spacing: -.04em; line-height: .8; color: var(--blue); margin-top: 22px; }
.bigcode.long { font-size: 64px; }
.airport-note { margin-top: var(--sp-5); padding: 12px 14px; background: var(--tint); border-radius: var(--r-box); font-size: var(--fs-13); line-height: 1.45; color: var(--ink-2); }
.airport-note b { display: block; font-size: var(--fs-11); font-weight: var(--fw-medium); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; }
.photo { background: var(--tint) center / cover no-repeat; }
.photo.slot { background: repeating-linear-gradient(135deg, var(--tint) 0 10px, var(--tint-2) 10px 20px); }
.row { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.row .photo { width: 52px; height: 52px; }
.row .photo.art { position: relative; background: #F2ECE3; }   /* caterer cards: faded figs on cream */
.row .photo.art::after { content: ""; position: absolute; inset: 0; background: url('../img/illustrations/figs.webp') center / 70% auto no-repeat; mix-blend-mode: multiply; opacity: .45; }
.row .name { font-size: var(--fs-17); font-weight: var(--fw-medium); line-height: 1.15; }
.row .cap { margin-top: 3px; }
.row .cap .code { color: var(--blue); font-weight: var(--fw-semi); }
.row .right { text-align: right; }
.row .right .sub { font-size: var(--fs-13); color: var(--muted); }
.row .heart { color: var(--orange); margin: 4px 0 0 auto; width: 18px; height: 18px; fill: var(--orange); stroke: var(--orange); }
.empty-note { padding: 18px 0; color: var(--muted); font-size: var(--fs-15); }

/* ---- caterer page ---- */
/* caterer page header: cream band, faint airport code, faded figs (crew photos appear only as thumbnails) */
.c-band { position: relative; height: calc(120px + env(safe-area-inset-top, 0px)); background: #F2ECE3; overflow: hidden; }   /* 120px visible below a notch */
.c-band .roundbtn { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); z-index: 1; }
.c-band .roundbtn.left { left: 16px; }
.c-band .roundbtn.right { right: 16px; }
.band-art { position: absolute; left: 84px; bottom: 10px; height: 100px; width: auto; mix-blend-mode: multiply; opacity: .45; }   /* faded, stays in the background */
.band-code { position: absolute; right: 16px; bottom: -6px; font-family: "Newsreader", Georgia, serif; font-size: 60px; line-height: 1; color: rgba(11, 82, 154, .12); letter-spacing: -.01em; white-space: nowrap; }
.c-body { padding: 16px var(--gutter-tight) 0; }
.c-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.c-title .s32 { margin-top: 4px; }
.c-title .meta { font-size: var(--fs-17); color: var(--ink-2); }
.c-title .right { text-align: right; flex: none; }
.c-title .right .rating-big { margin-top: 4px; }   /* level with the name */
.c-title .right .sub { font-size: var(--fs-13); color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-top: 18px; }
.facts > div { padding: 10px 0 10px 12px; border-left: 1px solid var(--line); min-width: 0; }
.facts > div:first-child { padding-left: 0; border-left: 0; }
.facts .v { font-size: 20px; font-weight: var(--fw-regular); margin-top: 2px; line-height: 1.2; overflow-wrap: anywhere; }
.facts .v.small { font-size: var(--fs-17); }
.crew-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 8px; }
.crew-scores > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.crew-scores .cap { white-space: nowrap; }
.crew-scores .rating-num { font-weight: var(--fw-light); }   /* the main rating stays the biggest number on the page */
.c-body .k-head { margin-top: 16px; }
.warning { display: flex; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn); border-radius: var(--r-box); font-size: var(--fs-15); line-height: 1.4; }
.warning b { display: block; font-size: var(--fs-11); font-weight: var(--fw-semi); letter-spacing: .02em; text-transform: uppercase; }
.sw { margin-top: 12px; display: grid; gap: 6px; font-size: var(--fs-15); }
.sw div { display: flex; gap: 8px; align-items: baseline; }
.sw .cap { width: 74px; flex: none; }
.kitchen { margin-top: 10px; font-size: var(--fs-13); color: var(--muted); }
.photos4 { display: grid; grid-template-columns: repeat(4, minmax(0, 80px)); gap: 8px; margin-top: 8px; }
.c-title + .photos4 { margin-top: 18px; }   /* no photos yet: the add square alone, without the Photos label */
.photos4 a { aspect-ratio: 1; border-radius: 6px; overflow: hidden; }
.photos4 .addphoto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1.5px dashed var(--line-strong); color: var(--blue);
  font-size: var(--fs-11); line-height: 1.2; text-align: center; padding: 4px; }
.photos4 .addphoto span { font-size: 22px; line-height: 1; }
.contacts { margin-top: 4px; border-top: 1px solid var(--ink); position: relative; }
.crow { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.crow .cap { width: 74px; flex: none; }
.crow .val { flex: 1; min-width: 0; font-size: var(--fs-15); overflow-wrap: anywhere; }
.crow .val.one { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow .cap { padding-top: 3px; }
.crow .val .line { display: block; line-height: 1.4; }
.crow .val .mail { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.crow .val .mail > span { min-width: 0; overflow-wrap: anywhere; }
.crow .copyall { display: block; margin-top: 6px; color: var(--blue); font-weight: var(--fw-semi); text-transform: none; letter-spacing: 0; text-align: left; }
.crow .val .tap { color: var(--blue); }
.crow .val small { display: block; margin: 1px 0 4px; font-size: var(--fs-13); color: var(--muted); }
.crow .val small:last-child { margin-bottom: 0; }
.crow .act { font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--blue); flex: none; padding: 4px 0 4px 6px; }
.contacts.locked .val { filter: blur(5px); color: var(--ink-2); user-select: none; }
.lockover { position: absolute; left: 84px; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; }
.lockbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--blue);
  box-shadow: var(--shadow-float); font-size: 14px; font-weight: var(--fw-semi); color: var(--blue); }
.lockbtn .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.no-contacts { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-15); color: var(--muted); }
.reviews { margin-top: 4px; border-top: 1px solid var(--ink); }
.rev { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-15); }
.rev-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rev-top .rating-num { font-size: var(--fs-17); }
.rev-who { font-size: var(--fs-13); color: var(--muted); }
.rev p { margin: 6px 0 0; }
.rev .note-label { color: var(--muted); }
.rev .pending { font-size: var(--fs-11); color: var(--warn); text-transform: uppercase; letter-spacing: .02em; font-weight: var(--fw-medium); }
.rev-photos { display: flex; gap: 6px; margin-top: 8px; }
.rev-photos a { width: 64px; height: 64px; }
/* a photo inside a link fills it */
.photos4 a .photo, .rev-photos a .photo { display: block; width: 100%; height: 100%; }
.lockline { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--blue); }
.lockline .ic { width: 14px; height: 14px; }

/* ---- forms ---- */
.title-block { text-align: right; }
.title-block .fine { margin-top: 6px; }
.form { margin-top: var(--sp-4); }
.field-label { display: block; margin-top: 16px; }
.field-label:first-child { margin-top: 0; }
.uline { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 6px 0 8px; margin-top: 4px; font-size: var(--fs-17); background: transparent; outline: 0; }
.uline::placeholder { color: var(--placeholder); font-size: var(--fs-15); }
.uline:focus { border-bottom-color: var(--blue); }
.uline.code { text-transform: uppercase; font-size: var(--fs-24); font-weight: var(--fw-medium); letter-spacing: -.02em; color: var(--blue); }
.pwwrap { position: relative; }
.pwwrap .uline { padding-right: 70px; }
.pwwrap .pweye { position: absolute; right: 0; bottom: 6px; font-size: var(--fs-13); color: var(--blue); font-weight: var(--fw-semi); padding: 6px 0; }
.box { display: block; width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-box); padding: 10px 12px; margin-top: 6px; font-size: var(--fs-15); line-height: 1.35; min-height: 78px; resize: vertical; background: var(--white); }
.box::placeholder { color: var(--placeholder); }
.box:focus { outline: 0; border-color: var(--blue); }
.boxwrap { position: relative; }
.boxwrap .count { position: absolute; right: 8px; bottom: 6px; }
.hint { font-size: var(--fs-13); color: var(--muted); margin: 6px 0 0; line-height: 1.4; }
.form-msg { color: var(--warn); font-size: var(--fs-13); min-height: 1em; margin: 10px 0 0; }
.form-msg:empty { display: none; }
.form-msg.calm { color: var(--muted); }
.owner-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 8px; padding: 16px; border: 2px solid var(--blue); border-radius: 8px; color: var(--blue); }
.owner-card b { display: block; font-size: var(--fs-17); font-weight: var(--fw-semi); }
.owner-card .waiting { display: block; margin-top: 2px; font-size: var(--fs-15); color: var(--orange); }
.owner-card .checked { display: block; margin-top: 2px; font-size: var(--fs-15); color: var(--muted); }
.owner-card .go { font-size: 24px; line-height: 1; }
.chips { margin-top: 8px; }
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: var(--fs-13); margin: 0 6px 8px 0; background: var(--white); color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); background: var(--chip-on); }
.chip.bad[aria-pressed="true"] { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
.rr { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); gap: 10px; }
.rr .lbl { font-size: var(--fs-17); }
.scores { display: flex; gap: 6px; }
.scores button { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: var(--fw-medium); border: 1px solid var(--line-strong); border-radius: var(--r-box); color: var(--muted); }
.scores button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.scores.big button { width: 34px; height: 34px; }
.result { margin-top: 12px; font-size: var(--fs-13); color: var(--muted); }
.result b { color: var(--orange); font-size: var(--fs-17); font-weight: var(--fw-regular); margin-right: 6px; }
.subbox { margin-top: 4px; padding: 10px 12px 12px; background: var(--tint); border-radius: var(--r-box); }
.subbox .cap { margin-top: 8px; }
.photorow { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.addph { width: 64px; height: 64px; border: 1px dashed var(--blue); border-radius: var(--r-box); display: flex; align-items: center; justify-content: center; color: var(--blue); font-size: var(--fs-24); cursor: pointer; position: relative; flex: none; }
.addph input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.thumb { width: 64px; height: 64px; position: relative; flex: none; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 14px; line-height: 22px; }
.snap { font-size: var(--fs-15); font-weight: var(--fw-semi); line-height: 1.3; color: var(--ink); }
.switchrow { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: var(--fs-13); gap: 12px; }
.switch { position: relative; width: 42px; height: 24px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 12px; background: var(--line-strong); transition: background .15s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); transition: transform .15s; }
.switch input:checked + span { background: var(--blue); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.tabs { display: flex; gap: 22px; margin-top: 20px; border-bottom: 1px solid var(--line); }
.tabs button { padding-bottom: 8px; font-size: var(--fs-15); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { border-bottom-color: var(--blue); color: var(--blue); font-weight: var(--fw-semi); }
.or { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.social { display: flex; gap: 10px; }
.social button { flex: 1; height: 50px; border: 1px solid var(--ink); border-radius: var(--r-btn); display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: var(--fw-semi); font-size: var(--fs-15); color: var(--ink); }
.social svg { width: 18px; height: 18px; }
.terms { text-align: center; margin-top: 14px; }

/* ---- Join Crew ---- */
.ar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-15); color: var(--ink); width: 100%; text-align: left; }
.ar .tick { color: var(--blue); }
.ar .val { color: var(--muted); }
.add-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 12px; }
.add-head img { height: 92px; width: auto; flex: none; mix-blend-mode: multiply; }
.addnew { display: block; margin-top: 10px; padding: 4px 0; text-align: left; font-weight: var(--fw-semi); }
.addnew[hidden] { display: none; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.plan { border: 1px solid var(--line-strong); border-radius: var(--r-btn); padding: 10px 12px; text-align: left; }
.plan[aria-pressed="true"] { border: 2px solid var(--blue); padding: 9px 11px; }
.plan[aria-pressed="true"] .cap, .plan[aria-pressed="true"] .price { color: var(--blue); }
.plan .price { font-size: var(--fs-24); font-weight: var(--fw-medium); letter-spacing: -.03em; line-height: 1.1; }

/* ---- Cheers ---- */
.cheers-art img { transform-origin: 50% 85%; }
.cheers-art .shake { animation: shake 1.5s ease-in-out; }
.cheers-art .waiting { visibility: hidden; }   /* until the cocktail has loaded */
@keyframes shake { 0% { transform: rotate(0); } 10% { transform: rotate(-9deg); } 22% { transform: rotate(8deg); } 34% { transform: rotate(-7deg); } 46% { transform: rotate(6deg); } 58% { transform: rotate(-4deg); } 70% { transform: rotate(3deg); } 84% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }
.spark { position: absolute; width: 10px; height: 10px; pointer-events: none; opacity: 0; animation: spark 1.3s ease-out forwards; }
.spark::before, .spark::after { content: ""; position: absolute; left: 4px; top: 0; width: 2px; height: 10px; background: currentColor; border-radius: 1px; }
.spark::after { transform: rotate(90deg); }
@keyframes spark { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(1.2) rotate(30deg); } 100% { opacity: 0; transform: scale(.6) rotate(90deg) translateY(-14px); } }
.unlocked { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: 16px 0; text-align: left; }
.unlocked .plus7 { color: var(--blue); }
.unlocked .t { font-size: var(--fs-17); color: var(--blue); }

/* ---- profile ---- */
.profile-head { position: relative; min-height: 220px; }
.profile-head .bouquet { position: absolute; right: -6px; top: 0; text-align: center; }
.profile-head .bouquet img { mix-blend-mode: multiply; margin: 0 auto; }
.profile-head .bouquet .textlink { display: inline-block; margin-top: 4px; }
.airport-icao { margin-top: 6px; }
.profile-name { padding-top: 60px; max-width: 55%; }
.profile-name h1 { hyphens: none; }
.profile-name .word { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }   /* never breaks inside a word */
.membership { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--ink); padding-top: 12px; margin-top: 8px; gap: 12px; }
.membership .s32 { font-style: italic; font-weight: var(--fw-regular); line-height: 1.1; margin-top: 10px; }
.membership-note { margin: 10px 0 0; }
.progress { margin-top: 14px; }
.progress .top-line { display: flex; justify-content: space-between; }
.progress .n { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--blue); }
.progress .bar { height: 4px; background: var(--line); margin-top: 6px; }
.progress .bar i { display: block; height: 4px; background: var(--blue); }
.count3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.count3 > div { padding: 10px 0 10px 12px; border-left: 1px solid var(--line); }
.count3 > div:first-child { padding-left: 0; border-left: 0; }
.count3 .cap { display: block; margin-top: 4px; }
.count3 b { display: block; font-size: var(--fs-32); font-weight: var(--fw-medium); letter-spacing: -.03em; color: var(--blue); line-height: 1.2; }
.ownerlinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ownerlinks .chip { margin: 0; }
.bouquets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.bouquets button { position: relative; height: 126px; border: 1px solid var(--line); border-radius: var(--r-btn); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bouquets button[aria-pressed="true"] { border: 2px solid var(--blue); }
.bouquets img { max-width: 84%; max-height: 88%; mix-blend-mode: multiply; }
.bouquets .tick { position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: var(--white); font-size: var(--fs-13); display: none; align-items: center; justify-content: center; }
.bouquets button[aria-pressed="true"] .tick { display: flex; }

/* ---- small screens and states ---- */
.status { color: var(--muted); padding: 24px 0; }
.loading-screen { justify-content: center; align-items: center; color: var(--muted); }
.toast { position: fixed; z-index: 50; left: 50%; bottom: calc(110px + var(--safe-bottom)); transform: translateX(-50%) translateY(10px); max-width: calc(min(100vw, var(--w-screen)) - 40px); width: max-content;
  background: var(--ink); color: var(--white); font-size: 14px; padding: 10px 16px; border-radius: 18px; opacity: 0; transition: .25s; pointer-events: none; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%); }
.previewbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.previewbar .chip { margin: 0; }
@media (max-width: 360px) {
  :root { --gutter: 18px; --gutter-tight: 16px; }
  .s56 { font-size: 48px; }
  .s44 { font-size: 38px; }
  .bigcode { font-size: 72px; }
}

/* ---- photo viewer (js/viewer.js) ---- */
.viewer { position: fixed; inset: 0; z-index: 100; background: rgba(11, 27, 46, .92); display: flex; align-items: center; justify-content: center;
  padding: max(56px, env(safe-area-inset-top)) 12px max(24px, env(safe-area-inset-bottom)); touch-action: none; overscroll-behavior: contain; }
.viewer-stage { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.viewer-img { display: block; max-width: 100%; max-height: 80vh; max-height: 80dvh; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.viewer figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--white); font-size: var(--fs-13); text-align: center; }
.viewer-count { font-variant-numeric: tabular-nums; opacity: .8; }
.viewer-count:empty { display: none; }
.viewer-close { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.viewer-close .ic, .viewer-close svg, .viewer-nav .ic { width: 20px; height: 20px; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.viewer-nav.prev { left: 10px; }
.viewer-nav.next { right: 10px; }

/* ---- review tags on the caterer page: services crew say are offered, common issues, per-review chips ---- */
.tags-head { margin-top: 18px; }
.offer-chips, .issues, .rev-tags { list-style: none; margin: 8px 0 0; padding: 0; }
.offer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.offer-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid #C9D7E8; border-radius: 999px; background: #F4F8FC;
  color: #0B529A; font-family: "Inter Tight", system-ui, sans-serif; font-size: 13px; line-height: 1.2; }
.offer-chips .tick { width: 13px; height: 13px; flex: none; }
.offer-chips .n { color: #5B6675; }
.offer-chips .price { border-color: #E4E1DA; background: #F6F4F0; color: #3F4752; }   /* the price answer: neutral, not a service */
.issues { display: grid; gap: 8px; }
.issues li { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; background: #FBF6EF; border-left: 3px solid #C9A77A; border-radius: 4px; font-size: var(--fs-15); color: var(--ink); }
.issues .n { font-size: var(--fs-13); color: #5B6675; }
.rev-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rev-tags li { padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 1.3; }
.rev-tags .svc { border: 1px solid #C9D7E8; color: #0B529A; }
.rev-tags .prob { border: 1px solid #E4E1DA; background: #F6F4F0; color: #3F4752; }