/* Drive DTC – support.css
   The Support Center's own layout on top of site.css: the help header with its search box, the three-column
   article page (category list · article · on this page), category and search pages, article typography,
   callouts, steps, the feedback widget. Tokens, buttons, cards, chips and frames all come from site.css.

   CLASS INDEX
   Header     .sp-head  .sp-bar-row  .sp-wordmark  .sp-links  .sp-back
   Search     .sp-search (.sp-search-lg)  .sp-drop  .sp-r-title .sp-r-cat .sp-r-snip  .sp-see-all  mark  .sp-sr
   Home       .sp-hero  .sp-hero-quick  .sp-cat  .sp-count  .sp-home-split  .sp-popular  .sp-contact  .sp-contact-list
   Layout     .sp-layout (.sp-article .has-toc)  .sp-side  .sp-side-back  .sp-side-n  .sp-main  .sp-toc
   Pages      .sp-crumbs  .sp-page-head  .sp-articles  .sp-more  .sp-article-head  .sp-shot  .sp-body  .steps
              .callout.note  .sp-related  .sp-updated  .sp-feedback  .sp-fb-*  .sp-search-page  .sp-results
              .sp-noresults  .sp-browse  .sp-browse-list  .sp-foot */

/* 1. Header ---------------------------------------------------------------------------------------------- */
.sp-head .bar { gap: 16px; }
.sp-bar-row { display: contents; }
.sp-wordmark { display: inline-flex; align-items: center; height: 24px; padding-left: 12px; border-left: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
.sp-wordmark:hover { color: var(--text); text-decoration: none; }
.sp-links { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.sp-links .btn { font-weight: 500; padding: 0 12px; }
.sp-links .btn .ic { width: 16px; height: 16px; }
.sp-back .ic { color: var(--muted); }
.sp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 2. Search box and its dropdown ------------------------------------------------------------------------ */
.sp-search { position: relative; flex: 1 1 320px; max-width: 480px; margin-left: 4px; }
.sp-search > .ic { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.sp-search input { height: 40px; padding-left: 38px; padding-right: 12px; border-radius: var(--r-ctl); background: var(--surface); }
.sp-search input::-webkit-search-decoration { -webkit-appearance: none; }
.sp-search-lg { flex: none; width: 100%; max-width: 680px; margin: 0 auto; }
.sp-search-lg > .ic { left: 16px; width: 22px; height: 22px; }
.sp-search-lg input { height: 56px; padding-left: 48px; font-size: 17px; border-radius: 8px; box-shadow: var(--shadow); }
.sp-drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 45; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); text-align: left; }
.sp-drop ul { list-style: none; margin: 0; padding: 0; }
.sp-drop li a { display: block; padding: 8px 10px; border-radius: var(--r-ctl); color: var(--text); }
.sp-drop li a:hover, .sp-drop li[aria-selected="true"] a { background: var(--surface-2); text-decoration: none; }
.sp-drop li[aria-selected="true"] a { box-shadow: inset 0 0 0 1px var(--line); }
.sp-drop .sp-empty { padding: 10px 12px; font-size: 14px; color: var(--muted); }
.sp-r-title { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; }
.sp-r-cat { display: inline-block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.sp-r-snip { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-see-all a { font-weight: 600; color: var(--accent); font-size: 14px; }
.sp-drop .sp-see-all { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
mark { background: var(--accent-soft); color: inherit; border-radius: 2px; padding: 0 1px; }

/* 3. Home ------------------------------------------------------------------------------------------------- */
.sp-hero { padding: 72px 0 56px; text-align: center; }
.sp-hero h1 { font-size: clamp(34px, 4.2vw, 48px); }
.sp-hero .lead { max-width: 60ch; margin: 16px auto 28px; font-size: 18px; }
.sp-hero-quick { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.sp-hero-quick a { color: var(--text); font-weight: 500; }
.sp-hero-quick a:hover { color: var(--accent); }
.sp-cat { display: flex; flex-direction: column; color: var(--text); transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.sp-cat:hover { text-decoration: none; border-color: #CFD6DE; }
.sp-cat h3 { font-size: 18px; margin-bottom: 6px; }
.sp-cat p { margin: 0; flex: 1; font-size: 14px; line-height: 1.5; }
.sp-count { display: block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sp-home-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.sp-popular { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.sp-popular li { border-top: 1px solid var(--line); }
.sp-popular a { display: block; padding: 14px 0; color: var(--text); }
.sp-popular a:hover { text-decoration: none; }
.sp-popular a:hover b { color: var(--accent); }
.sp-popular b { display: block; font-weight: 600; font-size: 16px; line-height: 1.35; }
.sp-popular span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sp-contact h2 { font-size: 24px; }
.sp-contact > p { margin-top: 8px; }
.sp-contact-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.sp-contact-list li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.sp-contact-list .card-icon { margin: 0; flex: none; }
.sp-contact-list b { display: block; font-size: 16px; font-weight: 600; color: var(--accent); }
.sp-contact-list span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sp-contact-list a:hover { text-decoration: none; }
.sp-contact-list a:hover b { text-decoration: underline; }

/* 4. Two- and three-column layout ----------------------------------------------------------------------- */
.sp-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 56px; padding: 40px 0 80px; align-items: start; }
.sp-layout.sp-article.has-toc { grid-template-columns: 236px minmax(0, 1fr) 200px; gap: 48px; }
.sp-side { position: sticky; top: calc(var(--head-h) + 24px); max-height: calc(100vh - var(--head-h) - 48px); overflow-y: auto; padding-right: 8px; }
.sp-side .kicker, .sp-toc .kicker { display: block; margin: 0 0 8px; padding: 0 10px; }
.sp-side .kicker a { color: var(--muted); }
.sp-side ul, .sp-toc ol { list-style: none; margin: 0; padding: 0; }
.sp-side li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: var(--r-ctl); color: var(--text); font-size: 14px; line-height: 1.4; }
.sp-side li a:hover { background: var(--surface-3); text-decoration: none; }
.sp-side li a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sp-side-n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.sp-side li a[aria-current="page"] .sp-side-n { color: var(--accent); }
.sp-side-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px; padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sp-side-back .ic { width: 16px; height: 16px; }
.sp-side-back:hover { color: var(--accent); text-decoration: none; }
.sp-main { min-width: 0; }
.sp-toc { position: sticky; top: calc(var(--head-h) + 24px); font-size: 13px; }
.sp-toc ol { border-left: 1px solid var(--line); }
.sp-toc li a { display: block; margin-left: -1px; padding: 5px 12px; border-left: 2px solid transparent; color: var(--muted); line-height: 1.4; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.sp-toc li a:hover { color: var(--text); text-decoration: none; }
.sp-toc li a.on { color: var(--text); border-left-color: var(--accent); }

/* 5. Breadcrumbs, category and article pages ------------------------------------------------------------ */
.sp-crumbs ol { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--muted); }
.sp-crumbs li + li::before { content: "›"; padding: 0 8px; color: var(--muted); }
.sp-crumbs a { color: var(--muted); }
.sp-crumbs a:hover { color: var(--accent); }
.sp-crumbs [aria-current] { color: var(--text); font-weight: 500; }
.sp-page-head { max-width: 68ch; margin-bottom: 32px; }
.sp-page-head .card-icon { margin-bottom: 16px; }
.sp-page-head h1, .sp-article-head h1 { font-size: clamp(30px, 3.4vw, 38px); }
.sp-page-head .lead, .sp-article-head .lead { margin-top: 12px; font-size: 18px; }
.sp-page-head .small { margin-top: 12px; }
.sp-articles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sp-articles li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.sp-articles b { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.sp-articles a { color: var(--text); }
.sp-articles a:hover { color: var(--accent); text-decoration: none; }
.sp-articles p { margin: 6px 0 0; max-width: 68ch; font-size: 15px; line-height: 1.55; color: var(--muted); }
.sp-articles time { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.sp-more { margin-top: 32px; font-size: 15px; color: var(--muted); }
.sp-article-head { max-width: 68ch; margin-bottom: 28px; }
.sp-shot { margin: 0 0 32px; max-width: 900px; }
.sp-shot img { width: 100%; height: auto; }

/* 6. Article body ---------------------------------------------------------------------------------------- */
.sp-body { max-width: 68ch; font-size: 15px; line-height: 1.6; }
.sp-body > * + * { margin-top: 16px; }
.sp-body p { margin: 0; }
.sp-body h2 { margin-top: 44px; padding-top: 4px; font-size: 22px; letter-spacing: -.015em; scroll-margin-top: calc(var(--head-h) + 20px); }
.sp-body h2 + * { margin-top: 12px; }
.sp-body h3 { margin-top: 28px; font-size: 17px; letter-spacing: -.01em; }
.sp-body h4 { margin-top: 20px; }
.sp-body ul { margin: 0; padding-left: 22px; }
.sp-body ul li { margin: 6px 0; }
.sp-body ul li::marker { color: var(--muted); }
.sp-body ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.sp-body ol.steps li { counter-increment: step; position: relative; margin: 10px 0; padding-left: 40px; min-height: 26px; }
.sp-body ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--text); color: var(--bg); font-family: var(--mono); font-size: 13px; font-weight: 600; line-height: 26px; text-align: center; }
.sp-body .callout { margin-top: 20px; align-items: flex-start; }
.sp-body .callout p { margin: 0; }
.sp-body .callout p + p { margin-top: 8px; }
.sp-body .callout b { font-weight: 650; }
.callout.note { border-left-color: var(--accent); }
.callout.note .ic { color: var(--accent); }
.sp-body pre { margin: 0; padding: 14px 16px; overflow-x: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); font-size: 13.5px; line-height: 1.5; }
.sp-body pre code { padding: 0; border: 0; background: none; font-size: inherit; }
.sp-body figure { margin: 0; }
.sp-body figure img { border-radius: var(--r-card); border: 1px solid var(--line); }
.sp-body a { text-decoration: underline; text-decoration-color: rgba(11,98,214,.35); text-underline-offset: 2px; }
.sp-body a:hover { text-decoration-color: var(--accent); }
.sp-body hr { margin: 32px 0; }

/* 7. Related, updated, feedback ------------------------------------------------------------------------- */
.sp-related { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.sp-related h2 { font-size: 18px; margin-bottom: 14px; }
.sp-related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sp-related li a { display: block; height: 100%; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--text); transition: border-color var(--t-fast) var(--ease); }
.sp-related li a:hover { border-color: #CFD6DE; text-decoration: none; }
.sp-related li a:hover b { color: var(--accent); }
.sp-related b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.sp-related span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.sp-updated { margin: 32px 0 0; font-size: 13px; color: var(--muted); }
.sp-feedback { margin-top: 16px; padding: 20px 24px; }
.sp-fb-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.sp-fb-q { margin: 0; font-weight: 600; font-size: 15px; }
.sp-feedback .btn .ic { width: 16px; height: 16px; }
.sp-feedback .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.sp-fb-more { display: grid; gap: 10px; margin-top: 4px; }
.sp-fb-more label { font-size: 15px; font-weight: 600; }
.sp-fb-more label .muted { font-weight: 400; }
.sp-fb-more textarea { min-height: 84px; }
.sp-feedback .form-msg { margin: 0; font-size: 15px; }
.sp-feedback .form-msg.bad { color: var(--bad); }

/* 8. Search page ------------------------------------------------------------------------------------------ */
.sp-search-page { max-width: 760px; padding: 40px 0 80px; }
.sp-search-page h1 { margin-bottom: 20px; font-size: clamp(30px, 3.4vw, 38px); }
.sp-search-page .sp-search-lg { margin: 0; max-width: none; }
.sp-search-view .sp-head .sp-search { display: none; }
.sp-results-summary { margin: 20px 0 8px; font-size: 14px; color: var(--muted); min-height: 1.4em; }
.sp-results { list-style: none; margin: 0; padding: 0; }
.sp-results li { border-top: 1px solid var(--line); }
.sp-results li:last-child { border-bottom: 1px solid var(--line); }
.sp-results a { display: block; padding: 16px 0; color: var(--text); }
.sp-results a:hover { text-decoration: none; }
.sp-results a:hover .sp-r-title { color: var(--accent); }
.sp-results .sp-r-title { font-size: 17px; }
.sp-results .sp-r-snip { display: block; -webkit-line-clamp: unset; margin-top: 6px; font-size: 14px; max-width: 68ch; }
.sp-noresults { margin-top: 8px; font-size: 15px; color: var(--muted); }
.sp-browse { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.sp-browse h2 { font-size: 18px; margin-bottom: 14px; }
.sp-browse-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sp-browse-list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--text); font-size: 15px; font-weight: 500; }
.sp-browse-list a .ic { width: 18px; height: 18px; color: var(--accent); }
.sp-browse-list a .sp-side-n { margin-left: auto; }
.sp-browse-list a:hover { border-color: #CFD6DE; text-decoration: none; }
.sp-search-view .sp-noresults .callout, .sp-search-view noscript .callout { display: flex; }

/* 9. Footer ------------------------------------------------------------------------------------------------- */
.sp-foot { margin-top: 0; padding: 28px 0 36px; }
.sp-foot-links { font-size: 14px; }
.sp-foot-links a { color: var(--text); }
.sp-foot-links a:hover { color: var(--accent); }

/* 10. Responsive ------------------------------------------------------------------------------------------ */
@media (max-width: 1199px) {
  .sp-layout.sp-article.has-toc { grid-template-columns: 236px minmax(0, 1fr); gap: 48px; }
  .sp-toc { display: none; }
  .sp-links .sp-back { display: none; }
}
@media (max-width: 1080px) {
  .sp-layout, .sp-layout.sp-article.has-toc { grid-template-columns: 208px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 960px) {
  .sp-home-split { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 899px) {
  .sp-head .bar { flex-wrap: wrap; height: auto; padding-bottom: 10px; row-gap: 2px; }
  .sp-bar-row { display: flex; align-items: center; gap: 10px; width: 100%; height: var(--head-h); }
  .sp-bar-row .menu-btn { margin-left: auto; }
  .sp-search { flex: 1 1 100%; max-width: none; margin: 0; }
  .sp-search input { height: 44px; }
  .sp-links { display: none; }
  .sp-layout, .sp-layout.sp-article.has-toc { grid-template-columns: 1fr; gap: 40px; padding: 28px 0 64px; }
  .sp-side { position: static; max-height: none; overflow: visible; padding: 20px 0 0; border-top: 1px solid var(--line); order: 2; }
  .sp-side .kicker { padding: 0; }
  .sp-side li a { padding-left: 0; padding-right: 0; border-radius: 0; }
  .sp-side li a[aria-current="page"] { background: none; }
  .sp-side-back { padding: 0; }
  .sp-hero { padding: 48px 0 40px; }
  .sp-search-page { padding: 28px 0 64px; }
}
@media (max-width: 640px) {
  .sp-hero { padding: 36px 0 32px; text-align: left; }
  .sp-hero .lead { margin: 12px 0 20px; }
  .sp-search-lg { margin: 0; }
  .sp-search-lg input { height: 52px; font-size: 16px; }
  .sp-popular { grid-template-columns: 1fr; }
  .sp-related ul, .sp-browse-list { grid-template-columns: 1fr; }
  .sp-feedback { padding: 16px; }
  .sp-fb-ask { gap: 10px 16px; }
  .sp-fb-ask .row .btn { min-height: 40px; }
  .sp-fb-more .row .btn { min-height: 44px; }
  .sp-body { font-size: 16px; }
  .sp-body h2 { font-size: 21px; margin-top: 36px; }
  .sp-body ol.steps li { padding-left: 36px; }
  .sp-crumbs ol { margin-bottom: 16px; }
  .sp-crumbs li:last-child { flex-basis: 100%; margin-top: 2px; }
  .sp-crumbs li:last-child::before { content: none; }
  .sp-foot { padding: 24px 0 32px; }
}