/* A public help site (layouts/help_site): our own base for Help Scout Docs' markup, written to give the
   same results as Help Scout's own base, so each site's stylesheet (Site#stylesheet_url), which comes after
   this one and was written over Help Scout's base, looks the same here as it does there.

   The values are measured from Help Scout's live pages (Oct 2026), with each site's stylesheet taken off.
   So is each rule's weight: a rule here uses the selector Help Scout's base (Bootstrap 2 underneath) uses
   for it, so a site's rule beats it, or loses to it, exactly as it does there. That's why some properties
   of one element sit in two rules (the article title's size is overridable by `.contentWrapper h1`, its
   margin isn't), and why sizes that Help Scout gives in em are in em here. Boxes are content-box, as
   Help Scout's are, except the two columns, which Bootstrap's grid makes border-box.

   :where(.help-site) scopes every rule to a help site's page without adding any weight (Propshaft serves
   this file to the rep app too). Colours from the site's settings arrive as --site-*
   (HelpSitesHelper#help_site_colors). */

:where(.help-site) {
  --site-header: #2c323d;
  --site-nav: #c0c0c0;
  --site-nav-active: #ffffff;
  --site-link: #4381b5;
  --site-text: #585858;
  --site-background: #ffffff;
}

/* Elements. */
body:where(.help-site) { margin: 0; background: var(--site-background); color: #333; font: 12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; }
:where(.help-site) a { color: var(--site-link); text-decoration: none; }
:where(.help-site) a:hover { text-decoration: underline; }
:where(.help-site) h1, :where(.help-site) h2, :where(.help-site) h3, :where(.help-site) h4 { margin: 9px 0; color: inherit; font-weight: 700; }
:where(.help-site) h1 { font-weight: 400; }
:where(.help-site) p { margin: 0 0 9px; }
:where(.help-site) ul, :where(.help-site) ol { margin: 0 0 9px 25px; padding: 0; }
:where(.help-site) img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
:where(.help-site) input, :where(.help-site) button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
:where(.help-site) .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* The header: the logo on the left, the collections at the bottom right. */
:where(.help-site) .container-fluid { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
:where(.help-site) .container-fluid::after { content: ""; display: table; clear: both; }
:where(.help-site) .navbar-inner { padding: 0 20px; background: var(--site-header); box-shadow: 0 1px 4px rgb(0 0 0 / 0.067); }
:where(.help-site) .navbar .container-fluid { padding: 0; }
:where(.help-site) .navbar .brand { display: block; float: left; padding: 31px 20px 11px 0; color: var(--site-nav-active); font-size: 20px; font-weight: 200; line-height: 32px; }
:where(.help-site) .navbar .brand:hover { text-decoration: none; }
:where(.help-site) .navbar .brand img { max-height: 75px; width: auto; }
:where(.help-site) .navbar .nav { position: absolute; right: 0; bottom: 0; display: block; float: left; margin: 0; list-style: none; }
:where(.help-site) .navbar .nav > li { display: inline-block; }
:where(.help-site) .navbar .nav > li > a { display: block; padding: 11px 15px; color: var(--site-nav); font-size: 13.2px; line-height: 32px; }
:where(.help-site) .navbar .nav > li > a:hover { color: var(--site-nav-active); text-decoration: none; }
:where(.help-site) .navbar .nav > .active > a { position: relative; color: var(--site-nav-active); font-weight: 700; }
:where(.help-site) .navbar .nav .caret { display: none; }
:where(.help-site) .navbar .btn-navbar { display: none; }
/* Contact (a site with Outpost): Help Scout's two header links and the one under an article. Sites'
   stylesheets decide whether to show them; Basecamp 5's hides them, HEY's makes the header one a button. */
:where(.help-site) #contact { display: inline-block; }
:where(.help-site) #contactMobile { display: none; }
:where(.help-site) .articleFoot .help { float: left; margin: 0; }
:where(.help-site) #sbContact { border-bottom: 1px solid; color: #a0a0a0; font-family: Georgia, "Times New Roman", Times, serif; }
:where(.help-site) .icon-contact { display: none; }

/* The search box: big under the header on the home page, small in the sidebar. */
:where(.help-site) #docsSearch { margin: 0 0 36px; padding: 18px 0; border-bottom: 1px solid #ddd; background: #f5f5f5; text-align: center; }
:where(.help-site) #docsSearch h1 { margin: 12.8px 0 9px; font-size: 32px; line-height: 36px; }
:where(.help-site) #searchBar { position: relative; width: 620px; margin: 0 auto; padding: 24px 0; text-align: center; }
:where(.help-site) #searchBar.sm { width: auto; margin: 0 0 30px; padding: 0; }
:where(.help-site) #docsSearch .search-query { display: inline-block; box-sizing: border-box; width: 100%; height: 50px; padding: 4px 14px; border: 1px solid rgb(106 155 208 / 0.7); border-radius: 5px; background: #fff; box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.075), 0 0 4px rgb(106 155 208 / 0.4); color: #555; font-size: 18px; line-height: 22px; }
:where(.help-site) #docsSearch button { position: absolute; top: 24px; right: 0; height: 50px; padding: 0 27px; border: 1px solid #407fb3; border-radius: 0 5px 5px 0; background: #4f92ca; color: #fff; font-size: 18px; line-height: 18px; cursor: pointer; }
:where(.help-site) #docsSearch .icon-search { display: none; }
:where(.help-site) #sidebar .search-query { display: block; box-sizing: border-box; width: 100%; height: 40px; padding: 4px 35px 4px 14px; border: 1px solid #d0d0d0; border-radius: 3px; background: #fff; box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.075); color: #666; font-size: 14px; line-height: 18px; }
:where(.help-site) #sidebar button { position: absolute; top: 0; right: 0; width: 40px; height: 40px; padding: 0; border: 0; color: #fff; font-size: 18px; line-height: 16px; cursor: pointer; }
:where(.help-site) #sidebar #searchBar button { background: transparent; }
:where(.help-site) .icon-search { display: inline-block; width: 16px; height: 16px; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* The page under the header: the article (or list) on the right, the sidebar on the left. */
:where(.help-site) #contentArea { position: relative; }
:where(.help-site) .row-fluid::after { content: ""; display: table; clear: both; }
:where(.help-site) .row-fluid .span9, :where(.help-site) .row-fluid .span3 { box-sizing: border-box; }
:where(.help-site) .row-fluid .span9 { width: 74.358%; }
:where(.help-site) .row-fluid .span3 { width: 23.077%; }
:where(.help-site) #main-content { float: right; margin: 0 0 24px; padding: 32px 0 0 28px; }
:where(.help-site) .row-fluid > #main-content:only-child { float: none; width: auto; padding-left: 0; }
:where(.help-site) .contentWrapper { position: relative; padding: 45px 46px; border: 1px solid #e9e5e5; background: #fff; color: #222; }
:where(.help-site) .contentWrapper.withRelated { padding-bottom: 30px; }
:where(.help-site) .contentWrapper h1 { margin: 0 0 9px; color: #222; font-size: 30px; line-height: 36px; }
:where(.help-site) #sidebar { float: left; margin: 32px 0 0; }
:where(.help-site) #sidebar h3 { margin: 9px 0 4px; color: #222; font-size: 12px; line-height: 36px; text-transform: uppercase; }
:where(.help-site) .nav-list { margin: 0 0 34px; list-style: none; }
:where(.help-site) .nav-list > li { margin: 2px 0 3px; }
:where(.help-site) .nav-list > li > a { position: relative; display: inline-block; margin-right: -15px; padding: 6px 15px 6px 0; color: #858585; font-size: 13.2px; line-height: 20px; }
:where(.help-site) #sidebar .nav-list .active a { color: #222; font-weight: 700; }
:where(.help-site) .icon-article-doc, :where(.help-site) .icon-arrow { display: none; }
:where(.help-site) .nav-list .active .icon-arrow { position: absolute; top: 50%; right: 2px; display: block; width: 8px; height: 8px; margin-top: -4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' fill='none' stroke='%23999' stroke-width='1.5'%3E%3Cpath d='m2.5 1 3 3-3 3'/%3E%3C/svg%3E") center / contain no-repeat; }

/* The article, at #fullArticle's weight, as Help Scout's are. */
:where(.help-site) #fullArticle { color: var(--site-text); font-size: 14px; line-height: 1.55; }
:where(.help-site) #fullArticle .title { margin: 0 30px 0.5em 0; }
:where(.help-site) #fullArticle p { margin: -4px 0 1.5em; }
:where(.help-site) #fullArticle h2 { margin: 9px 0 0.65em; color: #222; font-size: 24px; line-height: 32px; }
:where(.help-site) #fullArticle h3 { margin: 9px 0 0.65em; color: #222; font-size: 21px; line-height: 28px; }
:where(.help-site) #fullArticle h4 { margin: 9px 0 0.65em; color: #222; font-size: 17px; line-height: 24px; }
:where(.help-site) #fullArticle ul, :where(.help-site) #fullArticle ol { margin-bottom: 1.5em; }
:where(.help-site) #fullArticle li { margin: 0 0 10px; }
:where(.help-site) #fullArticle img { display: block; margin: 1em 0 2em; padding: 4px; border: 1px solid #d6d6d6; border-radius: 4px; }
:where(.help-site) #fullArticle code { padding: 2px 4px; border: 1px solid #e1e1e8; border-radius: 3px; background: #f7f7f9; color: #d14; font: 12px Monaco, Menlo, Consolas, "Courier New", monospace; }
:where(.help-site) #fullArticle pre { margin: 0 0 1.5em; padding: 9.5px; overflow-x: auto; border: 1px solid rgb(0 0 0 / 0.15); border-radius: 4px; background: #f5f5f5; font: 12px/18px Monaco, Menlo, Consolas, "Courier New", monospace; white-space: pre; }
:where(.help-site) #fullArticle pre code { padding: 0; border: 0; background: none; color: inherit; }
:where(.help-site) #fullArticle blockquote { margin: 0 0 1.5em; padding: 0 0 0 15px; border-left: 5px solid #eee; }
:where(.help-site) #fullArticle table { width: 100%; margin: 0 0 1.5em; border-collapse: collapse; }
:where(.help-site) #fullArticle th, :where(.help-site) #fullArticle td { padding: 8px; border: 1px solid #ddd; text-align: left; vertical-align: top; }
:where(.help-site) #fullArticle th { background: #f5f5f5; font-weight: 700; }
:where(.help-site) #fullArticle .printArticle { position: absolute; top: 53px; right: 46px; display: block; width: 16px; height: 22px; }
:where(.help-site) .icon-print { display: block; width: 16px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H4v-7h16v7h-3M7 14h10v7H7z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Related articles, in a panel joined to the article's bottom edge. */
:where(.help-site) .related { position: relative; padding: 25px 46px; border: 1px solid #e9e5e5; border-top: 0; background: #fff; }
:where(.help-site) .related h3 { margin: 0; color: #4d4d4d; font-size: 12px; font-weight: 700; line-height: 20px; text-transform: uppercase; }
:where(.help-site) .related ul { margin: 0 0 0 23px; padding: 8px 0 0; }
:where(.help-site) .related li { padding: 6px 0; list-style: none; }
:where(.help-site) .related a { margin-left: -24px; font-size: 16px; line-height: 24px; }
:where(.help-site) .articleFoot { margin: 48px 0 0; color: #222; }
:where(.help-site) .articleFoot::after { content: ""; display: table; clear: both; }
:where(.help-site) .articleFoot time.lu { float: right; margin: 2px 0 0; color: #a0a0a0; font-family: Georgia, "Times New Roman", Times, serif; }

/* Home and collection pages: each collection's categories as cards. */
:where(.help-site) .collection-category h2 { margin: 0 0 20px; padding-left: 0.26em; color: #333; font-size: 27px; font-weight: 400; line-height: 36px; }
:where(.help-site) .collection-category h2 a { color: #363636; }
:where(.help-site) .category-list { margin: 0 0 48px; text-align: left; }
:where(.help-site) .category-list .category { display: inline-block; width: 29%; margin: 0 0.8% 20px; padding: 18px 12px; border: 1px solid #e0e0e0; color: var(--site-link); text-align: center; vertical-align: top; }
:where(.help-site) .category-list .category:hover { text-decoration: none; }
:where(.help-site) .category-list h3 { color: #333; font-size: 20px; font-weight: 400; line-height: 26px; }
:where(.help-site) .category-list p { margin: 0 0 9px; color: #b3b3b3; font-size: 14px; }
:where(.help-site) .category-list .article-count { margin: 15px 0 9px; color: var(--site-link); }

/* A category's articles, and search results. */
:where(.help-site) .articlesFound { margin: -4px 0 21px; color: #8d8d8d; font-size: 14px; line-height: 1.55; }
:where(.help-site) .articleList { margin: 0 0 38px; color: #222; font-size: 15.6px; list-style: none; }
:where(.help-site) .articleList li { margin: 1.4em 0; }
:where(.help-site) .contentWrapper .articleList li { padding-left: 25px; }
:where(.help-site) .articleList a { display: inline-block; margin: 0 0 5px -24px; color: var(--site-link); }
:where(.help-site) .contentWrapper .articleList a { margin-bottom: 5px; font-size: 18px; line-height: 27px; }
:where(.help-site) .articleList p { margin: -4px 0 21px; color: var(--site-text); font-size: 14px; line-height: 1.55; }

:where(.help-site) footer p { margin: 0 0 32.4px; color: #9b9b9b; font-size: 10.8px; text-align: right; }
:where(.help-site) footer a { color: #9b9b9b; }
:where(.help-site) #docsSearch ~ #contentArea footer p { text-align: center; }

/* A phone: one column, and the collections behind a menu button, as Help Scout does it. */
@media (max-width: 767px) {
  :where(.help-site) .navbar .btn-navbar { display: block; float: right; margin: 34px 0 0; padding: 7px 10px; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 4px; background: transparent; cursor: pointer; }
  :where(.help-site) .navbar .icon-bar { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--site-nav-active); }
  :where(.help-site) .navbar .icon-bar + .icon-bar { margin-top: 3px; }
  :where(.help-site) .nav-collapse { clear: both; overflow: hidden; height: 0; }
  :where(.help-site) .nav-collapse.in { height: auto; }
  :where(.help-site) .navbar .nav { position: static; margin: 0 0 10px; }
  :where(.help-site) .navbar .nav > li { display: block; }
  :where(.help-site) .navbar .nav > li > a { padding: 6px 0; }
  :where(.help-site) #contact { display: none; }
  :where(.help-site) #contactMobile { display: block; }
  :where(.help-site) .row-fluid .span9, :where(.help-site) .row-fluid .span3 { float: none; width: auto; padding-left: 0; }
  :where(.help-site) .contentWrapper { padding: 24px 20px; }
  :where(.help-site) .category-list .category { display: block; box-sizing: border-box; width: auto; margin: 0 0 16px; }
  :where(.help-site) #searchBar { width: auto; margin: 0 16px; }
  :where(.help-site) #searchBar.sm { margin: 0 0 30px; }
  :where(.help-site) #docsSearch h1 { font-size: 24px; line-height: 30px; }
  :where(.help-site) #docsSearch .search-query { font-size: 16px; }
  :where(.help-site) #docsSearch button { padding: 0 16px; font-size: 16px; }
}

/* Callouts, Help Scout's own (ArticlesHelper#render_callout writes their markup on a help site). Green
   isn't on any page measured; it follows the others. */
:where(.help-site) #fullArticle .callout-yellow, :where(.help-site) #fullArticle .callout-blue,
:where(.help-site) #fullArticle .callout-green, :where(.help-site) #fullArticle .callout-red { margin: 0 0 28px; padding: 16px 25px 16px 20px; font-size: 14px; border-left: 5px solid #e7dca4; background: #fffcd5; color: #333; }
:where(.help-site) #fullArticle .callout-blue { border-left-color: #bed1e6; background: #e8f4ff; }
:where(.help-site) #fullArticle .callout-green { border-left-color: #b5d9a8; background: #e5fadc; }
:where(.help-site) #fullArticle .callout-red { border-left-color: #e7aaaa; background: #fde8e8; }
:where(.help-site) #fullArticle .callout-yellow p, :where(.help-site) #fullArticle .callout-blue p,
:where(.help-site) #fullArticle .callout-green p, :where(.help-site) #fullArticle .callout-red p { margin: -4px 0 0; color: var(--site-text); font-size: inherit; }

/* Our own pieces, which Help Scout has no markup for: tables' scrolling, tabs and videos. They sit in
   #fullArticle, so they're written to outrank its rules for p, ul, li and img. */
:where(.help-site) #fullArticle .article-body__table { margin: 0 0 1.5em; overflow-x: auto; }
:where(.help-site) #fullArticle .article-body__table table { margin: 0; }

:where(.help-site) #fullArticle .article-tabs { margin: 0 0 1.5em; border: 1px solid #ddd; border-radius: 6px; }
:where(.help-site) #fullArticle .article-tabs__bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 6px 0; border-bottom: 1px solid #ddd; }
:where(.help-site) #fullArticle .article-tabs__radio { position: absolute; opacity: 0; pointer-events: none; }
:where(.help-site) #fullArticle .article-tabs__bar label { margin-bottom: -1px; padding: 8px 14px; border: 1px solid transparent; border-radius: 6px 6px 0 0; color: #777; cursor: pointer; }
:where(.help-site) #fullArticle .article-tabs__radio:checked + label { border-color: #ddd; border-bottom-color: #fff; background: #fff; color: #222; font-weight: 700; }
:where(.help-site) #fullArticle .article-tabs__radio:focus-visible + label { outline: 2px solid var(--site-link); }
:where(.help-site) #fullArticle .article-tabs__panel { display: none; padding: 18px 18px 0; }
:where(.help-site) #fullArticle .article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(1):checked) > .article-tabs__panel:nth-of-type(1),
:where(.help-site) #fullArticle .article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(2):checked) > .article-tabs__panel:nth-of-type(2),
:where(.help-site) #fullArticle .article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(3):checked) > .article-tabs__panel:nth-of-type(3),
:where(.help-site) #fullArticle .article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(4):checked) > .article-tabs__panel:nth-of-type(4),
:where(.help-site) #fullArticle .article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(5):checked) > .article-tabs__panel:nth-of-type(5),
:where(.help-site) #fullArticle .article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(6):checked) > .article-tabs__panel:nth-of-type(6),
:where(.help-site) #fullArticle .article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(7):checked) > .article-tabs__panel:nth-of-type(7),
:where(.help-site) #fullArticle .article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(8):checked) > .article-tabs__panel:nth-of-type(8) { display: block; }

/* A video, as basecamp.com/learn shows them: its cover (VideoCover, from this site), a light shade and a
   white play button in the middle. The provider's player takes the cover's place once pressed. */
:where(.help-site) #fullArticle .video { margin: 1em 0 2em; }
:where(.help-site) #fullArticle .video__play, :where(.help-site) #fullArticle .video--playing iframe { position: relative; display: grid; place-items: center; box-sizing: border-box; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: 8px; }
:where(.help-site) #fullArticle .video__play { background: linear-gradient(135deg, color-mix(in srgb, var(--site-link) 55%, #1d1d1f), #1d1d1f); }
:where(.help-site) #fullArticle .video__play::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(0 0 0 / 0.075); transition: background 0.15s; }
:where(.help-site) #fullArticle .video__play:hover::before { background: rgb(0 0 0 / 0.15); }
:where(.help-site) #fullArticle .video__play:focus-visible { outline: 3px solid var(--site-link); outline-offset: 3px; }
:where(.help-site) #fullArticle .video__cover { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; object-fit: cover; }
:where(.help-site) #fullArticle .video__button {
  position: relative; z-index: 2; width: clamp(48px, 12%, 72px); aspect-ratio: 1; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='%231d1d1f'/%3E%3C/svg%3E") 56% 50% / 42% no-repeat;
  box-shadow: 0 2px 18px -13px rgb(0 0 0 / 0.1), 0 4px 20px -15px rgb(0 0 0 / 0.2), 0 7px 22px -17px rgb(0 0 0 / 0.3), 0 9px 24px -19px rgb(0 0 0 / 0.4), 0 11px 26px -21px rgb(0 0 0 / 0.5);
  transition: transform 0.15s;
}
:where(.help-site) #fullArticle .video__play:hover .video__button { transform: scale(1.08); }
:where(.help-site) #fullArticle .video figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 10px; }
:where(.help-site) #fullArticle .video__title { color: #222; font-weight: 700; }
:where(.help-site) #fullArticle .video__provider { color: #8d8d8d; font-size: 13px; }

/* A preview of a draft, inside the rep app (Articles::PreviewsController): a note at the top, and links
   that go nowhere, since the site's pages aren't at these addresses. */
.help-site-preview { margin: 0; padding: 10px 16px; background: #fff6d6; color: #4a3f17; font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif; text-align: center; }
.help-site-preview a { color: inherit; text-decoration: underline; }
.help-site--preview #mainNav a, .help-site--preview #sidebar a, .help-site--preview #sidebar button, .help-site--preview #fullArticle a:not(.video__play), .help-site--preview footer a, .help-site--preview .contactUs { pointer-events: none; }