/*
 * Smoke's help site.
 *
 * **Class names are tocc's, the palette is Smoke's.** The layouts came from tocc-help because they
 * already work — breadcrumbs, per-category lists, prev/next between topics — so the markup contract
 * is theirs and this is the part that has to look like this product rather than that one.
 *
 * Quiet, like the product: ash and one accent. No heat except where something is wrong.
 */
:root{
  --ink:#262320; --muted:#6b645a; --faint:#a8a196;
  --rule:#e3e0d9; --bg:#faf9f7; --card:#fff; --ember:#c2703c;
}
@media (prefers-color-scheme:dark){
  :root{ --ink:#f2f0ec; --muted:#a8a196; --faint:#857e73;
         --rule:#3a352f; --bg:#1c1b19; --card:#232220; }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ember)}

/* header ------------------------------------------------------------------ */
.help-header{border-bottom:1px solid var(--rule)}
.help-header-inner,.help-main,.help-footer-inner{max-width:46rem;margin:0 auto;padding:0 1.25rem}
.help-header-inner{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-top:1.25rem;padding-bottom:1.25rem}
.help-logo{font-weight:500;text-decoration:none;color:var(--ink)}
.help-logo .slash,.help-logo .suffix{color:var(--faint);font-weight:400}
.help-nav{display:flex;gap:1.25rem}
.help-nav-link{color:var(--faint);text-decoration:none;font-size:.875rem}
.help-nav-link:hover{color:var(--ink)}

/* type -------------------------------------------------------------------- */
.help-main{padding-top:2.5rem;padding-bottom:4rem}
.help-page-title,.help-article-title{font-size:1.9rem;line-height:1.15;letter-spacing:-.02em;font-weight:500;margin:0}
.help-tagline{color:var(--muted);margin:.6rem 0 2.5rem;max-width:38rem}
.help-content h2{font-size:1.05rem;font-weight:500;margin:2.25rem 0 .6rem}
.help-content h3{font-size:1rem;font-weight:500;margin:1.75rem 0 .4rem}
.help-content :is(ul,ol){padding-left:1.25rem}
.help-content li{margin:.35rem 0}
.help-content code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875em}
.help-content blockquote{margin:1.5rem 0;padding-left:1rem;border-left:2px solid var(--rule);color:var(--muted)}
/* Wide content scrolls inside itself; the page never scrolls sideways. */
.help-content table{border-collapse:collapse;width:100%;margin:1.5rem 0;font-size:.9375rem;display:block;overflow-x:auto}
.help-content :is(th,td){text-align:left;padding:.5rem .75rem .5rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
.help-content th{font-weight:500;color:var(--muted);font-size:.8125rem}

/* breadcrumb -------------------------------------------------------------- */
.help-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0 0 1rem;font-size:.8125rem;color:var(--faint)}
.help-breadcrumb li+li::before{content:"·";margin-right:.4rem;color:var(--rule)}
.help-breadcrumb a{color:var(--faint);text-decoration:none}
.help-breadcrumb a:hover{color:var(--ink)}

/* the category grid on the index ----------------------------------------- */
.help-category-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:34rem){.help-category-grid{grid-template-columns:1fr 1fr}}
.help-category-card{display:block;padding:1.1rem 1.25rem;border:1px solid var(--rule);border-radius:4px;background:var(--card);text-decoration:none;color:var(--ink)}
.help-category-card:hover{border-color:var(--faint)}
.help-category-title{font-size:1.0625rem;font-weight:500;margin:0}
.help-category-count{font-size:.8125rem;color:var(--faint);margin:.15rem 0 .6rem}
.help-category-preview{list-style:none;padding:0;margin:0;font-size:.875rem;color:var(--muted)}
.help-category-preview li{margin:.2rem 0}
.help-more{color:var(--faint)}

/* a category's topic list ------------------------------------------------- */
.help-topic-list{list-style:none;padding:0;margin:1.5rem 0 0;border-top:1px solid var(--rule)}
.help-topic-item{border-bottom:1px solid var(--rule)}
.help-topic-link{display:block;padding:.85rem 0;text-decoration:none;color:var(--ink)}
.help-topic-link:hover .help-topic-title{color:var(--ember)}
.help-topic-title{font-size:1.0625rem;font-weight:500;margin:0}
.help-topic-description{font-size:.875rem;color:var(--faint);margin:.15rem 0 0}

/* prev / next ------------------------------------------------------------- */
.help-topic-nav{display:flex;justify-content:space-between;gap:1.5rem;margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.help-topic-nav a{display:block;max-width:16rem;text-decoration:none}
.help-topic-nav-next{text-align:right;margin-left:auto}
.help-topic-nav-label{display:block;font-size:.75rem;color:var(--faint)}
.help-topic-nav-title{display:block;font-size:.9375rem;color:var(--ink)}
.help-topic-nav a:hover .help-topic-nav-title{color:var(--ember)}

/* footer ------------------------------------------------------------------ */
.help-footer{border-top:1px solid var(--rule);margin-top:2rem}
.help-footer-inner{padding-top:2rem;padding-bottom:3rem;font-size:.8125rem;color:var(--faint)}
.help-footer a{color:var(--faint);text-decoration:none}
.help-footer a:hover{color:var(--ink)}
.help-footer-sep{margin:0 .5rem}