/* Guides section: reading pages (setup, connect, teams, capture, your-memory, updates, faq,
   costs) built on the site's existing .page-intro / .article-layout / .note / .setup-steps /
   .text-link anatomy (see assets/experience.css), plus the hub's own open-row list. This file
   also carries the shared guide anatomy from docs/design/astra-recommendations.md section B.4
   (action lead, expected result, recovery link, mobile section list, section spacing), which
   every guide inherits by loading this stylesheet, whether or not it has been visually
   reworked yet this round.

   guides.css only ever loads on guides/*.html (see the `css: ['guides']` page() calls), so
   every selector here is safely scoped to this section without touching experience.css. */

/* --- Shared procedural anatomy (astra-recommendations.md B.4) -------------------------- */

/* Desktop keeps the sticky article-aside from experience.css untouched. Below 700px it
   already collapses to a plain wrapping row of links (see experience.css's matching
   @media(max-width:700px) rule) - this only raises its tap targets to the required 44px and
   keeps it feeling like one relaxed row rather than a cramped index. */
@media (max-width: 700px) {
  .guide-intro + .article-layout .article-aside a {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 13px;
  }
}

/* 48px between procedural sections, 24px within one (a section's own heading-to-lead and
   lead-to-steps spacing already comes from the site's ordinary heading/paragraph margins).
   :not(.faq-page) so FAQ's own 48px group spacing in guide-faq.css is never outranked by
   this rule's higher class-count specificity. */
body:not(.faq-page) .guide-intro + .article-layout .article-content section {
  padding: 24px 0;
}

/* The short bold action lead that opens a procedural section (actionLead in guide-lib.mjs). */
.guide-lead {
  font-size: 17px;
  color: var(--ink);
  margin-top: 24px;
}
.guide-intro + .article-layout .article-content h2 + .guide-lead {
  margin-top: 0;
}

/* Step lists that carry one plain paragraph per <li> (no bold lead title split from a body),
   since the copy's numbered "how to switch it on" steps don't consistently divide that way. */
.guide-steps {
  margin-top: 24px;
}
.guide-steps li div > p:first-child {
  margin-top: 0
}
.guide-steps li div > * + * {
  margin-top: 14px
}
.guide-steps ul {
  margin: 10px 0 0;
  padding-left: 20px
}

/* The expected-result line every step list can end with (whatYouSee in guide-lib.mjs): body
   size, on white, with icon('check') and an ink label - instructional text, not a live badge. */
.guide-note-line {
  margin-top: 24px
}
.guide-result {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.guide-result > svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--ink);
}
.guide-result p {
  margin: 0;
  font-size: 17px;
  color: var(--ink);
}
.guide-result strong {
  font-weight: 500;
}
/* The memoryMark()-carrying variant (whatYouSeeMemory in guide-lib.mjs), for a result that is
   itself saved or recalled content: the mark's header row replaces the check, at the same
   body-size result weight. */
.guide-note-memory {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.guide-note-memory p {
  margin: 0;
  font-size: 17px;
  color: var(--ink)
}

/* The local recovery link a procedural section can end with (recoveryLink in guide-lib.mjs) -
   an ordinary text link, not another install button. */
.guide-recovery {
  margin-top: 24px;
}

/* Long fallback configuration under a native <details> (fallbackDetails in guide-lib.mjs):
   the condition sentence stays visible above it; only the code block hides until opened. */
.guide-details {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px 22px;
  margin-top: 24px;
}
.guide-details summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  padding: 18px 0;
}
.guide-details[open] summary {
  padding-bottom: 6px;
}
.guide-details > .code-block:last-child {
  margin-bottom: 22px;
}

/* The task-specific route link before the shared closing (guideRoute in guide-lib.mjs): a
   single-item .route-links, so it doesn't stretch to the usual two-column grid. It follows
   .article-layout's own 90px bottom padding, then supplies its own gap before .guide-close,
   which otherwise assumes it is pulling straight up out of that same 90px (see .guide-close's
   -40px margin-top below) - so the negative margin is canceled here instead of double-tucking
   the close block under the route link. */
.guide-route.route-links {
  grid-template-columns: 1fr;
  max-width: 620px;
  margin-bottom: 56px;
}
.guide-route + .guide-close {
  margin-top: 0;
}

/* "Choose your tool" anchors on Connect, right after the intro (docs/design/astra-
   recommendations.md section B.5). Plain wrapping row of marks beside names, not tabs. */
.guide-tool-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
  margin-top: 32px;
}
.guide-tool-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
}
.guide-tool-links a:hover,
.guide-tool-links a:focus-visible {
  border-color: var(--accent);
}
.guide-tool-links img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* The "Go deeper" link and facts_checked line every guide closes with. */
.guide-close {
  border-top: 1px solid var(--line);
  margin-top: -40px;
  padding: 32px 0 60px;
  max-width: 640px
}
/* The hub's closing block follows a plain paragraph, not an .article-layout with its own
   90px bottom padding, so it doesn't need the pull-up the reading guides rely on. */
.guide-hub .guide-close {
  margin-top: 36px
}
.guide-deeper {
  margin: 0
}
.guide-facts {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px
}

/* --- The hub (docs/design/astra-recommendations.md section B.6) ------------------------ */

.guide-hub > p {
  color: var(--muted);
  font-size: 16px;
  margin-top: 36px;
  max-width: 640px
}
/* Start-here group, photograph, team shortcut, and the reference group, in that DOM order -
   which is already the correct mobile order (three links, team shortcut, photo, more links).
   Desktop only has to pull the photo back up between the intro and the first group. */
.guide-hub-flow {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 40px;
}
.guide-hub-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.guide-hub-heading {
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}
.guide-hub-photo {
  max-width: 640px;
}
.guide-hub-photo .photo,
.guide-hub-photo .photo-slot {
  border-radius: var(--radius, 14px);
  overflow: hidden;
}
.guide-hub-team-note {
  color: var(--muted);
  font-size: 16px;
  max-width: 640px;
  margin: 0;
}
@media (min-width: 701px) {
  .guide-hub-photo {
    order: -1;
  }
}

.guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.guide-list li {
  border-top: 1px solid var(--line)
}
.guide-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  text-decoration: none;
  color: inherit
}
.guide-row-body {
  flex: 1;
  min-width: 0
}
.guide-row h3 {
  font-size: 20px;
  font-weight: 500
}
.guide-row p {
  color: var(--muted);
  font-size: 14px;
  margin-top: 6px
}
.guide-row svg {
  flex-shrink: 0
}
.guide-row:hover h3 {
  text-decoration: underline
}
/* Numbered rows: Setup, Connect, Your memory. */
.guide-list-start {
  counter-reset: guide
}
.guide-list-start li {
  counter-increment: guide
}
.guide-list-start .guide-row:before {
  content: counter(guide);
  flex-shrink: 0;
  font-size: 13px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%
}
/* Unnumbered reference rows: Capture, Teams, Updates, Costs, FAQ - one shared outline icon
   instead of a counter. */
.guide-list-more .guide-row > svg.icon:first-child {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--muted)
}

/* --- Setup (docs/design/astra-recommendations.md section B.7) -------------------------- */

.setup-download-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}
.setup-download-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}
.setup-download-row:hover,
.setup-download-row:focus-visible {
  border-color: var(--accent);
}
.setup-download-row > svg.icon:first-child {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}
.setup-download-row-body {
  flex: 1;
  min-width: 0;
}
.setup-download-row h3 {
  font-size: 17px;
  font-weight: 500;
}
.setup-download-row p {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}
.setup-download-row > svg.icon:last-child {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--muted);
}
.guide-release-status {
  font-size: 13px;
  color: var(--muted);
  margin-top: 14px;
}

/* The two-row address diagram (Dashboard / AI connection): plain, selectable text, never a
   fabricated screenshot. */
.setup-address-diagram {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 24px;
  overflow: hidden;
}
.setup-address-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
}
.setup-address-row + .setup-address-row {
  border-top: 1px solid var(--line);
}
.setup-address-row dt {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.setup-address-row dd {
  margin: 0;
  min-width: 0;
}
.setup-address-row code {
  display: block;
  font-size: 14px;
  background: var(--surface-muted);
  padding: 8px 12px;
  border-radius: 6px;
  overflow-x: auto;
  white-space: nowrap;
}

/* The video walkthrough, reused beside the relevant step at desktop and stacked below it on
   mobile - same .setup-preview player download.mjs already uses, no new asset. */
.setup-video-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
.setup-video-row .setup-preview {
  margin: 0;
}

@media (max-width: 900px) {
  .setup-address-row {
    grid-template-columns: 100px 1fr;
  }
}
@media (max-width: 700px) {
  .setup-video-row {
    display: block;
  }
  .setup-video-row .setup-preview {
    margin-top: 28px;
  }
  .setup-address-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* FAQ: visible question/answer pairs grouped under the copy's own headings, using the
   article-content h2 (group) / h3 (question) / p (answer) hierarchy already styled. */
.article-content h3 {
  max-width: 780px
}