/* ==========================================================================
   support.css — help-center supplement (app.sproutgoodhabits.com/support)
   Loaded AFTER docs.css. Only the components the shared docs frame does not
   already provide: the interactive checklist, screenshot figures, the hero
   button row, two-column fact lists, the prev/next pager, and two small text
   helpers. Everything else (typography, callouts, code blocks, cards, TOC,
   mobile drawer, footer) comes from docs.css and reuses its --docs-* tokens.
   ========================================================================== */

/* Paste-in AI prompts are prose, not code — wrap them instead of the shared
   code block's horizontal scroll (`white-space: pre; overflow-x: auto`). */
.docs-content .docs-codeblock-body {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* The shared code block has a 48px bottom margin (and no top), so it leaves a
   big gap before the next thing (e.g. "Done when:") but a tight one above.
   Give it symmetric breathing room on support pages. */
.docs-content .docs-codeblock {
  margin: 20px 0;
}

/* Decorative Summer Lab banner under the intro header (setup page) */
.docs-content img.docs-hero-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  /* Match the step-figure rhythm: 20px from the content above, 48px to the
     next block below. */
  margin: 0 0 48px;
}

/* Numbered sub-steps (Connect ChatGPT) and FAQ headings use <h3>, but the
   shared 48px top margin is meant for major subsections and feels loose in a
   tight step sequence. Pull the steps closer and keep each heading snug to its
   own paragraph. */
.docs-content h3 {
  margin: 28px 0 8px;
}

.docs-content h3 + p {
  margin-top: 0;
}

/* Setup-guide cards — the card title/desc render as <p>, so the shared
   `.docs-content p` bottom margin plus the UA default top margin loosen the
   card rhythm. Restore the intended tight spacing (scoped to support pages). */
.docs-content p.docs-card-title {
  margin: 10px 0 6px;
}

.docs-content p.docs-card-desc {
  margin: 0;
}

/* Hero action row (setup page) */
.docs-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 20px;
}

/* The CTA row sits between the header and the banner; keep the gap above it
   equal to the gap below it (20px, the step-figure rhythm). */
.docs-page-header:has(+ .docs-page-actions) {
  margin-bottom: 20px;
}

.docs-page-header:has(+ .docs-page-actions) .docs-page-desc {
  margin-bottom: 0;
}

/* Support shows the whole map on every page: all sidebar groups stay visible
   (the shared docs frame collapses to the active group; docs pages don't load
   this file, so their behavior is unchanged). */
.docs-sidebar-group {
  display: flex;
}

.docs-sidebar-group + .docs-sidebar-group {
  margin-top: 24px;
}

/* Breadcrumb trail — linked ancestors, plain current page. The !important
   outranks the shared docs link rule (four :not() classes deep), which would
   otherwise force primary color, underline, and 600 weight. Whole trail sits
   in fg-secondary; hovering a linked crumb darkens it to fg-primary. */
.docs-content .docs-breadcrumb {
  color: var(--docs-fg-secondary);
}

.docs-content .docs-breadcrumb a {
  color: inherit !important;
  font-weight: inherit !important;
  text-decoration: none !important;
  transition: color 120ms ease;
}

.docs-content .docs-breadcrumb a:hover {
  color: var(--docs-fg-primary) !important;
}

.docs-breadcrumb-sep {
  margin: 0 7px;
  opacity: 0.45;
}

/* Setup meta line — clock icon + estimated duration, in the page header */
.docs-content .docs-page-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--docs-fg-secondary);
}

.docs-content .docs-page-meta .material-icons-outlined {
  font-size: 18px;
  color: var(--docs-fg-tertiary);
}

/* --------------------------------------------------------------------------
   Discord-branded button (blurple + Discord mark). Used in the setup hero,
   the support top nav, and the mobile menu CTA.
   -------------------------------------------------------------------------- */
.btn-discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #5865f2;
  border: 1px solid #5865f2;
  color: #fff;
}

.btn-discord:hover {
  background: #4752c4;
  border-color: #4752c4;
  color: #fff;
}

.btn-discord .btn-discord-icon {
  flex: none;
}

/* In the mobile menu the CTA is full-width; keep the label + mark centered */
a.docs-mobile-menu-cta.btn-discord {
  justify-content: center;
}

/* Plain-text "Done when:" line (kept as plain text, not a callout box) */
.docs-content p.docs-done-when {
  margin: 16px 0;
}

/* Quiet secondary note under a section */
.docs-content p.docs-note-quiet {
  font-size: 14px;
  color: var(--docs-fg-secondary);
}

/* --------------------------------------------------------------------------
   Checklist — interactive progress (wired by /js/support.js)
   -------------------------------------------------------------------------- */
.docs-checklist {
  border: 1px solid var(--docs-border-code);
  border-radius: 16px;
  background: var(--docs-bg-secondary);
  overflow: hidden;
  margin: 24px 0 32px;
}

.docs-checklist-head {
  padding: 20px 24px 16px;
}

.docs-content .docs-checklist-kicker {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--docs-brand-emph);
  background: rgba(11, 165, 236, 0.1);
  padding: 3px 7px;
  border-radius: 4px;
  line-height: 1.4;
  margin: 0;
}

.docs-content .docs-checklist-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--docs-fg-primary);
  margin: 0 0 4px;
}

.docs-content .docs-checklist-desc {
  font-size: 14px;
  color: var(--docs-fg-secondary);
  margin: 0;
}

/* Progress counter — small eyebrow above the title */
.docs-content .docs-checklist-count {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--docs-brand-emph);
  white-space: nowrap;
  margin: 0 0 6px;
}

.docs-checklist-progress {
  height: 4px;
  background: var(--docs-bg-tertiary);
}

.docs-checklist-progress > div {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--docs-brand);
  transition: transform 300ms ease;
}

.docs-content ul.docs-checklist-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-checklist-items li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 24px;
  margin: 0;
  border-top: 1px solid var(--docs-border-code);
  transition: background 120ms ease;
}

.docs-checklist-items li:first-child {
  border-top: none;
}

.docs-checklist-items li:hover {
  background: var(--docs-bg-tertiary);
}

/* Branded custom checkbox */
.docs-checklist-items input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 19px;
  height: 19px;
  flex: none;
  border: 1.5px solid var(--docs-border-primary);
  border-radius: 6px;
  background: var(--docs-bg-primary);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.docs-checklist-items input[type='checkbox']:hover {
  border-color: var(--docs-brand);
}

.docs-checklist-items input[type='checkbox']:checked {
  border-color: var(--docs-brand);
  background: var(--docs-brand)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

.docs-checklist-items input[type='checkbox']:focus-visible {
  outline: 2px solid var(--docs-brand);
  outline-offset: 2px;
}

/* One line per item: the whole label is the link to that step. `!important`
   overrides the shared `.docs-content a:not(...)` inline-link rule (specificity
   0,0,5,1) so the label reads as a heading, not an underlined inline link. */
.docs-checklist-link {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-weight: 400;
  color: var(--docs-fg-primary);
  text-decoration: none !important;
}

.docs-checklist-link:hover {
  color: var(--docs-brand-emph) !important;
}

.docs-checklist-arrow {
  flex: none;
  color: var(--docs-fg-tertiary);
  font-weight: 400;
}

.docs-checklist-link:hover .docs-checklist-arrow {
  color: var(--docs-brand-emph);
}

/* Completed state, driven straight from :checked (no JS class needed) */
.docs-checklist-items input:checked + .docs-checklist-link {
  color: var(--docs-fg-tertiary) !important;
}

.docs-checklist-items input:checked + .docs-checklist-link .docs-checklist-text {
  text-decoration: line-through;
}

.docs-checklist-items input:checked + .docs-checklist-link .docs-checklist-arrow {
  color: var(--docs-fg-tertiary);
}

.docs-checklist-done {
  padding: 12px 24px;
  background: var(--docs-success-bg);
  border-top: 1px solid var(--docs-border-code);
}

.docs-content .docs-checklist-done p {
  font-size: 14px;
  font-weight: 500;
  color: var(--docs-fg-primary);
  margin: 0;
}

.docs-checklist-done[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Step figures — real product screenshots on a warm tertiary canvas.
   Single figures show one framed shot; two-device figures (pairing, result)
   show two framed shots side by side under one caption.
   -------------------------------------------------------------------------- */
/* Figures span the full content width. Single and multi-shot alike stack
   vertically — each shot is its own full-width canvas with a centered phone. */
.docs-visual {
  max-width: none;
  margin: 20px 0 12px;
}

.docs-visual-shots {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.docs-visual-shot {
  min-width: 0;
  display: flex;
  justify-content: center;
  border-radius: 24px;
  background: var(--docs-bg-tertiary);
  padding: 36px 24px;
}

/* Size device shots by height so an iPhone and an iPad render the same height
   (they differ only in width). max-height (not height) so a shot that hits the
   container width scales down proportionally instead of squashing. */
.docs-visual-shot img {
  display: block;
  width: auto;
  height: auto;
  max-height: 440px;
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(10, 13, 18, 0.08);
}

.docs-visual figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--docs-fg-secondary);
}

/* --------------------------------------------------------------------------
   Two-column fact list ("Have these ready")
   -------------------------------------------------------------------------- */
.docs-content ul.docs-cols {
  columns: 1;
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}

/* Custom bullet + hanging indent so wrapped lines align under the text, not
   under the marker (CSS columns clip `list-style-position: outside` markers,
   so position one manually). */
.docs-content ul.docs-cols li {
  position: relative;
  padding-left: 20px;
  break-inside: avoid;
}

.docs-content ul.docs-cols li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.65em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--docs-fg-tertiary);
}

/* --------------------------------------------------------------------------
   Prev / next pager (reuses .docs-next-page styling from docs.css)
   -------------------------------------------------------------------------- */
.docs-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  border-top: 1px solid var(--docs-border-secondary);
}

.docs-pager .docs-next-page {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--docs-fg-secondary);
  text-decoration: none;
  transition: color 150ms ease;
}

.docs-pager .docs-next-page:hover {
  color: var(--docs-fg-primary);
}

@media (max-width: 640px) {
  .docs-content ul.docs-cols {
    columns: 1;
  }

  /* On narrow screens fall back to width-based sizing so a fixed-height
     device doesn't overflow the canvas. */
  .docs-visual-shot {
    padding: 24px 16px;
  }

  /* The support topnav is 57px tall (docs' is 64px); close the see-through
     gap between the fixed nav and the sticky mobile breadcrumb bar. */
  .docs-mobile-breadcrumb {
    margin-top: 57px;
    top: 56px;
  }

  .docs-visual-shot img {
    width: 100%;
    height: auto;
    max-width: 220px;
  }
}

/* Contact page: canvas support request details (filled by support.js from
   ?topic=…&supportReference=… links out of the app). */
.docs-support-request dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 8px 0;
}
.docs-support-request dt { font-weight: 600; color: var(--docs-fg-primary); }
.docs-support-request dd { margin: 0; overflow-wrap: anywhere; }
.docs-support-request .docs-support-request-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }