/* Structor app shell. Workflow-specific surfaces and frame styling live in
   pack assets injected through the frame registry. */

:root {
  --app-navy: #011C49;
  --app-maroon: #7f1d1d;
  /* Blue is the dominant interactive accent; maroon stays a minor, occasional
     warm accent (badges, errors, a few RTB labels). Mirrors the Lifestyle
     native palette but navy-forward. */
  --app-accent: var(--app-navy);
  --app-brand: var(--app-navy);
  --app-ink: #0f172a;
  --app-text-primary: #1e293b;
  --app-text-muted: #64748b;
  --app-text-placeholder: #94a3b8;

  /* Platform design tokens (2026-09-08). Packs reference these instead of
     literal colors/sizes so every workflow shares one rhythm. Semantic
     status colors are fixed across tenants; brand colors come from the
     manifest via applyTenantBranding(). */
  --app-surface: #ffffff;
  --app-surface-2: #f8fafc;
  --app-surface-3: #f1f5f9;
  --app-border: #e2e8f0;
  --app-border-strong: #cbd5e1;
  --app-ok: #15803d;      --app-ok-bg: #dcfce7;
  --app-warn: #b45309;    --app-warn-bg: #fef3c7;
  --app-danger: #b91c1c;  --app-danger-bg: #fee2e2;
  --app-info: #1d4ed8;    --app-info-bg: #dbeafe;
  --app-accent-soft: color-mix(in srgb, var(--app-accent) 10%, white);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px;
  --text-xl: 22px; --text-2xl: 26px;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-2: 0 6px 18px rgba(15, 23, 42, .10);
  --shadow-sheet: 0 -8px 40px rgba(15, 23, 42, .25);
  --motion-fast: 150ms; --motion-base: 220ms;
  --content-max: 960px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

* { box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  color: #0f172a;
  background: #fff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
.app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.topbar {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: calc(env(safe-area-inset-top) + 4px) calc(12px + env(safe-area-inset-right)) 6px calc(12px + env(safe-area-inset-left));
  color: #fff;
  background: var(--app-navy);
}
.topbar-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-mark, .login-mark {
  display: block;
  object-fit: contain;
  background: transparent;
}
.topbar-mark { width: 26px; height: 26px; flex: none; }
.topbar-who {
  overflow: hidden;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar-logout {
  width: 38px;
  height: 38px;
  padding: 6px;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.main-content {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 env(safe-area-inset-right) calc(80px + env(safe-area-inset-bottom)) env(safe-area-inset-left); /* clears the fixed bottom nav (60px + home-indicator inset) with breathing room */
  background: #fff;
  overscroll-behavior-y: contain;
}
.route-error {
  margin: 32px 16px;
  padding: 16px;
  text-align: center;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.route-error p { margin: 0 0 12px; font-size: 15px; }
.route-error-retry {
  padding: 10px 18px;
  color: #fff;
  background: var(--app-navy);
  border: 0;
  border-radius: 8px;
  font-weight: 600;
}
.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: flex;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #fff;
  border-top: 2px solid var(--app-accent);
}
.bottom-nav:empty { display: none; }
/* Keyboard up on iOS (AppShell.installKeyboardViewport): the nav is under the keyboard anyway, and the padding that clears it would leave a blank band above the keyboard. visibility, not display: route() sets display:flex inline on the nav. */
.app.keyboard-open .bottom-nav { visibility: hidden; }
.app.keyboard-open .main-content { padding-bottom: 0; }
.bottom-nav-item {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 58px;
  color: #94a3b8;
  font-size: 10px;
  text-decoration: none;
}
.bottom-nav-item.active { color: var(--app-accent); }
.empty-state { padding: 24px 0; color: #475569; text-align: center; }
.section-title { margin: 10px 0 12px; color: var(--app-accent); font-weight: 700; }
.nav-badge {
  position: absolute;
  top: 4px;
  left: 50%;
  min-width: 17px;
  margin-left: 6px;
  padding: 1px 4px;
  color: #fff;
  background: var(--app-maroon);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.nav-badge[hidden] { display: none; }
.app-search-wrap { position: sticky; top: 0; z-index: 5; padding: 12px 0 10px; background: #fff; }
.app-search {
  width: 100%;
  padding: 12px 14px;
  color: #0f172a;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 11px;
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
}
.app-search:focus { background: #fff; border-color: var(--app-accent); }
.app-search::placeholder { color: #94a3b8; }
.pill {
  padding: 2px 9px;
  color: #475569;
  background: #f1f5f9;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.mail-row {
  margin-bottom: 8px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  cursor: pointer;
}
.mail-row:active { background: #f1f5f9; }
.mail-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mail-from { overflow: hidden; color: #0f172a; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mail-when { color: #64748b; font-size: 12px; white-space: nowrap; }
.mail-subject { margin-top: 3px; color: var(--app-accent); font-size: 14.5px; font-weight: 600; }
.mail-snippet { overflow: hidden; margin-top: 3px; color: #64748b; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.mail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.mail-full { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e2e8f0; }
.mail-addr { margin-bottom: 3px; color: #64748b; font-size: 12.5px; }
.mail-body { margin-top: 8px; color: #1e293b; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.mail-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mail-att {
  display: inline-block;
  padding: 7px 11px;
  color: var(--app-accent);
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

#login-view[hidden] { display: none !important; }
#login-view {
  position: fixed;
  inset: 0 0 auto;
  height: var(--app-visible-height, 100dvh);
  overflow-y: auto;
  z-index: 100;
  display: flex;
  align-items: safe center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, var(--app-navy) 0%, #0a2a5e 55%, #f6f4ef 55.1%);
}
.login-card {
  width: 100%;
  max-width: 380px;
  padding: 36px 28px 28px;
  text-align: center;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(1, 28, 73, 0.35);
}
.login-mark { width: 96px; height: 96px; margin: 0 auto 16px; }
.login-card h1 { margin: 0; color: var(--app-navy); font-size: 26px; font-weight: 800; letter-spacing: .5px; }
.login-subtitle { margin: 4px 0 26px; color: #6b7280; font-size: 13px; }
.login-card input {
  width: 100%;
  margin-bottom: 12px;
  padding: 14px 16px;
  background: #fbfaf7;
  border: 1.5px solid #e5e1d8;
  border-radius: 12px;
  font-size: 16px;
  outline: none;
}
.login-card input:focus { background: #fff; border-color: var(--app-accent); }
.login-card button {
  width: 100%;
  margin-top: 6px;
  padding: 15px;
  color: #fff;
  background: var(--app-accent);
  border: 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.login-card button[disabled] { opacity: .6; }
#login-error { display: none; margin-top: 14px; color: var(--app-maroon); font-size: 13.5px; font-weight: 500; }
/* Back to the structor.build company picker; ?login=1 makes it forget the
   remembered company so it shows the search instead of jumping back here. */
.login-switch { display: inline-block; margin-top: 16px; padding: 10px 4px; color: var(--app-navy); font-size: 14px; font-weight: 600; text-decoration: none; }
.login-foot { margin-top: 12px; color: #6b7280; font-size: 12px; }

/* Agent capability sub-nav — pills inside the host workflow's content area.
   The workflow owns the bottom nav; this moves between Chat/Rules/Ledger/Agent. */
.agent-subnav { display: flex; gap: 6px; padding: 12px 14px 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.agent-subnav-item {
  flex: none; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--app-navy); background: #eef2f7; text-decoration: none; white-space: nowrap;
}
.agent-subnav-item.active { color: #fff; background: var(--app-navy); }

/* iOS zooms the page when a text control under 16px takes focus, and the
   webview can stay stuck at that scale. Floor every typing surface at 16px
   on phones so the zoom never fires (the viewport meta covers the native
   shell; this covers mobile Safari, which ignores maximum-scale). */
@media (max-width: 560px) {
  input[type="text"], input:not([type]), input[type="search"], input[type="email"],
  input[type="password"], input[type="number"], input[type="date"], input[type="tel"],
  input[type="url"], textarea { font-size: 16px !important; }
}

.login-legal-links { margin-top: 6px; }
.login-legal-links a { color: inherit; opacity: .85; text-decoration: none; }

/* Account choices remain readable at iPhone widths and with large text. */
.privacy-page{max-width:680px;margin:auto;padding:20px 18px 40px;line-height:1.55}.privacy-page h1{font-size:24px}.privacy-page h2{font-size:20px;margin-top:28px}.privacy-choice{border-bottom:1px solid #cbd5e1;padding:10px 0 18px}.privacy-dialog{width:min(92vw,560px);max-height:calc(var(--app-visible-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);top:calc(env(safe-area-inset-top) + 12px);bottom:auto;margin:0 auto;overflow:auto;border:0;border-radius:16px;padding:24px;line-height:1.5}.privacy-dialog::backdrop{background:#0008}.privacy-page button,.privacy-dialog button{min-height:44px;padding:10px 16px;border:1px solid #94a3b8;border-radius:8px;background:#fff;color:#011c49;font:inherit}.privacy-actions{display:flex;flex-wrap:wrap;gap:12px}.privacy-page label{display:block;margin:14px 0}.privacy-page input[type=password]{display:block;width:100%;font-size:16px;padding:12px;margin-top:6px}.privacy-check input{width:20px;height:20px;vertical-align:middle}.privacy-error{color:#b91c1c}.review-workflow-guide{padding:12px 16px;background:#eaf2fb;color:#011c49;font-size:14px;line-height:1.4}.review-workflow-guide p{margin:4px 0}.review-workflow-guide button{min-height:44px;padding:8px;font:inherit;border:1px solid #94a3b8;border-radius:6px;background:white}.account-privacy-link{font-size:13px;color:inherit;padding:8px;text-decoration:none}.frame-rtb .review-workflow-guide~.main-content{min-height:0}

.app.has-review-guide{grid-template-rows:auto auto minmax(0,1fr)}.review-workflow-guide{max-height:32dvh;overflow:auto}.review-workflow-guide summary{min-height:32px;cursor:pointer}.review-workflow-guide button{margin-top:4px}

/* Restricted demo capabilities match the server's project allowlist. */
.review-demo [data-add-phase],.review-demo [data-phase-actions],.review-demo [data-phase-add-step],.review-demo [data-phase-drag],.review-demo [data-step-drag],.review-demo [data-step-status],.review-demo [data-step-open],.review-demo [data-schedule-task-toggle],.review-demo [data-schedule-undo],.review-demo [data-schedule-reorder],.review-demo #rtb-trk-add,.review-demo #rtb-analyze-permits,.review-demo .rtb-track-actions,.review-demo #rtb-evidence-form,.review-demo [data-suggestion-action],.review-demo [data-intelligence-edit],.review-demo [data-intelligence-confirm],.review-demo [data-sw-cadence],.review-demo [data-sw-rotate],.review-demo [data-sw-doc-requirement],.review-demo [data-sw-insp-visible],.review-demo a[href^="#/rtb/email"]{display:none!important}

/* Native document handoff (iOS shell). The scrim blocks repeat taps the
   instant a document is requested; the card only fades in when the download
   takes longer than a beat, so quick opens feel instant. */
.doc-open {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
  background: rgba(15, 23, 42, 0);
  transition: background var(--motion-base) ease;
  touch-action: none;
}
.doc-open.is-active { background: rgba(15, 23, 42, .32); }
.doc-open__card {
  display: flex; align-items: center; gap: var(--space-4);
  width: min(100%, 340px);
  padding: var(--space-4) var(--space-5);
  background: var(--app-surface);
  color: var(--app-text-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22), 0 1px 2px rgba(15, 23, 42, .08);
  opacity: 0; transform: translateY(8px) scale(.97);
  transition: opacity var(--motion-base) ease, transform var(--motion-base) cubic-bezier(.2, .8, .2, 1);
}
.doc-open.is-visible .doc-open__card { opacity: 1; transform: none; }
.doc-open__spinner {
  flex: 0 0 auto; width: 24px; height: 24px;
  border-radius: 50%;
  border: 2.5px solid var(--app-border);
  border-top-color: var(--app-accent);
  animation: doc-open-spin .8s linear infinite;
}
@keyframes doc-open-spin { to { transform: rotate(360deg); } }
.doc-open__text { min-width: 0; flex: 1 1 auto; }
.doc-open__title { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.doc-open__name {
  font-size: var(--text-xs); color: var(--app-text-muted); line-height: 1.35; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-open__name:empty { display: none; }
.doc-open__bar {
  margin-top: var(--space-2); height: 4px; border-radius: var(--radius-pill);
  background: var(--app-surface-3); overflow: hidden; position: relative;
}
.doc-open__fill {
  height: 100%; width: 0; border-radius: inherit;
  background: var(--app-accent);
  transition: width var(--motion-fast) linear;
}
.doc-open__bar.is-indeterminate .doc-open__fill {
  position: absolute; width: 40%;
  animation: doc-open-slide 1.1s ease-in-out infinite;
}
@keyframes doc-open-slide { from { left: -40%; } to { left: 100%; } }
.doc-open__dismiss {
  flex: 0 0 auto; margin-left: auto;
  padding: 8px 14px; border: 0; border-radius: var(--radius-pill);
  background: var(--app-accent); color: #fff;
  font: inherit; font-size: var(--text-sm); font-weight: 600;
}
.doc-open.is-error .doc-open__card { flex-wrap: wrap; }
.doc-open.is-error .doc-open__spinner { display: none; }
.doc-open.is-error .doc-open__title { color: var(--app-danger); }
.doc-open.is-error .doc-open__name { white-space: normal; color: var(--app-text-primary); }

/* The tapped control stays visibly pressed until the viewer is up. */
.is-opening { opacity: .55; pointer-events: none; }

.privacy-page input:not([type=checkbox]),.privacy-page textarea{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:12px;margin-top:6px;border:1px solid #94a3b8;border-radius:8px;background:white;color:#011c49}

/* Company switcher (public/app/company-switch.js). Only people linked in more
   than one company see it; the header reads as the same white title, with a
   caret, and opens a "Switch company" menu under the top bar. */
.topbar-who.has-switch { display: flex; min-width: 0; overflow: visible; }
.company-switch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; max-width: 100%; min-height: 44px;
  margin: -3px 0; padding: 0 8px;
  color: #fff; background: transparent;
  border: 0; border-radius: var(--radius-sm);
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--motion-fast) ease;
}
.company-switch-btn:hover, .company-switch-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.company-switch-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.company-switch-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.company-switch-caret {
  flex: none; width: 7px; height: 7px; margin: -3px 2px 0 1px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  opacity: .85; transform: rotate(45deg);
  transition: transform var(--motion-fast) ease;
}
.company-switch-btn[aria-expanded="true"] .company-switch-caret { margin-top: 3px; transform: rotate(-135deg); }
.company-switch-btn[aria-busy="true"] { opacity: .75; }

.company-switch-panel {
  position: absolute; top: calc(100% + 6px);
  left: calc(8px + env(safe-area-inset-left));
  z-index: 70;
  width: min(340px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height: calc(var(--app-visible-height, 100dvh) - 96px - env(safe-area-inset-top));
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-2) var(--space-2) var(--space-2);
  color: var(--app-text-primary);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px rgba(1, 28, 73, .22), var(--shadow-1);
}
.company-switch-panel[hidden] { display: none; }
.company-switch-title {
  padding: var(--space-2) var(--space-3) 6px;
  color: var(--app-text-muted);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.company-switch-menu { display: flex; flex-direction: column; gap: 2px; }
.company-switch-item {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; min-height: 48px; padding: 10px var(--space-3);
  color: var(--app-ink); background: transparent; text-align: left;
  border: 0; border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-md); font-weight: 500;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.company-switch-item:hover, .company-switch-item:focus { background: var(--app-surface-3); }
.company-switch-item:focus { outline: none; }
.company-switch-item:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -2px; }
.company-switch-item[aria-current="true"] { font-weight: 600; }
.company-switch-item[disabled] { color: var(--app-ink); cursor: default; }
.company-switch-panel.is-switching .company-switch-item:not(.is-opening) { opacity: .5; }
.company-switch-check { flex: none; width: 18px; height: 18px; position: relative; }
.company-switch-item[aria-checked="true"] .company-switch-check::before {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border-right: 2.5px solid var(--app-accent); border-bottom: 2.5px solid var(--app-accent);
  transform: rotate(45deg);
}
.company-switch-item.is-opening .company-switch-check::before {
  content: ""; position: absolute; inset: 1px;
  border: 2px solid var(--app-border); border-top-color: var(--app-accent); border-radius: 50%;
  animation: doc-open-spin .8s linear infinite;
}
.company-switch-text { display: flex; flex-direction: column; min-width: 0; }
.company-switch-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.company-switch-note { margin-top: 2px; color: var(--app-danger); font-size: var(--text-xs); font-weight: 500; }
.company-switch-note[hidden] { display: none; }
.company-switch-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Phones: the menu spans the width under the top bar, like a drop-down sheet. */
@media (max-width: 560px) {
  .company-switch-panel {
    left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right));
    width: auto;
  }
}