/* =====================================================================
   Guest Suite — North Hill Design System layer (loads after every inline style).
   Tokens: northhill-tokens.css. Spec: design-system.md.
   Light theme maps the app's own variables onto the shared tokens; the dark theme keeps its values.
   No backdrop-filter. Touch targets ≥44px. Inputs 16px on touch. No overflow at 390px.
   ===================================================================== */
:root{
  --f-body:var(--nh-font); --f-display:var(--nh-font);
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px;
  --bg:var(--nh-grey-50); --surface:#fff; --surface-2:var(--nh-grey-50); --surface-3:var(--nh-grey-100);
  --ink:var(--nh-grey-900); --ink-2:var(--nh-grey-600); --muted:var(--nh-grey-500);
  --line:var(--nh-grey-200); --line-strong:var(--nh-grey-300);
  --accent:var(--nh-navy-700); --accent-hover:var(--nh-navy-800); --accent-ink:#fff; --accent-soft:var(--nh-navy-50);
  --brass:var(--nh-accent-600); --brass-soft:var(--nh-accent-50);
  --ok:var(--nh-success-600); --ok-soft:var(--nh-success-50); --warn:var(--nh-warn-600); --warn-soft:var(--nh-warn-50);
  --crit:var(--nh-error-600); --crit-soft:var(--nh-error-50);
  --occ:var(--nh-grey-700); --occ-soft:var(--nh-grey-100);
  --rail:#fff; --rail-solid:#fff; --rail-ink:var(--nh-grey-900); --rail-muted:var(--nh-grey-600); --rail-active:var(--nh-grey-100); --rail-line:var(--nh-grey-200);
  --shadow-sm:var(--nh-shadow-xs); --shadow:var(--nh-shadow-lg); --shadow-lg:var(--nh-shadow-xl);
  --scrim:var(--nh-scrim);
}
body{font-family:var(--nh-font);font-size:14px;line-height:20px;letter-spacing:-.006em;font-feature-settings:"cv11","ss01"}

/* ---------- app shell: sidebar ---------- */
.rail{background:#fff;border-right:1px solid var(--line);padding:20px 12px 16px;gap:20px}
.rail .brand{padding:4px 8px 16px;border-bottom:1px solid var(--line);margin:0 -12px;padding-inline:20px}
.nav{gap:2px}
.nav button{min-height:36px;box-sizing:border-box;padding:8px 12px;border-radius:var(--nh-radius-md);font-size:14px;font-weight:500;color:var(--nh-grey-600)}
.nav button svg{color:var(--nh-grey-400);width:18px;height:18px}
.nav button:hover{background:var(--nh-grey-50);color:var(--nh-grey-900)}
.nav button[aria-current="page"]{background:var(--nh-navy-50);color:var(--nh-navy-800);font-weight:600;box-shadow:none}
.nav button[aria-current="page"] svg{color:var(--nh-navy-700)}
.nav .count{background:var(--nh-navy-700);color:#fff;font-size:11px;line-height:18px;min-width:18px;text-align:center;box-sizing:border-box}
.rail .new{min-height:40px;justify-content:center}

/* ---------- page header ---------- */
main{padding-block:32px 72px;padding-inline:clamp(16px,4vw,48px);max-width:1360px}
.head{margin-bottom:24px;gap:12px 24px;align-items:flex-end}
.head h1{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.02em;color:var(--nh-grey-900)}
.head .sub{font-size:14px;line-height:20px;color:var(--nh-grey-500);margin-top:4px}

/* ---------- buttons: primary · secondary · ghost · destructive ---------- */
.btn{height:36px;min-height:36px;padding:0 14px;border-radius:var(--nh-radius-md);font-size:14px;font-weight:600;letter-spacing:-.006em;gap:8px;
  background:#fff;border:1px solid var(--nh-grey-300);color:var(--nh-grey-700);box-shadow:var(--nh-shadow-xs);transition:background var(--nh-dur) var(--nh-ease),border-color var(--nh-dur) var(--nh-ease),box-shadow var(--nh-dur) var(--nh-ease)}
.btn:hover{background:var(--nh-grey-50);border-color:var(--nh-grey-300);color:var(--nh-grey-900)}
.btn:active{background:var(--nh-grey-100)}
.btn:focus-visible{outline:none;box-shadow:var(--nh-focus)}
.btn.primary{background:var(--nh-navy-800);border-color:var(--nh-navy-800);color:#fff;box-shadow:var(--nh-shadow-xs)}
.btn.primary:hover{background:var(--nh-navy-900);border-color:var(--nh-navy-900);color:#fff}
.btn.primary:active{background:var(--nh-navy-950)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--nh-navy-700)}
.btn.ghost:hover{background:var(--nh-navy-50);color:var(--nh-navy-800)}
.btn.danger{background:#fff;color:var(--nh-error-600);border-color:var(--nh-error-100)}
.btn.danger:hover{background:var(--nh-error-50);border-color:#FDA29B;color:var(--nh-error-700)}
.btn.sm{height:32px;min-height:32px;padding:0 12px;font-size:13px;border-radius:var(--nh-radius-md)}
.btn[disabled]{opacity:.45;box-shadow:none;cursor:not-allowed}
.linkbtn{color:var(--nh-navy-700)}

/* ---------- inputs, selects, date fields ---------- */
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=date],input[type=time],input[type=number],input[type=search],input[type=url],select,textarea{
  height:40px;border:1px solid var(--nh-grey-300);border-radius:var(--nh-radius-md);background-color:#fff;padding:0 12px;font-size:14px;color:var(--nh-grey-900);box-shadow:var(--nh-shadow-xs)}
textarea{height:auto;padding:10px 12px}
input::placeholder,textarea::placeholder{color:var(--nh-grey-400)}
input:hover,select:hover,textarea:hover{border-color:var(--nh-grey-400)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--nh-navy-500);box-shadow:var(--nh-focus)}
input[type=search]{padding-left:38px}
.field{gap:6px}
.field label,.field .lab{font-size:14px;line-height:20px;font-weight:500;color:var(--nh-grey-700)}
.hint{font-size:13px;line-height:18px;color:var(--nh-grey-500)}
legend.fs{font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.01em;color:var(--nh-grey-900);margin-bottom:12px}
fieldset{margin:0 0 24px}
.fgrid{gap:16px}
@media (pointer:coarse),(max-width:820px){
  input[type=text],input[type=password],input[type=email],input[type=tel],input[type=date],input[type=time],input[type=number],input[type=search],input[type=url],select{height:44px;min-height:44px;font-size:16px}
  textarea{font-size:16px}
  .btn{height:44px;min-height:44px}
  .btn.sm{height:44px;min-height:44px}
  .nav button{min-height:44px}
  /* release QA: every tap target on a touch screen is at least 44px tall (filter chips, account button) */
  .seg button{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
  .acct-btn{min-width:44px;min-height:44px}
}

/* ---------- cards / panels ---------- */
.panel{background:#fff;border:1px solid var(--nh-grey-200);border-radius:var(--nh-radius-lg);box-shadow:var(--nh-shadow-xs)}
.panel > header{padding:16px 20px 12px}
.panel > header h2{font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.01em;color:var(--nh-grey-900)}
.panel > header .meta{font-size:13px;color:var(--nh-grey-500)}
.panel .body{padding:0 20px 20px}
.kpis{border:1px solid var(--nh-grey-200);border-radius:var(--nh-radius-lg);box-shadow:var(--nh-shadow-xs);background:#fff;margin-bottom:24px}
.kpis > .kpi{padding:16px 20px}
.kpi .l,.kpi .k,.kpi small{font-size:13px;color:var(--nh-grey-500);font-weight:500;text-transform:none;letter-spacing:0}
.kpi .v{font-size:28px;line-height:36px;font-weight:600;letter-spacing:-.02em;color:var(--nh-grey-900);font-family:var(--nh-font)}

/* Suite cards on Today */
.suite-card{padding:20px;border-radius:var(--nh-radius-lg);box-shadow:var(--nh-shadow-xs);background:#fff!important;border:1px solid var(--nh-grey-200)!important;position:relative;overflow:hidden}
.suite-card h3{font-size:14px;font-weight:600;color:var(--nh-grey-600);text-transform:none;letter-spacing:0}
.suite-card .who{font-size:18px;line-height:28px;font-weight:600;color:var(--nh-grey-900)}
.suite-card .who.empty{color:var(--nh-grey-400);font-weight:500}
.suite-card dl{font-size:14px}
.suite-card dt{color:var(--nh-grey-500)}
.stbadge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px!important;border-radius:var(--nh-radius-pill)!important;font-size:12px;font-weight:600;background:var(--nh-grey-100)!important;color:var(--nh-grey-700)!important}
.stbadge::before{width:6px;height:6px}
.suite-card.stc-VC .stbadge{background:var(--nh-success-50)!important;color:var(--nh-success-700)!important}
.suite-card.stc-VC .stbadge::before{background:var(--nh-success-600)}
.suite-card.stc-VD .stbadge{background:var(--nh-warn-50)!important;color:var(--nh-warn-700)!important}
.suite-card.stc-VD .stbadge::before{background:var(--nh-warn-600)}
.suite-card.stc-ARR .stbadge{background:var(--nh-accent-50)!important;color:var(--nh-accent-700)!important}
.suite-card.stc-ARR .stbadge::before{background:var(--nh-accent-600)}
.suite-card.stc-OCC .stbadge,.suite-card.stc-DEP .stbadge{background:var(--nh-navy-50)!important;color:var(--nh-navy-800)!important}
.suite-card.stc-OCC .stbadge::before,.suite-card.stc-DEP .stbadge::before{background:var(--nh-navy-700)}

/* ---------- badges ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;box-sizing:border-box;padding:0 8px;border-radius:var(--nh-radius-pill);font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.pill.in_house{background:var(--nh-navy-700);color:#fff}

/* ---------- tabs ---------- */
.tabs{gap:4px;border-bottom:1px solid var(--nh-grey-200);margin-bottom:24px}
.tabs button{min-height:40px;padding:8px 12px;font-size:14px;font-weight:500;color:var(--nh-grey-500);border-bottom:2px solid transparent}
.tabs button:hover{color:var(--nh-grey-900)}
.tabs button[aria-selected="true"]{color:var(--nh-navy-800);border-bottom-color:var(--nh-navy-700);font-weight:600}
.seg{border:1px solid var(--nh-grey-300);border-radius:var(--nh-radius-md);background:#fff;box-shadow:var(--nh-shadow-xs);padding:2px;gap:2px}
.seg button{padding:6px 12px;border-radius:6px;font-size:13px;font-weight:600;color:var(--nh-grey-600)}
.seg button[aria-pressed="true"]{background:var(--nh-navy-50);color:var(--nh-navy-800)}

/* ---------- tables (become cards on phones: .mob-only cards already ship) ---------- */
table{font-size:14px}
th{background:var(--nh-grey-50);font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--nh-grey-500);padding:12px 16px;border-bottom:1px solid var(--nh-grey-200)}
td{padding:14px 16px;border-bottom:1px solid var(--nh-grey-200);color:var(--nh-grey-700)}
tbody tr:hover{background:var(--nh-grey-50)}
tbody tr:last-child td{border-bottom:0}
.mcard{background:#fff;border:1px solid var(--nh-grey-200);border-radius:var(--nh-radius-lg);box-shadow:var(--nh-shadow-xs);padding:16px;margin-bottom:12px}
.mcard::before{top:16px;bottom:16px}
.mcard .r1 b{font-size:16px;font-weight:600;color:var(--nh-grey-900)}
.mcard .r2{font-size:14px;color:var(--nh-grey-600)}

/* ---------- calendar ---------- */
.bar{border-radius:var(--nh-radius-md);border-color:var(--nh-navy-200);background:var(--nh-navy-50);color:var(--nh-navy-900)}
.bar.in_house{background:var(--nh-navy-700);border-color:var(--nh-navy-700)}
.bar.checked_out{background:var(--nh-grey-100);border-color:var(--nh-grey-200);color:var(--nh-grey-600)}
.cal .day.todaycol{box-shadow:inset 2px 0 0 var(--nh-accent-600)}
.cal .day:not(.past):hover{background:var(--nh-navy-50)}

/* ---------- modal / bottom sheet with sticky footer ---------- */
.scrim{background:var(--nh-scrim)}
.sheet{background:#fff;box-shadow:var(--nh-shadow-xl)}
.sheet > header,.sheet > #asRoot > header{background:#fff;padding:20px 24px 16px;border-bottom:1px solid var(--nh-grey-200);align-items:center}
.sheet > header h2,.sheet > #asRoot > header h2{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.015em}
.sheet .content{padding:24px;background:#fff}
.sheet > footer,.sheet > #asRoot > footer{background:#fff;border-top:1px solid var(--nh-grey-200);padding:16px 24px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 12px -6px rgba(16,24,40,.08)}
@media (max-width:700px){
  .scrim{align-items:flex-end}
  .sheet{height:auto;max-height:calc(100% - 16px - env(safe-area-inset-top,0px));border-radius:var(--nh-radius-xl) var(--nh-radius-xl) 0 0}
  .sheet > header,.sheet > #asRoot > header{padding:20px 16px 12px;border-radius:var(--nh-radius-xl) var(--nh-radius-xl) 0 0}
  .sheet > header::before,.sheet > #asRoot > header::before{content:"";position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--nh-grey-300)}
  .sheet .content{padding:16px}
  .sheet > footer,.sheet > #asRoot > footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
}

/* ---------- banners, alerts, toasts, empty states ---------- */
.alert-box{border-radius:var(--nh-radius-md);padding:12px 16px;border:1px solid transparent}
.alert-box.crit{background:var(--nh-error-50);border-color:var(--nh-error-100);color:var(--nh-error-700)}
.alert-box.warn{background:var(--nh-warn-50);border-color:var(--nh-warn-100);color:var(--nh-warn-700)}
.alert-box.ok{background:var(--nh-success-50);border-color:var(--nh-success-100);color:var(--nh-success-700)}
.banner{border-radius:var(--nh-radius-lg);outline:0;border:1px solid var(--nh-grey-200);box-shadow:var(--nh-shadow-xs);padding:12px 16px}
.ro{background:var(--nh-warn-50);border-color:var(--nh-warn-100);color:var(--nh-warn-700)}
.toast{background:var(--nh-grey-900);color:#fff;border-radius:var(--nh-radius-md);padding:12px 16px;font-weight:500;box-shadow:var(--nh-shadow-lg)}
.empty-note{color:var(--nh-grey-500);font-size:14px;padding:24px 0;text-align:center}

/* ---------- sign-in ---------- */
#auth{background:var(--nh-grey-50)}
.auth-card{border:1px solid var(--nh-grey-200);border-radius:var(--nh-radius-xl);box-shadow:var(--nh-shadow-lg);padding:32px}
.auth-card h1{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.02em}
.auth-card input{height:44px;font-size:16px}
.auth-card .btn.primary{height:44px;min-height:44px;width:100%;justify-content:center;font-size:15px}
#auth{--sa-app-accent:var(--nh-navy-700);--sa-app-accent-soft:var(--nh-navy-50);--sa-app-btn:#fff;--sa-app-line:var(--nh-grey-200)}
.sa-btn{border-radius:var(--nh-radius-lg);box-shadow:var(--nh-shadow-xs);min-height:64px}
.sa-btn:hover{border-color:var(--nh-navy-500);background:var(--nh-navy-50)}
.sa-ico{border-radius:10px}
.sa-title{font-size:16px;font-weight:600}
@media (max-width:480px){.auth-card{padding:24px 20px!important}}

/* ---------- phone: top bar + bottom tab bar ---------- */
@media (max-width:820px){
  .topbar{background:#fff!important;border-bottom:1px solid var(--nh-grey-200);box-shadow:none}
  .rail{background:#fff;border-top:1px solid var(--nh-grey-200);box-shadow:0 -1px 0 rgba(16,24,40,.02);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px))}
  .rail .brand{display:none}
  .nav button{min-height:52px;min-width:44px;padding:6px 4px;font-size:11px;font-weight:500;border-radius:var(--nh-radius-md);background:transparent!important;color:var(--nh-grey-500);gap:4px;justify-content:center}
  .nav button svg{width:22px;height:22px}
  .nav button[aria-current="page"]{color:var(--nh-navy-800);font-weight:600;box-shadow:none}
  .nav button[aria-current="page"] svg{color:var(--nh-navy-700)}
  .acct-btn,.signout-btn{box-shadow:none;border-color:var(--nh-grey-200)}
  .head h1{font-size:22px;line-height:28px}
  main{padding-inline:16px;padding-top:calc(var(--nh-topbar-h) + 20px + env(safe-area-inset-top,0px));padding-bottom:calc(var(--nh-bottombar-h) + 32px + env(safe-area-inset-bottom,0px))}
}

.head .actions:empty{display:none}
@media (max-width:700px){
  .cal .rowlab{font-size:14px;line-height:18px}
  .cal .rowlab small{font-size:12px;line-height:16px}
}
.switch[aria-checked="true"] i{background:var(--nh-navy-700)}
@media (max-width:820px){.seg{justify-content:flex-start}.seg button{flex:0 0 auto!important}}
@media (max-width:480px){
  .signout-btn{width:44px;height:44px;padding:0!important;border-radius:var(--nh-radius-md)!important;justify-content:center}
  .signout-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}