/* Guest contact page, mobile only. A contact card (who, is anyone there, three ways to reach a person),
   the answers guests would otherwise ask for, then the hotel's photos.
   BetterCallNic palette for everything that is ours: ink, paper, the amber "on" lamp, Source Sans 3,
   sentence case, no shadows. Two deliberate departures, both the user's choice (2026-09-30):
   - WhatsApp and WeChat wear their own colours, so a guest finds them without reading;
   - corners are rounded.
   No red anywhere, Emergency included.
   Spacing uses margins, not flex gap (gap in flexbox needs iOS 14.1), and positioning spells out
   top/right/bottom/left instead of inset (iOS 14.1), so older phones still work. */
:root {
  --ink: #191512;
  --paper: #EAEAE7;
  --paper-raised: #F2F2F0;
  --rule: #D2D2CD;
  --text-2: #5F5B57;
  --grey: #8E8E88;
  --ink-raised: #221D19;
  --ink-line: #322B26;
  --on-dark-2: #9C938B;
  --amber: #E9A23C;
  --whatsapp: #25D366;
  --wechat: #07C160;

  --bg: var(--paper-raised);
  --fg: var(--ink);
  --fg-2: var(--text-2);
  --line: var(--rule);
  --surface: #FAFAF8;
  --solid-bg: var(--ink);
  --solid-fg: var(--paper-raised);
  --scrim: rgba(25, 21, 18, 0.5);

  --font: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Always light, whatever the phone is set to (the user's decision, 2026-10-01). "only" also stops
     browsers that darken pages on their own (Chrome's Auto Dark, Samsung Internet) from doing it. */
  color-scheme: only light;
}


*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Scrolling to a focused element stops below the sticky top bar, not under it. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(env(safe-area-inset-top) + 72px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, p, ul { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sprite { display: none; }
.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon.small { width: 15px; height: 15px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 14px; }

.page { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* Top bar: language on the left, Emergency on the right. Sticky, with the page's own ground, so it never
   floats over the buttons (a fixed pill once sat on top of Call while scrolling). */
.bar {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 6;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 10px;
  background: var(--bg); border-bottom: 1px solid transparent;
}
.bar.scrolled { border-bottom-color: var(--line); }
.lang {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px 0 10px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer;
  font-size: 15px; font-weight: 600;
}
.lang .icon { width: 18px; height: 18px; margin-right: 6px; }
.sos {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px 0 12px;
  border-radius: 999px; background: var(--solid-bg); color: var(--solid-fg);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.sos .icon { width: 18px; height: 18px; margin-right: 6px; }

/* Who */
.who { padding: 10px 24px 0; text-align: center; }
.avatar {
  width: 84px; height: 84px; margin: 0 auto;
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 36px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.who h1 { margin-top: 14px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.status { margin-top: 6px; display: inline-flex; align-items: center; font-size: 15px; color: var(--fg-2); }
/* The lit lamp means "on": someone is on duty. On a light ground it keeps a 2px ink ring so it can be found. */
.lamp { width: 9px; height: 9px; margin-right: 8px; flex: none; border-radius: 50%; background: var(--amber); box-shadow: inset 0 0 0 2px var(--ink); }

/* The three actions. A centred row, so a hidden channel leaves the rest centred. */
.actions { display: flex; justify-content: center; margin: 28px 12px 0; }
.act {
  width: 100px; margin: 0 3px; padding: 4px 0;
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.circle {
  width: 70px; height: 70px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 120ms var(--ease), opacity 120ms var(--ease);
}
.act:active .circle { transform: scale(0.94); opacity: 0.85; }
.circle.wa { background: var(--whatsapp); }
.circle.wc { background: var(--wechat); }
.circle.call { background: var(--solid-bg); }
.glyph { width: 34px; height: 34px; fill: #fff; flex: none; }
.glyph.small { width: 24px; height: 24px; }
.glyph.phone { width: 32px; height: 32px; fill: var(--solid-fg); stroke: var(--solid-fg); stroke-width: 1.5; stroke-linejoin: round; }
.act-label { margin-top: 9px; font-size: 15px; font-weight: 600; }

/* Good to know */
.info { margin-top: 32px; padding: 0 16px; }
.list { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.list + .list { margin-top: 12px; }
.item {
  display: flex; align-items: flex-start; width: 100%;
  padding: 14px 12px 14px 14px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; text-align: left; text-decoration: none;
}
.item:last-child { border-bottom: 0; }
.item.tap { cursor: pointer; touch-action: manipulation; }
.item.tap:active { background: var(--bg); }
.lead { width: 22px; height: 22px; flex: none; margin: 1px 12px 0 0; fill: none; stroke: var(--fg-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.body { flex: 1; min-width: 0; }
.k { font-size: 14px; color: var(--fg-2); }
.v { font-size: 17px; font-weight: 600; line-height: 1.3; word-break: break-word; overflow-wrap: anywhere; }
.k + .v, .v + .v { margin-top: 1px; }
.v + .k { margin-top: 3px; }
/* A password in a monospace face (no mixing up l, 1 and I, or O and 0), broken anywhere rather than
   pushed under the copy button: overflow-wrap:anywhere needs iOS 15.4, word-break:break-all does not. */
.pass { color: var(--fg); font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: 16px; word-break: break-all; user-select: all; -webkit-user-select: all; }
.k.title { margin-bottom: 2px; }
/* Label: value lines ("Name:", "Password:", "Check-in:"). A two-column grid, so the label column is as wide
   as its longest label in whatever language (チェックアウト： is much wider than Check-out:) and the values line up. */
.kvs { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-column-gap: 10px; grid-row-gap: 2px; align-items: baseline; line-height: 1.35; }
.kv { display: contents; }
.kv-k { color: var(--fg-2); font-size: 15px; }
.kv-v { min-width: 0; font-size: 17px; font-weight: 600; word-break: break-word; overflow-wrap: anywhere; }
/* On the narrowest phones the label goes above its value, so a long value isn't squeezed into a sliver. */
@media (max-width: 360px) {
  .kvs { grid-template-columns: minmax(0, 1fr); }
  .kv-v { margin-bottom: 4px; }
}
.note-line { margin-top: 6px; }
.chev { width: 20px; height: 20px; flex: none; align-self: center; margin-left: 8px; fill: none; stroke: var(--fg-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn {
  flex: none; align-self: center; width: 44px; height: 44px; margin: -6px -4px -6px 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.icon-btn:active { background: var(--bg); }

/* House rules: a plain list inside the box. */
.rules { list-style: none; padding: 0; margin-top: 2px; }
.rules li { position: relative; padding: 3px 0 3px 16px; font-size: 16px; line-height: 1.4; }
.rules li::before { content: ''; position: absolute; left: 2px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-2); }

/* Photos: one continuous image, edge to edge across the whole screen, never a seam between slices. */
/* .page has no side padding, so on a phone this is already the full screen width. */
.photos { margin-top: 36px; line-height: 0; }
.photos img { display: block; width: 100%; height: auto; margin: 0; padding: 0; border: 0; }

.foot { margin-top: auto; padding: 24px 24px calc(env(safe-area-inset-bottom) + 24px); text-align: center; }
.made { font-size: 13px; color: var(--fg-2); }
.made a { color: var(--fg); font-weight: 600; text-decoration: none; padding: 8px 2px; }
.made a:active { text-decoration: underline; }

/* Modals: centred cards. */
.modal-wrap {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
}
/* cursor:pointer makes iOS Safari deliver taps on this plain div to the page's click handler. */
.backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; background: var(--scrim); opacity: 0; transition: opacity 200ms var(--ease); }
.modal {
  position: relative; width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto;
  padding: 22px 20px 20px; border-radius: 24px; background: var(--surface);
  opacity: 0; transform: scale(0.96); transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.modal-wrap.open .backdrop { opacity: 1; }
.modal-wrap.open .modal { opacity: 1; transform: none; }
.close {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--fg-2); cursor: pointer;
}
.m-title { margin: 2px 48px 16px 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; outline: none; }
.m-text { font-size: 16px; line-height: 1.5; white-space: pre-line; }
.m-photo { display: block; width: 100%; height: auto; margin-bottom: 14px; border-radius: 14px; }
.note { margin-top: 14px; font-size: 14px; color: var(--fg-2); text-align: center; }

/* Options inside modals */
.opt {
  display: flex; align-items: center; width: 100%; min-height: 60px; margin-top: 10px; padding: 10px 18px;
  border: 0; border-radius: 16px; text-decoration: none; text-align: left; cursor: pointer;
  touch-action: manipulation; transition: transform 120ms var(--ease), opacity 120ms var(--ease);
}
.opt:first-of-type { margin-top: 0; }
.opt:active { transform: scale(0.98); opacity: 0.88; }
.opt > svg { margin-right: 14px; }
.opt-text { display: flex; flex-direction: column; min-width: 0; }
.opt-main { font-size: 17px; font-weight: 600; line-height: 1.25; }
.opt-sub { font-size: 14px; line-height: 1.3; opacity: 0.85; font-variant-numeric: tabular-nums; }
.opt.wa-fill { background: var(--whatsapp); color: #fff; }
.opt.ink-fill { background: var(--solid-bg); color: var(--solid-fg); }
.opt.outline { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
.opt.tertiary { min-height: 52px; justify-content: center; text-align: center; background: transparent; color: var(--fg); }
.opt.tertiary .opt-text { align-items: center; }
.opt.tertiary .opt-sub { color: var(--fg-2); opacity: 1; }


/* WeChat card. The code sits on white in both themes: scanners need the contrast. */
.qr { width: 236px; max-width: 100%; margin: 0 auto; padding: 8px; border-radius: 16px; background: #fff; }
.qr img { display: block; width: 100%; height: auto; }
.qr-caption { margin: 14px 0 6px; text-align: center; font-size: 15px; color: var(--fg-2); }
.wechat-id { margin-bottom: 16px; text-align: center; font-size: 15px; color: var(--fg-2); }
.wechat-id strong { color: var(--fg); font-weight: 600; user-select: all; -webkit-user-select: all; }
.pill {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 18px;
  border: 0; border-radius: 14px; font-size: 17px; font-weight: 600; cursor: pointer; touch-action: manipulation;
  transition: transform 120ms var(--ease), opacity 120ms var(--ease);
}
.pill:active { transform: scale(0.97); opacity: 0.85; }
.pill .icon { margin-right: 8px; }
.pill.wc-fill { background: var(--wechat); color: #fff; }
.pill.plain { background: transparent; color: var(--fg); margin-top: 4px; }

/* Language list */
.langs { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.lang-opt {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; padding: 0 16px;
  border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; text-align: left;
  font-size: 17px; font-weight: 600;
}
.lang-opt:last-child { border-bottom: 0; }
.lang-opt:active { background: var(--bg); }
.lang-opt .icon { visibility: hidden; }
.lang-opt[aria-checked="true"] .icon { visibility: visible; }

.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 24px); z-index: 30;
  transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px;
  background: var(--solid-bg); color: var(--solid-fg);
  font-size: 16px; font-weight: 600; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity 150ms;
}
.toast.show { opacity: 1; }
.toast:empty { padding: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
@media (max-width: 340px) {
  .act { width: 92px; }
  .circle { width: 62px; height: 62px; }
  .glyph { width: 30px; height: 30px; }
}