/* ==========================================================================
   Mapvera Guides — how-to / documentation pages.
   Rides on /legal.css for the brand frame (purple grid, badge, gradient H1,
   breadcrumb, footer). This file adds the guide body card, step cards, callouts,
   the search box and the guide cards on the /guides index. Generated by
   scripts/build-guides.mjs from content/guides/*.js.
   ========================================================================== */

/* Guide text should be selectable so people can copy IDs, commands, params
   (the rest of the brand pages disable selection). */
body.guide-page .gd-body,
body.guide-page .gd-body *,
body.guide-page .gd-search input { -webkit-user-select: text; user-select: text; }

/* Row under the description: audience badge far left, "back to guides" badge far right. */
.gd-metaline { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1.5rem; }
.gd-aud { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .32em .85em; }
/* Styled as a badge to match, and pushed to the far right. */
.gd-backtop { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .32em .85em; }
.gd-backtop:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.5); }

/* ---- Guide body: a readable white document card ---- */
.gd-body {
  background: #fff;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 18px;
  padding: clamp(24px, 4.5vw, 48px);
  box-shadow: 0 34px 80px -46px rgba(20, 4, 60, .7);
  color: #000;
  cursor: auto;
}
.gd-body > *:first-child { margin-top: 0; }
.gd-body p { line-height: 1.7; color: #000; margin: 0 0 1rem; }
.gd-body a { color: #6523d0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(101,35,208,.32); }
.gd-body a:hover { text-decoration-color: #6523d0; }
.gd-body code { font: .86em ui-monospace, Menlo, monospace; background: #f3f0fa; color: #4a18a2; padding: .1em .42em; border-radius: 5px; word-break: break-word; }

.gd-lead { font-size: 1.15rem; line-height: 1.7; color: #241a3d; margin: 0 0 1.6rem; }

/* Smooth in-page jumps from the Contents list; offset the heading below the fixed nav. */
html { scroll-behavior: smooth; }

/* Contents — jump links to each section, at the top of the guide card. */
.gd-toc { margin: 0 0 1.8rem; padding: 1rem 1.15rem 1.1rem; background: #faf8ff; border: 1px solid #efe9f8; border-radius: 12px; }
.gd-toc-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #8a7fb0; font-weight: 700; margin: 0 0 .6rem; }
.gd-toc ol { list-style: none; counter-reset: gdtoc; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .4rem 1.4rem; }
.gd-toc li { counter-increment: gdtoc; }
.gd-toc a { display: inline-flex; align-items: baseline; gap: .55rem; color: #6523d0; font-weight: 600; text-decoration: none; font-size: .95rem; line-height: 1.4; }
.gd-toc a::before { content: counter(gdtoc, decimal-leading-zero); flex: none; font-size: .78em; font-weight: 800; color: #b79cec; }
.gd-toc a:hover { text-decoration: underline; }

.gd-h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; color: #241a3d;
  margin: 2.4rem 0 1.1rem; padding-top: 1.5rem; border-top: 1px solid #f0ecf9;
  display: flex; align-items: center; gap: .6rem; scroll-margin-top: 92px;
}
.gd-h2::before { content: ""; flex: none; width: .5rem; height: 1.15rem; border-radius: 3px; background: linear-gradient(#8b3bf0, #22d3ee); }
.gd-body > .gd-h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- Numbered step cards with a connecting spine ---- */
.gd-steps { list-style: none; counter-reset: gd; margin: 1rem 0 1.4rem; padding: 0; }
.gd-step { counter-increment: gd; position: relative; padding: 0 0 1.4rem 3.4rem; }
.gd-step:last-child { padding-bottom: 0; }
.gd-step:not(:last-child)::before { content: ""; position: absolute; left: 1.15rem; top: 2.5rem; bottom: -.2rem; width: 2px; background: #efe9f8; }
.gd-step::after {
  content: counter(gd); position: absolute; left: 0; top: 0;
  width: 2.35rem; height: 2.35rem; border-radius: 50%;
  display: grid; place-content: center; font-size: .95rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #8b3bf0, #6523d0); box-shadow: 0 8px 18px -8px rgba(101,35,208,.7);
}
.gd-step-title { font-size: 1.06rem; font-weight: 700; color: #241a3d; margin: .25rem 0 .45rem; line-height: 1.3; }
.gd-step-body p { margin: 0 0 .6rem; }
.gd-step-body p:last-child { margin-bottom: 0; }
.gd-step-note {
  font-size: .85rem !important; color: #571db3 !important; background: #f5f1fd; border-left: 3px solid #b98bff;
  padding: .45rem .7rem; border-radius: 0 7px 7px 0; margin: .5rem 0 0 !important; line-height: 1.5;
}

/* ---- Callout note ---- */
.gd-note {
  background: #f5f1fd; border: 1px solid #e7ddfa; border-left: 4px solid #8b3bf0; border-radius: 0 10px 10px 0;
  padding: .85rem 1rem; margin: 1.3rem 0; color: #3b2d63; font-size: .95rem; line-height: 1.6;
}
.gd-note code { background: #ece3fb; }

/* ---- Tables (reuse the pretty horizontal touch-scroll) ---- */
.gd-tcap { font-weight: 700; color: #3b2d63; margin: 1.2rem 0 .4rem; font-size: .95rem; }
.gd-tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  margin: 1rem 0 1.2rem; border: 1px solid #ece7f6; border-radius: 12px;
  scrollbar-width: thin; scrollbar-color: #cbb8ef transparent;
}
.gd-tablewrap::-webkit-scrollbar { height: 8px; }
.gd-tablewrap::-webkit-scrollbar-track { background: transparent; }
.gd-tablewrap::-webkit-scrollbar-thumb { background: #cbb8ef; border-radius: 999px; }
.gd-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.gd-table th, .gd-table td { text-align: left; vertical-align: top; padding: 10px 13px; font-size: .86rem; line-height: 1.45; border-bottom: 1px solid #f0ecf9; color: #000; }
.gd-table thead th { background: #f5f2fc; font-weight: 700; color: #3b2d63; position: sticky; top: 0; }
.gd-table tbody tr:hover { background: #faf8ff; }

/* ---- /guides index: search + guide cards ---- */
.gd-search {
  display: flex; align-items: stretch; max-width: 540px; margin: 0 0 2.2rem;
  background: #fff; border: 1px solid #ece7f6; border-radius: 12px;
  box-shadow: 0 10px 26px -16px rgba(20, 4, 60, .55); overflow: hidden;
}
.gd-search:focus-within { border-color: #8b3bf0; box-shadow: 0 0 0 3px rgba(139, 59, 240, .25); }
.gd-search input {
  flex: 1; min-width: 0; padding: .9rem .4rem .9rem 1.1rem; font: inherit; font-size: 1rem;
  color: #241a3d; background: transparent; border: 0; outline: none; cursor: text;
}
.gd-search input::placeholder { color: #9a93b3; }
/* We provide our own clear button (iOS Safari never shows the native one). */
.gd-search input::-webkit-search-cancel-button, .gd-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
/* Clear × — appears once there's text. */
.gd-clear {
  flex: none; width: 2.3rem; align-self: center; height: 2.3rem;
  background: transparent; border: 0; color: #9a8fc0; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0;
}
.gd-clear:hover { color: #6523d0; }
/* Search button — pinned far right, a straight divider on its left, right side follows the field's curve. */
.gd-go {
  flex: none; width: 3.1rem; display: grid; place-content: center;
  background: #6523d0; color: #fff; border: 0; border-left: 1px solid rgba(255, 255, 255, .55); cursor: pointer;
}
.gd-go:hover { background: #571db3; }
.gd-go:active { background: #4a18a2; }
.gd-go svg { width: 20px; height: 20px; }

/* "All guides" chip below the search on category pages, pushed to the right. */
.gd-catback { display: flex; margin: -1rem 0 1.6rem; }

.gd-group { margin: 0 0 2.2rem; }
.gd-group[hidden] { display: none; }
.gd-group-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; opacity: .78; font-weight: 700; margin: 0 0 1rem; }
/* Category heading links to its own page. */
.gd-group-title a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.gd-group-title a::after { content: "\2192"; opacity: .6; transition: transform .16s ease; }
.gd-group-title a:hover { opacity: 1; }
.gd-group-title a:hover::after { transform: translateX(3px); }

/* Guide badge is a link to the category page. */
body.guide-page a.legal__tag { text-decoration: none; transition: background .16s ease, border-color .16s ease; }
body.guide-page a.legal__tag:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.5); }
.gd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

.gd-card {
  display: flex; flex-direction: column; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 1.2rem 1.25rem; text-decoration: none; color: #fff;
  backdrop-filter: blur(6px); transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.gd-card[hidden] { display: none; }
.gd-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.4); }
.gd-card-cat { align-self: flex-start; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #1a0b33;
  background: linear-gradient(100deg, #b98bff, #22d3ee); border-radius: 999px; padding: .26em .75em; margin-bottom: .75rem; }
.gd-card h3 { font-size: 1.06rem; font-weight: 700; margin: 0 0 .35rem; color: #fff; }
.gd-card p { font-size: .88rem; line-height: 1.55; color: #fff; opacity: .92; margin: 0 0 .95rem; flex: 1; }
.gd-card-more { font-size: .82rem; font-weight: 700; color: #22d3ee; }

.gd-empty { color: #fff; opacity: .85; font-size: 1rem; margin: .5rem 0 0; }

/* "All guides" call-to-action card (JS-injected at the end of a category's cards). */
.gd-allcard {
  display: flex; flex-direction: column; gap: .35rem;
  background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.32); border-radius: 14px;
  padding: 1.2rem 1.25rem; text-decoration: none; color: #fff; backdrop-filter: blur(6px);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.gd-allcard:hover { transform: translateY(-3px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); }
.gd-allcard-badge { align-self: flex-start; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: #1a0b33; background: linear-gradient(100deg, #ff5da2, #ffce4d); border-radius: 999px; padding: .26em .75em; margin-bottom: .75rem; }
.gd-allcard h3 { font-size: 1.06rem; font-weight: 700; margin: 0 0 .35rem; color: #fff; }
.gd-allcard p { font-size: .88rem; line-height: 1.55; color: #fff; opacity: .9; margin: 0 0 .95rem; flex: 1; }
.gd-allcard-more { font-size: .82rem; font-weight: 700; color: #ffce4d; }

/* ---- Related guides (bottom of an individual guide; hidden when none) ---- */
.gd-related { margin: 2.2rem 0 0; }
.gd-related-h { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: #fff; margin: 0 0 1rem; }
.gd-rel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.gd-rel-card {
  display: flex; flex-direction: column; gap: .35rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  padding: .9rem 1rem; text-decoration: none; color: #fff; backdrop-filter: blur(6px);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.gd-rel-card:hover { transform: translateY(-2px); background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.4); }
.gd-rel-cat { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #22d3ee; }
.gd-rel-title { font-size: .94rem; font-weight: 700; line-height: 1.3; }
.gd-rel-arrow { color: #22d3ee; }

@media (max-width: 560px) {
  .gd-step { padding-left: 3rem; }
  .gd-step::after { width: 2.1rem; height: 2.1rem; font-size: .9rem; }
  .gd-step:not(:last-child)::before { left: 1.05rem; }
}