/* =============================================================================
   Guided tour, Help & FAQs, Send feedback, video guides (js/guide.js).
   IDENTICAL copies in public/css (staff) and pg-tenant-portal/public/css (tenant).
   Uses the theme variables both apps define (--brand-*, --ink, --line, --card ...).
   ============================================================================= */

/* ------------------------------- the tour -------------------------------- */
.gt-root { position: fixed; inset: 0; z-index: 3000; animation: gtIn .2s ease both; pointer-events: none; }
/* Only the dimmed panes, the shield and the card catch taps; the highlighted spot lets them through. */
.gt-block, .gt-shield, .gt-tip { pointer-events: auto; }
.gt-root.is-out { animation: gtOut .18s ease forwards; }
@keyframes gtIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gtOut { to { opacity: 0; } }
.gt-block, .gt-shield { position: fixed; background: transparent; touch-action: none; }
.gt-root.gt-center .gt-block[data-b="t"] { background: rgba(11, 18, 48, .62); }
.gt-hole {
  position: fixed; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 200vmax rgba(11, 18, 48, .62), 0 0 0 3px #2fd8a6;
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
  animation: gtRing 1.6s ease-in-out infinite;
}
@keyframes gtRing { 50% { box-shadow: 0 0 0 200vmax rgba(11, 18, 48, .62), 0 0 0 7px rgba(47, 216, 166, .5); } }
.gt-hole[hidden], .gt-hand[hidden], .gt-shield[hidden] { display: none; }
.gt-hand { position: fixed; font-size: 26px; line-height: 1; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
  animation: gtTap 1.4s ease-in-out infinite; }
@keyframes gtTap { 50% { transform: translate(4px, 6px) scale(.9); } }
.gt-tip {
  position: fixed; box-sizing: border-box; background: var(--card, #fff); color: var(--ink, #0f172a);
  border-radius: 16px; padding: 14px 16px 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
  transition: left .25s ease, top .25s ease; max-height: calc(100vh - 24px); overflow: auto;
}
.gt-root.gt-busy .gt-tip { opacity: .6; }
.gt-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted, #6b7690); font-size: 22px; line-height: 1; cursor: pointer; }
.gt-x:hover { background: var(--line-soft, #eef1f8); }
.gt-st { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--brand-600, #2b4fc7); padding-right: 30px; }
.gt-t { display: block; font-size: 16px; margin: 4px 30px 4px 0; line-height: 1.3; }
.gt-p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft, #33415c); }
.gt-tap { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12.5px; font-weight: 700;
  color: #0b6b48; background: #d9f7ea; padding: 4px 10px; border-radius: 99px; }
.gt-tap[hidden] { display: none; }
.gt-act { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.gt-dots { display: flex; gap: 4px; margin-right: auto; flex-wrap: wrap; }
.gt-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--line, #d3d9ea); transition: width .2s; }
.gt-dots i.on { width: 16px; background: var(--brand-600, #2b4fc7); }
.gt-btn { height: 36px; min-width: 64px; padding: 0 16px; border-radius: 999px; font: 600 13.5px/1 inherit; font-family: inherit;
  border: 1.5px solid var(--line, #d3d9ea); background: var(--card, #fff); color: var(--ink-soft, #3b4a6b); cursor: pointer; }
.gt-btn[hidden] { display: none; }
.gt-next { border-color: transparent; color: #fff; background: linear-gradient(135deg, #4a74f0, #2b4fc7); }
.gt-btn:focus-visible, .gt-x:focus-visible { outline: 3px solid rgba(59, 99, 232, .45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .gt-hole, .gt-hand { animation: none; } .gt-hole, .gt-tip { transition: none; } }

/* ----------------------------- Send feedback ----------------------------- */
.slfb-root { position: fixed; inset: 0; z-index: 180; display: flex; align-items: flex-end; justify-content: center; animation: gtIn .18s ease both; }
.slfb-root.is-out { animation: gtOut .18s ease forwards; }
/* The page behind Send feedback stays still, like every other form (owner rule
   2026-11-02). <html> is the page's scroll container, so it is held too (same as
   html.chat-open for PG Buddy). overflow only - never overscroll-behavior on body. */
html.slfb-open { overflow: hidden !important; }
.slfb-veil { position: absolute; inset: 0; background: rgba(11, 18, 48, .55); }
.slfb-sheet {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100% - 16px); overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--card, #fff); color: var(--ink, #0f172a); border-radius: 22px 22px 0 0; box-sizing: border-box;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
  animation: slfbUp .22s ease both; overscroll-behavior: contain;
}
@keyframes slfbUp { from { transform: translateY(40px); } to { transform: none; } }
@media (min-width: 700px) {
  .slfb-root { align-items: center; padding: 20px; }
  .slfb-sheet { border-radius: 20px; padding-bottom: 18px; }
  .slfb-grip { display: none; }
}
.slfb-grip { width: 38px; height: 4px; border-radius: 9px; background: var(--line, #d3d9ea); margin: 0 auto 10px; }
.slfb-head { display: flex; align-items: center; gap: 12px; }
.slfb-head .grow { flex: 1; min-width: 0; }
.slfb-head h3 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.slfb-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted, #6b7690); line-height: 1.4; }
.slfb-badge { flex: none; width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 21px;
  background: linear-gradient(135deg, #e8eeff, #f3e8ff); box-shadow: inset 0 0 0 1px rgba(91, 124, 240, .18); }
.slfb-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--line-soft, #eef1f8); color: var(--ink-soft, #33415c);
  font-size: 22px; line-height: 1; cursor: pointer; }
.slfb-sure { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 9px 10px; border-radius: 12px;
  background: var(--warn-100, #fdf0d5); color: var(--warn-700, #8a5300); font-size: 13px; font-weight: 600; }
.slfb-sure .grow { flex: 1; min-width: 120px; }
.slfb-body { margin-top: 6px; }
.slfb-step { margin: 14px 0 7px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6b7690); }
.slfb-step label { font: inherit; color: inherit; }
/* What is it? - three soft pills */
.slfb-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slfb-types button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  padding: 8px 6px; border: 1.5px solid var(--line, #e4e8f2); border-radius: 999px; background: var(--card, #fff);
  color: var(--ink-soft, #33415c); font: 600 13px/1.2 inherit; font-family: inherit; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s; }
.slfb-types button:active, .slfb-areas button:active { transform: scale(.97); }
.slfb-types button i { font-style: normal; font-size: 17px; }
.slfb-types button[aria-checked="true"] { border-color: var(--brand-600, #2b4fc7); background: var(--brand-50, #eef2fe); color: var(--brand-700, #22409f);
  box-shadow: 0 2px 8px rgba(43, 79, 199, .14); }
/* Where in the app? - a grid of section tiles */
.slfb-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 380px) { .slfb-areas { grid-template-columns: repeat(2, 1fr); } .slfb-types button { font-size: 12px; } }
.slfb-areas button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 66px;
  padding: 8px 4px; border: 1.5px solid var(--line, #e4e8f2); border-radius: 14px; background: var(--bg-soft, #f8f9fd);
  color: var(--ink-soft, #33415c); font: 600 12px/1.2 inherit; font-family: inherit; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s; }
.slfb-areas button i { font-style: normal; font-size: 21px; line-height: 1; }
.slfb-areas button[aria-checked="true"] { border-color: var(--brand-600, #2b4fc7); background: var(--brand-50, #eef2fe); color: var(--brand-700, #22409f);
  box-shadow: 0 2px 8px rgba(43, 79, 199, .14); }
.slfb-other { margin-top: 8px; }
.slfb-other[hidden] { display: none; }
.slfb-ta { display: block; width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical; padding: 11px 12px; border-radius: 14px;
  border: 1.5px solid var(--line, #d3d9ea); background: var(--card, #fff); color: var(--ink, #0f172a); font: 15px/1.45 inherit; font-family: inherit; }
.slfb-ta:focus { outline: none; border-color: var(--brand-500, #3b63e8); box-shadow: 0 0 0 3px rgba(59, 99, 232, .16); }
.slfb-att { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.slfb-ph { flex: 1; position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 12px;
  border-radius: 12px; border: 1.5px dashed var(--faint, #b9c3de); cursor: pointer; overflow: hidden; font-size: 14px; font-weight: 600; color: var(--ink-soft, #33415c); }
.slfb-ph-ic { font-size: 20px; }
.slfb-ph-t em { font-style: normal; font-weight: 500; color: var(--muted, #6b7690); }
.slfb-ph img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; }
.slfb-ph img[hidden], .slfb-ph-ic[hidden], .slfb-rm[hidden], .slfb-err[hidden] { display: none; }
.slfb-rm { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--line-soft, #eef1f8); color: var(--ink-soft, #33415c); font-size: 18px; cursor: pointer; }
.slfb-err { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bad-100, #fde4e8); color: var(--bad-700, #a52034); font-size: 13px; }
.slfb-send { margin-top: 14px; min-height: 48px; border-radius: 14px; font-size: 16px; }
.slfb-done { text-align: center; padding: 18px 4px 4px; }
.slfb-done h3 { margin: 12px 0 4px; font-size: 19px; }
.slfb-done p { margin: 0 0 16px; color: var(--muted, #6b7690); font-size: 14px; }
.slfb-ok { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #e8eeff, #f3e8ff); font-size: 32px;
  display: flex; align-items: center; justify-content: center; }

/* ------------------------------ Help & FAQs ------------------------------ */
.gh-search { display: flex; align-items: center; gap: 8px; background: var(--card, #fff); border: 1px solid var(--line, #e4e8f2);
  border-radius: 12px; padding: 0 12px; margin-bottom: 10px; }
.gh-search .input { border: 0; box-shadow: none; background: transparent; padding-left: 0; flex: 1; min-width: 0; height: 44px; font-size: 15px; }
.gh-search .input:focus { box-shadow: none; outline: none; }
.gh-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.gh-chip { font: 600 12.5px/1 inherit; font-family: inherit; padding: 8px 13px; border-radius: 99px; background: var(--card, #fff);
  border: 1px solid var(--line, #e4e8f2); color: var(--ink-soft, #33415c); cursor: pointer; }
.gh-chip.on { background: var(--brand-600, #2b4fc7); border-color: var(--brand-600, #2b4fc7); color: #fff; }
.gh-sec { margin: 16px 0 8px; }
.gh-sec h3 { margin: 0; font-size: 15px; }
.gh-sec p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted, #6b7690); }
.gh-vids { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.gh-vid { flex: none; width: 150px; scroll-snap-align: start; text-align: left; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font-family: inherit; }
.gh-vid-img { position: relative; display: block; width: 150px; height: 96px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, #1c2f86, #3b63e8) center / cover no-repeat; box-shadow: var(--shadow-1); }
.gh-vid-img i { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(11, 18, 48, .65);
  color: #fff; font-style: normal; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.gh-vid b { display: block; margin-top: 6px; font-size: 13px; line-height: 1.3; }
.gh-vid > span:last-child { display: block; font-size: 11.5px; color: var(--muted, #6b7690); }
.gh-faq { background: var(--card, #fff); border: 1px solid var(--line, #e4e8f2); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.gh-q { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 13px 14px; border: 0; background: none;
  color: var(--ink, #0f172a); font: 600 14px/1.35 inherit; font-family: inherit; cursor: pointer; }
.gh-q .grow { flex: 1; min-width: 0; }
.gh-caret { flex: none; color: var(--muted, #8a94b0); transition: transform .2s; }
.gh-faq.open .gh-caret { transform: rotate(180deg); }
.gh-a { padding: 0 14px 13px; color: var(--ink-soft, #4b5878); font-size: 13.5px; line-height: 1.55; }
.gh-a[hidden] { display: none; }
.gh-a ol, .gh-a ul { margin: 6px 0 0; padding-left: 20px; }
.gh-a li { margin: 2px 0; }
.gh-show { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 7px 12px; border-radius: 99px;
  border: 1.5px solid var(--brand-100, #d6e0ff); background: var(--brand-50, #f2f6ff); color: var(--brand-600, #2b4fc7);
  font: 700 12.5px/1 inherit; font-family: inherit; cursor: pointer; }
.gh-empty { padding: 14px; text-align: center; color: var(--muted, #6b7690); font-size: 13.5px; }
.gh-empty[hidden] { display: none; }
.gh-cards { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 820px) { .gh-cards { grid-template-columns: 1fr 1fr; } }
.gh-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--card, #fff); border: 1px solid var(--line, #e4e8f2);
  border-radius: 14px; padding: 13px 14px; }
.gh-card .grow { flex: 1; min-width: 150px; }
.gh-card b { display: block; font-size: 14px; }
.gh-card .grow span { display: block; font-size: 12.5px; color: var(--muted, #6b7690); }
.gh-card-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-50, #f2f6ff); display: flex; align-items: center; justify-content: center; font-size: 20px; }

/* Video player (inside the app's own dialog). */
.gv-wrap { display: flex; justify-content: center; background: #0b1230; border-radius: 12px; overflow: hidden; }
.gv-video { display: block; width: 100%; max-width: 360px; max-height: 66vh; background: #0b1230; }
.gv-cap { margin: 8px 0 0; text-align: center; }

/* Founder "App feedback" page (staff). */
.af-item { background: var(--card, #fff); border: 1px solid var(--line, #e4e8f2); border-radius: 14px; padding: 13px 14px; margin-bottom: 10px; }
.af-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.af-msg { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink, #0f172a); white-space: pre-wrap; word-break: break-word; }
.af-meta { margin-top: 7px; font-size: 12px; color: var(--muted, #6b7690); line-height: 1.5; word-break: break-word; }
.af-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.af-row .grow { flex: 1; }
.af-shot { display: block; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line, #e4e8f2); background: var(--line-soft, #eef1f8); }
.af-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* Buttons and other tap targets are never selectable (owner rule). */
.gt-btn, .gt-x, .slfb-types button, .slfb-areas button, .slfb-x, .slfb-rm, .slfb-ph, .gh-chip, .gh-q, .gh-show, .gh-vid, .gh-card .btn {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.gt-tip, .gt-tip * { -webkit-user-select: none; user-select: none; }
.slfb-ta { -webkit-user-select: text; user-select: text; }

/* Dark mode. */
:root[data-theme="dark"] .gt-tap, :root[data-theme="dark"] .slfb-ok { background: rgba(47, 216, 166, .16); color: #6ee7c2; }
:root[data-theme="dark"] .slfb-areas button { background: rgba(255, 255, 255, .04); }
:root[data-theme="dark"] .slfb-badge, :root[data-theme="dark"] .slfb-ok { background: rgba(91, 124, 240, .18); box-shadow: none; }
:root[data-theme="dark"] .slfb-types button[aria-checked="true"], :root[data-theme="dark"] .slfb-areas button[aria-checked="true"] { background: rgba(59, 99, 232, .18); color: #9db4ff; border-color: #5b7cf0; }
:root[data-theme="dark"] .gh-chip.on { color: #fff; }
:root[data-theme="dark"] .gh-show { background: rgba(59, 99, 232, .14); border-color: rgba(91, 124, 240, .45); color: #9db4ff; }

/* Tenant profile sheet: icon tiles for Help & FAQs and Send feedback (no effect in the staff app). */
.si.i-help     { background: var(--info-100, #ddf1fb); color: var(--info-700, #0b5f8a); }
.si.i-feedback { background: var(--brand-50, #f2f6ff); color: var(--brand-700, #1f3a8a); }