/* The reader journey: home page paths, grouped topics, short article lists, sign-in
 * menu and "Still need help?". Loaded after assets/css/theme.css and custom.css, and
 * uses the --vt-* tokens custom.css defines. Lives here because help/assets/ is not in
 * the repo.
 */
/* ---------- header ----------
   The theme pins the logo with position:absolute, so nothing holds these buttons on
   the right: without this they sit on top of the logo on a phone. */
.docs-top-utilities{ margin-left:auto; }
/* ---------- sign-in menu ---------- */
.help-signin{ position:relative; }
.help-signin summary{ list-style:none; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; }
.help-signin summary::-webkit-details-marker{ display:none; }
.help-signin-menu{ position:absolute; right:0; top:calc(100% + .5rem); z-index:50; width:17rem; padding:.5rem;
  background:var(--vt-surface); border:1px solid var(--vt-border); border-radius:var(--vt-radius); box-shadow:var(--vt-shadow-lg); }
.help-signin-menu a{ display:block; padding:.75rem; border-radius:var(--vt-radius-sm); color:var(--vt-gray-800); text-decoration:none; }
.help-signin-menu a:hover{ background:var(--vt-gray-100); color:var(--vt-brand); }
.help-signin-menu strong{ display:block; font-weight:600; }
.help-signin-menu span{ display:block; font-size:.8125rem; color:var(--vt-gray-500); }
/* ---------- home: three paths ---------- */
.help-paths{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:-3rem; position:relative; z-index:2; }
.help-path{ display:flex; flex-direction:column; padding:1.5rem; background:var(--vt-surface);
  border:1px solid var(--vt-border); border-radius:var(--vt-radius-lg); box-shadow:var(--vt-shadow-lg); }
.help-path-icon{ width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:1rem;
  font-size:1.25rem; color:var(--vt-brand); background:var(--vt-brand-050); border-radius:var(--vt-radius); }
.help-path h2{ font-size:1.25rem; font-weight:700; margin-bottom:.25rem; }
.help-path p{ color:var(--vt-gray-600); margin-bottom:1rem; flex:1; }
.help-path .btn{ min-height:44px; display:flex; align-items:center; justify-content:center; }
.help-path .btn + .btn{ margin-top:.5rem; }
/* ---------- home: popular and topics ---------- */
.help-home{ padding-top:3rem; padding-bottom:3rem; }
.help-home-title{ font-size:1.375rem; font-weight:700; margin:0 0 1rem; }
.help-popular{ margin-bottom:3rem; }
.help-popular ul{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 2rem; }
.help-popular a{ display:flex; align-items:center; min-height:44px; padding:.5rem 0; color:var(--vt-brand); border-bottom:1px solid var(--vt-border); text-decoration:none; }
.help-popular a:hover{ color:var(--vt-brand-700); text-decoration:underline; }
.help-group{ margin-bottom:2rem; }
.help-group h3{ font-size:.8125rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--vt-gray-500); margin-bottom:.5rem; }
.help-topics{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem 1.25rem; }
.help-topics a{ display:flex; align-items:center; gap:.75rem; min-height:44px; padding:.625rem .75rem; color:var(--vt-gray-800);
  border-radius:var(--vt-radius-sm); text-decoration:none; }
.help-topics a:hover{ background:var(--vt-gray-100); color:var(--vt-brand); }
.help-topics strong{ display:block; font-weight:600; }
.help-topics small{ display:block; color:var(--vt-gray-500); }
.help-topic-icon{ flex:0 0 36px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--vt-brand); background:var(--vt-brand-050); border-radius:9px; }
/* ---------- category sidebar and article lists ---------- */
.docs-content{ padding-bottom:0; }
#docs-nav .help-nav-group{ margin:1.25rem 0 .25rem; padding:0 .75rem; font-size:.75rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--vt-gray-500); }
#docs-nav .help-nav-group:first-child{ margin-top:0; }
#docs-nav .nav-link{ min-height:44px; display:flex; align-items:center; }
.help-list{ margin:1.5rem 0 0; padding:0; list-style:none; border-top:1px solid var(--vt-border); }
.help-list a{ display:block; min-height:44px; padding:.875rem .5rem; border-bottom:1px solid var(--vt-border); color:var(--vt-gray-800); text-decoration:none; }
.help-list a:hover{ background:var(--vt-gray-050); }
.help-list strong{ display:block; font-weight:600; color:var(--vt-brand); }
.help-list span{ display:block; font-size:.9375rem; color:var(--vt-gray-600); }
/* ---------- was this helpful? ---------- */
.help-feedback{ margin:2rem 0 0; padding:1rem 1.25rem; border:1px solid var(--vt-border); border-radius:var(--vt-radius); }
.help-feedback-ask{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.help-feedback-ask[hidden]{ display:none; }
.help-feedback-ask span{ font-weight:600; margin-right:.25rem; }
.help-feedback-ask .btn{ min-width:64px; justify-content:center; }
.help-feedback-done{ color:var(--vt-gray-700); }
/* ---------- still need help ---------- */
.help-still{ margin:2.5rem 0; padding:1.5rem; background:var(--vt-gray-050); border:1px solid var(--vt-border); border-radius:var(--vt-radius); }
.help-still h2{ margin-bottom:1rem; }
.help-still-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.help-still strong{ display:block; font-weight:600; }
.help-still p{ color:var(--vt-gray-600); margin:.25rem 0 .75rem; }
.help-still .btn{ min-height:44px; display:inline-flex; align-items:center; }
/* ---------- footer ---------- */
.help-footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 1.25rem; margin:0 0 .75rem; }
.help-footer-links a{ display:inline-flex; align-items:center; min-height:44px; color:var(--vt-gray-600); }
/* ---------- readable grey ----------
   The theme's .text-muted is too faint for body text on white. */
.docs-article .text-muted,#load-data .text-muted{ color:var(--vt-gray-600) !important; }
/* ---------- touch targets ---------- */
.docs-breadcrumb .breadcrumb-item{ display:flex; align-items:center; }
.docs-breadcrumb .breadcrumb-item a{ display:inline-flex; align-items:center; min-height:44px; min-width:44px; }
.docs-wrapper .btn:not(.search-btn){ min-height:44px; display:inline-flex; align-items:center; }
.docs-toc a{ display:inline-flex; align-items:center; min-height:44px; }
.docs-related .list-group-item a{ display:block; min-height:44px; padding:.625rem 0; }
.list-group-item:has(> a){ padding-top:0; padding-bottom:0; }
.social-list .list-inline-item{ width:auto; height:auto; padding:0; background:none; }
.social-list .list-inline-item > a{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
@media (max-width:991.98px){
  .help-paths{ grid-template-columns:1fr; margin-top:-2rem; }
  .help-popular ul,.help-topics,.help-still-row{ grid-template-columns:1fr; }
  .docs-top-utilities{ gap:.25rem; }
  .docs-top-utilities .btn-primary{ padding:.375rem .75rem; }
  .help-signin-menu{ width:min(17rem,calc(100vw - 2rem)); }
  /* One line per article, so a long category stays a list you can scan. */
  .help-list a{ padding:.625rem .5rem; }
  .help-list span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
/* The header has to hold the menu, logo, search and sign-in buttons. */
@media (max-width:399.98px){
  .site-logo .logo-text{ font-size:1.125rem; }
}
@media (max-width:339.98px){
  .site-logo .text-alt{ display:none; }
}