/* The window owns the frame; long content owns its own scroll region. */
html, body { height:100%; overflow:hidden; }
#app { height:var(--app-height,100dvh); min-height:0; }
.shell { height:var(--app-height,100dvh); min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; border-top-width:3px; }
.shell .topbar { min-height:64px; padding:8px max(16px,calc((100% - 1240px)/2)); gap:16px; }
.shell .brand-logo { width:160px; height:42px; }
.shell .brand-context { padding-left:18px; }
.shell .main { display:flex; flex-direction:column; min-height:0; overflow:hidden; margin:0 auto; padding:12px 0; gap:10px; }
.shell #syncStatus:not(:empty) { flex-shrink:0; max-height:18dvh; overflow:auto; margin:0!important; padding:8px 12px; }
.shell .product-footer { padding:5px 16px; min-height:30px; align-items:center; }
.shell .product-footer img { width:104px; height:20px; object-fit:contain; }
.screen-panel { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.panel-scroll { flex:1 1 auto; min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scroll-padding:12px; }
.panel-scroll:focus-visible { outline:2px solid var(--brand-dark); outline-offset:-3px; }

/* Home: compact framing, with every entry action in view. */
.visitor-shell .home-entry { flex:1 1 auto; min-height:0; overflow:auto; margin:0; padding:2px; grid-template-columns:minmax(0,1fr) 340px; grid-template-rows:auto auto; align-content:start; gap:18px 24px; }
.visitor-shell .home-entry .hero h1 { margin-bottom:10px; font-size:clamp(1.75rem,3.1vw,2.75rem); }
.visitor-shell .home-entry .visitor-kicker { margin-bottom:8px; }
.visitor-shell .home-entry .visitor-location { margin-top:16px; }
.visitor-shell .phone-access { grid-template-columns:148px minmax(0,1fr); gap:12px; padding:12px; }
.visitor-shell .phone-access-code,.visitor-shell .phone-access-code img { width:148px; height:148px; }
.visitor-shell .phone-access h2 { margin-bottom:8px; }
.visitor-shell .phone-access p { margin-bottom:8px; }
.visitor-shell .home-entry .home-actions { gap:18px; }
.visitor-shell .home-entry .action-card { padding:22px 24px; gap:16px; }
.visitor-shell .home-entry .action-card-top { margin-bottom:14px; }
.visitor-shell .home-entry .action-card h2 { margin-bottom:10px; font-size:clamp(1.375rem,2.2vw,1.75rem); }
.visitor-shell .home-entry .action-card-primary h2 { font-size:clamp(1.75rem,3vw,2.375rem); }
.visitor-shell .home-entry .action-card-bottom { padding-top:14px; }
.visitor-shell .home-entry .path-note { margin-bottom:12px; }
.visitor-shell #startVisitor { min-height:56px; padding:12px 20px; }

/* Visitor forms: navigation never moves below the content. */
.visitor-shell .flow-context { flex-shrink:0; margin:0; padding:0 0 8px; }
.visitor-shell .visitor-flow-layout { flex:1 1 auto; min-height:0; grid-template-columns:180px minmax(0,1fr); gap:24px; align-items:stretch; }
.visitor-shell .flow-progress { position:static; min-height:0; overflow:auto; padding-top:4px; }
.visitor-shell .flow-progress>.visitor-kicker { margin-bottom:10px; }
.visitor-shell .step-pill { padding:12px; }
.visitor-shell .progress-caption { margin-top:12px; padding-top:12px; }
.visitor-shell .flow-content { display:flex; flex-direction:column; min-height:0; }
.visitor-shell .flow-notice { flex-shrink:0; max-height:20dvh; overflow:auto; margin:0 0 10px; padding:10px 14px; }
.visitor-shell .flow-content>.screen-panel { flex:1 1 auto; padding:0; }
.visitor-shell .flow-content .panel-scroll { padding:20px 24px; }
.visitor-shell .flow-content .section-title { margin-bottom:8px; font-size:clamp(1.5rem,2.6vw,2rem); }
.visitor-shell .flow-content .section-sub { margin:0 0 18px; }
.visitor-shell .flow-content .grid-2 { gap:14px 18px; }
.visitor-shell .flow-content .field { gap:6px; }
.visitor-shell .flow-content .field :is(input,select,textarea) { min-height:44px; padding:9px 12px; }
.visitor-shell .flow-content .checkline { margin-top:18px; padding:14px; }
.visitor-shell .flow-content .rule { padding:16px 0; }
.visitor-shell .flow-content .callout { margin:18px 0; padding:14px 16px; }
.visitor-shell .flow-content .terms { max-height:none; overflow:visible; }
.visitor-shell .flow-content .choice-grid { margin:18px 0; }
.visitor-shell .flow-content .choice { min-height:72px; padding:14px; }
.visitor-shell .flow-content .kv { padding:8px 0; }
.visitor-shell .screen-panel>.nav-row { flex-shrink:0; margin:0; padding:12px 24px; background:#fff; border-top:1px solid var(--line); gap:12px; flex-direction:row; align-items:center; }
.visitor-shell .screen-panel>.nav-row button { min-height:44px; width:auto; min-width:0; }
.visitor-shell .screen-panel>.nav-row .primary { margin-left:auto; }
.visitor-shell .complete.screen-panel { width:min(740px,100%); flex:1 1 auto; margin:0 auto; padding:0; }
.visitor-shell .complete .panel-scroll { padding:24px; }
.visitor-shell .complete .tick { width:48px; height:48px; margin-bottom:16px; }
.visitor-shell .complete .complete-actions { justify-content:center; flex-direction:column; gap:8px; }
.visitor-shell .complete .complete-actions .small { margin:0; }
.visitor-shell .complete .complete-actions .primary { min-width:160px; margin:0; }

/* Admin: tabs, page actions and save controls stay outside the scroll area. */
.admin-mobile-nav { display:none; }
.admin-shell .admin-layout { flex:1 1 auto; min-height:0; overflow:hidden; }
.admin-shell .admin-nav { flex-shrink:0; padding-top:0; }
.admin-shell .admin-nav button { padding:10px 18px; }
.admin-shell .admin-content.screen-panel { flex:1 1 auto; }
.admin-shell .admin-page-head { flex-shrink:0; margin:16px 0; gap:20px; }
.admin-shell .admin-page-head h1 { margin-bottom:6px; font-size:clamp(1.5rem,2.5vw,2.125rem); }
.admin-shell .admin-kicker { margin-bottom:6px; }
.admin-shell .admin-description { font-size:.9375rem; }
.admin-shell .admin-content>.panel-scroll { padding:2px 2px 12px; }
.admin-shell .stat-grid { margin-bottom:20px; }
.admin-shell .stat { padding:16px 20px; }
.admin-shell .stat .label { margin-bottom:10px; }
.admin-shell .stat .value { font-size:2.5rem; }
.admin-shell .stat-caption { margin-top:8px; }
.admin-shell .module-row { padding:20px 24px; gap:24px; }
.admin-shell .module-row h3 { font-size:1.25rem; margin-bottom:8px; }
.admin-shell .module-metadata { margin-top:12px; }
.admin-shell .availability-guide { margin-bottom:16px; padding:12px 0; }
.admin-shell .staff-visibility-panel { margin-bottom:16px; }
.admin-shell .setting-section { padding:22px 24px; gap:32px; }
.admin-shell .setting-index { margin-bottom:8px; }
.admin-shell .setting-fields>.field+.field { margin-top:16px; }
.admin-shell .switch-row { margin-top:16px; padding:14px; }
.admin-shell .admin-save-bar { position:static; flex-shrink:0; margin:0; padding:12px 20px; gap:12px; border:1px solid var(--line); }
.admin-shell .admin-save-bar button { flex-shrink:0; }
.admin-shell .filters { padding:14px 18px; gap:12px; }
.admin-shell .records-table th { position:sticky; top:0; z-index:1; }
.admin-shell .records-table td { padding:14px 18px; }
.admin-shell .admin-records>.panel-scroll { display:flex; flex-direction:column; }
.admin-shell .records-panel { flex:1 1 auto; min-height:150px; display:flex; flex-direction:column; }
.admin-shell .records-panel .filters { flex-shrink:0; }
.admin-shell .records-panel .table-wrap { min-height:0; overflow:auto; flex:1 1 auto; }
.admin-shell .record-tools { flex-shrink:0; margin-top:12px; }
.admin-shell .record-tools[open] { max-height:50%; overflow:auto; }
.admin-shell .pin-screen { margin:auto; max-height:100%; overflow:auto; padding:24px 28px; }
.admin-shell .pin-screen .section-title { font-size:2rem; }
.admin-shell .pin-entry { margin:20px auto 14px; }

/* Dialogs: the heading/close button and save action are always in view. */
.admin-modal { padding:16px; }
.admin-modal .modal.screen-panel { height:auto; max-height:calc(var(--app-height,100dvh) - 32px); padding:0; }
.admin-modal .modal-head { flex-shrink:0; margin:0; padding:18px 22px; }
.admin-modal .modal-head h2 { font-size:1.375rem; }
.admin-modal .panel-scroll { padding:20px 22px; }
.admin-modal .screen-panel>.btn-row { flex-shrink:0; margin:0!important; padding:12px 22px; border-top:1px solid var(--line); background:#fbfcf9; }

@media (max-height:760px) and (min-width:801px) {
  .visitor-shell .home-entry { gap:14px 22px; }
  .visitor-shell .home-entry .action-card { padding:18px 22px; gap:12px; }
  .visitor-shell .home-entry .action-card-top { margin-bottom:10px; }
  .visitor-shell .home-entry .action-card-copy>p { line-height:1.4; }
  .visitor-shell .home-entry .action-card-bottom { padding-top:12px; }
  .visitor-shell .home-entry .path-note { margin-bottom:8px; }
  .visitor-shell .flow-content .panel-scroll { padding:16px 20px; }
  .visitor-shell .flow-content .section-sub { margin-bottom:14px; }
  .admin-shell .admin-page-head { margin:10px 0; }
  .admin-shell .setting-section { padding:18px 22px; }
}

@media (max-width:800px) {
  .shell .main { width:calc(100% - 28px); padding:10px 0; }
  .shell .topbar { min-height:58px; padding:6px 14px; }
  .shell .brand-logo { width:144px; height:38px; }
  .visitor-shell .home-entry { grid-template-columns:minmax(0,1fr); grid-template-areas:"welcome" "actions" "phone"; gap:12px; }
  .visitor-shell .home-entry .hero h1 { font-size:1.875rem; margin-bottom:6px; }
  .visitor-shell .home-entry .hero-copy>.visitor-kicker { display:none; }
  .visitor-shell .home-entry .visitor-location { margin-top:8px; }
  .visitor-shell .home-entry .home-actions { gap:12px; }
  .visitor-shell .home-entry .action-card { padding:16px 18px; gap:12px; }
  .visitor-shell .home-entry .action-card-top,.visitor-shell .home-entry .action-card-copy>p { display:none; }
  .visitor-shell .home-entry .action-card h2 { margin:0; font-size:1.375rem; }
  .visitor-shell .home-entry .action-card-primary h2 { font-size:1.75rem; }
  .visitor-shell .home-entry .action-card-bottom { padding-top:0; border:0; }
  .visitor-shell .home-entry .path-note { display:none; }
  .visitor-shell .home-entry .action-card-staff:has(button:disabled) .path-note { display:block; margin:0 0 8px; }
  .visitor-shell .home-entry .action-card button { width:100%; min-height:46px; padding:10px 14px; }
  .visitor-shell .phone-access { grid-template-columns:148px minmax(0,1fr); width:100%; justify-items:stretch; text-align:left; }
  .visitor-shell .phone-access-copy { max-width:none; }
  .visitor-shell .phone-access p { display:none; }
  .visitor-shell .visitor-flow-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:10px; }
  .visitor-shell .flow-progress { padding:0; overflow:visible; }
  .visitor-shell .stepper { gap:4px; }
  .visitor-shell .step-pill { flex-direction:row; align-items:center; gap:8px; padding:8px; min-height:40px; font-size:.875rem; }
  .visitor-shell .step-number { display:none; }
  .visitor-shell .progress-caption { display:none; }
  .visitor-shell .flow-content .panel-scroll { padding:16px; }
  .visitor-shell .flow-content .grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .visitor-shell .screen-panel>.nav-row { padding:10px 16px; }
  .admin-shell .admin-page-head { margin:12px 0; gap:12px; }
  .admin-shell .setting-section { padding:18px 20px; gap:16px; }
  .admin-shell .admin-save-bar { flex-direction:row; align-items:center; padding:10px 14px; }
  .admin-shell .admin-save-bar span { display:none; }
}

@media (max-width:560px) {
  .shell .topbar { flex-wrap:nowrap; gap:8px; }
  .shell .brand-logo { width:124px; height:34px; }
  .shell .header-actions { gap:4px; }
  .shell .topbar .icon-btn { padding:8px; font-size:.875rem; }
  .shell .product-footer { padding:3px 12px; min-height:24px; }
  .shell .product-footer img { width:94px; height:18px; }
  .visitor-shell .home-entry .hero h1 { font-size:1.625rem; }
  .visitor-shell .home-entry .hero-copy>p:not(.visitor-kicker) { display:none; }
  .visitor-shell .home-entry .action-card { padding:14px 16px; gap:10px; }
  .visitor-shell .home-entry .action-card-primary h2 { font-size:1.5rem; }
  .visitor-shell .phone-access { grid-template-columns:111px minmax(0,1fr); gap:12px; padding:10px; }
  .visitor-shell .phone-access-code,.visitor-shell .phone-access-code img { width:111px; height:111px; }
  .visitor-shell .phone-access h2 { font-size:.9375rem; }
  .visitor-shell .flow-context { font-size:.8125rem; }
  .visitor-shell .flow-content .section-sub { margin-bottom:14px; }
  .visitor-shell .flow-content .checkline { margin-top:14px; padding:12px; }
  .visitor-shell .flow-content .checkline .small { font-size:.875rem; }
  .visitor-shell .screen-panel>.nav-row .primary { max-width:75%; }
  .admin-shell .admin-nav { display:none; }
  .admin-shell .admin-mobile-nav { display:flex; align-items:center; gap:12px; flex-shrink:0; padding-bottom:10px; border-bottom:1px solid var(--line); }
  .admin-shell .admin-mobile-nav label { flex-shrink:0; font-size:.875rem; color:var(--muted); }
  .admin-shell .admin-mobile-nav select { width:100%; min-width:0; }
  .admin-shell .admin-page-head { flex-direction:row; align-items:center; margin:12px 0; }
  .admin-shell .admin-page-head .admin-kicker,.admin-shell .admin-description,.admin-shell .scope-note { display:none; }
  .admin-shell .admin-page-head h1 { margin:0; font-size:1.5rem; }
  .admin-shell .admin-head-action { max-width:48%; }
  .admin-shell .admin-head-action button { min-height:44px; padding:8px 12px; font-size:.875rem; }
  .admin-shell .stat { padding:12px; }
  .admin-shell .stat .label { min-height:0; font-size:.875rem; }
  .admin-shell .stat .value { font-size:2rem; }
  .admin-shell .stat-caption { display:none; }
  .admin-shell .admin-save-bar strong { font-size:.8125rem; }
  .admin-shell .admin-save-bar button { max-width:60%; padding:10px 12px; font-size:.875rem; }
  .admin-shell .records-panel { min-height:200px; }
  .admin-shell .filters { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:12px; gap:10px; }
  .admin-shell .filters>.field { min-width:0; }
  .admin-shell .record-count { grid-column:1 / -1; }
  .admin-shell .record-tools summary { padding:12px 16px; }
  .admin-shell .pin-screen { padding:20px 16px; }
  .admin-modal { padding:8px; }
  .admin-modal .modal.screen-panel { max-height:calc(var(--app-height,100dvh) - 16px); }
  .admin-modal .modal-head { padding:12px 16px; }
  .admin-modal .panel-scroll { padding:16px; }
  .admin-modal .screen-panel>.btn-row { padding:10px 16px; }
}

@media (max-width:560px) and (max-height:700px) {
  .visitor-shell .home-entry { gap:10px; }
  .visitor-shell .home-entry .hero h1 { font-size:1.375rem; }
  .visitor-shell .home-entry .action-card { padding:10px 14px; gap:8px; }
  .visitor-shell .home-entry .action-card-primary h2 { font-size:1.375rem; }
  .visitor-shell .home-entry .action-card-staff .action-card-copy { display:none; }
  .visitor-shell .home-entry .action-card-staff:has(button:disabled) .action-card-copy { display:block; }
  .visitor-shell .home-entry .action-card-staff:has(button:disabled) button { display:none; }
  .visitor-shell .home-entry .action-card-staff:has(button:disabled) .path-note { margin:0; }
  .visitor-shell .home-entry .action-card-staff h2 { font-size:1.125rem; }
  .visitor-shell .home-entry .action-card button { min-height:44px; padding:8px 12px; }
}

@media (max-width:560px) and (max-height:600px) {
  .visitor-shell .home-entry .hero h1 { display:none; }
  .visitor-shell .home-entry .visitor-location { margin-top:0; }
}

/* Compact landscape windows keep the QR beside the actions. */
@media (max-height:520px) and (min-width:561px) {
  .shell .topbar { min-height:50px; padding-block:4px; }
  .shell .brand-logo { height:32px; }
  .shell .brand-context { display:none; }
  .shell .main { padding:8px 0; gap:6px; }
  .shell .product-footer { min-height:22px; padding:2px 12px; }
  .shell .product-footer img { height:16px; }
  .visitor-shell .home-entry { grid-template-columns:minmax(0,1fr) 175px; grid-template-areas:"welcome phone" "actions phone"; grid-template-rows:auto auto; gap:10px 14px; }
  .visitor-shell .home-entry .hero h1 { font-size:1.5rem; }
  .visitor-shell .home-entry .hero-copy>p { display:none; }
  .visitor-shell .home-entry .visitor-location { margin-top:6px; }
  .visitor-shell .home-entry .home-actions-with-staff { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:10px; }
  .visitor-shell .home-entry .action-card { padding:12px; gap:10px; }
  .visitor-shell .home-entry .action-card-top,.visitor-shell .home-entry .action-card-copy>p,.visitor-shell .home-entry .path-note { display:none; }
  .visitor-shell .home-entry .action-card h2 { margin:0; font-size:1.125rem; }
  .visitor-shell .home-entry .action-card-primary h2 { font-size:1.375rem; }
  .visitor-shell .home-entry .action-card-bottom { padding:0; border:0; }
  .visitor-shell .home-entry .action-card button { min-height:44px; padding:8px 10px; font-size:.9375rem; }
  .visitor-shell .phone-access { grid-template-columns:minmax(0,1fr); gap:6px; justify-items:center; text-align:center; padding:10px; }
  .visitor-shell .phone-access-copy h2 { font-size:.875rem; margin:0; }
  .visitor-shell .phone-access-copy p,.visitor-shell .phone-access-copy>a { display:none; }
  .visitor-shell .flow-progress>.visitor-kicker,.visitor-shell .progress-caption { display:none; }
  .admin-shell .admin-nav button { padding:8px 16px; }
  .admin-shell .admin-page-head { margin:8px 0; }
  .admin-shell .admin-description,.admin-shell .admin-kicker { display:none; }
}

/* Software keyboards get the visible portion of the screen, including Safari's
   focus pan. The real field remains in place inside a compact typing card. */
.keyboard-open #app { position:fixed; top:var(--viewport-top,0px); left:0; width:100%; }
.keyboard-open .shell { grid-template-rows:minmax(0,1fr); }
.keyboard-open .shell>.topbar,.keyboard-open .shell>.product-footer { display:none; }
.keyboard-open .admin-modal { top:var(--viewport-top,0px); bottom:auto; height:var(--app-height,100dvh); padding:12px; }
.typing-mode .shell .main { width:min(800px,calc(100% - 32px)); padding:12px 0; gap:0; }
.typing-mode .flow-context,.typing-mode .flow-progress,.typing-mode .flow-notice,
.typing-mode .admin-nav,.typing-mode .admin-mobile-nav,.typing-mode #syncStatus { display:none!important; }
.typing-mode .visitor-flow-layout { display:flex; flex-direction:column; gap:0; }
.typing-mode .flow-content { flex:1 1 auto; justify-content:center; }
.typing-mode .admin-layout { justify-content:center; }
.typing-mode .screen-panel.typing-panel {
  flex:0 1 auto; width:100%; min-height:0; max-height:100%; height:auto; margin:auto 0;
  padding:0; background:#fff; border:1px solid var(--line); border-top:3px solid var(--brand);
  border-radius:4px; box-shadow:0 8px 28px #2027230d;
}
.typing-mode .admin-modal .typing-panel { width:min(800px,100%); max-height:100%; margin:auto; }
.typing-panel>:not(.panel-scroll):not(.typing-heading):not(.typing-tools) { display:none!important; }
.typing-panel .typing-path>:not(.typing-path):not(.typing-field) { display:none!important; }
.typing-mode .typing-panel .typing-path:not(.panel-scroll) {
  display:block; width:100%; min-width:0; min-height:0; max-height:none; height:auto;
  margin:0!important; padding:0; border:0; background:transparent; overflow:visible;
}
.typing-mode .typing-panel>.panel-scroll { flex:1 1 auto; min-height:0; padding:16px 22px 20px; scrollbar-gutter:auto; }
.typing-mode .typing-panel .typing-field { display:flex; width:100%; min-width:0; gap:10px; margin:0!important; }
.typing-mode .typing-panel .typing-field label { font-size:1rem; line-height:1.4; }
.typing-mode .typing-panel .typing-field :is(input,textarea) { width:100%; min-height:52px; padding:12px 14px; font-size:1.125rem; line-height:1.4; }
.typing-mode .typing-panel .typing-field textarea { height:clamp(80px,calc(var(--app-height) - 180px),180px); min-height:80px; resize:none; }
.typing-mode .typing-panel .typing-field>.field-note { margin:0; font-size:.875rem; }
.typing-heading { display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; gap:16px; padding:12px 22px; border-bottom:1px solid var(--line); font-size:.875rem; line-height:1.4; }
.typing-heading>span:first-child { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.typing-heading>span:last-child { flex-shrink:0; color:var(--muted); }
.typing-tools { display:flex; flex:0 0 auto; align-items:center; justify-content:flex-end; gap:10px; padding:12px 22px; border-top:1px solid var(--line); background:#f8faf6; }
.typing-tools button { min-width:96px; min-height:44px; }
.typing-tools button:first-child { margin-right:auto; }
.typing-tools button:disabled { cursor:default; }
.keyboard-open .admin-shell .pin-screen { margin:auto; padding:16px 24px; }
.keyboard-open .pin-screen .admin-kicker,.keyboard-open .pin-screen .section-sub,.keyboard-open .pin-hint { display:none; }
.keyboard-open .admin-shell .pin-screen .section-title { margin:0; font-size:1.5rem; }
.keyboard-open .admin-shell .pin-entry { margin:12px auto; }
.keyboard-open .pin-error:empty { display:none; }
@media (max-width:560px) {
  .typing-mode .shell .main { width:calc(100% - 16px); padding:8px 0; }
  .typing-heading { padding:10px 14px; gap:8px; }
  .typing-mode .typing-panel>.panel-scroll { padding:12px 14px 16px; }
  .typing-tools { padding:10px 14px; gap:8px; }
  .typing-tools button { min-width:0; padding:10px 12px; }
}