/* Guided tour + per-screen help — Standpoint Agri.
   Uses the app's own tokens only (--ink, --veld, --paper, --line, --ink-soft);
   no new colours and no parallel design system (CONVENTIONS.md).

   ENGINEERING RULE (this has bitten three times): visibility here is driven by
   a CLASS, never by an inline `display` rule and never by the `hidden`
   attribute — an author `display` always beats `[hidden]{display:none}`, which
   is exactly how a "closed" overlay stays on screen while its state says
   otherwise. Open/closed is `.is-open` on #sa-help and nothing else. */

/* ---------------- the "?" button (topbar, top right) ---------------- */
#sa-help-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
#sa-help-btn:hover { border-color: var(--veld); color: var(--veld-deep); }
#sa-help-btn:focus-visible { outline: 2px solid var(--veld); outline-offset: 2px; }
#sa-help-btn.is-disabled { opacity: 0.4; cursor: not-allowed; background: var(--paper-2); }
#sa-help-btn.is-disabled:hover { border-color: var(--line); color: var(--ink); }

/* ---------------- slide-in panel ---------------- */
#sa-help-scrim {
  position: fixed;
  inset: 0;
  background: rgba(19, 32, 47, 0.34);
  z-index: 1190;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
#sa-help.is-open #sa-help-scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease, visibility 0s;
}

#sa-help-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 92vw;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -14px 0 34px rgba(19, 32, 47, 0.14);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
#sa-help.is-open #sa-help-panel {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.2s ease, visibility 0s;
}

/* The non-affiliation footer sits at the bottom of the content column and must
   never be covered by this panel. On a wide screen the panel therefore PUSHES
   the app across rather than sitting on top of it; on a phone the bottom sheet
   has to overlay, so the content gets enough bottom padding to scroll the
   footer clear of it instead. */
#app-shell { transition: margin-right 0.2s ease; }
body.sa-help-open #app-shell { margin-right: 360px; }

.sa-help-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.sa-help-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--veld-deep);
  margin-bottom: 2px;
}
.sa-help-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
#sa-help-close {
  all: unset;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  flex-shrink: 0;
}
#sa-help-close:hover { background: var(--line); color: var(--ink); }
#sa-help-close:focus-visible { outline: 2px solid var(--veld); outline-offset: 2px; }

.sa-help-body { padding: 6px 20px 26px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sa-help-section {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--veld-deep);
  margin: 20px 0 7px;
}
.sa-help-body p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.sa-help-body ul { margin: 0; padding: 0; list-style: none; }
.sa-help-body li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.sa-help-body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--veld);
}
.sa-help-know {
  margin-top: 4px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--veld);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.sa-help-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Phone: bottom sheet instead of a right rail. */
@media (max-width: 640px) {
  #sa-help-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: 80vh;
    border-left: none;
    border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -14px 34px rgba(19, 32, 47, 0.18);
    transform: translateY(102%);
  }
  #sa-help.is-open #sa-help-panel { transform: translateY(0); }
  body.sa-help-open #app-shell { margin-right: 0; }
  body.sa-help-open #content { padding-bottom: 84vh; }
  .sa-help-head { padding: 16px 16px 12px; }
  .sa-help-body { padding: 4px 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  #sa-help-scrim, #sa-help-panel, #app-shell { transition: none; }
}

/* ---------------- "Take the tour" sidebar item ---------------- */
#sa-tour-launch {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #c7d0d8;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 10px;
  margin-top: 10px;
  flex-shrink: 0;
  /* The sidebar is as tall as the document, not the viewport, so an item
     placed at its bottom sits below the fold on any long screen. Sticky keeps
     it at the bottom of the SIDEBAR and on screen at the same time. */
  position: sticky;
  bottom: 12px;
  background: var(--ink);
}
#sa-tour-launch:hover { filter: brightness(1.45); color: #fff; }
#sa-tour-launch:focus-visible { outline: 2px solid var(--veld); outline-offset: 2px; }
#sa-tour-launch .sa-tour-icon { color: var(--veld); }

/* ---------------- driver.js popover, re-skinned ---------------- */
.driver-popover.sa-tour-popover {
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(19, 32, 47, 0.26);
  padding: 17px 18px 14px;
  max-width: 320px;
  font-family: var(--font-body);
  color: var(--ink);
}
.sa-tour-popover .driver-popover-title {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  padding-right: 58px;
}
.sa-tour-popover .driver-popover-description {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  margin-top: 5px;
}
.sa-tour-popover .driver-popover-arrow { border-color: var(--paper); }
.sa-tour-popover .driver-popover-close-btn {
  width: auto;
  height: auto;
  top: 15px;
  right: 17px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: underline;
}
.sa-tour-popover .driver-popover-close-btn:hover { color: var(--red); }
.sa-tour-popover .driver-popover-footer { margin-top: 15px; }
.sa-tour-popover .driver-popover-progress-text { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.sa-tour-popover .driver-popover-footer-btn {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 13px;
}
.sa-tour-popover .driver-popover-footer-btn:hover { background: var(--paper-2); }
.sa-tour-popover .driver-popover-navigation-btns button + button { margin-left: 6px; }
.sa-tour-popover .driver-popover-next-btn {
  background: var(--veld);
  border-color: var(--veld);
  color: #fff;
}
.sa-tour-popover .driver-popover-next-btn:hover { background: var(--veld-deep); }

@media (max-width: 420px) {
  .driver-popover.sa-tour-popover { max-width: calc(100vw - 28px); }
}