/*
 * Guided help, drawn inside the page's existing right sidebar.
 *
 * This replaced an inline panel above the page content. The sidebar is the
 * product's one help surface (the "?" toggle), and a second pattern in the main
 * column meant the dashboard had four things talking at once to a user who had
 * not finished setting up.
 *
 * The sidebar column is already sized and positioned by the theme, so this
 * styles the CONTENT only. Nothing here positions anything: the containing
 * column owns that.
 */

/*
 * NO FRAME. The sidebar column is already the surface; drawing a border, a
 * background and a shadow in here put a card inside a card, which is the
 * "nested panels are not panels" note in css/components/glass.css. Against the
 * column's pale ground a white 1px border reads as a washed-out outline rather
 * than an edge, and the second fill flattens whatever is behind it.
 *
 * So this styles type and spacing only, and matches the taxonomy help block
 * that sits directly beneath it, so the two read as one column of help rather
 * than two competing boxes.
 */
.ts-help-sidebar {
  padding: 0 0 16px;
  border: 0;
  background: none;
  box-shadow: none;
}

.ts-help-sidebar__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

.ts-help-sidebar__body {
  margin: 0;
  font-size: var(--ts-text-small, 0.9375rem);
  line-height: 1.5;
}

/* Wraps so the CTA and the tour button stack in a 375px column. */
.ts-help-sidebar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Brand purple, not the browser's default link blue. Help is a "rest" action
   in the palette: green is Go, orange is secondary, purple is everything
   else. */
.ts-help-sidebar__cta {
  color: var(--ts-btn-primary-bg, #672c72);
  font-weight: 600;
  text-decoration: underline;
}

.ts-help-sidebar__cta:hover,
.ts-help-sidebar__cta:focus-visible {
  color: var(--ts-btn-primary-hover-bg, #521f5a);
}

/*
 * A button, not a link: it starts something on this page rather than going
 * somewhere.
 */
/*
 * FILLED orange, not an outline, and the choice is a contrast one rather than a
 * taste one.
 *
 * Orange is the house SECONDARY role (green = Go, orange = secondary, purple =
 * everything else), and a tour offered beside a green primary action is
 * genuinely secondary, so the role fits.
 *
 * But an OUTLINE orange fails here. Orange text on the sidebar ground measures
 * 5.18 on white, 4.63 at the middle of the field and 4.31 at its deep end,
 * which is under the 4.5 the label needs. Filled, both thresholds pass
 * comfortably everywhere: white on the fill is 5.18, and the fill against the
 * ground is 4.31 to 5.18 against the 3.0 an edge needs.
 */
.ts-help-sidebar__tour {
  min-height: 36px;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--ts-btn-secondary-bg, #c2410c);
  border-radius: 8px;
  background: var(--ts-btn-secondary-bg, #c2410c);
  color: var(--ts-btn-secondary-fg, #ffffff);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.ts-help-sidebar__tour:hover,
.ts-help-sidebar__tour:focus-visible {
  /* Darkened rather than lightened: lightening would walk the fill toward the
     3.0 edge threshold it currently clears at 4.31 on the deepest ground. */
  background: #a3360a;
  border-color: #a3360a;
  color: var(--ts-btn-secondary-fg, #ffffff);
}

.ts-help-sidebar__debug {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  opacity: 0.75;
}

/*
 * Tour popover, overriding the vendored driver.js defaults.
 *
 * Loaded after css/vendor/driver.css so these win at equal specificity.
 *
 * The mobile rules are the point of this block, not a polish pass. The tour
 * being replaced put its controls off the bottom of a 375px viewport, which is
 * what stopped people getting out of it. Below 576px the popover is pinned to
 * the bottom of the screen at full width, so the buttons are always in reach.
 */

.driver-popover.ts-tour {
  max-width: 320px;
  padding: 16px;
  /* THE SQUARED CORNER IS THE SIGNATURE. 14px on three corners, 3px on the
     bottom left, same as the glass panels in css/components/glass.css. Signed
     off 2026-08-02: glass on its own is a trend, glass with a silhouette is
     ours. A tour popover with a uniform radius reads as a third-party widget
     dropped on the page, which is exactly what this replaced. */
  border-radius: 14px 14px 14px 3px;
  /* The gradient echoes the page field's 158deg angle, so the popover looks
     lit from the same direction as everything behind it. Kept near-white and
     mostly opaque rather than the panels' 62%: this floats over a dimmed
     overlay, and the house glass value would drop body text under the 4.5
     contrast threshold. Same idiom, honest about a different background. */
  background:
    linear-gradient(158deg, #ffffff 0%, #f6f0fb 62%, #f0e7f7 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.72);
  /* Inset highlight along the top edge, then the house drop shadow. The
     highlight is what stops a pale panel reading as flat. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 34px -18px rgba(62, 33, 85, 0.55);
  font-family: inherit;
}

/* The arrow is drawn with borders, so it has to be told the colour of the edge
   it grows out of. Bottom-side arrows sit under the popover's top edge, which
   is the light end of the gradient; top-side arrows sit above its bottom edge,
   which is the lavender end. */
.driver-popover.ts-tour .driver-popover-arrow-side-bottom {
  border-bottom-color: #ffffff;
}

.driver-popover.ts-tour .driver-popover-arrow-side-top {
  border-top-color: #f0e7f7;
}

.driver-popover.ts-tour .driver-popover-arrow-side-left {
  border-left-color: #f6f0fb;
}

.driver-popover.ts-tour .driver-popover-arrow-side-right {
  border-right-color: #f6f0fb;
}

.driver-popover.ts-tour .driver-popover-title {
  font-size: 1rem;
  font-weight: 600;
}

.driver-popover.ts-tour .driver-popover-description {
  font-size: var(--ts-text-small, 0.9375rem);
  line-height: 1.5;
}

/*
 * Tour controls, to the house button standard.
 *
 * Roles: green = Go, orange = secondary, purple = everything else. Advancing a
 * tour is none of the first two, so Next and Back are both purple, separated by
 * weight rather than by hue: Next is filled, Back is an outline. The launch
 * button in the sidebar is the orange secondary; nothing inside the tour
 * competes with it.
 *
 * Every value below is checked against BOTH thresholds, label-on-fill >= 4.5
 * and fill-against-its-ground >= 3.0, measured against the popover's own
 * gradient rather than against white, since the footer sits at its deep end.
 *
 *   Next filled  white on #672c72 = 9.63, fill on ground 8.02 to 9.63
 *   Back outline text and border on ground 8.02 to 9.63
 *
 * Two of driver.js's own defaults FAILED and are replaced rather than tinted:
 *
 *   close control  #d2d2d2 measured 1.51 / 1.35 / 1.26 across the gradient,
 *                  against the 3.0 a control needs. Effectively invisible, and
 *                  it is the control someone reaches for to get out.
 *   progress text  the house muted #6b6880 reaches 4.46 at the deep end, just
 *                  under the 4.5 small text needs. It takes the ink instead and
 *                  reads as secondary through size and weight, not colour.
 */
.driver-popover.ts-tour .driver-popover-progress-text {
  font-size: var(--ts-text-caption, 0.75rem);
  color: var(--ts-color-ink, #3e2155);
  opacity: 0.85;
}

.driver-popover.ts-tour .driver-popover-footer-btn {
  min-height: 36px;
  padding: 0.375rem 0.875rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}

.driver-popover.ts-tour .driver-popover-next-btn {
  background: var(--ts-btn-primary-bg, #672c72);
  border: 1px solid var(--ts-btn-primary-bg, #672c72);
  color: var(--ts-btn-primary-fg, #ffffff);
  text-shadow: none;
}

.driver-popover.ts-tour .driver-popover-next-btn:hover,
.driver-popover.ts-tour .driver-popover-next-btn:focus-visible {
  background: var(--ts-btn-primary-hover-bg, #521f5a);
  border-color: var(--ts-btn-primary-hover-bg, #521f5a);
  color: var(--ts-btn-primary-fg, #ffffff);
}

.driver-popover.ts-tour .driver-popover-prev-btn {
  background: transparent;
  border: 1px solid var(--ts-btn-primary-bg, #672c72);
  color: var(--ts-btn-primary-bg, #672c72);
  text-shadow: none;
}

.driver-popover.ts-tour .driver-popover-prev-btn:hover,
.driver-popover.ts-tour .driver-popover-prev-btn:focus-visible {
  background: var(--ts-btn-primary-bg, #672c72);
  border-color: var(--ts-btn-primary-bg, #672c72);
  color: var(--ts-btn-primary-fg, #ffffff);
}

/* Disabled Back on the first step. Exempt from the contrast thresholds, but it
   still has to look unavailable rather than broken. */
.driver-popover.ts-tour .driver-popover-btn-disabled {
  background: transparent;
  border-color: var(--ts-border-control, #6f6786);
  color: var(--ts-color-muted, #6b6880);
  opacity: 0.55;
}

.driver-popover.ts-tour .driver-popover-close-btn {
  width: 44px;
  height: 44px;
  color: var(--ts-color-ink, #3e2155);
  font-size: 22px;
  line-height: 44px;
  opacity: 0.7;
}

.driver-popover.ts-tour .driver-popover-close-btn:hover,
.driver-popover.ts-tour .driver-popover-close-btn:focus-visible {
  color: var(--ts-color-ink, #3e2155);
  opacity: 1;
}

@media (max-width: 575.98px) {
  /* Pinned to the bottom, full width, so the controls cannot leave the screen
     however the anchor is positioned. driver.js sets top/left inline, so these
     need !important to take the popover out of its computed position. */
  .driver-popover.ts-tour {
    position: fixed !important;
    top: auto !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    max-width: none;
    margin: 0;
    /* Inset by 8px rather than run flush to the edges, so all four corners are
       on screen and the squared bottom-left still reads. The controls stay
       just as reachable, which is the thing that must not regress. */
    border-radius: 14px 14px 14px 3px;
    transform: none !important;
  }

  /* The arrow points at an anchor the popover is no longer next to. */
  .driver-popover.ts-tour .driver-popover-arrow {
    display: none !important;
  }
}

/*
 * The help row, on the three pages that had no sidebar before TS-5445.
 *
 * The tool pages get these two rules from `.seo-tools-wrapper`, which the
 * dashboard, projects and video-report do not have. Without them the content
 * column refuses to shrink and a 375px sidebar has nowhere to go, so the row
 * wraps and the help lands underneath the page instead of beside it.
 */
.ts-help-row {
  flex-wrap: nowrap;
}

.ts-help-row > .column-box-full {
  min-width: 0;
}

/*
 * Opening and closing.
 *
 * The theme already transitions the column over 0.4s. It never ran, because the
 * toggle could not reach the open state at all, so this is the first time the
 * animation has been visible.
 *
 * WHY EXPAND LOOKED FINE AND COLLAPSE SNAPPED. The column's width is set by
 * flex-basis (0 0 375px open), and flex-basis was not in the transition list.
 * Opening, max-width animates 0 to 375px and gates the growth, so the basis
 * jumping made no visible difference. Closing, the basis drops to zero at once
 * and there is nothing left for max-width to hold open, so it vanishes in a
 * frame. The basis is animated now, which is what actually carries the width.
 *
 * Three things made it snap rather than glide:
 *
 *  - `height: 0` on the closed state is not in the transition list, so the
 *    column lost its height instantly while its width was still animating.
 *    Width and opacity carry the movement; height does not need to take part,
 *    and `overflow: hidden` is already there to clip the contents.
 *  - `visibility` flipping at the START of the close made the panel vanish
 *    before it had shrunk. Delaying it by the length of the transition means it
 *    stays visible for the whole movement and only then becomes unfocusable.
 */
/* Clip in both states.
 *
 * The collapsed column has a 0px basis, so anything inside it has nowhere to
 * go: without this the panel escaped the column and reflowed at its own minimum
 * width, which on /objectives put real help text down a sliver beside the
 * content, one word per line, and made the panel's own card edge read as a
 * stray border. The comment on the closed state below has claimed
 * "overflow: hidden is already there to clip the contents" since it was
 * written; it never was. TS-5465.
 *
 * On the base rather than only on the closed state, so content cannot spill
 * mid-animation either. */
.column-box-half.column-box-right-side-bar {
  overflow: hidden;
}

.column-box-half.column-box-right-side-bar.d_noneSet {
  /* An explicit 0px basis, not the theme's `flex: 0`.
     `flex: 0` resolves to a basis of 0%, and a percentage cannot animate from
     the open state's 375px, so the browser jumps straight there. */
  flex: 0 0 0px;
  /* 0, not auto. A zero-WIDTH flex item with auto height still contributes its
     content height to the row, so the collapsed sidebar reserved a column of
     blank space the full height of the help panel - visible on Homerun and
     Competitors as a large empty gap below the content with nothing in it.
     style.css:5419 already set height: 0px for exactly this reason; this rule
     has the same specificity (0,3,0) and loads later, so `auto` was silently
     overriding it. The open state sets no height and so still resolves to
     auto. */
  height: 0;
  /* The two properties this rule has always transitioned, now actually set.
     Transitioning a value nothing assigns animates nothing, which is why the
     collapsed panel stayed fully visible. visibility is what takes it out of
     the tab order once closed; its 0.4s delay below holds it visible for the
     length of the movement first. */
  opacity: 0;
  visibility: hidden;
  transition:
    flex-basis 0.4s ease-in-out,
    max-width 0.4s ease-in-out,
    opacity 0.28s ease-in-out,
    visibility 0s linear 0.4s;
}

.column-box-half.column-box-right-side-bar:not(.d_noneSet) {
  /* The other half of the pair. Without these the panel would open to 375px and
     stay invisible, because the closed state now actually hides it. */
  opacity: 1;
  visibility: visible;
  transition:
    flex-basis 0.4s ease-in-out,
    max-width 0.4s ease-in-out,
    opacity 0.32s ease-in-out 0.08s,
    visibility 0s linear 0s;
}

/* Respect a reduced-motion preference: the panel still opens, it just arrives
   rather than slides. */
@media (prefers-reduced-motion: reduce) {
  .column-box-half.column-box-right-side-bar,
  .column-box-half.column-box-right-side-bar.d_noneSet,
  .column-box-half.column-box-right-side-bar:not(.d_noneSet) {
    transition: none;
  }
}

/*
 * Flatten everything inside the help sidebar.
 *
 * The taxonomy help block renders as `.card.card-sidebar-audience` wrapping an
 * accordion, so it painted a solid white panel inside the sidebar. White is the
 * estate's INPUT surface, so a block of read-only help wearing it reads as a
 * field you should be able to type in, and it boxed the help inside the
 * column's own frame.
 *
 * Scoped to the sidebar column so the same card class is untouched anywhere
 * else. Specificity here (0,3,0) deliberately beats `body.ts-glass-page .card`
 * (0,2,0), so the frosted panel treatment does not apply in here either: the
 * column is the surface, and nothing inside it should be a second one.
 *
 * The nested selector below is why that arithmetic was not enough on its own.
 * glass.css:179 keeps a faint fill on a genuinely nested card, and
 * `body.ts-glass-page .card .card` picks up a second class and an element for
 * (0,3,1), which beats the (0,3,0) above. So help content that happens to be
 * a card inside a card kept rgba(255,255,255,0.5) and drew an opaque white
 * block in a column that is transparent on every page whose help is only one
 * card deep. Matching the nesting takes this to (0,4,0) and settles it.
 */
.column-box-half.column-box-right-side-bar .card,
.column-box-half.column-box-right-side-bar .card .card,
.column-box-half.column-box-right-side-bar .accordion,
.column-box-half.column-box-right-side-bar .accordion-item,
.column-box-half.column-box-right-side-bar .accordion-collapse {
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.column-box-half.column-box-right-side-bar .card {
  padding: 0;
}

/*
 * One divider between our help and the taxonomy help beneath it, so they read
 * as two sections of one column rather than two panels. A line, not a box.
 */
.column-box-half.column-box-right-side-bar .card-sidebar-audience {
  padding-top: 16px;
  border-top: 1px solid var(--ts-border-quiet, rgba(62, 33, 85, 0.1));
}

/*
 * The migrated step-by-step guide.
 *
 * Styled to match the taxonomy block it replaces closely enough that the
 * sidebar does not visibly change on the day the old block is switched off,
 * and flat for the same reason everything else in here is: the column is the
 * surface.
 */
.ts-help-guide {
  padding-top: 16px;
  border-top: 1px solid var(--ts-border-quiet, rgba(62, 33, 85, 0.1));
}

.ts-help-guide__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.ts-help-guide__subtitle {
  margin: 0 0 0.5rem;
  font-size: var(--ts-text-small, 0.9375rem);
  font-weight: 600;
}

.ts-help-guide__body {
  margin: 0 0 0.75rem;
  font-size: var(--ts-text-small, 0.9375rem);
  line-height: 1.5;
}

.ts-help-guide__video {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--ts-btn-primary-bg, #672c72);
  font-weight: 600;
  text-decoration: underline;
}

.ts-help-guide__steps-title {
  margin: 1rem 0 0.5rem;
  font-size: var(--ts-text-small, 0.9375rem);
  font-weight: 600;
}

/* A real ordered list, numbered by the marker the content carries. The
   list-style is suppressed because the marker is drawn as its own element, so
   a browser number beside it would count twice. */
.ts-help-guide__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-help-guide__step {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ts-help-guide__marker {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ts-surface-card, #ffffff);
  border: 1px solid var(--ts-border-quiet, rgba(62, 33, 85, 0.1));
  color: var(--ts-btn-primary-bg, #672c72);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

.ts-help-guide__step-text p {
  margin: 0 0 0.5rem;
  font-size: var(--ts-text-small, 0.9375rem);
  line-height: 1.5;
}

.ts-help-guide__step-title {
  font-weight: 600;
}

/*
 * "There is help here" on the question mark.
 *
 * This replaced opening the sidebar on first landing. Opening it put a panel in
 * front of people who had not asked for one, on pages that already have plenty
 * to say (TS-5158). A cue on the control makes the same offer and costs nothing
 * to ignore.
 *
 * Two parts, deliberately:
 *   a PULSE that runs three times and stops, to catch the eye on arrival
 *   a DOT that stays until the help is opened, so the affordance survives the
 *   animation ending
 *
 * The class is added by HelpSidebar and removed the moment help is opened, so
 * it is never showing for a surface the user has already found.
 */
/* No position set here on purpose: the theme already fixes this control, and
   the pseudo-elements below need it positioned rather than positioned a
   particular way. Overriding it would be a guess about layout we do not own. */

/* The dot. Offset onto the button's edge, with a ring in the page ground so it
   reads as a badge rather than a smudge on the purple. */
.header-accordian-toggle-btn.ts-help-unseen::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ts-btn-secondary-bg, #c2410c);
  box-shadow: 0 0 0 2px var(--ts-surface-card, #ffffff);
  pointer-events: none;
}

/* The pulse. Three iterations, then it leaves the button alone. An animation
   that never stops is a nag, and this control sits on every page. */
.header-accordian-toggle-btn.ts-help-unseen::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: ts-help-attention 1.6s ease-out 3;
  pointer-events: none;
}

@keyframes ts-help-attention {
  0% {
    box-shadow: 0 0 0 0 rgba(103, 44, 114, 0.55);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(103, 44, 114, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(103, 44, 114, 0);
  }
}

/* Reduced motion keeps the dot and drops the pulse: the information survives,
   the movement does not. */
@media (prefers-reduced-motion: reduce) {
  .header-accordian-toggle-btn.ts-help-unseen::before {
    animation: none;
  }
}