/* apps/web/help/help-center.css */
#help-center-overlay { display:none; position:fixed; inset:0; z-index:10000;
  background:rgba(20,20,22,.55); backdrop-filter:blur(2px); }
.help-shell { position:absolute; inset:3vh 4vw; background:#fff; border-radius:12px;
  display:grid; grid-template-columns:260px 1fr 240px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.3); }
.help-close { position:absolute; top:10px; right:14px; z-index:2; border:0; background:transparent;
  font-size:24px; line-height:1; cursor:pointer; color:#555; }
.help-navtree { border-right:1px solid #ececec; padding:20px 14px; overflow-y:auto; background:#fafafa; }
.help-navtree ul { list-style:none; margin:0; padding:0; }
.help-navtree ul ul { margin-left:12px; }
.help-navtree a { display:block; padding:5px 8px; border-radius:6px; color:#333;
  text-decoration:none; font-size:13.5px; }
.help-navtree a:hover { background:#f0ece9; }
.help-navtree a.is-current { background:#fbeae3; color:#d97757; font-weight:600; }
/* Top-level nav section header — a clear visual divider between Web App / Desktop App /
   Team Studio / Admin so the surfaces don't read as one flat list. */
.help-navgroup { display:block; margin:6px 0 3px; padding:12px 8px 5px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:#b06a4f;
  border-top:1px solid #ececec; }
.help-navtree > ul > li:first-child .help-navgroup { border-top:0; margin-top:0; padding-top:4px; }
.help-center-main { padding:44px 56px; overflow-y:auto; }
.help-rail { border-left:1px solid #ececec; padding:28px 16px; overflow-y:auto; }
/* Clean Google-form-style sans-serif for the article content (nav + rail chrome match).
   Google Sans Text is the product/docs face; Roboto → Segoe UI → system-ui degrade gracefully
   and keep the PDF export self-contained (no webfont fetch). Weights stay light (500 headers). */
.help-article { --doc-font: 'Google Sans Text', 'Google Sans', Roboto, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-family: var(--doc-font); color:#202124; max-width:760px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.help-breadcrumb { font-family: var(--doc-font); font-size:12.5px; color:#5f6368; margin-bottom:14px;
  text-transform:uppercase; letter-spacing:.05em; }
.help-title { font-family: var(--doc-font); font-size:26px; line-height:1.3; margin:0 0 14px; color:#202124; font-weight:600; letter-spacing:-0.005em; }
.help-intro { font-family: var(--doc-font); font-size:16px; line-height:1.6; color:#3c4043; margin:0 0 22px; }
.help-h2 { font-family: var(--doc-font); font-size:19px; line-height:1.35; margin:32px 0 12px; color:#202124; font-weight:600; scroll-margin-top:16px; letter-spacing:-0.003em; }
.help-article p { font-size:15px; line-height:1.65; margin:0 0 13px; color:#3c4043; }
.help-steps { padding-left:22px; }
.help-steps li { margin:9px 0; line-height:1.6; font-size:15px; color:#3c4043; }
.help-steps li strong { font-weight:600; color:#202124; }
.help-callout { border-left:4px solid; border-radius:6px; padding:14px 16px; margin:20px 0;
  background:#f7f7f8; font-size:14.5px; line-height:1.6; }
.help-callout-label { display:block; font-weight:700; margin-bottom:4px; }
.help-callout--note { border-color:#3b82f6; background:#eff6ff; }
.help-callout--tip { border-color:#22a06b; background:#effaf3; }
.help-callout--important { border-color:#eab308; background:#fefce8; }
.help-callout--warning { border-color:#e5484d; background:#fff0f0; }
.help-shot { margin:14px 0; }
.help-shot img { max-width:100%; border:1px solid #e4e4e4; border-radius:8px; display:block; }
.help-shot figcaption { font-size:12.5px; color:#888; margin-top:6px; }
.help-shot-slot { margin:16px 0 22px; }
.help-shot-slot .help-shot { margin:0; }
.help-shot-placeholder { border:1px dashed #cfcfcf; border-radius:8px; padding:24px; text-align:center;
  color:#b0aca6; font-size:12.5px; font-family:'DM Sans', system-ui, sans-serif; letter-spacing:.02em;
  background:repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f5f5f5 10px,#f5f5f5 20px); }
.help-tabbar { display:flex; gap:4px; border-bottom:1px solid #e4e4e4; margin:16px 0 0; }
.help-tab { border:0; background:transparent; padding:8px 14px; cursor:pointer; font-size:13.5px;
  color:#666; border-bottom:2px solid transparent; }
.help-tab.is-active { color:#d97757; border-bottom-color:#d97757; font-weight:600; }
.help-tabpanel { display:none; padding-top:12px; } .help-tabpanel.is-active { display:block; }
.help-onthispage-title { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#999; margin-bottom:8px; }
.help-onthispage ul { list-style:none; margin:0; padding:0; }
.help-onthispage a { display:block; padding:4px 0; font-size:13px; color:#666; text-decoration:none; border-left:2px solid transparent; padding-left:10px; }
.help-onthispage a.is-active { color:#d97757; border-left-color:#d97757; }
@media (max-width:900px){ .help-shell{ grid-template-columns:1fr; } .help-navtree,.help-rail{ display:none; } }
.info-icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  margin-left:8px; padding:0; border:0; background:none; color:#9a9a9a;
  cursor:pointer; vertical-align:middle; transition:color .12s;
  /* Anchor point for the custom tooltip pseudo-elements */
  position:relative; }
/* Google-style: no background pill on hover — just a color change. */
.info-icon:hover,
.info-icon:focus-visible { color:#d97757; background:none; outline:none; }

/* ── Animated "About this page" tooltip ────────────────────────────────────
   Matches the sfb-info-popover entrance: translateY(-6px) scale(0.97) → 0/1
   opacity 0.16s ease-out + transform 0.16s ease-out on enter,
   ease-in 0.13s on exit. No JS needed — pure-CSS :hover/:focus-visible.
   ─────────────────────────────────────────────────────────────────────────── */

/* Tooltip bubble via ::after */
.info-icon::after {
  content: "Click the ⓘ icon to know about this page";
  /* v1.0.532 — left-anchor to the icon and extend RIGHT. Centering it pushed
     the left half past the panel edge, where overflow:hidden clipped it on
     every tab ("k the i icon…" instead of "Click…"). */
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top left;
  /* Visual style matching sfb-info-popover; terra-accent left strip */
  background: var(--bg-card, #fff);
  color: var(--canvas-900, #1a1a1a);
  border: 1px solid rgba(0,0,0,.08);
  border-left: 3px solid rgba(217,119,87,.55);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  padding: 7px 11px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.3;
  letter-spacing: 0.01em;
  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9000;
  /* Exit transition (ease-in, fast) */
  transition:
    opacity 0.13s ease-in,
    transform 0.13s ease-in,
    visibility 0s linear 0.13s;
}

/* Caret arrow pointing up toward the icon via ::before */
.info-icon::before {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px) scaleY(0.97);
  transform-origin: top center;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(0,0,0,.08);
  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9001;
  transition:
    opacity 0.13s ease-in,
    transform 0.13s ease-in,
    visibility 0s linear 0.13s;
}

/* Revealed state on hover or keyboard focus.
   300 ms delay on visibility (via 3rd transition) prevents jumpy flash on quick mouseover.
   opacity + transform start after the delay — matching sfb-info-popover.visible timing. */
.info-icon:hover::after,
.info-icon:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.16s ease-out 0.3s,
    transform 0.16s ease-out 0.3s,
    visibility 0s linear 0.3s;
}
.info-icon:hover::before,
.info-icon:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scaleY(1);
  transition:
    opacity 0.16s ease-out 0.3s,
    transform 0.16s ease-out 0.3s,
    visibility 0s linear 0.3s;
}
/* keyboard focus: no delay (user intentionally tabbed to it) */
.info-icon:focus-visible::after,
.info-icon:focus-visible::before {
  transition:
    opacity 0.16s ease-out,
    transform 0.16s ease-out,
    visibility 0s linear 0s;
}

/* Dark-theme inversion */
[data-theme='dark'] .info-icon::after {
  background: #12121a;
  color: #f0ede8;
  border-color: rgba(255,255,255,.08);
  border-left-color: rgba(217,119,87,.65);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
[data-theme='dark'] .info-icon::before {
  border-bottom-color: rgba(255,255,255,.08);
}

/* Respect prefers-reduced-motion: skip animation, keep tooltip functional */
@media (prefers-reduced-motion: reduce) {
  .info-icon::after,
  .info-icon::before {
    transition: opacity 0.01s linear, visibility 0s linear 0.01s;
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }
  .info-icon::before { transform: translateX(-50%) !important; }
  .info-icon:hover::after,
  .info-icon:focus-visible::after,
  .info-icon:hover::before,
  .info-icon:focus-visible::before {
    transition: opacity 0.01s linear, visibility 0s linear 0s;
  }
}
/* Public /docs standalone page */
.docs-body { margin:0; background:#fff;
  /* Whole standalone /docs page (nav + rail chrome too) uses the Google-form sans stack. */
  font-family: 'Google Sans Text', 'Google Sans', Roboto, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color:#3c4043; -webkit-font-smoothing:antialiased; }
.docs-shell { display:grid; grid-template-columns:280px 1fr 240px; min-height:100vh;
  max-width:1400px; margin:0 auto; }
/* "← Back" pill above the article — standalone /docs only (the in-app overlay has its ×). */
.docs-back { display:inline-flex; align-items:center; gap:6px; margin:0 0 18px;
  padding:6px 14px 6px 10px; border:1px solid #dadce0; border-radius:18px;
  background:#fff; color:#3c4043; font:500 13px/1 inherit; font-family:inherit;
  cursor:pointer; transition:background .12s, border-color .12s; }
.docs-back:hover { background:#f8f9fa; border-color:#c6c8cb; }
.docs-back:focus-visible { outline:2px solid #d97757; outline-offset:2px; }
.docs-shell .help-navtree { position:sticky; top:0; height:100vh; }
.docs-shell .help-center-main { min-height:100vh; }
.docs-shell .help-rail { position:sticky; top:0; height:100vh; }
@media (max-width:900px){ .docs-shell{ grid-template-columns:1fr; } .docs-shell .help-navtree,.docs-shell .help-rail{ display:none; } }
body.docs-blurred .docs-shell { filter:blur(14px); transition:filter .1s; }
@media print { .docs-body .docs-shell { display:none !important; }
  .docs-body::after { content:"WispherFlow documentation is not available for printing."; } }