/* ============================================================
   ADS Helpdesk, Help Center styles (guides.css)
   Everything the chapter language and the card system in
   overrides.css already provide (page-open, chapter, tcard,
   fcard, reach, chapter-link, inline-link, hv3-btn, close-*) is
   reused as-is. This file only covers what has no v2 equivalent:
   the search box, breadcrumb, table of contents, feedback
   voting, and the article "read surface" typography.
   ============================================================ */

.guides-page .page-open{padding-bottom:64px}

/* ----------------------------------------------------------------
   1 - Search box. Ink-only: it always sits inside .page-open.
   ---------------------------------------------------------------- */
.g-search{position:relative;max-width:560px;margin:30px auto 0}
.page-open-grid.is-solo .g-crumb{justify-content:center}

.g-search-ic{
  position:absolute;left:18px;top:50%;
  width:19px;height:19px;
  transform:translateY(-50%);
  color:#a99dc6;
  pointer-events:none;
}

#g-search-input{
  width:100%;height:54px;
  padding:0 18px 0 50px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font:inherit;
  font-size:15.5px;
  transition:border-color .18s ease,background-color .18s ease;
}

#g-search-input::placeholder{color:#a99dc6}

#g-search-input:focus{
  outline:0;
  border-color:rgba(167,139,250,.6);
  background:rgba(255,255,255,.09);
}

.g-search-results{
  position:absolute;
  z-index:40;
  top:calc(100% + 10px);
  left:0;right:0;
  overflow:hidden;
  border:1px solid #e8e3f4;
  border-radius:16px;
  background:#fff;
  box-shadow:0 24px 52px rgba(48,31,88,.16);
  max-height:60vh;
  overflow-y:auto;
  text-align:left;
}

.g-search-results a{
  display:grid;
  gap:2px;
  padding:12px 16px;
  border-bottom:1px solid #efeaf7;
  color:inherit;
  text-decoration:none;
}

.g-search-results a:last-child{border-bottom:0}
.g-search-results a.is-active,
.g-search-results a:hover{background:#faf8ff}
.g-search-cat{color:#8f84a8;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.g-search-results strong{color:#1b1430;font-size:14px;font-weight:750}
.g-search-results small{color:#655d7d;font-size:12.5px}
.g-search-results mark{background:rgba(109,40,217,.16);color:inherit;border-radius:3px}
.g-search-empty{padding:16px;color:#655d7d;font-size:13.5px}
.g-search-empty a{color:#6d28d9;font-weight:700}

html[data-theme="dark"] .page-v2 .g-search-results{border-color:#312b41;background:var(--card);box-shadow:0 24px 52px rgba(0,0,0,.4)}
html[data-theme="dark"] .page-v2 .g-search-results a{border-color:#2a2436}
html[data-theme="dark"] .page-v2 .g-search-results a.is-active,
html[data-theme="dark"] .page-v2 .g-search-results a:hover{background:rgba(167,139,250,.08)}
html[data-theme="dark"] .page-v2 .g-search-cat{color:#8b81a3}
html[data-theme="dark"] .page-v2 .g-search-results strong{color:var(--foreground)}
html[data-theme="dark"] .page-v2 .g-search-results small{color:#aaa1bf}
html[data-theme="dark"] .page-v2 .g-search-empty{color:#aaa1bf}
html[data-theme="dark"] .page-v2 .g-search-empty a{color:#c4b5fd}

/* ----------------------------------------------------------------
   2 - Breadcrumb. Ink variant on the opening bands (category
   page), paper variant at the top of an article.
   ---------------------------------------------------------------- */
.g-crumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0 0 18px;
  color:#8f84a8;
  font-size:12.5px;
  font-weight:700;
}

.g-crumb-sep{width:13px;height:13px;flex:0 0 auto;opacity:.6}
.page-open .g-crumb{color:#a99dc6}
.g-article .g-crumb{margin-bottom:22px}

/* ----------------------------------------------------------------
   3 - Two-column layout + the sticky category/article sidebar.
   Category and article pages only; the landing page already lists
   everything, so it stays single column.
   ---------------------------------------------------------------- */
.g-layout{
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  align-items:start;
  gap:44px;
}

.g-layout .g-article{margin:0}

.g-sidebar{position:sticky;top:104px}

.g-side-nav{
  padding:16px;
  border:1px solid #e8e3f4;
  border-radius:18px;
  background:#faf8ff;
}

.g-side-home,
.g-side-cat > a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:10px;
  color:#3d3654;
  font-size:13.5px;
  font-weight:700;
  text-decoration:none;
}

.g-side-home:hover,
.g-side-cat > a:hover{background:#f0eafb}
.g-side-home.is-active,
.g-side-cat.is-active > a{background:#6d28d9;color:#fff}
.g-side-home.is-active .g-side-ic,
.g-side-cat.is-active > a .g-side-ic{color:#fff}

.g-side-ic{width:16px;height:16px;flex:0 0 auto;color:#8f7ab8}

.g-side-list{display:grid;gap:2px;margin:10px 0 0;padding:10px 0 0;border-top:1px solid #e8e3f4;list-style:none}

.g-side-arts{display:grid;gap:1px;margin:2px 0 6px 38px;padding:0;list-style:none}

.g-side-arts a{
  display:block;
  padding:6px 10px;
  border-radius:8px;
  color:#655d7d;
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
}

.g-side-arts a:hover{background:#f0eafb;color:#3d3654}
.g-side-arts a[aria-current="page"]{color:#6d28d9;background:#f0eafb}

/* ----------------------------------------------------------------
   4 - Category count, on the landing page's fcard grid.
   ---------------------------------------------------------------- */
a.fcard{color:inherit;text-decoration:none;transition:border-color .2s ease,transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease}
a.fcard:hover{transform:translateY(-3px);border-color:rgba(var(--a-rgb),.4);box-shadow:0 20px 42px rgba(48,31,88,.1)}

.g-cat-count{
  margin-top:14px;
  color:var(--a);
  font-size:12px;
  font-weight:700;
}

/* ----------------------------------------------------------------
   5 - The article read surface.
   ---------------------------------------------------------------- */
.g-article-chapter{padding-top:64px}

.g-article{max-width:740px;margin:0 auto}

.g-art-head{margin:0 0 28px}

.g-art-eyebrow{
  margin:0 0 14px;
  color:#6d28d9;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.page-v2 .g-article h1{
  margin:0;
  color:#1b1430;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(28px,3.4vw,40px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.03em;
}

.g-art-lede{margin:14px 0 0;color:#5a5270;font-size:17px;line-height:1.6}

.g-art-meta{
  display:flex;
  align-items:center;
  gap:7px;
  margin:16px 0 0;
  color:#8f84a8;
  font-size:13px;
  font-weight:700;
}

.g-meta-ic{width:15px;height:15px}

.g-toc{
  margin:0 0 34px;
  padding:18px 20px;
  border:1px solid #e8e3f4;
  border-radius:16px;
  background:#faf8ff;
}

.g-toc-title{margin:0 0 9px;color:#6d28d9;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.g-toc ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.g-toc a{color:#3d3654;font-size:14px;font-weight:600;text-decoration:none}
.g-toc a:hover{color:#6d28d9}

.g-prose{
  color:#3d3654;
  font-size:16.5px;
  line-height:1.75;
}

.g-prose > * + *{margin-top:20px}

.page-v2 .g-prose h2{
  margin:44px 0 0;
  color:#1b1430;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.25;
  scroll-margin-top:24px;
}

.page-v2 .g-prose h2 + *{margin-top:14px}

.page-v2 .g-prose h3{
  margin:32px 0 0;
  color:#1b1430;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:19px;
  font-weight:750;
  letter-spacing:-.01em;
}

.g-prose a{color:#6d28d9;font-weight:600;text-underline-offset:2px}
.g-prose a:hover{color:#5919c2}

.g-prose ul,.g-prose ol{padding-left:1.35em}
.g-prose li + li{margin-top:8px}
.g-prose li::marker{color:#a08fc9}

.g-prose strong{color:#241b3a;font-weight:750}

.g-prose code{
  padding:2px 6px;
  border-radius:6px;
  background:#f3effc;
  color:#5919c2;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;
}

.g-prose pre{
  padding:18px 20px;
  border-radius:14px;
  background:#1b1430;
  overflow-x:auto;
}

.g-prose pre code{
  padding:0;
  border-radius:0;
  background:none;
  color:#ece9f3;
  font-size:13.5px;
  line-height:1.6;
}

.g-prose blockquote{
  margin:0;
  padding:16px 20px;
  border:1px solid #e8e3f4;
  border-radius:14px;
  background:#faf8ff;
  color:#4b4362;
  font-style:italic;
}

.g-prose blockquote > *{margin:0}

.g-prose img{max-width:100%;border-radius:14px;border:1px solid #e8e3f4}

.g-prose table{width:100%;border-collapse:collapse;font-size:14.5px}
.g-prose th,.g-prose td{padding:10px 14px;border:1px solid #e8e3f4;text-align:left}
.g-prose th{background:#faf8ff;color:#1b1430;font-weight:750}

.g-prose hr{border:0;border-top:1px solid #e8e3f4;margin:36px 0}

/* ----------------------------------------------------------------
   6 - Feedback voting.
   ---------------------------------------------------------------- */
.g-feedback{
  margin-top:44px;
  padding:22px 24px;
  border:1px solid #e8e3f4;
  border-radius:18px;
  background:#faf8ff;
  text-align:center;
}

.g-feedback-q{margin:0 0 14px;color:#1b1430;font-size:15px;font-weight:750}

.g-feedback-btns{display:inline-flex;gap:10px}

.g-feedback-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 18px;
  border:1px solid #e0d8f0;
  border-radius:999px;
  background:#fff;
  color:#3d3654;
  font:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease;
}

.g-feedback-btn:hover{border-color:#c4b5fd}
.g-feedback-btn:disabled{cursor:default}
.g-feedback-btn.is-selected{border-color:#6d28d9;background:#6d28d9;color:#fff}
.g-feedback-ic{width:15px;height:15px}
.g-feedback-thanks{margin:14px 0 0;color:#655d7d;font-size:13.5px}

/* ----------------------------------------------------------------
   7 - Related guides + article footer.
   ---------------------------------------------------------------- */
.g-related{margin-top:44px}
.g-block-title{margin:0 0 16px;color:#1b1430;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:19px;font-weight:800}

.g-art-foot{
  margin-top:36px;
  padding-top:24px;
  border-top:1px solid #e8e3f4;
  color:#655d7d;
  font-size:14px;
}

.g-art-foot a{color:#6d28d9;font-weight:700}

/* ----------------------------------------------------------------
   8 - Dark theme.
   ---------------------------------------------------------------- */
html[data-theme="dark"] .page-v2 .g-side-nav{border-color:#312b41;background:rgba(167,139,250,.05)}
html[data-theme="dark"] .page-v2 .g-side-home,
html[data-theme="dark"] .page-v2 .g-side-cat > a{color:#d3cde0}
html[data-theme="dark"] .page-v2 .g-side-home:hover,
html[data-theme="dark"] .page-v2 .g-side-cat > a:hover{background:rgba(167,139,250,.1)}
html[data-theme="dark"] .page-v2 .g-side-home.is-active,
html[data-theme="dark"] .page-v2 .g-side-cat.is-active > a{background:#a78bfa;color:#18181b}
html[data-theme="dark"] .page-v2 .g-side-home.is-active .g-side-ic,
html[data-theme="dark"] .page-v2 .g-side-cat.is-active > a .g-side-ic{color:#18181b}
html[data-theme="dark"] .page-v2 .g-side-ic{color:#a99dc6}
html[data-theme="dark"] .page-v2 .g-side-list{border-color:#312b41}
html[data-theme="dark"] .page-v2 .g-side-arts a{color:#aaa1bf}
html[data-theme="dark"] .page-v2 .g-side-arts a:hover{background:rgba(167,139,250,.1);color:#d3cde0}
html[data-theme="dark"] .page-v2 .g-side-arts a[aria-current="page"]{color:#c4b5fd;background:rgba(167,139,250,.1)}
html[data-theme="dark"] .page-v2 .g-crumb{color:#8b81a3}
html[data-theme="dark"] .page-v2 .g-art-eyebrow{color:#c4b5fd}
html[data-theme="dark"] .page-v2 .g-article h1{color:var(--foreground)}
html[data-theme="dark"] .page-v2 .g-art-lede{color:#b4acc4}
html[data-theme="dark"] .page-v2 .g-art-meta{color:#8b81a3}
html[data-theme="dark"] .page-v2 .g-toc{border-color:#312b41;background:rgba(167,139,250,.06)}
html[data-theme="dark"] .page-v2 .g-toc-title{color:#c4b5fd}
html[data-theme="dark"] .page-v2 .g-toc a{color:#d3cde0}
html[data-theme="dark"] .page-v2 .g-toc a:hover{color:#c4b5fd}
html[data-theme="dark"] .page-v2 .g-prose{color:#d3cde0}
html[data-theme="dark"] .page-v2 .g-prose h2,
html[data-theme="dark"] .page-v2 .g-prose h3{color:var(--foreground)}
html[data-theme="dark"] .page-v2 .g-prose a{color:#c4b5fd}
html[data-theme="dark"] .page-v2 .g-prose strong{color:#f1ecfa}
html[data-theme="dark"] .page-v2 .g-prose li::marker{color:#6f6588}
html[data-theme="dark"] .page-v2 .g-prose code{background:rgba(167,139,250,.14);color:#c4b5fd}
html[data-theme="dark"] .page-v2 .g-prose pre{background:#0d0a17}
html[data-theme="dark"] .page-v2 .g-prose blockquote{border-color:#312b41;background:rgba(167,139,250,.06);color:#c9c2da}
html[data-theme="dark"] .page-v2 .g-prose img{border-color:#312b41}
html[data-theme="dark"] .page-v2 .g-prose th,
html[data-theme="dark"] .page-v2 .g-prose td{border-color:#312b41}
html[data-theme="dark"] .page-v2 .g-prose th{background:rgba(167,139,250,.06);color:var(--foreground)}
html[data-theme="dark"] .page-v2 .g-prose hr{border-color:#312b41}
html[data-theme="dark"] .page-v2 .g-feedback{border-color:#312b41;background:rgba(167,139,250,.05)}
html[data-theme="dark"] .page-v2 .g-feedback-q{color:var(--foreground)}
html[data-theme="dark"] .page-v2 .g-feedback-btn{border-color:#312b41;background:var(--card);color:#d3cde0}
html[data-theme="dark"] .page-v2 .g-feedback-btn:hover{border-color:#a78bfa}
html[data-theme="dark"] .page-v2 .g-feedback-btn.is-selected{border-color:#a78bfa;background:#a78bfa;color:#18181b}
html[data-theme="dark"] .page-v2 .g-feedback-thanks{color:#aaa1bf}
html[data-theme="dark"] .page-v2 .g-block-title{color:var(--foreground)}
html[data-theme="dark"] .page-v2 .g-art-foot{border-color:#312b41;color:#aaa1bf}
html[data-theme="dark"] .page-v2 .g-art-foot a{color:#c4b5fd}

/* ----------------------------------------------------------------
   9 - Responsive.
   ---------------------------------------------------------------- */
@media (max-width:980px){
  .g-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .g-sidebar{position:static}
  .g-side-arts{margin-left:30px}
}

@media (max-width:760px){
  .g-article-chapter{padding-top:44px}
  .page-v2 .g-prose h2{font-size:21px;margin-top:36px}
  .page-v2 .g-prose h3{font-size:17px}
  .g-feedback{padding:20px 18px}
}

@media (max-width:480px){
  #g-search-input{height:50px;font-size:14.5px}
  .g-feedback-btns{width:100%;flex-direction:column}
  .g-feedback-btn{justify-content:center}
}