/* The hotel side (reception, manager, platform pages). Loaded after style.css; everything is scoped to body.s2.
   Look: a white top bar with underlined tabs, soft white cards on a pale blue page, navy primary buttons, soft status pills. */
body.s2 {
  --navy: #0b2a5b; --navy-dark: #081f46; --accent: #0a6b4a; --accent-dark: #085640; --accent-soft: #e7f4ee; --accent-line: #b8dccb; --ink: #162036; --muted: #66738a; --line: #e2e8f2; --page: #f3f6fb;
  --ok-bg: #dcf5e5; --ok: #166534; --info-bg: #e7ecf4; --info: #475569; --warn-bg: #fdecc8; --warn: #92580a; --bad-bg: #fde2e2; --bad: #b42318;
  background: var(--page); color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
body.s2 main.wide { max-width: 1380px; padding: 20px 24px 32px; }
body.s2 h1 { font-size: 1.5rem; color: var(--navy); margin: 0; }
body.s2 h2 { font-size: 1.05rem; color: var(--ink); margin: 0; }
body.s2 .muted { color: var(--muted); font-size: .9rem; }
body.s2 .hidden { display: none !important; }

/* ---- top bar ---- */
#appbar { display: none; }
body.s2 #appbar { display: block; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.appbar-in { max-width: 1380px; margin: 0 auto; padding: 0 24px; min-height: 66px; display: flex; align-items: center; gap: 28px; }
.appmenu, .appsub, .navsignout { display: none; }
.appbrand { display: flex; align-items: center; gap: 14px; flex: none; }
.applogo { height: 32px; width: auto; display: block; }
.appdiv { width: 1px; height: 30px; background: var(--line); }
.apphotel { font-weight: 800; font-size: 1.1rem; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.hotellogo { max-height: 32px; max-width: 90px; object-fit: contain; border-radius: 6px; }
.appnav { display: flex; gap: 2px; flex: 1 1 auto; justify-content: center; flex-wrap: wrap; }
.appnav .tab { background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--muted); font-weight: 600; padding: 0 14px; min-height: 66px; font-size: .95rem; margin-bottom: -1px; }
.appnav .tab:hover { color: var(--navy); }
.appnav .tab.on { color: var(--navy); border-bottom-color: var(--accent); }
.appuser { display: flex; align-items: center; gap: 10px; flex: none; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-weight: 800; display: grid; place-items: center; font-size: .9rem; }
.appuser-name { display: flex; flex-direction: column; line-height: 1.2; }
.appuser-name small { color: var(--muted); }
.signout { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; font-size: .88rem; }

/* ---- buttons, fields, cards ---- */
body.s2 button, body.s2 .btn { border-radius: 10px; font-weight: 700; background: var(--accent); border: 1px solid var(--accent); color: #fff; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
body.s2 button:hover:not(:disabled) { background: var(--accent-dark); }
body.s2 button.secondary { background: #fff; color: var(--accent); border: 1px solid var(--accent-line); }
body.s2 button.secondary:hover:not(:disabled) { background: var(--accent-soft); }
body.s2 button.danger { background: #fff; color: var(--bad); border: 1px solid #e9a9a2; }
body.s2 button.danger:hover:not(:disabled) { background: #fff4f3; }
body.s2 button.big { min-height: 52px; font-size: 1rem; border-radius: 12px; }
body.s2 button.linkbtn { background: none; border: 0; color: var(--accent); min-height: 0; padding: 2px 4px; font-weight: 600; font-size: .9rem; }
body.s2 button.linkbtn:hover { background: none; text-decoration: underline; }
body.s2 .tab { min-height: 0; }
body.s2 input, body.s2 select, body.s2 textarea { border: 1px solid #d3dbe8; border-radius: 10px; padding: 12px 12px; background: #fff; min-height: 48px; color: var(--ink); }
body.s2 input:focus, body.s2 select:focus { outline: 2px solid var(--accent-line); border-color: var(--accent); }
body.s2 input[type=checkbox] { width: 18px; min-height: 0; height: 18px; accent-color: var(--accent); }
body.s2 label { font-weight: 600; font-size: .92rem; }
.fieldlabel { margin: 12px 0 4px; color: var(--muted); }
.field { position: relative; margin-top: 10px; }
.field > svg { position: absolute; left: 14px; top: 15px; color: #8a97ad; pointer-events: none; }
.field > input, .field > select { padding-left: 42px; width: 100%; }
body.s2 .card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 0 0 16px; box-shadow: 0 1px 3px rgba(15, 34, 80, .05); }
.cardhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cardhead h2 { flex: 1; }
.cardhead p { margin: 2px 0 0; }
.cardicon { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.cardicon.sm { width: 32px; height: 32px; }
.actions { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.actions > * { flex: 1 1 0; }
.actions.two > .primary { flex: 1.5 1 0; }
.newform .actions { margin-top: 16px; }
body.s2 .msg { border-radius: 10px; }

/* ---- layout of the check-ins page ---- */
.ci-grid { display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-areas: "new guest" "recent guest"; gap: 0 22px; align-items: start; }
.ci-new { grid-area: new; }
.ci-recent { grid-area: recent; }
.ci-guest { grid-area: guest; }
.subtabs { display: none; }
.backlink { display: none; }

/* ---- the Recent list ---- */
.recent .cardhead { margin-bottom: 4px; }
.recent-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 8px; border-bottom: 1px solid #eef1f6; cursor: pointer; border-left: 3px solid transparent; }
.recent-row:last-child { border-bottom: 0; }
.recent-row:hover { background: #f4faf7; }
.recent-row.sel { background: #edf7f2; border-left-color: var(--accent); }
.rr-main { min-width: 0; }
.rr-main b { display: block; font-weight: 700; }
.rr-main .muted { font-size: .83rem; }
.rr-side { display: flex; align-items: center; gap: 6px; flex: none; color: #8a97ad; }

/* ---- status pills ---- */
body.s2 .badge { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: .78rem; font-weight: 700; background: var(--info-bg); color: var(--info); white-space: nowrap; }
body.s2 .badge.verified, body.s2 .badge.completed { background: var(--ok-bg); color: var(--ok); }
body.s2 .badge.fallback_required { background: var(--warn-bg); color: var(--warn); }
body.s2 .badge.cancelled, body.s2 .badge.expired { background: var(--bad-bg); color: var(--bad); }
body.s2 .badge.out { background: #e7ecf4; color: #475569; }
.pill { display: inline-block; padding: 3px 12px; border-radius: 99px; font-size: .82rem; font-weight: 700; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }

/* ---- the open check-in ---- */
.detail { min-width: 0; }
.dhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.dhead-main { flex: 1 1 260px; min-width: 0; }
.dtitle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dhead .muted { margin: 2px 0 0; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
.cols2.cards { gap: 16px; align-items: stretch; }
.cols2.cards > .card { margin-bottom: 16px; }
.guestcol { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.guestcol .kv { flex: 1; min-width: 0; }
body.s2 .photo { width: 96px; height: 120px; flex: none; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); }
.kv { display: grid; grid-template-columns: minmax(110px, 150px) 1fr; gap: 9px 14px; margin: 0; }
.kv dt { color: var(--muted); font-size: .9rem; }
.kv dd { margin: 0; font-weight: 500; word-break: break-word; }
.pics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 8px; }
.pic { margin: 0; }
.pic.single { grid-column: 1 / -1; max-width: 520px; }
body.s2 .pic-thumb { width: 100%; max-width: none; display: block; border-radius: 12px; border: 1px solid var(--line); cursor: zoom-in; }
.pic figcaption { text-align: center; color: var(--muted); font-size: .88rem; margin-top: 6px; }
.alert { display: flex; gap: 12px; align-items: flex-start; border-radius: 12px; padding: 13px 16px; margin: 0 0 16px; font-size: .93rem; }
.alert > svg { flex: none; margin-top: 2px; }
.alert.bad { background: #fdeeee; border: 1px solid #f3c5c5; color: #7f1d1d; }
.alert.info { background: var(--accent-soft); border: 1px solid var(--accent-line); color: #085640; }
.declare { display: flex; gap: 12px; align-items: flex-start; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 12px; padding: 14px 16px; margin: 0 0 12px; font-weight: 500; }
.declare input { margin-top: 3px; flex: none; }
.donebanner { display: flex; align-items: center; gap: 16px; background: var(--accent-soft); border: 1px solid #bfe6cd; border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.donecheck { width: 52px; height: 52px; border-radius: 50%; background: #1a8a4a; color: #fff; display: grid; place-items: center; flex: none; }
.donebanner b { font-size: 1.1rem; color: #14532d; }
.donebanner p { margin: 2px 0 0; color: #166534; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }
.tick { width: 22px; height: 22px; flex: none; border-radius: 6px; display: grid; place-items: center; }
.tick.ok { background: var(--accent); color: #fff; }
.tick.bad { background: var(--bad-bg); color: var(--bad); }
table.audit { font-size: .85rem; }
table.audit th { background: #f3f6fb; color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: none; padding: 7px 8px; border-bottom: 1px solid var(--line); }
table.audit td { padding: 8px; border-bottom: 1px solid #eef1f6; }
.emptystate { text-align: center; color: var(--muted); padding: 48px 20px; display: grid; justify-items: center; gap: 8px; }
.emptystate svg { color: #a3b1c8; }

/* the QR card and the forms inside the details */
.qr svg { max-width: 260px; }
body.s2 .msg.good { background: var(--ok-bg); color: var(--ok); }
body.s2 .msg.bad { background: var(--bad-bg); color: var(--bad); }
body.s2 tr.pick:hover, body.s2 tr.sel { background: #f4faf7; }
body.s2 table th, body.s2 table td { border-bottom-color: #eef1f6; }
body.s2 .row > * { flex: 1 1 140px; }

/* ---- sign-in ---- */
body:not(.s2) main.wide { max-width: 460px; }

/* ---- phone: one pane at a time, a menu instead of the tab bar ---- */
@media (max-width: 900px) {
  body.s2 main.wide { padding: 14px 14px 28px; }
  .appbar-in { display: grid; grid-template-columns: 44px 1fr 44px; grid-template-areas: "menu brand user" "sub sub sub" "nav nav nav"; align-items: center; gap: 4px 8px; padding: 8px 14px 10px; min-height: 0; }
  .appmenu { display: inline-flex; grid-area: menu; background: none; border: 0; color: var(--ink); min-height: 40px; width: 40px; padding: 0; }
  .appmenu:hover:not(:disabled) { background: var(--accent-soft); }
  .appbrand { grid-area: brand; justify-content: center; }
  .appdiv, .apphotel { display: none; }
  .applogo { height: 30px; }
  .appuser { grid-area: user; justify-content: flex-end; }
  .appuser-name, .signout { display: none; }
  .appsub { display: block; grid-area: sub; text-align: center; line-height: 1.25; }
  .appsub b { display: block; font-size: 1rem; color: var(--ink); }
  .appsub small { color: var(--muted); }
  .appnav { grid-area: nav; display: none; flex-direction: column; gap: 0; border-top: 1px solid var(--line); margin-top: 6px; }
  #appbar.open .appnav { display: flex; }
  .appnav .tab { min-height: 46px; text-align: left; border-bottom: 1px solid #f0f3f8; margin: 0; padding: 0 6px; }
  .appnav .tab.on { border-bottom-color: #f0f3f8; color: var(--accent); }
  .appnav .navsignout { display: block; color: var(--bad); }

  .ci-grid { display: block; }
  .subtabs { display: flex; border-bottom: 1px solid var(--line); margin: -2px 0 14px; background: transparent; }
  .subtab { flex: 1; background: none !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; color: var(--muted) !important; min-height: 44px; font-weight: 700; margin-bottom: -1px; }
  .subtab.on { color: var(--navy) !important; border-bottom-color: var(--accent) !important; }
  .ci-new, .ci-recent, .ci-guest { display: none; }
  .ci-grid[data-pane=checkin] .ci-new, .ci-grid[data-pane=recent] .ci-recent, .ci-grid[data-pane=guest] .ci-guest { display: block; }
  .backlink { display: inline-flex; flex: 1 0 100%; background: none; border: 0; color: var(--accent); justify-content: flex-start; padding: 0; min-height: 28px; font-weight: 600; }
  .backlink:hover:not(:disabled) { background: none; }
  .dhead .secondary { flex: 1 1 100%; }
  .cols2 { grid-template-columns: 1fr; gap: 8px; }
  .kv { grid-template-columns: 120px 1fr; }
  .actions.two { flex-direction: column; }
  .pics { gap: 10px; }
}
@media (max-width: 520px) {
  body.s2 .card { padding: 14px; }
  .guestcol { flex-direction: column; }
}

/* ---- corrections: the rules above for plain `button` are more specific than the single-class ones ---- */
body.s2 button.appmenu, body.s2 button.navsignout, body.s2 button.backlink { display: none; }
body.s2 .appsub { display: none; }
body.s2 button.appback { display: none; }
body.s2 .subtabs { display: none; }
body.s2 .field > input, body.s2 .field > select { padding-left: 42px; }
body.s2 .ci-grid { grid-template-rows: auto 1fr; }
body.s2 .actions { margin-bottom: 16px; }
body.s2 .cardhead { margin-bottom: 14px; }
@media (max-width: 900px) {
  body.s2 button.appmenu { display: inline-flex; }
  body.s2 #appbar.open button.navsignout, body.s2 button.navsignout { display: block; }
  body.s2 #appbar:not(.open) button.navsignout { display: none; }
  body.s2 button.backlink { display: inline-flex; }
  body.s2 .appsub { display: block; }
  body.s2 .subtabs { display: flex; }
  body.s2 .ci-grid { display: block; }
}

@media (max-width: 900px) {
  body.s2 .appuser button.signout, body.s2 .appuser .appuser-name { display: none; }
  body.s2 button.appmenu { background: none; border: 0; color: var(--ink); width: 40px; padding: 0; min-height: 40px; }
  body.s2 button.appmenu:hover:not(:disabled) { background: var(--accent-soft); }
  body.s2 button.backlink { background: none; border: 0; color: var(--accent); justify-content: flex-start; padding: 0; min-height: 28px; flex: 1 0 100%; font-weight: 600; }
  body.s2 button.backlink:hover:not(:disabled) { background: none; }
  body.s2 .appnav button.tab { background: none; border: 0; border-bottom: 1px solid #f0f3f8; border-radius: 0; color: var(--ink); justify-content: flex-start; min-height: 46px; font-weight: 600; }
  body.s2 .appnav button.tab.on { color: var(--accent); }
  body.s2 .appnav button.navsignout { color: var(--bad); }
}

body.s2 #appbar:empty { display: none; }
.login { margin: 48px auto 0; }
.login-logo { display: block; height: 40px; width: auto; margin: 0 auto 18px; }
.login h1 { text-align: center; margin-bottom: 14px; }
.login .card { padding: 20px; }
.login .row { margin-top: 16px; }

/* narrower desktop windows: the same bar, a little tighter */
@media (max-width: 1280px) and (min-width: 901px) {
  .appbar-in { gap: 14px; padding: 0 16px; }
  .appnav { flex-wrap: nowrap; justify-content: flex-start; }
  .appnav .tab { padding: 0 9px; font-size: .88rem; white-space: nowrap; }
  .appuser-name, .signout span { display: none; }
  .signout { padding: 0 10px; }
  .apphotel { font-size: 1rem; }
}
@media (max-width: 1280px) and (min-width: 901px) {
  .appbrand { flex: none; }
  .appnav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .appnav::-webkit-scrollbar { display: none; }
  .apphotel { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .appuser { flex: none; }
}

/* ======== phone: an app, with a bottom bar (Check-In, Recent, Guest, Profile) ======== */
.bottomnav { display: none; }
.profile { display: grid; gap: 14px; }
.profilehead { display: flex; align-items: center; gap: 14px; margin: 0; }
.avatar.big { width: 56px; height: 56px; font-size: 1.1rem; }
.profilelist { padding: 6px 4px; margin: 0; }
body.s2 button.profile-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; border-bottom: 1px solid #f0f3f8; border-radius: 0; color: var(--ink); min-height: 56px; padding: 6px 12px; font-weight: 600; text-align: left; justify-content: flex-start; }
body.s2 button.profile-row:last-child { border-bottom: 0; }
body.s2 button.profile-row:hover:not(:disabled) { background: #f4faf7; }
body.s2 button.profile-row .pr-label { flex: 1; }
body.s2 button.profile-row > svg:last-child { color: #8a97ad; }
body.s2 button.profile-row.danger { color: var(--bad); }
body.s2 button.profile-row.danger .cardicon { background: var(--bad-bg); color: var(--bad); }

@media (max-width: 900px) {
  body.s2 { -webkit-tap-highlight-color: transparent; }
  /* a slim app header: logo, hotel name and role (the menu and the avatar are in the Profile tab now) */
  body.s2 #appbar { position: sticky; top: 0; }
  .appbar-in { grid-template-columns: 1fr; grid-template-areas: "brand" "sub"; padding: 10px 14px 8px; gap: 2px; justify-items: center; }
  body.s2 button.appmenu, .appnav { display: none !important; }
  .appsub { grid-area: sub; }
  .appsub b { font-size: .95rem; }
  .appsub small { font-size: .78rem; }
  body.s2 main.wide { padding: 14px 14px calc(92px + env(safe-area-inset-bottom)); }
  body.s2 .subtabs { display: none; }
  body.s2 .card { border-radius: 16px; box-shadow: 0 2px 10px rgba(15, 34, 80, .06); }
  body.s2 button.big { min-height: 54px; border-radius: 14px; }

  body.s2 .bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(15, 34, 80, .08); padding-bottom: env(safe-area-inset-bottom); }
  body.s2 .bottomnav:empty { display: none; }
  body.s2 .bottomnav button.bn-item { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 62px; padding: 8px 2px 7px; background: none; border: 0; border-radius: 0; color: var(--muted); font-size: .72rem; font-weight: 700; }
  body.s2 .bottomnav button.bn-item:hover:not(:disabled) { background: none; }
  body.s2 .bottomnav button.bn-item.on { color: var(--accent); }
  body.s2 .bottomnav button.bn-item.on::before { content: ""; position: absolute; top: 0; left: 50%; width: 30px; height: 3px; margin-left: -15px; border-radius: 0 0 4px 4px; background: var(--accent); }
  body.s2 .bottomnav button.bn-item svg { width: 24px; height: 24px; }
}

/* ======== manager and platform pages ======== */
.pagehead { display: flex; align-items: center; gap: 14px; margin: 2px 0 18px; }
.pagehead .cardicon { width: 46px; height: 46px; }
.pagehead h1 { font-size: 1.55rem; }
.pagehead p { margin: 2px 0 0; }
.twocol { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
.settings, .sections { display: block; max-width: 860px; }
.sections > .card, .settings > .card { margin-bottom: 16px; }
.savebar { position: sticky; bottom: 12px; z-index: 5; box-shadow: 0 8px 24px rgba(15, 34, 80, .14); }
.savebar .row { margin-top: 0; }
body.s2 .card > .row, body.s2 .dcard > .row { margin-top: 14px; }
.cols2 .kv, .sections .cols2 { align-items: start; }
.sections .cols2 { gap: 0 24px; }

body.s2 table { font-size: .92rem; }
body.s2 thead th { background: #f3f6fb; color: var(--muted); font-size: .78rem; font-weight: 700; padding: 9px 10px; border-bottom: 1px solid var(--line); }
body.s2 td { padding: 12px 10px; }
body.s2 td button { min-height: 38px; padding: 0 14px; font-size: .88rem; }
body.s2 td select { min-height: 40px; }
body.s2 .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 6px 0 16px; flex-wrap: wrap; }
body.s2 .tabs button.tab { background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--muted); min-height: 44px; padding: 0 16px; margin-bottom: -1px; }
body.s2 .tabs button.tab:hover:not(:disabled) { background: none; color: var(--navy); }
body.s2 .tabs button.tab.on { color: var(--accent); border-bottom-color: var(--accent); }
body.s2 .card .muted + input, body.s2 .card .muted + select { margin-top: 4px; }

@media (max-width: 900px) {
  .twocol { grid-template-columns: 1fr; }
  .pagehead { margin-bottom: 12px; }
  .pagehead h1 { font-size: 1.3rem; }
  .pagehead .cardicon { width: 40px; height: 40px; }
  .savebar { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* on a phone a table becomes a list of small cards */
@media (max-width: 700px) {
  body.s2 .card table:not(.audit) { display: block; }
  body.s2 .card table:not(.audit) thead { display: none; }
  body.s2 .card table:not(.audit) tbody, body.s2 .card table:not(.audit) tr, body.s2 .card table:not(.audit) td { display: block; width: 100%; }
  body.s2 .card table:not(.audit) tr { padding: 10px 0; border-bottom: 1px solid #eef1f6; }
  body.s2 .card table:not(.audit) td { padding: 3px 2px; border: 0; }
  body.s2 .card table:not(.audit) td button, body.s2 .card table:not(.audit) td select { width: 100%; margin-top: 4px; }
  .sections .cols2 { grid-template-columns: 1fr; }
}

body.s2 .card > h2:first-child { margin: 0 0 12px; }
/* narrower desktop windows with a long list of tabs (a manager's): a tighter bar */
@media (max-width: 1280px) and (min-width: 901px) {
  .appbar-in { gap: 10px; padding: 0 12px; }
  .appnav .tab { padding: 0 7px; font-size: .84rem; }
  .appdiv { display: none; }
  .applogo { height: 28px; }
  .apphotel { font-size: .95rem; max-width: 120px; }
}
/* narrower desktop windows: brand and user on the first row, the tabs on a second row of their own, so nothing is squeezed */
@media (max-width: 1280px) and (min-width: 901px) {
  .appbar-in { flex-wrap: wrap; row-gap: 0; gap: 0 14px; padding: 0 18px; }
  .appbrand { min-height: 58px; margin-right: auto; }
  .appdiv { display: block; }
  .applogo { height: 30px; }
  .apphotel { max-width: none; font-size: 1.05rem; }
  .appuser { min-height: 58px; }
  .appuser-name { display: flex; }
  .signout span { display: inline; }
  .appnav { order: 3; flex: 1 0 100%; justify-content: flex-start; overflow: visible; border-top: 1px solid #eef1f6; }
  .appnav .tab { min-height: 46px; font-size: .9rem; padding: 0 12px; }
}

/* the page a new manager opens from the invite link */
body.setup main#app { max-width: 620px; margin: 0 auto; padding: 8px 16px 40px; }
body.setup h1 { text-align: center; }
.setuphead { text-align: center; padding: 22px 0 4px; }
.setuphead img { height: 38px; width: auto; }
body.setup .cols2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { body.setup .cols2 { grid-template-columns: 1fr; } }

/* ======== the open check-in: wide, short cards in one column ======== */
body.s2 button.small { min-height: 36px; padding: 0 14px; font-size: .86rem; border-radius: 9px; }
body.s2 button.mini { min-height: 36px; padding: 0 4px; margin-right: 18px; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--muted); font-size: .92rem; }
body.s2 button.mini:hover:not(:disabled) { background: none; color: var(--navy); }
body.s2 button.mini.on { color: var(--accent); border-bottom-color: var(--accent); }
.minitabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.dhead { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 12px; }
.dhead h1 { font-size: 1.25rem; margin: 0; }
.idtag { margin-left: auto; font-size: .82rem; }
.dactions { display: flex; gap: 8px; flex-wrap: wrap; }
.strip { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 12px; }
.strip .avatar.big { width: 48px; height: 48px; font-size: 1rem; flex: none; }
.strip-name { display: flex; flex-direction: column; min-width: 150px; flex: 1 1 160px; }
.strip-name b { font-size: 1.1rem; color: var(--navy); }
.ifield small { display: block; color: var(--muted); font-size: .78rem; }
.ifield > div { font-weight: 600; }
.inline { display: flex; gap: 10px 34px; flex-wrap: wrap; align-items: flex-start; }
body.s2 .dcard { padding: 12px 16px; margin-bottom: 12px; }
body.s2 .dcard .cardhead { margin-bottom: 8px; }
body.s2 .dcard .cardhead h2 { font-size: .98rem; }
.cardicon.sm { width: 28px; height: 28px; }
.guestcol { display: flex; gap: 16px; align-items: flex-start; }
body.s2 .photo { width: 78px; height: 98px; }
.kv.two { grid-template-columns: repeat(2, minmax(100px, 150px) minmax(0, 1fr)); gap: 6px 14px; flex: 1; }
.kv { font-size: .9rem; }
.pics { gap: 12px; margin: 0 0 6px; }
body.s2 .pic-thumb { max-height: 190px; object-fit: contain; background: #f1f4f9; }
.pic figcaption { margin-top: 3px; font-size: .8rem; }
.pics + .muted { margin: 0 0 6px; font-size: .8rem; }
.pics ~ .row { margin-top: 6px; }
.pics ~ .row button { min-height: 36px; font-size: .86rem; padding: 0 10px; }
.confirmbar { display: flex; gap: 16px; align-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 14px; padding: 12px 16px; margin-bottom: 12px; }
.confirmbar .declares { flex: 1; min-width: 0; }
.confirmbar .declare { background: none; border: 0; padding: 0 0 4px; margin: 0; font-size: .92rem; }
.confirmbar button.big { flex: 0 0 auto; min-height: 48px; padding: 0 26px; }
.note { margin: 0 0 12px; }
.auditscroll { max-height: 160px; overflow: auto; border: 1px solid #eef1f6; border-radius: 10px; }
.auditscroll table.audit th { position: sticky; top: 0; }
table.audit td { padding: 6px 8px; font-size: .82rem; }
.ticks { gap: 6px; }
details.fallback > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; list-style: none; padding: 2px 0; }
details.fallback > summary::-webkit-details-marker { display: none; }
details.fallback > summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 1.3rem; line-height: 1; }
details.fallback[open] > summary::after { content: "\2212"; }
details.fallback .fallbackbody { margin-top: 10px; }
@media (min-width: 1280px) { .ci-grid { grid-template-columns: 360px minmax(0, 1fr); gap: 0 18px; } }
@media (max-width: 900px) {
  .idtag { margin-left: 0; flex: 1 0 100%; }
  .dactions { flex: 1 0 100%; }
  .dactions .small { flex: 1; }
  .kv.two { grid-template-columns: minmax(100px, 130px) minmax(0, 1fr); }
  .confirmbar { flex-direction: column; align-items: stretch; }
  .guestcol { flex-direction: column; }
  .strip { gap: 10px 20px; }
}

/* ======== check-in details: header line, one details card with the pictures beside it ======== */
.dhead { margin-bottom: 10px; }
.idtag { margin-left: auto; font-size: .85rem; white-space: pre-wrap; }
.dsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.details .cardhead .pill { margin-left: 4px; }
.details .cardhead h2 { flex: 0 1 auto; }
.details .cardhead { justify-content: flex-start; }
.dsplit .guestcol { gap: 14px; }
.dsplit .kv { grid-template-columns: minmax(88px, 118px) 1fr; }
.dsplit .pics { grid-template-columns: 1fr 1fr; margin: 0 0 6px; }
body.s2 .dsplit .pic-thumb { max-height: 150px; }
.dsplit .picacts { display: flex; gap: 8px; }
.gp-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.gp-head b { font-size: .98rem; }
.guestsbar .gp .row { margin-top: 8px; }
.guestsbar .gp .row button { min-height: 40px; }
.guestsbar table { margin-bottom: 4px; }
.auditscroll { max-height: 140px; }
.recent-row { padding: 10px 8px; }
.rr-main .muted { font-size: .8rem; line-height: 1.35; }
.dsplit .pics + .muted { font-size: .76rem; margin: 0 0 4px; }
.dsplit .pics ~ .row { margin-top: 4px; gap: 8px; }
.dsplit .pics ~ .row button { min-height: 34px; font-size: .82rem; }
@media (max-width: 1279px) { .dsplit { grid-template-columns: 1fr; } }

/* the menu stays on one line */
@media (min-width: 1281px) {
  .appbar-in { gap: 16px; }
  .appnav { flex-wrap: nowrap; justify-content: center; min-width: 0; }
  .appnav .tab { white-space: nowrap; padding: 0 11px; font-size: .92rem; }
  .apphotel { white-space: nowrap; }
}
@media (min-width: 1281px) and (max-width: 1560px) {
  .appuser-name { display: none; }
  .appnav .tab { padding: 0 9px; font-size: .9rem; }
  .hotellogo { max-width: 70px; }
}
@media (min-width: 1281px) and (max-width: 1560px) {
  .apphotel { max-width: 190px; overflow: hidden; text-overflow: ellipsis; margin-right: 8px; }
  .appnav { margin-left: 6px; }
  .signout span { display: none; }
  .signout { padding: 0 11px; }
}

.enq-wrap{max-width:860px}
.enq{margin-bottom:14px}
.enq.new{border-left:4px solid #d99a1f}
.enq-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.enq .kv{grid-template-columns:110px 1fr}
.enq .row{align-items:center;gap:10px}.enq .row select{max-width:200px}

/* wide tables scroll inside their own box instead of widening the whole page on a phone */
.xscroll { max-width: 100%; overflow-x: auto; }

/* ---- help assistant for signed-in staff ---- */
.hc { position: fixed; right: 18px; bottom: 18px; z-index: 35; font-family: inherit; }
body.s2 .hc .hc-launch { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px 0 12px; border: 0; border-radius: 99px; background: var(--accent); color: #fff; font-weight: 600; font-size: .92rem; font-family: inherit; cursor: pointer; box-shadow: 0 8px 22px rgba(8, 31, 70, .28); }
body.s2 .hc .hc-launch:hover { background: var(--accent-dark); }
body.s2 .hc .hc-q { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-weight: 700; font-size: 1rem; }
body.s2 .hc.hc-open .hc-launch { display: none; }
body.s2 .hc .hc-launch:focus-visible, body.s2 .hc .hc-close:focus-visible, body.s2 .hc .hc-send:focus-visible, body.s2 .hc .hc-chip:focus-visible, body.s2 .hc .hc-ask:focus-visible, body.s2 .hc .hc-primary:focus-visible, body.s2 .hc .hc-link:focus-visible { outline: 3px solid #6ee7a8; outline-offset: 2px; }
body.s2 .hc .hc-panel { position: absolute; right: 0; bottom: 0; width: min(380px, calc(100vw - 24px)); height: min(540px, calc(100vh - 100px)); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 56px rgba(8, 31, 70, .3); overflow: hidden; }
body.s2 .hc .hc-panel[hidden] { display: none; }
body.s2 .hc .hc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; background: var(--navy); color: #fff; }
body.s2 .hc .hc-head strong { display: block; font-size: .98rem; }
body.s2 .hc .hc-head small { display: block; color: #cfe0f5; font-size: .74rem; margin-top: 2px; }
body.s2 .hc .hc-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
body.s2 .hc .hc-close:hover { background: rgba(255, 255, 255, .14); }
body.s2 .hc .hc-body { flex: 1; overflow-y: auto; padding: 14px 14px 6px; background: var(--page); display: flex; flex-direction: column; gap: 10px; }
body.s2 .hc .hc-msg { max-width: 90%; padding: 9px 12px 10px; border-radius: 14px; font-size: .92rem; line-height: 1.5; word-wrap: break-word; }
body.s2 .hc .hc-msg p { margin: 0 0 6px; color: inherit; }
body.s2 .hc .hc-msg p:last-child { margin-bottom: 0; }
body.s2 .hc .hc-msg ul, body.s2 .hc .hc-msg ol { margin: 4px 0 6px; padding-left: 20px; }
body.s2 .hc .hc-msg li { margin-bottom: 3px; color: inherit; }
body.s2 .hc .hc-bot { align-self: flex-start; background: #fff; color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
body.s2 .hc .hc-me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
body.s2 .hc .hc-typing { color: var(--muted); }
body.s2 .hc .hc-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 14px 8px; background: var(--page); }
body.s2 .hc .hc-chips:empty { display: none; }
body.s2 .hc .hc-chip { border: 1px solid #c8d2e0; background: #fff; color: var(--navy); border-radius: 99px; padding: 7px 12px; font-weight: 600; font-size: .8rem; line-height: 1.2; font-family: inherit; cursor: pointer; text-align: left; min-height: 0; }
body.s2 .hc .hc-chip:hover { border-color: var(--accent); color: var(--accent); background: #fff; }
body.s2 .hc .hc-askrow { padding: 4px 14px 8px; background: var(--page); text-align: center; }
body.s2 .hc .hc-ask { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: .84rem; font-family: inherit; text-decoration: underline; cursor: pointer; padding: 6px; min-height: 0; }
body.s2 .hc .hc-ask:hover { background: none; }
body.s2 .hc .hc-ask.hc-hot { background: var(--accent); color: #fff; text-decoration: none; border-radius: 99px; padding: 9px 16px; }
body.s2 .hc .hc-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; background: #fff; border-top: 1px solid var(--line); }
body.s2 .hc .hc-input { flex: 1; min-width: 0; resize: none; border: 1.5px solid #c8d2e0; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: .95rem; line-height: 1.4; max-height: 110px; color: var(--ink); }
body.s2 .hc .hc-input:focus, body.s2 .hc .hc-support textarea:focus, body.s2 .hc .hc-support input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
body.s2 .hc .hc-send, body.s2 .hc .hc-primary { border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; font-size: .9rem; font-family: inherit; padding: 0 16px; min-height: 42px; cursor: pointer; }
body.s2 .hc .hc-send:disabled, body.s2 .hc .hc-primary:disabled { opacity: .55; cursor: default; }
body.s2 .hc .hc-primary { width: 100%; }
body.s2 .hc .hc-note { margin: 0; padding: 7px 14px 10px; font-size: .7rem; line-height: 1.35; color: var(--muted); background: #fff; }
body.s2 .hc .hc-support { display: flex; flex-direction: column; gap: 9px; }
body.s2 .hc .hc-support textarea, body.s2 .hc .hc-support input { width: 100%; border: 1.5px solid #c8d2e0; border-radius: 10px; padding: 10px 12px; font: inherit; font-size: .93rem; background: #fff; color: var(--ink); }
body.s2 .hc .hc-support textarea { resize: vertical; }
body.s2 .hc .hc-lead { margin: 0; font-size: .9rem; color: var(--ink); }
body.s2 .hc .hc-err { margin: 0; font-size: .8rem; color: var(--bad); }
body.s2 .hc .hc-err:empty { display: none; }
body.s2 .hc .hc-muted { color: var(--muted); font-size: .8rem; }
body.s2 .hc .hc-link { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: .84rem; font-family: inherit; text-decoration: underline; cursor: pointer; padding: 6px; align-self: center; min-height: 0; }
body.s2 .hc .hc-link:hover { background: none; }
body.s2 .hc .hc-ok { text-align: center; padding: 26px 10px; }
body.s2 .hc .hc-ok p { margin: 0 0 8px; color: var(--ink); }
body.s2 .hc .hc-tick { width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.7rem; line-height: 60px; margin: 0 auto 14px; font-weight: 700; }
@media (max-width: 900px) {
  .hc { right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.s2 .hc .hc-launchtext { display: none; }
  body.s2 .hc .hc-launch { padding: 0 12px; }
  body.s2 .hc .hc-panel { position: fixed; left: 8px; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; height: min(70vh, 560px); }
}
@media print { .hc { display: none; } }

/* ======== platform admin redesign (Oct 2026): cards with icons, tables with thumbnails, stat rows, kebab menus, pagination ======== */
body.s2 .pcard .cardhead { align-items: flex-start; }
body.s2 .pcard .cardhead h2 { font-size: 1.02rem; }
body.s2 .pcard .cardhead p { font-size: .85rem; }
body.s2 .hint { font-size: .8rem; margin: 4px 0 0; }
body.s2 .req { color: var(--bad); }
body.s2 label + input, body.s2 label + select, body.s2 label + .field, body.s2 label + .phonefield, body.s2 label + .row.addrow { margin-top: 4px; }
body.s2 .card label { display: block; margin-top: 12px; }
body.s2 .card label:first-child, body.s2 .cardhead + label, body.s2 .cols2 label:first-child { margin-top: 0; }
body.s2 .card label.check, body.s2 .card label.checkrow, body.s2 .card label.switchrow { display: flex; }
.phonefield { display: flex; align-items: stretch; }
.phonefield .cc { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid #d3dbe8; border-right: 0; border-radius: 10px 0 0 10px; background: #f6f8fb; color: var(--muted); font-weight: 600; }
.phonefield input { border-radius: 0 10px 10px 0; flex: 1; min-width: 0; }
.subrow { display: flex; align-items: center; gap: 6px; }
.logorow { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.logobox { width: 96px; height: 96px; flex: none; border: 1px solid var(--line); border-radius: 12px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.logo-preview { max-width: 88px; max-height: 88px; object-fit: contain; }
.logo-empty { color: #a3b1c8; }
body.s2 button.small { min-height: 38px; padding: 0 14px; font-size: .86rem; }
body.s2 button.iconbtn { min-height: 38px; width: 38px; padding: 0; }
body.s2 .btn.secondary { text-decoration: none; min-height: 44px; padding: 0 16px; }
body.s2 .notice { border-color: #b45309; }
body.s2 .msg.notice { background: #fff8ec; border: 1px solid #f2d59a; color: var(--ink); }

/* two-column pages (a form beside a list) and the settings grid */
.ad-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
.settings-grid .scol > .card { margin-bottom: 16px; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1100px; }
.chats-wrap { max-width: 1100px; }
.card.listcard { padding: 14px 18px 18px; }

/* hotel header on the platform admin's hotel pages */
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .88rem; margin: 2px 0 10px; }
.crumbs .cur { color: var(--ink); font-weight: 600; }
.crumbs svg { color: #a3b1c8; }
body.s2 button.linkbtn { background: none; border: 0; color: var(--accent); padding: 0; min-height: 0; font-weight: 600; font-size: inherit; }
.hhead { display: flex; align-items: center; gap: 16px; margin: 0 0 6px; flex-wrap: wrap; }
.hhead-main { flex: 1 1 240px; min-width: 0; }
.hhead-main h1 { font-size: 1.45rem; margin: 0; }
.hhead-sub { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.hhead-sub .muted { display: inline-flex; align-items: center; gap: 4px; }
.hhead-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.hhead-wrap .tabs { margin-top: 10px; }
.thumb { flex: none; border-radius: 12px; object-fit: cover; background: #fff; border: 1px solid var(--line); }
.thumb.md { width: 44px; height: 44px; }
.thumb.lg { width: 72px; height: 72px; border-radius: 14px; }
.thumb.ph { display: grid; place-items: center; background: linear-gradient(145deg, #e7f4ee, #dbeaf7); color: var(--accent-dark); border: 0; }

/* toolbars: search, filters, chips */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .grow, .grow { flex: 1 1 auto; }
.toolbar select { min-height: 44px; max-width: 200px; }
.searchbox { margin-top: 0; flex: 1 1 220px; max-width: 360px; }
.searchbox input { width: 100%; min-height: 44px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
body.s2 button.chip { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 99px; min-height: 40px; padding: 0 14px; font-weight: 600; font-size: .9rem; gap: 8px; }
body.s2 button.chip .count { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 99px; background: #eef1f6; color: var(--muted); font-size: .78rem; }
body.s2 button.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
body.s2 button.chip.on .count { background: rgba(255, 255, 255, .22); color: #fff; }

/* tables */
body.s2 table.tbl { width: 100%; border-collapse: collapse; }
body.s2 table.tbl thead th { background: #f3f6fb; color: var(--muted); font-size: .78rem; font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: left; }
body.s2 table.tbl thead th:first-child { border-radius: 10px 0 0 10px; }
body.s2 table.tbl thead th:last-child { border-radius: 0 10px 10px 0; }
body.s2 table.tbl td { padding: 14px 12px; border-bottom: 1px solid #eef1f6; vertical-align: middle; font-size: .9rem; }
body.s2 table.tbl tr:last-child td { border-bottom: 0; }
body.s2 table.tbl tr.pick { cursor: pointer; }
body.s2 table.tbl tr.pick:hover td { background: #f8fafd; }
body.s2 table.tbl td.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.s2 table.tbl td.who b { display: block; color: var(--navy); }
body.s2 table.tbl td.who small { display: flex; align-items: center; gap: 3px; font-size: .8rem; }
body.s2 table.tbl td.who small.warn { color: var(--warn); }
body.s2 table.tbl td.who small.ref { color: #8a97ad; margin-top: 2px; }
body.s2 table.tbl td.acts { white-space: nowrap; }
body.s2 table.tbl td select { min-height: 40px; font-size: .9rem; }
body.s2 table.tbl.enq td { vertical-align: top; }
body.s2 table.tbl.enq td.contact div, body.s2 table.tbl.enq td.received div, body.s2 table.tbl.enq td.message div { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 5px; font-size: .86rem; }
body.s2 table.tbl.enq td svg { flex: none; margin-top: 3px; color: #8a97ad; }
body.s2 table.tbl.enq td.message { max-width: 280px; }
body.s2 table.tbl.enq td.received .ok { color: var(--ok); }
body.s2 table.tbl.enq tr.isnew td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
body.s2 table.tbl.enq select.statussel { border-radius: 99px; font-weight: 700; padding: 6px 30px 6px 14px; min-height: 36px; }
body.s2 table.tbl.enq select.statussel.new { background-color: var(--ok-bg); color: var(--ok); border-color: #bfe6cd; }
body.s2 table.tbl.enq select.statussel.contacted { background-color: var(--warn-bg); color: var(--warn); border-color: #f1dc9a; }
body.s2 table.tbl.enq select.statussel.closed { background-color: var(--info-bg); color: var(--info); }
body.s2 table.tbl.auditlog td { padding: 12px; font-size: .86rem; }
body.s2 table.tbl.auditlog td.when { white-space: nowrap; color: var(--muted); }
body.s2 table.tbl.auditlog td.who { display: flex; align-items: center; gap: 10px; }
body.s2 table.tbl.auditlog .what { display: flex; align-items: flex-start; gap: 10px; }
body.s2 table.tbl.auditlog .what b { display: block; color: var(--ink); }
body.s2 table.tbl.auditlog .what small { display: block; font-size: .78rem; }
body.s2 table.tbl.auditlog td.details { max-width: 320px; word-break: break-word; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 6px; background: #94a3b8; }
.dot.blue { background: #2563eb; } .dot.green { background: #16a34a; } .dot.amber { background: #d97706; } .dot.red { background: #dc2626; }
.avatar.sm { width: 34px; height: 34px; font-size: .8rem; flex: none; }
.list .listrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef1f6; }
.list .listrow b { flex: 1; }
.list .listrow:last-child { border-bottom: 0; }

/* pagination */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pages { display: flex; gap: 6px; align-items: center; }
body.s2 button.pagenum { min-height: 36px; min-width: 36px; padding: 0 10px; font-size: .88rem; }
body.s2 button.pagenum.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* kebab menu */
.kebabwrap { position: relative; display: inline-block; }
.kmenu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 34, 80, .16); padding: 6px; z-index: 20; display: grid; }
.kmenu.hidden { display: none; }
body.s2 button.menuitem { background: none; border: 0; color: var(--ink); justify-content: flex-start; min-height: 38px; padding: 0 12px; border-radius: 8px; font-weight: 600; font-size: .9rem; text-align: left; }
body.s2 button.menuitem:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-dark); }
body.s2 button.menuitem.danger { color: var(--bad); }
body.s2 button.menuitem.danger:hover:not(:disabled) { background: #fff4f3; }

/* stat cards */
.stats { display: grid; gap: 14px; margin-bottom: 16px; }
.stats:empty { display: none; }
.stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 16px; }
.stat { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.stats.three .stat { background: #f3f6fb; border: 0; }
.stat.blue { background: #eef4fb; } .stat.green { background: #e8f6ee; } .stat.amber { background: #fff7e6; }
.stat.blue .cardicon { background: #dbe8f8; color: #1d4ed8; } .stat.green .cardicon { background: #d4eedd; } .stat.amber .cardicon { background: #fde9c2; color: #b45309; }
.statbody { min-width: 0; flex: 1; }
.statbody b { display: block; font-size: 1.35rem; color: var(--navy); line-height: 1.2; }
.statbody b small { font-size: .85rem; font-weight: 500; }
.statbody > .muted { display: block; font-size: .85rem; }
.bar { position: relative; height: 6px; background: #e2e8f2; border-radius: 99px; margin: 10px 0 4px; }
.bar .fill { height: 100%; background: var(--accent); border-radius: 99px; }
.bar small { position: absolute; left: 0; top: 10px; font-size: .74rem; }
.stat .bar { margin-bottom: 22px; }

/* switches and check rows */
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch .slider { position: absolute; inset: 0; border-radius: 99px; background: #cbd5e1; transition: background .15s; pointer-events: none; }
.switch .slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::after { transform: translateX(20px); }
.switch input:disabled + .slider { opacity: .6; }
body.s2 label.switchrow, body.s2 label.checkrow { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #eef1f6; font-weight: 500; cursor: pointer; margin-top: 0; }
body.s2 label.switchrow:last-of-type, body.s2 label.checkrow:last-of-type { border-bottom: 0; }
body.s2 label.checkrow input { margin-top: 3px; width: 18px; height: 18px; }
body.s2 label.switchrow b, body.s2 label.checkrow b { display: block; font-size: .92rem; }
body.s2 label.switchrow small, body.s2 label.checkrow small { display: block; font-size: .8rem; }
body.s2 label.switchrow.status { padding: 0; border: 0; align-items: center; }
.statusline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.statusrow { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.statusbox { flex: 1 1 220px; display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px 14px; }
.statusbox.ok { background: var(--ok-bg); color: var(--ok); }
.statusbox.bad { background: var(--bad-bg); color: var(--bad); }
.statusbox b { display: block; }
.statusbox small { display: block; font-size: .8rem; }
.infobox, .inforow { display: flex; gap: 10px; align-items: flex-start; background: #eef4fb; border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.infobox > svg, .inforow > svg { flex: none; color: #1d4ed8; margin-top: 2px; }
.infobox p, .inforow p { margin: 0; font-size: .86rem; }
.infobox b, .inforow b { display: block; font-size: .92rem; }
.inforow { background: #fff; border: 1px solid var(--line); align-items: center; }
.inforow > svg { color: var(--accent); }
.qrrow { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-top: 10px; }
.qrrow .qr { flex: none; }
.qrrow .qr svg { max-width: 150px; }
.linkbox { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.linkbox code { flex: 1; min-width: 0; word-break: break-all; font-size: .82rem; background: #f3f6fb; padding: 8px 10px; border-radius: 8px; }
.linkbox button { min-height: 38px; padding: 0 12px; }
.row.addrow { align-items: center; }
.row.addrow input { flex: 1 1 200px; }
.row.addrow button { flex: 0 0 auto; }

/* account page */
.field.pw input { padding-right: 44px; }
body.s2 button.eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; min-height: 36px; padding: 0; background: none; border: 0; color: #8a97ad; }
body.s2 button.eye:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.rules li { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--muted); }
.tick.soft { background: #eef1f6; color: #a3b1c8; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; }
.rules li.ok { color: var(--ok); }
.rules li.ok .tick.soft { background: var(--accent); color: #fff; }
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tips li { display: flex; gap: 12px; align-items: flex-start; }
.tips li b { display: block; font-size: .95rem; }
.tips li p { margin: 2px 0 0; font-size: .86rem; }
.tips .cardicon { width: 40px; height: 40px; }

/* empty states, modal, tips */
.empty { text-align: center; padding: 36px 16px; display: grid; justify-items: center; gap: 6px; }
.empty .emptyicon { width: 68px; height: 68px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 6px; }
.empty b { font-size: 1.1rem; color: var(--navy); }
.empty p { max-width: 520px; margin: 0; }
.tipbox { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: #eef8f1; border-radius: 14px; padding: 16px 18px; margin-top: 6px; }
.tipbox b { display: flex; align-items: center; gap: 6px; color: var(--ink); }
.tipbox .ticks { margin-top: 10px; gap: 6px; }
.tipbox .tick.ok { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; }
.tipacts { display: grid; gap: 8px; min-width: 220px; }
.modalwrap { position: fixed; inset: 0; background: rgba(8, 31, 70, .45); z-index: 60; display: grid; place-items: center; padding: 16px; }
body.s2 .card.modal { width: min(560px, 100%); max-height: 90vh; overflow: auto; margin: 0; }
body.s2 .card.modal .cardhead { justify-content: space-between; }
details.conv { border-bottom: 1px solid #eef1f6; padding: 8px 0; }
details.conv summary { cursor: pointer; font-weight: 600; }
details.conv p { margin: 8px 0 0; font-size: .9rem; }
details.conv p.visitor { color: var(--navy); }

/* phones and narrow windows */
@media (max-width: 1100px) { .stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .ad-grid, .acct-grid { grid-template-columns: 1fr; }
  .stats.three { grid-template-columns: 1fr; }
  .hhead-acts { flex: 1 0 100%; }
  .hhead-acts > * { flex: 1; }
  .toolbar .searchbox { max-width: none; flex: 1 1 100%; }
  .toolbar select { max-width: none; flex: 1 1 100%; }
}
@media (max-width: 700px) {
  .stats.four { grid-template-columns: 1fr; }
  /* the list tables become cards: each row a card, the thumbnail row on top, labels hidden */
  body.s2 .card table.tbl:not(.auditlog) { display: block; }
  body.s2 .card table.tbl:not(.auditlog) thead { display: none; }
  body.s2 .card table.tbl:not(.auditlog) tbody { display: grid; gap: 12px; }
  body.s2 .card table.tbl:not(.auditlog) tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
  body.s2 .card table.tbl:not(.auditlog) td { display: block; padding: 0; border: 0; }
  body.s2 .card table.tbl:not(.auditlog) td.who { grid-column: 1 / -1; display: flex; }
  body.s2 .card table.tbl:not(.auditlog) td.acts { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
  body.s2 .card table.tbl:not(.auditlog) td.acts .row { width: 100%; }
  body.s2 .card table.tbl:not(.auditlog) td.acts .row > button { flex: 1; }
  body.s2 .card table.tbl.enq td.contact, body.s2 .card table.tbl.enq td.message, body.s2 .card table.tbl.enq td.received { grid-column: 1 / -1; max-width: none; }
  body.s2 .card table.tbl:not(.auditlog) td select { width: 100%; }
  body.s2 .card table.tbl.auditlog { min-width: 720px; }
  .pager { justify-content: center; }
  .crumbs { font-size: .8rem; }
  .thumb.lg { width: 56px; height: 56px; }
  .hhead-main h1 { font-size: 1.2rem; }
  body.s2 .card.listcard { padding: 12px; }
}
body.s2 .kebabwrap { flex: 0 0 auto; }
body.s2 .kebabwrap > button.iconbtn { width: 38px; flex: 0 0 38px; }
@media (max-width: 700px) {
  body.s2 .card table.tbl:not(.auditlog) td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 3px; }
  body.s2 .card table.tbl:not(.auditlog) td.acts .row > .kebabwrap { flex: 0 0 auto; }
}

/* ======== reception check-ins redesign (Oct 2026): left column of cards, status strip, guest details with the Aadhaar copy, waiting state, viewer ======== */
.ci-grid { grid-template-columns: 340px minmax(0, 1fr); gap: 0 20px; }
@media (min-width: 1280px) { .ci-grid { grid-template-columns: 340px minmax(0, 1fr); gap: 0 20px; } }
.ci-qr-phone { display: none; }
body.s2 .newform .fieldlabel { display: block; margin: 12px 0 4px; color: var(--ink); font-weight: 600; font-size: .9rem; }
body.s2 .newform .cardhead + .fieldlabel { margin-top: 0; }
body.s2 .newform .field { margin-top: 0; }
body.s2 .newform .actions { flex-direction: column; margin-bottom: 0; gap: 10px; }
body.s2 .newform button.big { min-height: 48px; }
body.s2 .newform button.secondary.big { background: #f3f6fb; border-color: #e2e8f2; color: var(--ink); }
body.s2 button.copybtn { background: none; border: 0; color: var(--muted); min-height: 28px; width: 28px; padding: 0; border-radius: 6px; }
body.s2 button.copybtn:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
body.s2 button.copybtn.done { color: var(--accent); }
body.s2 button.soft { width: 100%; background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-dark); min-height: 42px; font-size: .9rem; }
body.s2 button.soft:hover:not(:disabled) { background: #d8ecdf; }
body.s2 .qrcard .cardhead { margin-bottom: 10px; }
.qrrow2 { display: flex; gap: 14px; align-items: flex-start; }
.qrrow2 .qr { flex: none; width: 128px; border: 1px solid var(--line); border-radius: 12px; padding: 6px; background: #fff; }
.qrrow2 .qr svg { width: 100%; height: auto; display: block; }
.qrmeta { min-width: 0; flex: 1; display: grid; gap: 2px; align-content: start; }
.qrmeta small { color: var(--muted); font-size: .78rem; margin-top: 6px; }
.qrmeta small:first-child { margin-top: 0; }
.qrmeta b { font-size: 1.05rem; color: var(--navy); }
.qrref { display: flex; align-items: center; gap: 4px; }
.linkrow { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 4px 4px 4px 10px; background: #f8fafd; margin: 4px 0 10px; }
.linkrow code { flex: 1; min-width: 0; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrcard .fieldlabel { margin: 8px 0 0; display: block; font-size: .8rem; color: var(--muted); }
body.s2 .msg.good.softnote { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; padding: 10px 12px; margin: 0 0 10px; }
.softnote svg { flex: none; margin-top: 3px; }
/* recent list */
.recent .cardhead { margin-bottom: 6px; }
.recent-row { padding: 10px 6px; gap: 10px; }
.rr-ico { width: 30px; height: 30px; border-radius: 50%; background: #f3f6fb; color: #8a97ad; display: grid; place-items: center; flex: none; }
.rr-main b { font-size: .92rem; }
.rr-main .muted { font-size: .78rem; }
/* status strip */
body.s2 .card.strip2 { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 12px; }
body.s2 .card.strip2.done { background: #edf7f1; border-color: #cbe7d6; }
.spill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: .92rem; white-space: nowrap; }
.spill.green { background: var(--ok-bg); color: var(--ok); } .spill.blue { background: #e3edfb; color: #1d4ed8; } .spill.amber { background: var(--warn-bg); color: var(--warn); } .spill.red { background: var(--bad-bg); color: var(--bad); } .spill.grey { background: var(--info-bg); color: var(--info); }
.scell { display: flex; flex-direction: column; line-height: 1.25; padding-left: 18px; border-left: 1px solid var(--line); }
.scell small { color: var(--muted); font-size: .76rem; }
.sval { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 2px; }
.strip2 .dactions { margin-left: auto; gap: 8px; }
body.s2 .strip2 .dactions button { min-height: 40px; font-size: .88rem; padding: 0 14px; }
body.s2 button.backlink { display: none; }
/* guest details */
body.s2 .dcard { padding: 16px 18px; margin-bottom: 12px; }
body.s2 .dcard .cardhead h2 { font-size: 1rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.s2 .dcard .cardhead h2 .pill { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; }
.gd { display: grid; grid-template-columns: 132px minmax(0, 1fr) minmax(220px, 300px); gap: 18px; align-items: start; }
body.s2 .gd .photo { width: 132px; height: 160px; border-radius: 12px; }
body.s2 .gd .photo.ph { display: grid; place-items: center; background: #f3f6fb; color: #a3b1c8; border: 1px solid var(--line); }
.gd-main h3 { margin: 0 0 8px; font-size: 1.3rem; color: var(--navy); }
.gd-booking { display: flex; gap: 0; background: #f3f6fb; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.gd-booking > div { display: flex; flex-direction: column; padding-right: 22px; margin-right: 22px; border-right: 1px solid var(--line); }
.gd-booking > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.gd-booking small { color: var(--muted); font-size: .76rem; }
.kv.icons { grid-template-columns: minmax(150px, 210px) 1fr; gap: 7px 12px; }
.kv.icons dt { display: flex; align-items: center; gap: 8px; }
.kv.icons dt svg { color: #8a97ad; flex: none; }
.gd-side { min-width: 0; }
.sidehead { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: .9rem; }
.sidehead svg { color: var(--accent); }
.gd-side .pics { grid-template-columns: 1fr; gap: 8px; margin: 0 0 8px; }
.gd-side .pic.single { max-width: none; }
body.s2 .gd-side .pic-thumb { max-height: 170px; width: 100%; object-fit: contain; background: #f6f8fb; cursor: pointer; }
.gd-side .picacts { margin: 0; gap: 8px; }
.gd-side .picacts button { flex: 1 1 0; min-height: 36px; font-size: .82rem; padding: 0 6px; white-space: nowrap; }
.sidenote { display: flex; gap: 10px; align-items: flex-start; background: #f3f6fb; border-radius: 12px; padding: 12px 14px; font-size: .86rem; color: var(--muted); }
.sidenote svg { flex: none; color: #8a97ad; margin-top: 2px; }
body.s2 .card.printpanel { background: #f1f8f4; border-color: #cbe7d6; margin: 12px 0 0; padding: 14px 16px; }
.printgrid { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(200px, 1.4fr) auto; gap: 12px; align-items: end; }
.printgrid label { display: block; margin-bottom: 4px; }
.printgrid select, .printgrid textarea { width: 100%; }
.printgrid textarea { min-height: 48px; resize: vertical; font: inherit; }
.printgo button { min-height: 48px; white-space: nowrap; }
.gd-side .printpanel { margin-top: 10px; }
.gd-side .printgrid { grid-template-columns: 1fr; }
/* booking actions */
.gp .cardhead { margin-bottom: 10px; }
.gcounts { display: flex; gap: 0; margin-bottom: 12px; }
.gcounts > div { display: flex; flex-direction: column; padding-right: 26px; margin-right: 26px; border-right: 1px solid var(--line); }
.gcounts > div:last-child { border-right: 0; }
.gcounts small { color: var(--muted); font-size: .8rem; }
.gcounts b { font-size: 1.5rem; color: var(--navy); line-height: 1.2; }
body.s2 .gp .row.gacts { margin-top: 0; gap: 10px; }
body.s2 .gp .row.gacts button { min-height: 44px; }
.kidbox { margin-top: 12px; border-top: 1px solid #eef1f6; padding-top: 10px; }
table.members { margin-bottom: 8px; width: 100%; }
/* waiting state */
.wgrid { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 22px; align-items: center; }
.wart svg { width: 100%; height: auto; display: block; border-radius: 14px; }
.eyebrow { display: block; color: var(--accent); font-weight: 700; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.wtext h2 { font-size: 1.45rem; line-height: 1.25; color: var(--navy); margin: 0 0 8px; }
.wsteps { display: flex; gap: 10px; margin: 16px 0 14px; align-items: flex-start; }
.wstep { flex: 1; display: flex; flex-direction: column; gap: 6px; position: relative; }
.wstep b { display: block; font-size: .92rem; }
.wstep small { display: block; font-size: .8rem; line-height: 1.3; }
.wnum { width: 30px; height: 30px; border-radius: 50%; background: #e2e8f2; color: var(--muted); font-weight: 800; display: grid; place-items: center; font-size: .9rem; }
.wnum.on { background: var(--accent); color: #fff; }
.wstep:not(:last-child)::after { content: ""; position: absolute; left: 36px; right: 6px; top: 14px; height: 2px; background: #e2e8f2; }
.wstatus { display: inline-flex; align-items: center; gap: 10px; background: #f3f6fb; border-radius: 10px; padding: 10px 14px; font-size: .9rem; color: var(--muted); }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px dashed var(--accent); animation: spin 2.4s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
/* other ID */
details.fallback > summary { display: flex; align-items: center; gap: 12px; padding: 0; }
details.fallback > summary::after, details.fallback[open] > summary::after { content: none; }
.sumtext { flex: 1; display: flex; flex-direction: column; }
.sumtext b { font-size: 1rem; }
.sumtext .muted { font-weight: 400; font-size: .86rem; }
.sumtoggle { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); flex: none; }
.sumtoggle::before { content: "+"; font-size: 1.3rem; line-height: 1; }
details.fallback[open] .sumtoggle::before { content: "\2212"; }
details.fallback .fallbackbody { margin-top: 14px; }
.frow { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 10px; }
.frow label { color: var(--ink); }
.frow input, .frow select { width: 100%; }
body.s2 label.check.consentrow { display: flex; gap: 10px; align-items: center; margin: 6px 0 12px 170px; font-weight: 500; }
.consentrow a { color: var(--accent); }
body.s2 .fallbackbody .row { margin-top: 0; }
body.s2 .fallbackbody .row button { width: 100%; }
/* log tabs */
body.s2 .logcard .minitabs { margin-bottom: 10px; }
body.s2 button.mini { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.auditscroll { max-height: 220px; }
.auditscroll.tall { max-height: 320px; }
table.audit th { white-space: nowrap; text-align: left; }
table.audit td { padding: 9px 10px; font-size: .85rem; vertical-align: top; }
table.audit td b { font-weight: 600; }
.nowrap { white-space: nowrap; }
body.s2 .note { display: flex; align-items: center; gap: 4px; }
/* empty state */
.emptystate .emptyicon { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.emptystate b { color: var(--navy); font-size: 1.05rem; }
.emptystate p { margin: 0; max-width: 420px; }
/* the Aadhaar copy viewer */
.vgrid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
body.s2 .vguest .photo.big { width: 100%; height: auto; max-width: 240px; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 12px; }
.kv.stack { grid-template-columns: 1fr; gap: 0; }
.kv.stack dt { margin-top: 10px; font-size: .8rem; }
.kv.stack dd { font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid #eef1f6; }
.kv.stack dd:last-child { border-bottom: 0; }
.vhead { flex-wrap: wrap; }
.vtools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.vgroup { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
body.s2 .vgroup button.iconbtn { min-height: 32px; width: 32px; border: 0; font-size: 1.1rem; }
.vzoom, .vpage { min-width: 3.4em; text-align: center; font-weight: 700; font-size: .86rem; }
body.s2 .vtools > button.secondary { min-height: 40px; font-size: .88rem; }
.vstage { background: #e9eef5; border-radius: 12px; padding: 14px; }
.vscroll { max-height: 70vh; overflow: auto; text-align: center; }
.vscroll img { max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 6px 24px rgba(15, 34, 80, .18); background: #fff; cursor: zoom-in; }
.vscroll.zoomed { cursor: grab; }
.vscroll.zoomed img { max-width: none; cursor: zoom-out; }
body.s2 .vacts { margin-top: 12px; gap: 10px; }
.warnbox { display: flex; gap: 10px; align-items: flex-start; background: #fff7e6; border: 1px solid #f6dfae; border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.warnicon { width: 26px; height: 26px; border-radius: 50%; background: #e3a008; color: #fff; display: grid; place-items: center; flex: none; }
.warnbox b { display: block; font-size: .92rem; }
.warnbox p { margin: 2px 0 0; font-size: .86rem; }

@media (max-width: 1279px) { .gd { grid-template-columns: 120px minmax(0, 1fr); } .gd-side { grid-column: 1 / -1; } .vgrid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  /* one scrolling page: the open check-in, then the recent list; the + button opens the Start form */
  body.s2 .ci-grid { display: flex; flex-direction: column; }
  .ci-grid .ci-new { order: 1; } .ci-grid .ci-guest { order: 2; } .ci-grid .ci-recent { order: 3; }
  .ci-grid[data-pane=guest] .ci-recent { display: block; }
  .ci-grid[data-pane=checkin] .ci-recent { display: block; }
  .ci-qr-phone { display: block; }
  .ci-new .qrcard { display: none; }
  body.s2 .card.strip2 { gap: 8px 14px; padding: 12px; }
  .scell { padding-left: 0; border-left: 0; flex: 1 1 40%; }
  .strip2 .dactions { flex: 1 0 100%; margin-left: 0; }
  body.s2 .strip2 .dactions button { flex: 1; }
  .gd { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  body.s2 .gd .photo { width: 84px; height: 104px; }
  .gd-main h3 { font-size: 1.1rem; }
  .gd-booking { flex-wrap: wrap; gap: 8px 0; }
  .kv.icons { grid-template-columns: 1fr; gap: 2px 0; }
  .kv.icons dd { margin: 0 0 6px 24px; }
  .wgrid { grid-template-columns: 1fr; gap: 14px; }
  .wtext h2 { font-size: 1.2rem; }
  .wsteps { flex-direction: column; gap: 8px; }
  .wstep { flex-direction: row; align-items: flex-start; gap: 10px; }
  .wstep::after { display: none; }
  .wnum { flex: none; }
  .frow { grid-template-columns: 1fr; gap: 4px; }
  body.s2 label.check.consentrow { margin-left: 0; }
  .printgrid { grid-template-columns: 1fr; }
  .gcounts > div { flex: 1; }
  body.s2 .gp .row.gacts button { flex: 1 1 30%; min-height: 42px; font-size: .86rem; padding: 0 8px; }
  .vtools { margin-left: 0; flex: 1 0 100%; }
  .vscroll { max-height: 60vh; }
  .emptystate { padding: 28px 16px; }
  body.s2 .bottomnav button.bn-item.plus { flex: 0 0 84px; }
  body.s2 .bottomnav button.bn-item.plus span { display: none; }
  body.s2 .bottomnav button.bn-item.plus .plusdot { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; margin-top: -18px; box-shadow: 0 8px 20px rgba(10, 107, 74, .35); }
  body.s2 .bottomnav button.bn-item.plus.on::before { display: none; }
}

/* the top-bar tabs must not pick up the green button hover (that rule is more specific than .appnav .tab); keyboard focus gets a soft ring instead of the browser's black box */
body.s2 .appnav button.tab:hover:not(:disabled) { background: none; color: var(--navy); }
body.s2 .appnav button.tab.navsignout:hover:not(:disabled) { color: var(--bad); }
body.s2 .appnav button.tab:focus-visible, body.s2 .tabs button.tab:focus-visible, body.s2 button.mini:focus-visible, body.s2 button.chip:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -4px; border-radius: 8px; }
body.s2 button:focus-visible, body.s2 .btn:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
body.s2 input:focus-visible, body.s2 select:focus-visible, body.s2 textarea:focus-visible { outline: 2px solid var(--accent-line); border-color: var(--accent); }

/* ======== sign-in and manager set-up redesign (Oct 2026): soft shapes behind, one card, icon fields, stepper ======== */
.decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.decor .blob { position: absolute; border-radius: 50%; background: #e4f3ea; opacity: .8; }
.decor .blob.a { width: 420px; height: 420px; left: -160px; bottom: -140px; }
.decor .blob.b { width: 520px; height: 520px; right: -220px; top: -200px; background: #e3edf8; }
.decor .dots { position: absolute; width: 120px; height: 100px; background-image: radial-gradient(#c5d1e2 2px, transparent 2.5px); background-size: 24px 24px; opacity: .8; }
.decor .dots.a { left: 48px; top: 180px; }
.decor .dots.b { right: 60px; bottom: 160px; }
.decor .wave { display: none; }
body.s2 main.auth, body.setup main#app, body.setup .setuphead, body.s2 #appbar, body.s2 .bottomnav { position: relative; z-index: 1; }
body.s2 #appbar { position: sticky; }
/* sign in */
body.s2 main.auth { max-width: 640px; margin: 0 auto; padding: 56px 16px 40px; }
.auth .login-logo { height: 40px; margin: 0 auto 26px; }
body.s2 .card.authcard { max-width: 640px; margin: 0 auto; padding: 36px 40px 30px; border-radius: 18px; box-shadow: 0 18px 50px rgba(15, 34, 80, .08); }
.authcard h1, .onboard h1 { font-size: 1.8rem; color: var(--navy); margin: 0 0 4px; }
.authcard .lead, .onboard .lead { color: var(--muted); margin: 0 0 20px; font-size: 1rem; }
body.s2 .authcard .fieldlabel, body.s2 .onboard .fieldlabel { display: block; margin: 14px 0 6px; color: var(--navy); font-weight: 700; font-size: .95rem; }
body.s2 .authcard .field, body.s2 .onboard .field { margin-top: 0; }
body.s2 .authcard .field > input, body.s2 .onboard .field > input { min-height: 54px; border-radius: 12px; }
body.s2 .onboard .hint { margin: 6px 0 0; }
body.s2 .authcard button.big, body.s2 .onboard button.big, body.s2 .onboard a.btn.big, body.s2 .setup-main button.big { width: 100%; min-height: 56px; margin-top: 22px; font-size: 1.05rem; border-radius: 12px; box-shadow: 0 10px 24px rgba(10, 107, 74, .25); text-decoration: none; }
.authlink { text-align: center; margin: 18px 0 0; }
.authlink a { color: var(--accent); font-weight: 600; }
.centered { text-align: center; }
.bigtick { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 4px auto 12px; }
/* set-up pages */
body.setup { background: var(--page); }
body.setup .setuphead { position: relative; z-index: 1; }
body.setup .setuphead.hotelbar { display: flex; align-items: center; justify-content: space-between; max-width: 1120px; margin: 0 auto; padding: 18px 20px 4px; text-align: left; }
.whochip { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--navy); }
.whochip .avatar { width: 34px; height: 34px; font-size: .8rem; }
body.setup main#app { max-width: 680px; padding: 4px 16px 48px; }
body.setup.wide main#app { max-width: 1120px; }
.hotelname { text-align: center; font-weight: 800; font-size: 1.35rem; color: var(--navy); margin: 0 0 16px; }
.hotelchip { display: flex; align-items: center; gap: 8px; width: max-content; margin: 2px auto 18px; padding: 10px 18px; border-radius: 12px; background: var(--accent-soft); color: var(--navy); font-weight: 800; font-size: 1.1rem; }
.hotelchip svg { color: var(--accent); }
body.s2 .card.onboard { padding: 32px 36px 30px; border-radius: 18px; box-shadow: 0 18px 50px rgba(15, 34, 80, .08); margin: 0 auto; }
.stepline { color: var(--muted); font-size: .88rem; margin: 0 0 6px; }
.bar1 { height: 8px; background: #e2e8f2; border-radius: 99px; margin: 0 0 22px; overflow: hidden; }
.bar1 span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.art { width: 100%; }
.art svg { width: 100%; height: auto; display: block; }
.onboard.welcome { text-align: center; }
.onboard.welcome .hotelart { max-width: 300px; margin: 0 auto 10px; }
.onboard.welcome .lead { margin-bottom: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.onboard .wsteps { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: 18px; position: relative; }
.onboard .wsteps li { display: flex; align-items: flex-start; gap: 12px; position: relative; }
.onboard .wsteps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: -18px; border-left: 2px dashed #cfe0d7; }
.snum { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; display: grid; place-items: center; }
.stile { width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.stext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stext b { font-size: 1rem; line-height: 1.3; }
.stext .muted { font-size: .88rem; line-height: 1.4; }
.onboard.account { position: relative; z-index: 1; }
body.setup main#app > .hotelart { display: none; }
@media (min-width: 1100px) {
  body.setup main#app > .hotelart { display: block; position: fixed; right: -40px; bottom: 0; width: 520px; opacity: .35; z-index: 0; pointer-events: none; }
}
/* step 2: side column with the stepper, main column with the cards */
body.s2 .card.setup2 { display: grid; grid-template-columns: 270px minmax(0, 1fr); padding: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 18px 50px rgba(15, 34, 80, .08); }
.setup-side { background: #f8fafd; border-right: 1px solid var(--line); padding: 36px 28px; display: flex; flex-direction: column; gap: 26px; }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.stepper li { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.stepper li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 38px; height: 22px; border-left: 2px solid #cfe0d7; }
.stepper li.done .snum, .stepper li.on .snum { background: var(--accent); color: #fff; }
.stepper .stext small { color: var(--muted); font-size: .78rem; }
.stepper .stext b { font-size: 1rem; }
.stepper .stext .muted { font-size: .84rem; }
.setup-side .hotelart { margin-top: auto; }
.almost .dash { display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--accent); margin-bottom: 12px; }
.almost b { display: block; font-size: 1.25rem; color: var(--navy); margin-bottom: 6px; }
.almost p { margin: 0; font-size: .92rem; }
.setup-main { padding: 32px 36px 30px; min-width: 0; }
.setup-main .mhead { display: none; }
.setup-main .dhead2 h1 { font-size: 1.7rem; color: var(--navy); margin: 0 0 4px; }
.setup-main .lead { color: var(--muted); margin: 0 0 18px; max-width: 640px; }
.setup-main .sections { max-width: none; }
.setup-main .sections > .card { margin-bottom: 14px; }
.segs { display: flex; gap: 8px; margin: 8px 0 12px; }
.segs span { flex: 1; height: 8px; border-radius: 99px; background: #e2e8f2; }
.segs span.on { background: var(--accent); }
/* logo card inside the set-up: a dashed drop zone beside the buttons */
.logorow .logobox { width: 150px; height: 96px; border: 2px dashed #cfd8e6; background: #f8fafd; border-radius: 12px; }
.logorow .logo-empty { color: #8a97ad; }
body.s2 .logorow .row button { min-width: 180px; }
body.s2 .logorow .row button.danger.small { background: #fff6f5; }
/* all set */
.onboard.done { text-align: center; }
.onboard.done .doneart { max-width: 260px; margin: 0 auto 6px; }
.addrbox { display: flex; align-items: center; gap: 14px; text-align: left; background: #f1f8f4; border: 1px solid #cbe7d6; border-radius: 14px; padding: 14px 16px; margin: 6px 0 16px; }
.addrico { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.addr { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.addr small { color: var(--muted); font-size: .82rem; }
.addr b { font-size: 1.2rem; color: var(--accent-dark); word-break: break-all; }
body.s2 .addrbox .copybtn { width: 40px; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted); display: grid; place-items: center; padding: 0; }
body.s2 .addrbox .copybtn:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
/* phones */
@media (max-width: 900px) {
  body.s2 main.auth { padding: 36px 16px 120px; }
  body.s2 .card.authcard, body.s2 .card.onboard { padding: 26px 20px 24px; }
  .authcard h1, .onboard h1 { font-size: 1.6rem; text-align: center; }
  .authcard .lead { text-align: center; }
  .decor .wave { display: block; position: absolute; left: -10%; right: -10%; bottom: -40px; height: 220px; background: #e4f3ea; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: .9; }
  .decor .dots { display: none; }
  .decor .blob.b { width: 300px; height: 300px; right: -140px; top: -140px; }
  body.s2 .card.setup2 { grid-template-columns: 1fr; }
  .setup-side { display: none; }
  .setup-main { padding: 20px 16px 22px; }
  .setup-main .mhead { display: block; }
  .setup-main .mhead h1 { font-size: 1.5rem; color: var(--navy); margin: 0; }
  .setup-main .dhead2 { display: none; }
  body.setup .setuphead.hotelbar { padding: 14px 16px 0; }
  body.setup .setuphead.hotelbar img { height: 30px; }
  .whochip b { display: none; }
  .onboard .wsteps li { gap: 10px; }
}
/* the logo drop zone on the set-up page shows a short prompt beside the icon; the settings page keeps the small square */
.logo-emptytext { display: none; }
.setup-main .logobox { width: 230px; height: 96px; flex-direction: row; gap: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.setup-main .logo-emptytext { display: flex; flex-direction: column; text-align: left; }
.setup-main .logo-emptytext b { font-size: .9rem; color: var(--ink); }
.setup-main .logo-emptytext small { font-size: .74rem; color: var(--muted); }
.setup-main .logobox:has(.logo-preview:not([hidden])) .logo-emptytext { display: none; }

/* phones: nothing may be wider than the screen. Flex and grid children must be allowed to shrink, and the audit log
   becomes a list of small cards instead of a table (a table with unbreakable cells is what pushed the page wide). */
@media (max-width: 900px) {
  body.s2 .ci-grid > * { min-width: 0; max-width: 100%; }
  body.s2 .detail, body.s2 .ci-qr-phone, body.s2 .card { max-width: 100%; min-width: 0; }
  body.s2 .card.strip2 { overflow: hidden; }
  .scell { min-width: 0; }
  .sval { flex-wrap: wrap; word-break: break-word; }
  .gd-main, .gd-side, .gd-booking > div, .statbody, .stext, .rr-main, .qrmeta { min-width: 0; }
  .gd-booking b, .gd-main h3 { word-break: break-word; }
  .nowrap { white-space: normal; }
  .auditscroll { max-height: 360px; overflow: auto; border: 0; padding: 2px; }
  .auditscroll table.audit, .auditscroll table.audit tbody, .auditscroll table.audit tr, .auditscroll table.audit td { display: block; width: 100%; }
  .auditscroll table.audit thead { display: none; }
  .auditscroll table.audit tr { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .auditscroll table.audit td { padding: 1px 0; border: 0; font-size: .86rem; }
  .auditscroll table.audit td:first-child { color: var(--muted); font-size: .78rem; }
  .auditscroll table.audit td:nth-child(2) b { font-size: .95rem; }
  .auditscroll table.audit td:last-child { font-size: .78rem; }
  .auditscroll table.audit td:last-child::before { content: "By "; }
  .auditscroll table.audit td:nth-child(3):empty, .auditscroll table.audit td:nth-child(3):has(> :empty) { display: none; }
  .vscroll { max-width: 100%; }
  .linkrow code { white-space: normal; word-break: break-all; }
}

/* ======== phone polish (Oct 2026): one-row header, a smaller type scale, aligned rows, equal-width tiles ======== */
@media (max-width: 900px) {
  body.s2 { font-size: 14px; }
  body.s2 main.wide { padding: 12px 12px calc(88px + env(safe-area-inset-bottom)); }
  /* header: logo left, hotel and role in one line, avatar right */
  .appbar-in { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "back brand sub user"; align-items: center; gap: 8px; padding: 8px 12px; justify-items: stretch; }
  body.s2 button.appback { display: inline-flex; grid-area: back; width: 36px; min-height: 36px; padding: 0; background: #f3f6fb; border: 0; border-radius: 10px; color: var(--navy); }
  body.s2 button.appback.hidden { display: none; }
  .appbrand { justify-content: flex-start; }
  .applogo { height: 26px; }
  body.s2 .appuser { display: flex !important; grid-area: user; }
  body.s2 .appuser .avatar { width: 34px; height: 34px; font-size: .8rem; }
  .appsub { text-align: right; line-height: 1.2; min-width: 0; }
  .appsub b { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .appsub small { display: block; font-size: .74rem; }
  /* cards and type */
  body.s2 .card { padding: 14px; border-radius: 14px; margin-bottom: 12px; }
  body.s2 .dcard { padding: 14px; margin-bottom: 12px; }
  body.s2 h2, body.s2 .dcard .cardhead h2, body.s2 .pcard .cardhead h2 { font-size: 1rem; }
  body.s2 .cardhead { gap: 10px; margin-bottom: 10px; align-items: flex-start; }
  body.s2 .cardhead p { font-size: .82rem; line-height: 1.4; }
  .cardicon { width: 36px; height: 36px; }
  .cardicon svg { width: 18px; height: 18px; }
  body.s2 .muted { font-size: .84rem; }
  body.s2 label { font-size: .88rem; }
  body.s2 input, body.s2 select, body.s2 textarea { font-size: 16px; min-height: 48px; padding: 10px 12px; } /* 16px: iPhones do not zoom into the field */
  body.s2 button, body.s2 .btn { min-height: 44px; font-size: .92rem; }
  body.s2 button.small, body.s2 .picacts button { min-height: 42px; font-size: .86rem; }
  body.s2 button.big { min-height: 50px; font-size: .98rem; }
  body.s2 button.copybtn { width: 36px; min-height: 36px; }
  /* the help bubble sits above the bottom bar, not on it */
  .hc { right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); }
  body.s2 .hc .hc-launch { min-height: 42px; padding: 0 12px; }
  body.s2 .hc .hc-launchtext { display: none; }
  /* status strip: pill and booking on one row, date and reference on the next, buttons under */
  body.s2 .card.strip2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 12px 14px; }
  .strip2 .spill { font-size: .86rem; padding: 7px 12px; justify-self: start; }
  .strip2 .scell { padding: 0; border: 0; }
  .strip2 .scell small { font-size: .72rem; }
  .strip2 .sval { font-size: .95rem; }
  .strip2 .dactions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 0; }
  .strip2 .dactions > button:only-child { grid-column: 1 / -1; }
  body.s2 .strip2 .dactions button { min-height: 42px; font-size: .88rem; padding: 0 10px; }
  body.s2 button.backlink { display: none; }
  /* guest details: photo beside name and booking; then label | value rows that line up */
  .gd { grid-template-columns: 72px minmax(0, 1fr); gap: 10px 12px; }
  body.s2 .gd .photo { width: 72px; height: 90px; border-radius: 10px; }
  .gd-main h3 { font-size: 1.05rem; margin: 0 0 6px; }
  .gd-booking { padding: 6px 10px; margin-bottom: 8px; gap: 6px 0; }
  .gd-booking > div { padding-right: 12px; margin-right: 12px; }
  .gd-booking small { font-size: .7rem; }
  .gd-booking b { font-size: .88rem; }
  .gd-main .kv.icons { grid-column: 1 / -1; }
  .gd .kv.icons { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 0 10px; margin: 2px 0 0; }
  .gd .kv.icons dt { font-size: .8rem; padding: 7px 0; border-top: 1px solid #eef1f6; align-items: center; }
  .gd .kv.icons dt svg { width: 14px; height: 14px; }
  .gd .kv.icons dd { font-size: .88rem; padding: 7px 0; border-top: 1px solid #eef1f6; margin: 0; text-align: right; font-weight: 600; }
  .gd-side { grid-column: 1 / -1; }
  .gd-side .picacts { gap: 8px; }
  .sidenote { font-size: .82rem; padding: 10px 12px; }
  body.s2 .dcard .cardhead h2 .pill { font-size: .72rem; padding: 2px 9px; }
  /* booking actions: counts inline, three equal tiles with the icon above the label */
  .gcounts { gap: 0; margin-bottom: 10px; }
  .gcounts > div { flex-direction: row; align-items: baseline; gap: 6px; padding-right: 14px; margin-right: 14px; }
  .gcounts b { font-size: 1.15rem; }
  .gcounts small { font-size: .78rem; }
  body.s2 .gp .row.gacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body.s2 .gp .row.gacts button { flex-direction: column; gap: 4px; min-height: 60px; font-size: .78rem; padding: 6px 4px; line-height: 1.15; text-align: center; }
  body.s2 .gp .row.gacts button:nth-child(2):last-child { grid-column: 2 / 4; }
  body.s2 .gp .row.gacts button svg { width: 20px; height: 20px; }
  body.s2 .note { font-size: .8rem; align-items: flex-start; }
  body.s2 .note svg { flex: none; margin-top: 3px; }
  /* recent list: name, then reference and date, badge on the right */
  .recent-row { padding: 9px 2px; gap: 8px; }
  .rr-ico { width: 28px; height: 28px; }
  .rr-main b { font-size: .9rem; }
  .rr-main .muted { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.s2 .badge { font-size: .72rem; padding: 3px 9px; }
  /* QR card */
  .qrrow2 { gap: 12px; }
  .qrrow2 .qr { width: 112px; }
  .qrmeta b { font-size: .98rem; }
  .qrmeta small { font-size: .74rem; }
  .linkrow code { font-size: .74rem; }
  body.s2 button.soft { min-height: 40px; font-size: .86rem; }
  /* the Start form and the other-ID form */
  body.s2 .newform .fieldlabel { font-size: .86rem; margin: 10px 0 4px; }
  .frow { margin-bottom: 8px; }
  .frow label { font-size: .86rem; }
  body.s2 label.check.consentrow { font-size: .86rem; }
  details.fallback > summary .sumtext b { font-size: .95rem; }
  details.fallback > summary .sumtext .muted { font-size: .8rem; }
  /* audit log cards */
  .auditscroll table.audit tr { padding: 8px 10px; margin-bottom: 6px; }
  .auditscroll table.audit td { font-size: .82rem; }
  .auditscroll table.audit td:nth-child(2) b { font-size: .9rem; }
  body.s2 .logcard .minitabs { margin-bottom: 8px; }
  body.s2 button.mini { font-size: .88rem; min-height: 38px; margin-right: 12px; }
  /* waiting state */
  .wart svg { max-height: 150px; }
  .wtext h2 { font-size: 1.1rem; }
  .wstep b { font-size: .9rem; }
  .wstep small { font-size: .78rem; }
  .wstatus { font-size: .84rem; width: 100%; }
  /* the Aadhaar copy viewer */
  .vhead { gap: 8px; }
  .vtools { gap: 6px; }
  body.s2 .vtools > button.secondary { flex: 1 1 100%; min-height: 40px; }
  .vstage { padding: 8px; }
  body.s2 .vacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.s2 .vacts > button:last-child { grid-column: 1 / -1; }
  .warnbox { padding: 10px 12px; }
  .warnbox b { font-size: .88rem; }
  .warnbox p { font-size: .8rem; }
  body.s2 .vguest .photo.big { max-width: 180px; }
  /* empty state */
  .emptystate b { font-size: 1rem; }
  /* confirm bar */
  .confirmbar { padding: 12px; }
  .confirmbar .declare { font-size: .88rem; }
  /* platform admin pages */
  .pagehead h1 { font-size: 1.2rem; }
  .pagehead p { font-size: .84rem; }
  .stats .stat { padding: 12px; }
  .statbody b { font-size: 1.2rem; }
}
@media (max-width: 380px) {
  body.s2 main.wide { padding-left: 10px; padding-right: 10px; }
  body.s2 .card, body.s2 .dcard { padding: 12px; }
  .gd { grid-template-columns: 64px minmax(0, 1fr); }
  body.s2 .gd .photo { width: 64px; height: 80px; }
  body.s2 .gp .row.gacts button { font-size: .74rem; }
}
@media (max-width: 900px) {
  /* the strip's buttons stay on one line; the booking box is two clean columns with no stray divider */
  body.s2 .strip2 .dactions button { white-space: nowrap; font-size: .84rem; padding: 0 8px; gap: 6px; }
  .gd-booking { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .gd-booking > div { border: 0; padding: 0; margin: 0; }
}
@media (max-width: 360px) { body.s2 .strip2 .dactions button { font-size: .8rem; } }

/* guest facts: label beside value on desktop, a two-column grid of label-over-value cells on phones */
.facts { display: grid; gap: 6px 12px; margin-top: 4px; }
.fact { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 5px 0; border-top: 1px solid #eef1f6; }
.fact:first-child { border-top: 0; }
.fact small { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; }
.fact small svg { color: #8a97ad; flex: none; }
.factval { font-weight: 600; word-break: break-word; }
@media (max-width: 900px) {
  .gd-main .facts { grid-column: 1 / -1; }
  .facts { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  .fact { display: block; padding: 8px 10px; border: 1px solid #eef1f6; border-radius: 10px; background: #fafbfd; }
  .fact small { font-size: .72rem; gap: 5px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .fact small svg { width: 12px; height: 12px; }
  .factval { font-size: .88rem; line-height: 1.3; }
  .fact.wide { grid-column: 1 / -1; }
  body.s2 .dcard .cardhead h2 { display: block; }
  body.s2 .dcard .cardhead h2 .pill { display: inline-flex; margin: 4px 0 0; }
}

/* recent list: every name starts at the same x (the middle part takes the spare width); "View all" never wraps */
.recent-row { justify-content: flex-start; }
.rr-main { flex: 1 1 auto; }
.rr-side { margin-left: auto; }
.recent .cardhead .linkbtn { white-space: nowrap; flex: none; align-self: flex-start; }
@media (max-width: 900px) {
  /* photo beside the name and booking; the facts take the full card width under them */
  .gd { grid-template-columns: 72px minmax(0, 1fr); grid-auto-rows: auto; }
  .gd-main { display: contents; }
  .gd > .photo { grid-row: 1 / 3; align-self: start; }
  .gd-main h3 { grid-column: 2; align-self: end; margin: 0; }
  .gd-main .gd-booking { grid-column: 2; margin: 0; }
  .gd-main .facts { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; }
  .fact { min-width: 0; }
  .fact small { white-space: normal; }
}
@media (max-width: 700px) {
  /* enquiry card on a phone: the status select and the menu button share one row */
  body.s2 .card table.tbl.enq td:nth-last-child(2) { grid-column: 1; }
  body.s2 .card table.tbl.enq td.acts { grid-column: 2; align-self: center; }
}

/* hotel card on a phone: name, then the two pills on one row, then three counts side by side, then Manage with a square menu button */
@media (max-width: 700px) {
  body.s2 .card table.tbl.hotels tr { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px; }
  body.s2 .card table.tbl.hotels td.who { flex: 1 1 100%; }
  body.s2 .card table.tbl.hotels td[data-label="Setup"], body.s2 .card table.tbl.hotels td[data-label="Status"] { flex: 1 1 40%; }
  body.s2 .card table.tbl.hotels td[data-label="Setup"]::before, body.s2 .card table.tbl.hotels td[data-label="Status"]::before { display: none; }
  body.s2 .card table.tbl.hotels td[data-label="Setup"] .pill, body.s2 .card table.tbl.hotels td[data-label="Status"] .pill { display: block; text-align: center; padding: 6px 10px; }
  body.s2 .card table.tbl.hotels td[data-label="Keep data"], body.s2 .card table.tbl.hotels td[data-label="Staff"], body.s2 .card table.tbl.hotels td[data-label="Check-ins"] { flex: 1 1 28%; background: #f6f8fb; border-radius: 10px; padding: 8px 10px; text-align: center; font-weight: 700; color: var(--navy); }
  body.s2 .card table.tbl.hotels td[data-label="Keep data"]::before, body.s2 .card table.tbl.hotels td[data-label="Staff"]::before, body.s2 .card table.tbl.hotels td[data-label="Check-ins"]::before { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .72rem; margin-bottom: 2px; }
  body.s2 .card table.tbl.hotels td.acts { flex: 1 1 100%; display: flex; gap: 8px; margin-top: 2px; }
  body.s2 .card table.tbl.hotels td.acts .row { width: 100%; flex-wrap: nowrap; margin: 0; }
  body.s2 .card table.tbl.hotels td.acts .row > button { flex: 1; min-height: 44px; }
  body.s2 .card table.tbl.hotels td.acts .kebabwrap > button.iconbtn { width: 44px; min-height: 44px; flex: 0 0 44px; }
}
@media (max-width: 700px) {
  /* button rows stack full width on phones, so no label ever wraps; tile rows and short pairs keep their layout */
  body.s2 .row > button, body.s2 .row > a.btn { flex: 1 1 100%; white-space: nowrap; }
  body.s2 .picacts > button { flex: 1 1 40%; }
  body.s2 .row.addrow > button { flex: 0 0 auto; }
  body.s2 .confirmbar button.big { width: 100%; }
}
@media (max-width: 700px) {
  /* the floating save bar keeps Cancel and Save side by side so it stays short above the bottom bar */
  body.s2 .savebar .row > button { flex: 1 1 40%; }
  body.s2 .card.savebar { padding: 10px 12px; }
}

/* ======== the full-screen QR right after a check-in is created ======== */
body.noscroll { overflow: hidden; }
.qrov { position: fixed; inset: 0; z-index: 70; background: #fff; display: flex; flex-direction: column; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); overflow: auto; }
.qrov-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qrov-top b { display: block; font-size: 1.1rem; color: var(--navy); }
.qrov-top small { display: block; }
.qrov-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 0; }
.qrov .qr { width: min(80vw, 56vh, 440px); border: 1px solid var(--line); border-radius: 18px; padding: 12px; background: #fff; transition: opacity .3s; }
.qrov .qr svg { width: 100%; height: auto; display: block; max-width: none; }
.qrov .qr.dim { opacity: .35; }
.qrov-meta { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 1rem; }
.qrov-ref b { color: var(--navy); font-size: 1.15rem; letter-spacing: .04em; }
.qrov-time { color: var(--accent); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.qrov-time.over { color: var(--bad); }
.qrov-state { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: .95rem; background: #f3f6fb; color: var(--muted); }
.qrov-state.busy { background: #e3edfb; color: #1d4ed8; }
.qrov-state.busy .spinner { border-color: #1d4ed8; }
.qrov-state.done { background: var(--ok-bg); color: var(--ok); }
.qrov-state.off { background: var(--bad-bg); color: var(--bad); }
.qrov-note { margin: 0; }
.qrov .linkrow { width: min(100%, 440px); margin: 0; }
.qrov-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding-top: 12px; }
.qrov-acts > button { flex: 1 1 180px; max-width: 320px; min-height: 48px; }
@media (max-width: 700px) { .qrov-acts > button { flex: 1 1 100%; max-width: none; } .qrov .qr { width: min(84vw, 50vh); } }

/* ======== compact phone layout: cards without explanations, tight spacing, app-like header ======== */
@media (max-width: 900px) {
  body.s2 main.wide { padding: 10px 10px calc(84px + env(safe-area-inset-bottom)); }
  .appbar-in { padding: 6px 12px; min-height: 52px; }
  .applogo { height: 24px; }
  body.s2 .card, body.s2 .dcard { padding: 12px; border-radius: 12px; margin-bottom: 10px; box-shadow: none; }
  body.s2 .cardhead { margin-bottom: 8px; gap: 8px; align-items: center; }
  .cardicon { width: 30px; height: 30px; }
  .cardicon svg { width: 16px; height: 16px; }
  body.s2 h2, body.s2 .dcard .cardhead h2, body.s2 .pcard .cardhead h2 { font-size: .98rem; }
  /* explanations under card titles and helper lines are desktop reading; the phone keeps only the controls */
  body.s2 .dcard .cardhead p, body.s2 .pcard .cardhead p, body.s2 .newform .cardhead p, body.s2 .recent .cardhead p, body.s2 .qrcard .cardhead p, body.s2 .gp .cardhead p, body.s2 .logcard > p.muted, body.s2 .pagehead p, body.s2 .details .cardhead p, body.s2 .newform .hint, body.s2 .qrmeta small:last-child, body.s2 .qrcard .fieldlabel, body.s2 #app > p.muted:last-child { display: none; }
  body.s2 .pagehead { margin: 0 0 10px; gap: 10px; }
  body.s2 .pagehead h1 { font-size: 1.15rem; }
  body.s2 .pagehead .cardicon { width: 34px; height: 34px; }
  /* status strip and facts */
  body.s2 .card.strip2 { gap: 8px 10px; padding: 10px 12px; }
  .strip2 .scell small { font-size: .7rem; }
  .strip2 .sval { font-size: .92rem; }
  .fact { padding: 6px 8px; }
  .fact small { font-size: .7rem; }
  .factval { font-size: .86rem; }
  .gd { gap: 8px 10px; }
  body.s2 .gd .photo { width: 64px; height: 80px; }
  .gd-main h3 { font-size: 1rem; }
  .gd-booking { padding: 6px 8px; }
  /* lists and logs */
  .recent-row { padding: 8px 2px; }
  .rr-ico { width: 26px; height: 26px; }
  .auditscroll { max-height: 300px; }
  .auditscroll table.audit tr { padding: 7px 9px; margin-bottom: 6px; }
  body.s2 .note { font-size: .76rem; margin: 0 0 10px; }
  /* forms */
  body.s2 input, body.s2 select, body.s2 textarea { min-height: 44px; padding: 8px 12px; }
  body.s2 .newform .fieldlabel { margin: 8px 0 3px; }
  body.s2 button, body.s2 .btn { min-height: 42px; }
  body.s2 button.big, body.s2 .newform button.big { min-height: 46px; }
  body.s2 .gp .row.gacts button { min-height: 54px; }
  .gcounts { margin-bottom: 8px; }
  /* waiting card: a small illustration and the steps in a row of three */
  .wart svg { max-height: 110px; }
  .wtext h2 { font-size: 1rem; margin-bottom: 4px; }
  .wtext > p.muted { display: none; }
  .wsteps { flex-direction: row; gap: 6px; margin: 10px 0 8px; }
  .wstep { flex-direction: column; gap: 4px; }
  .wstep small { font-size: .7rem; }
  .wstep b { font-size: .8rem; }
  .wnum { width: 24px; height: 24px; font-size: .78rem; }
  .wstep:not(:last-child)::after { display: block; left: 30px; right: 4px; top: 11px; }
  .wstatus { padding: 8px 12px; font-size: .8rem; }
  /* the QR card on the page and the viewer */
  .qrrow2 .qr { width: 104px; }
  .qrcard .linkrow { margin: 6px 0 8px; }
  .vstage { padding: 6px; }
  /* platform admin lists */
  .toolbar { gap: 8px; margin-bottom: 8px; }
  .toolbar select, .searchbox input { min-height: 42px; }
  body.s2 .card.listcard { padding: 10px; }
  body.s2 .card table.tbl:not(.auditlog) tr { padding: 10px; gap: 6px 8px; }
  .stats { gap: 8px; margin-bottom: 10px; }
  .stat { padding: 10px 12px; }
  body.s2 .bottomnav button.bn-item { min-height: 56px; padding: 6px 2px 5px; }
}

/* the avatar's menu: account and sign out, on every screen */
.appuser { position: relative; }
body.s2 button.avatarbtn { border: 0; padding: 0; min-height: 0; font-size: .9rem; cursor: pointer; }
body.s2 button.avatarbtn:hover:not(:disabled) { background: #d8ecdf; }
.usermenu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 34, 80, .16); padding: 6px; z-index: 45; display: grid; }
.usermenu.hidden { display: none; }
.um-who { padding: 8px 12px 10px; border-bottom: 1px solid #eef1f6; margin-bottom: 4px; }
.um-who b { display: block; }
.um-who small { display: block; font-size: .78rem; }
body.s2 .usermenu button.menuitem { display: inline-flex; align-items: center; gap: 8px; }

/* compact onboarding on phones (the manager's set-up pages; guest pages are untouched) */
@media (max-width: 900px) {
  body.setup .setuphead { padding: 14px 0 2px; }
  body.setup .setuphead img { height: 30px; }
  body.setup main#app { padding: 2px 12px 32px; }
  body.s2 .card.onboard, body.s2 .card.authcard { padding: 18px 16px 18px; border-radius: 14px; box-shadow: none; }
  .authcard h1, .onboard h1 { font-size: 1.35rem; }
  .authcard .lead, .onboard .lead { font-size: .92rem; margin-bottom: 12px; }
  body.s2 .authcard .fieldlabel, body.s2 .onboard .fieldlabel { margin: 10px 0 4px; font-size: .88rem; }
  body.s2 .authcard .field > input, body.s2 .onboard .field > input { min-height: 48px; }
  body.s2 .authcard button.big, body.s2 .onboard button.big, body.s2 .onboard a.btn.big, body.s2 .setup-main button.big { min-height: 50px; margin-top: 14px; font-size: 1rem; box-shadow: none; }
  .hotelchip { padding: 8px 14px; font-size: 1rem; margin-bottom: 12px; }
  .hotelname { font-size: 1.15rem; margin-bottom: 10px; }
  .onboard.welcome .hotelart { max-width: 220px; }
  .onboard .wsteps { gap: 12px; }
  .onboard .wsteps .stile { width: 40px; height: 40px; }
  .onboard .wsteps .stext b { font-size: .94rem; }
  .onboard .wsteps .stext .muted { font-size: .82rem; }
  .setup-main { padding: 16px 12px 18px; }
  .setup-main .mhead h1 { font-size: 1.25rem; }
  .setup-main .lead { font-size: .88rem; margin-bottom: 12px; }
  .setup-main .sections > .card { margin-bottom: 10px; }
  body.s2 .setup-main .pcard { padding: 12px; }
  .onboard.done .doneart { max-width: 200px; }
  .addrbox { padding: 12px; }
  .addr b { font-size: 1.05rem; }
  .decor .blob.a { width: 260px; height: 260px; }
}

/* ======== subscription: the header pill and the trial-over message ======== */
body.s2 button.subpill { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 99px; font-size: .78rem; font-weight: 700; border: 1px solid transparent; }
body.s2 button.subpill .short { display: none; }
body.s2 button.subpill.ok { background: var(--accent-soft); color: var(--accent-dark); border-color: #cfe7d8; }
body.s2 button.subpill.ok:hover:not(:disabled) { background: #d8ecdf; }
body.s2 button.subpill.warn { background: var(--warn-bg); color: var(--warn); }
body.s2 button.subpill.warn:hover:not(:disabled) { background: #f8e2b0; }
body.s2 button.subpill.bad { background: var(--bad-bg); color: var(--bad); }
body.s2 button.subpill.bad:hover:not(:disabled) { background: #f9d0d0; }
body.s2 .card.modal.submodal { text-align: center; padding: 28px 24px 22px; position: relative; }
.submodal .subicon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; }
.submodal .subicon.ok { background: var(--accent-soft); color: var(--accent); }
.submodal .subicon.bad { background: var(--bad-bg); color: var(--bad); }
.submodal h2 { font-size: 1.25rem; color: var(--navy); margin: 0 0 8px; }
.submodal p { margin: 0 0 10px; }
.submodal .row { justify-content: center; margin-top: 16px; }
.submodal .row > a.btn { flex: 1 1 160px; max-width: 240px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.submodal .row > a.btn.secondary { background: #fff; color: var(--accent); border: 1px solid var(--accent-line); }
body.s2 .submodal button.mclose { position: absolute; top: 10px; right: 10px; }
@media (max-width: 900px) {
  body.s2 button.subpill { min-height: 28px; padding: 0 8px; font-size: .72rem; }
  body.s2 button.subpill .long { display: none; }
  body.s2 button.subpill .short { display: inline; }
  .submodal .row > a.btn { flex: 1 1 100%; max-width: none; }
}

/* phones: the column's children stretch to the full width (the desktop grid aligned them to the start), and the three
   booking tiles wrap their labels inside their cells instead of pushing past the card */
@media (max-width: 900px) {
  body.s2 .ci-grid { align-items: stretch; }
  body.s2 .ci-grid > * { width: 100%; }
  body.s2 .gp .row.gacts > button { white-space: normal; min-width: 0; flex: initial; }
  body.s2 .gp .row.gacts { width: 100%; }
}
/* card headers: the title block takes the spare width, so a link or button in the header sits at the right edge */
body.s2 .cardhead > div { flex: 1 1 auto; min-width: 0; }
.recent .cardhead .linkbtn { margin-left: auto; }
@media (max-width: 900px) {
  /* the viewer's three actions stack full width with wrapping labels */
  body.s2 .vacts { grid-template-columns: 1fr; }
  body.s2 .vacts > button { white-space: normal; grid-column: auto; }
}

/* the platform/manager audit log on a phone: one card per event instead of a sideways-scrolling table */
@media (max-width: 700px) {
  body.s2 .card table.tbl.auditlog { min-width: 0; display: block; }
  body.s2 .card table.tbl.auditlog thead { display: none; }
  body.s2 .card table.tbl.auditlog tbody { display: grid; gap: 8px; }
  body.s2 .card table.tbl.auditlog tr { display: block; position: relative; padding: 10px 44px 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  body.s2 .card table.tbl.auditlog td { display: block; padding: 1px 0; border: 0; font-size: .84rem; max-width: none; }
  body.s2 .card table.tbl.auditlog td.when { font-size: .76rem; white-space: normal; }
  body.s2 .card table.tbl.auditlog td.who { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: var(--muted); margin-top: 2px; }
  body.s2 .card table.tbl.auditlog td.who .avatar { width: 22px; height: 22px; font-size: .62rem; }
  body.s2 .card table.tbl.auditlog td.details { font-size: .8rem; }
  body.s2 .card table.tbl.auditlog td.acts { position: absolute; top: 8px; right: 8px; padding: 0; }
  body.s2 .card table.tbl.auditlog .what b { font-size: .92rem; }
  body.s2 .card .xscroll { overflow: visible; }
}
@media (max-width: 700px) { body.s2 .card table.tbl.auditlog td.acts { width: auto; } }
@media (max-width: 900px) { body.s2:has(.savebar) .hc { bottom: calc(160px + env(safe-area-inset-bottom)); } } /* the help bubble clears the floating save bar */
@media (max-width: 700px) { body.s2 .card table.tbl.auditlog td.acts .kebabwrap > button.iconbtn { width: 36px; min-height: 36px; height: 36px; flex: none; padding: 0; } }

/* pills in tables stay on one line; the column grows to fit them */
body.s2 table.tbl td .pill, body.s2 table.tbl td .badge { white-space: nowrap; }
body.s2 table.tbl.hotels td:nth-child(2), body.s2 table.tbl.hotels td:nth-child(3) { width: 1%; }