/* Help center (/help): layout for the hub, the category pages and the articles.
   Type sizes come from the roles in landing.css (the help selectors are listed there);
   this file sets layout, spacing and color only. */

.help-page{padding-top:clamp(120px,15vh,152px);padding-bottom:var(--section)}
.help{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--space-6);align-items:start}
@media (min-width:1024px){.help{grid-template-columns:240px minmax(0,1fr);column-gap:var(--space-8)}}

/* ---------- sidebar: search, then the categories with the current one open ---------- */
.help-side{min-width:0}
.help-nav > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;border:1px solid var(--hairline-strong);border-radius:var(--r-pill);background:var(--surface);color:var(--ink)}
.help-nav > summary::-webkit-details-marker{display:none}
.help-nav > summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform var(--dur-ui) var(--ease)}
.help-nav[open] > summary{margin-bottom:var(--space-4)}
.help-nav[open] > summary::after{transform:translateY(2px) rotate(225deg)}
/* the sidebar itself never scrolls or clips, so the search hits can spread over the article;
   only the list of categories under the field scrolls */
@media (min-width:1024px){
  .help-side{position:sticky;top:112px;z-index:20;padding:2px 0 0 2px}
  .help-side nav{max-height:calc(100vh - 212px);overflow:auto;overscroll-behavior:contain;padding-right:var(--space-2);padding-bottom:var(--space-6);
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent)}
  .help-nav > summary{display:none}
}
/* the scrolling lists (tree, contents, search hits): a thin scrollbar that shows only while
   the pointer is over the list, instead of the wide grey Windows bar */
.help-side nav,.help-toc,.help-results{scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-gutter:stable}
.help-side nav:hover,.help-side nav:focus-within,.help-toc:hover,.help-toc:focus-within,.help-results:hover{
  scrollbar-color:var(--hairline-strong) transparent}
.help-side nav::-webkit-scrollbar,.help-toc::-webkit-scrollbar,.help-results::-webkit-scrollbar{width:6px}
.help-side nav::-webkit-scrollbar-thumb,.help-toc::-webkit-scrollbar-thumb,.help-results::-webkit-scrollbar-thumb{
  background:transparent;border-radius:3px}
.help-side nav:hover::-webkit-scrollbar-thumb,.help-toc:hover::-webkit-scrollbar-thumb,.help-results:hover::-webkit-scrollbar-thumb{
  background:var(--hairline-strong)}

/* the tree: help home, then every category; the chevron folds a category, its name opens it */
.help-side nav{margin-top:var(--space-5)}
.help-home{display:block;padding:5px 0 5px 24px;color:var(--ink-2);transition:color var(--dur-micro) var(--ease)}
.help-home:hover{color:var(--ink)}
.help-home[aria-current]{color:var(--burgundy)}
.help-cats{display:grid;gap:2px;margin-top:2px}
.help-cat > details > summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer}
.help-cat > details > summary::-webkit-details-marker{display:none}
.help-cat__chev{flex:none;display:grid;place-items:center;width:16px;height:16px;border-radius:var(--r-xs);color:var(--ink-3);
  transition:color var(--dur-micro) var(--ease),background-color var(--dur-micro) var(--ease)}
.help-cat__chev::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateX(-1px) rotate(-45deg);transition:transform var(--dur-ui) var(--ease)}
.help-cat > details[open] > summary .help-cat__chev::before{transform:translateY(-1px) rotate(45deg)}
.help-cat > details > summary:hover .help-cat__chev{color:var(--ink);background:var(--paper-2)}
.help-cat__t{display:block;flex:1;min-width:0;padding:5px 0;color:var(--ink);transition:color var(--dur-micro) var(--ease)}
.help-cat__t:hover,.help-cat__t[aria-current]{color:var(--burgundy)}
.help-cat.is-current .help-cat__chev{color:var(--burgundy)}
.help-cat ul{margin:2px 0 var(--space-3) 7px;border-left:1px solid var(--hairline)}
.help-cat ul a{display:block;padding:5px 0 5px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--ink-2);
  transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
.help-cat ul a:hover{color:var(--ink)}
.help-cat ul a[aria-current]{color:var(--burgundy);border-left-color:var(--burgundy)}

/* ---------- search: a field, and the hits under it ---------- */
.help-search{position:relative}
.help-search:focus-within{z-index:40}
.help-search__f{position:relative;display:block}
.help-search__f .ph{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.help-search input{width:100%;height:48px;padding:0 16px 0 44px;border:1px solid var(--hairline-strong);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color var(--dur-micro) var(--ease)}
.help-search input::placeholder{color:var(--ink-3)}
.help-search input:focus{outline:none;border-color:var(--ink)}
.help-search input:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
.help-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.help-search--hub{max-width:560px;margin:0 auto}
.help-search--hub input{height:56px;padding-left:48px}
.help-search--hub .help-search__f .ph{left:18px}
.help-results{position:absolute;left:0;top:calc(100% + 8px);z-index:30;width:100%;max-height:min(60vh,480px);overflow:auto;
  background:var(--surface);border:1px solid var(--hairline-strong);border-radius:var(--r-md);box-shadow:var(--shadow-card);text-align:left}
@media (min-width:1024px){.help-side .help-results{width:420px}}
.help-hit{display:grid;gap:2px;padding:12px 16px;border-top:1px solid var(--hairline-soft);color:var(--ink)}
.help-hit:first-child{border-top:0}
.help-hit:hover,.help-hit:focus-visible,.help-hit.is-on{background:var(--paper-2);outline:none}
.help-hit__c{color:var(--ink-3)}
.help-hit__c span{margin:0 4px}
.help-hit__s{color:var(--ink-2)}
.help-hits__k{padding:12px 16px 4px;color:var(--ink-3)}
.help-hit mark{background:var(--burgundy-tint);color:inherit;border-radius:2px;padding:0 1px}
.help-empty{padding:14px 16px;color:var(--ink-2)}
.help-empty a{color:var(--burgundy)}

/* ---------- article: header, on this page, body, footer; the contents take a third column from 1180 ---------- */
.help-doc{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.help-head,.help-body,.help-foot{max-width:68ch;min-width:0}
.help-head .crumb{margin-bottom:var(--space-5);flex-wrap:wrap}
.help-h1{margin:0 0 var(--space-5);color:var(--ink)}
.help-head p{color:var(--ink-2);margin-bottom:var(--space-3)}
.help-head .help-lede{color:var(--ink)}
.help-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--hairline)}
.help-head .help-meta{color:var(--ink-3);margin-bottom:0}
.help-meta > span + span::before{content:"";display:inline-block;width:1px;height:11px;margin:0 14px;background:var(--hairline-strong);vertical-align:-1px}
.help-meta .help-plan{color:var(--burgundy)}
@media (max-width:719px){.help-meta{column-gap:16px}.help-meta > span + span::before{display:none}}

.help-toc{margin-top:var(--space-6);padding-left:var(--space-4);border-left:1px solid var(--hairline)}
.help-toc > summary{list-style:none;cursor:pointer;color:var(--ink-3);padding:2px 0;display:flex;align-items:center;gap:10px}
.help-toc > summary::-webkit-details-marker{display:none}
.help-toc > summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform var(--dur-ui) var(--ease)}
.help-toc[open] > summary::after{transform:translateY(1px) rotate(225deg)}
.help-toc ul{display:grid;gap:2px;margin-top:var(--space-3)}
.help-toc ul ul{margin:2px 0 4px;padding-left:var(--space-3)}
.help-toc a{display:block;padding:3px 0;color:var(--ink-2);transition:color var(--dur-micro) var(--ease)}
.help-toc a:hover{color:var(--ink)}
.help-toc a.is-on{color:var(--burgundy)}
@media (min-width:1180px){
  .help-doc{grid-template-columns:minmax(0,68ch) 200px;column-gap:var(--space-8);justify-content:space-between}
  .help-head{grid-column:1;grid-row:1}
  .help-body{grid-column:1;grid-row:2}
  .help-foot{grid-column:1;grid-row:3}
  .help-toc{grid-column:2;grid-row:1 / span 3;align-self:start;position:sticky;top:112px;margin-top:0;
    max-height:calc(100vh - 132px);overflow:auto}
  .help-toc > summary{pointer-events:none;cursor:default}
  .help-toc > summary::after{display:none}
  .help-doc--cat{grid-template-columns:minmax(0,1fr)}
  .help-doc--cat .help-list{grid-column:1;grid-row:2}
}

.help-body{margin-top:var(--space-4)}
.help-body h2{margin:var(--space-8) 0 var(--space-4);color:var(--ink);scroll-margin-top:112px}
.help-body > h2:first-child{margin-top:var(--space-7)}
.help-body h3{margin:var(--space-6) 0 var(--space-3);color:var(--ink);scroll-margin-top:112px}
.help-body p{margin:0 0 var(--space-4)}
.help-body ul,.help-body ol{margin:0 0 var(--space-5);padding-left:1.4em}
.help-body ul{list-style:disc}
.help-body ol{list-style:decimal}
.help-body li{margin-top:6px;padding-left:4px}
.help-body li::marker{color:var(--ink-3)}
.help-body ol > li::marker{color:var(--burgundy);font-weight:600}
.help-body li > ul,.help-body li > ol{margin:6px 0 0}
.help-body strong{color:var(--ink)}
.help-body code{font:inherit;padding:1px 5px;border:1px solid var(--hairline);border-radius:var(--r-xs);background:var(--paper-2)}
.help-qa h3{margin-top:var(--space-6)}
.help-table{overflow-x:auto;margin:0 0 var(--space-5);border:1px solid var(--hairline);border-radius:var(--r-md)}
.help-table table{width:100%;border-collapse:collapse}
.help-table th,.help-table td{padding:10px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--hairline)}
.help-table thead th{border-top:0;background:var(--paper-2)}

.help-foot{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--hairline);display:grid;gap:var(--space-5)}
.help-pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.help-pn a{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--hairline);border-radius:var(--r-md);color:var(--ink);
  transition:border-color var(--dur-micro) var(--ease)}
.help-pn a:hover{border-color:var(--ink-3)}
.help-pn__next{grid-column:2;text-align:right}
.help-pn__k{color:var(--ink-3)}
.help-support{padding:var(--space-5) var(--space-6);border-radius:var(--r-lg);background:var(--paper-2)}
.help-support b{display:block;margin-bottom:var(--space-1);color:var(--ink)}
.help-support p{color:var(--ink-2)}
@media (max-width:719px){.help-pn{grid-template-columns:1fr}.help-pn__next{grid-column:1}}

/* ---------- category page: the articles as hairline rows ---------- */
.help-list{margin-top:var(--space-6);border-top:1px solid var(--hairline);max-width:88ch}
.help-row a{display:grid;gap:6px;padding:var(--space-5) 0;border-bottom:1px solid var(--hairline)}
.help-row__t{color:var(--ink);transition:color var(--dur-micro) var(--ease)}
.help-row a:hover .help-row__t{color:var(--burgundy)}
.help-row__d{color:var(--ink-2)}
.help-row__m{color:var(--ink-3)}
@media (min-width:720px){
  .help-row a{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-6)}
  .help-row__d{grid-column:1}
  .help-row__m{grid-column:2;grid-row:1}
}
.help-doc--cat .help-foot{border-top:0;padding-top:0}

/* ---------- hub: the article layout, opening with the search ---------- */
.help-doc--hub .help-search{margin:var(--space-6) 0 0;max-width:560px;position:relative;z-index:40}
.help-pop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:var(--space-4)}
.help-pop .meta{margin:0 4px 0 0}
.help-pop a{padding:5px 14px;border:1px solid var(--hairline-strong);border-radius:var(--r-pill);color:var(--ink-2);
  transition:border-color var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease)}
.help-pop a:hover{border-color:var(--ink-3);color:var(--ink)}
.help-steps > li{margin-top:var(--space-3)}
.help-go{color:var(--ink-3)}
.help-body h3 > a{color:inherit;transition:color var(--dur-micro) var(--ease)}
.help-body h3 > a:hover{color:var(--burgundy)}
.help-topic__d{color:var(--ink-2);margin-bottom:var(--space-2)!important}
.help-body kbd{font:inherit;padding:0 6px;border:1px solid var(--hairline-strong);border-bottom-width:2px;border-radius:var(--r-xs);background:var(--surface)}