/* =============================================
   SCL Help Center: custom Help Scout stylesheet
   =============================================
   Help Scout serves an uploaded copy from the site's styleSheetUrl. Edit it here, preview it with
   `npm run help:preview`, then upload it in the Docs site settings (help/README.md, "Site
   stylesheet"). It loads after Help Scout's own color block, so a rule with the same selector
   wins without !important.

   Colors follow the app's dark theme (app/src/index.css, `.dark`).

   Biome's noImportantStyles and noDescendingSpecificity are off for this folder (biome.json):
   overriding Help Scout's stylesheet takes !important where it uses it, and selectors that match
   Help Scout's own specificity. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --scl-bg: oklch(0.17 0.016 250);
  --scl-card: oklch(0.23 0.016 250);
  --scl-accent: oklch(0.28 0.018 250);
  --scl-border: oklch(0.33 0.022 250);
  --scl-fg: oklch(0.93 0.005 250);
  --scl-fg-body: oklch(0.86 0.008 250);
  --scl-muted: oklch(0.74 0.013 253);
  --scl-primary: oklch(0.55 0.18 246);
  --scl-brand: oklch(0.7 0.15 246);
  --scl-brand-hover: oklch(0.8 0.12 246);
  --scl-ring: oklch(0.63 0.19 259.69);
  --scl-radius: 10px;
}

/* ---- Global ---- */
html,
body {
  background: var(--scl-bg);
  color: var(--scl-fg-body);
  color-scheme: dark;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The app's main scrollbar: a 4px blue bar on mouse-driven browsers. Phones keep their native
   overlay scrollbar, which a styled one would replace with a permanent bar.
   Copied from app/src/index.css. */
@media (hover: hover) and (pointer: fine) {
  *::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  *::-webkit-scrollbar-thumb {
    background-color: var(--scl-primary);
    border-radius: 100px;
  }

  /* Firefox has no ::-webkit-scrollbar */
  @supports not selector(::-webkit-scrollbar) {
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--scl-primary) transparent;
    }
  }
}

::selection {
  background: oklch(0.55 0.18 246 / 0.4);
}

/* ---- Navbar ----
   Sticky, like the app's header. The app shows a line under it only once content scrolls under
   it (a scroll listener in main-layout.tsx). Here a scroll-driven animation does the same in CSS.
   Browsers without animation-timeline (Firefox today) get the sticky header without the line. */
#mainNav {
  position: sticky;
  top: 0;
  z-index: 1000;
}

html {
  scroll-padding-top: 72px;
}

@keyframes scl-header-divider {
  to {
    border-bottom-color: var(--scl-border);
  }
}

@supports (animation-timeline: scroll()) {
  .navbar .navbar-inner {
    animation: scl-header-divider linear both;
    animation-timeline: scroll(root);
    animation-range: 0 8px;
  }
}

.navbar {
  margin-bottom: 0;
}

.navbar .navbar-inner {
  background: var(--scl-bg);
  font-family: "Inter", sans-serif;
  border: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
}

.navbar .brand {
  padding-top: 16px;
  padding-bottom: 16px;
}

.navbar .brand img {
  max-height: 28px;
  width: auto;
}

.navbar .nav {
  top: 8px;
}

.navbar .btn-navbar {
  top: 8px;
}

.navbar .nav li a,
.navbar .icon-private-w {
  color: var(--scl-muted);
}

.navbar .nav li a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}

.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus,
.navbar .nav li a:hover,
.navbar .nav li a:focus {
  color: var(--scl-fg) !important;
}

.navbar .nav .active .caret {
  display: none !important;
}

.navbar .btn-navbar .icon-bar {
  background-color: var(--scl-muted);
}

/* The last link ends flush with the content's right edge, as the logo starts flush with its left */
@media (min-width: 769px) {
  .navbar .nav #contact a {
    padding-right: 0;
  }
}

/* ---- Phone menu, opened from the hamburger ----
   Left-aligned rows like the app's mobile sidebar, a line under the header while the menu is open,
   and the hamburger turns into an X. Help Scout's Bootstrap adds .in to .nav-collapse when open,
   and .collapsing while it animates. */
@media (max-width: 768px) {
  .navbar .nav-collapse {
    background: var(--scl-bg);
  }

  .navbar-inner:has(.nav-collapse.in),
  .navbar-inner:has(.nav-collapse.collapsing) {
    border-bottom-color: var(--scl-border);
  }

  /* Rows reach 12px past the gutter so their text lines up with the logo */
  .navbar .nav-collapse .nav {
    margin: 4px -12px 12px;
    text-align: left;
  }

  .navbar .nav-collapse .nav > li {
    display: block;
    float: none;
  }

  .navbar .nav-collapse .nav > li#contact {
    display: none;
  }

  .navbar .nav-collapse .nav li a {
    display: block;
    margin: 0;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    box-shadow: none;
    font-size: 16px;
    text-align: left;
  }

  .navbar .nav-collapse .nav li a:hover,
  .navbar .nav-collapse .nav li a:focus-visible {
    background: var(--scl-card);
  }

  .navbar .nav-collapse .nav .active a {
    background: var(--scl-card);
    color: var(--scl-brand) !important;
  }

  /* 44px tap target around the same 18px bars */
  .navbar .btn-navbar {
    width: 44px;
    height: 44px;
    margin: 4px -13px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: none;
  }

  .navbar .btn-navbar .icon-bar {
    background-color: var(--scl-fg);
    box-shadow: none;
    transition:
      transform 200ms ease-out,
      opacity 150ms ease-out;
  }

  #mainNav:has(.nav-collapse.in) .btn-navbar .icon-bar:nth-child(2) {
    transform: translateY(5px) rotate(45deg);
  }

  #mainNav:has(.nav-collapse.in) .btn-navbar .icon-bar:nth-child(3) {
    opacity: 0;
  }

  #mainNav:has(.nav-collapse.in) .btn-navbar .icon-bar:nth-child(4) {
    transform: translateY(-5px) rotate(-45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar .btn-navbar .icon-bar {
    transition: none;
  }
}

/* ---- Search banner ---- */
#docsSearch {
  background: var(--scl-bg);
  border: 0;
  padding: 40px 24px 0;
  margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
  #docsSearch {
    padding: 36px 16px 0;
  }
}

#docsSearch h1 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: var(--scl-fg);
  letter-spacing: -0.02em;
  margin-bottom: 0.6em;
}

@media only screen and (max-width: 768px) {
  #docsSearch h1 {
    font-size: 26px;
  }
}

/* ---- Search bar, banner and sidebar ----
   Matches the app's card search fields (cardSearchInputClass in app/src/components/ui/input.tsx):
   a card fill with no visible border, a lighter fill on hover, and a primary border on focus.
   The icon sits on the left like the app's. It is still Help Scout's submit button. */
#searchBar {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: stretch;
  position: relative;
  background: var(--scl-card);
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
  text-align: left;
  box-sizing: border-box;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

#searchBar.sm {
  max-width: 100%;
}

#searchBar:hover,
#searchBar:focus-within {
  background: var(--scl-accent);
}

#searchBar:focus-within {
  border-color: var(--scl-primary);
}

#searchBar .search-query,
#sidebar #searchBar.sm .search-query {
  background: transparent;
  border: none;
  border-radius: 0 8px 8px 0;
  box-shadow: none;
  color: var(--scl-fg);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  padding: 0 14px 0 6px;
  margin: 0;
  height: 44px;
  line-height: 44px;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}

#searchBar .search-query:focus {
  background: transparent;
  outline: none;
  box-shadow: none;
}

#searchBar .search-query::placeholder {
  color: var(--scl-muted);
}

#searchBar button,
#sidebar #searchBar.sm button {
  order: -1;
  background: transparent;
  border: none;
  border-radius: 8px 0 0 8px;
  padding: 0 0 0 14px;
  height: 44px;
  line-height: 44px;
  box-sizing: border-box;
  cursor: pointer;
  position: static;
  top: auto;
  right: auto;
  font-size: 14px;
  text-shadow: none;
}

#searchBar button:hover {
  background: transparent;
}

#searchBar button i.icon-search {
  display: inline-block !important;
  color: var(--scl-muted);
  font-size: 14px;
}

#searchBar button:hover i.icon-search {
  color: var(--scl-fg);
}

#searchBar button span {
  display: none;
}

/* The sidebar search is the app's size: 36px tall, 14px text */
#sidebar #searchBar.sm .search-query,
#sidebar #searchBar.sm button {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
}

#sidebar #searchBar.sm button {
  padding-left: 11px;
}

/* ---- Search dropdown ---- */
#serp-dd,
#searchBar.sm #serp-dd {
  top: 50px;
  background: var(--scl-card);
  border: 1px solid var(--scl-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.4);
}

#serp-dd .result a {
  color: var(--scl-fg-body);
}

#serp-dd .result a:hover,
#serp-dd .result > li.active {
  background: var(--scl-accent);
  color: var(--scl-brand);
}

/* ---- Home page ---- */
#contentArea {
  color: var(--scl-fg-body);
}

.most-pop-articles {
  margin-top: 56px;
  /* Help Scout draws a dotted image under it; hr.sep below is the divider instead */
  border-bottom: none;
}

.most-pop-articles h2 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--scl-fg);
  letter-spacing: -0.01em;
}

.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a:hover span {
  color: var(--scl-brand);
  transition: color 0.15s ease;
}

.most-pop-articles .popArticles a:hover,
.most-pop-articles .popArticles a:hover span {
  color: var(--scl-brand-hover);
}

.most-pop-articles .popArticles .icon-article-doc,
.articleList .icon-article-doc,
.related .icon-article-doc {
  color: var(--scl-muted);
}

@media (max-width: 480px) {
  .most-pop-articles .popArticles {
    columns: 1 !important;
    -webkit-columns: 1 !important;
    -moz-columns: 1 !important;
  }
}

/* The divider between popular articles and categories */
hr.sep {
  background: none;
  border: none;
  border-top: 1px solid var(--scl-border);
  height: 0;
  margin-left: 0;
  margin-right: 0;
}

/* ---- Category cards ---- */
.category-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: left;
}

@media (max-width: 480px) {
  .category-list {
    grid-template-columns: 1fr;
  }
}

.category-list .category,
.twoCol .collection,
.threeCol .collection {
  display: block;
  width: auto;
  margin: 0;
  padding: 20px 24px;
  background: var(--scl-card);
  border: 1px solid transparent;
  border-radius: var(--scl-radius);
  box-shadow: none;
  text-align: left;
  transition: background-color 0.15s ease;
}

/* Like the app's clickable cards: no border, a lighter fill on hover */
.category-list .category:hover,
.twoCol .collection:hover,
.threeCol .collection:hover {
  background: var(--scl-accent);
  border-color: transparent;
}

.category-list h3 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--scl-fg);
  margin: 0 0 4px;
}

.category-list .category .article-count,
.category-list .category:hover .article-count {
  color: var(--scl-muted);
  font-size: 14px;
}

/* Help Scout shades the column's left edge with a background image */
#main-content {
  background: none;
}

/* ---- Page frame ----
   The frame fits a 240px sidebar, a 56px gap and the 580px text column: 876px. Help Scout's
   1080px frame left 171px of empty space between the text and the header's right edge, where
   docs sites put an "On this page" list. Help Scout has no such list, so the frame shrinks
   instead, and the header, the text and the footer end on one line. Help Scout lays the columns
   out with floats and percentages; a grid gives the sidebar a fixed width. Phones keep the
   stacked layout. */
@media (min-width: 769px) {
  .container-fluid {
    max-width: 876px;
  }

  #contentArea .row-fluid:has(> #sidebar) {
    display: grid;
    grid-template-columns: 240px minmax(0, 580px);
    column-gap: 56px;
  }

  /* Bootstrap's clearfix pseudo-elements would take grid cells */
  #contentArea .row-fluid:has(> #sidebar)::before,
  #contentArea .row-fluid:has(> #sidebar)::after {
    display: none;
  }

  #contentArea .row-fluid > #sidebar {
    grid-column: 1;
    grid-row: 1;
    float: none;
    width: auto;
    margin-left: 0;
  }

  #contentArea .row-fluid > #main-content {
    grid-column: 2;
    grid-row: 1;
    float: none;
    width: auto;
    margin: 0 0 2em;
    padding: 32px 0 0;
  }
}

/* ---- Content column: category, article and search pages. Text sits on the page, with no card. ---- */
/* 580px of text is about 79 characters per line at 16px Inter, the upper end of the usual 50 to
   80 for reading. Callouts, the rating bar and the footer share the column, so they line up. */
.contentWrapper {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: 580px;
}

.contentWrapper h1,
#categoryHead h1 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--scl-fg);
}

.contentWrapper a,
.collection a {
  color: var(--scl-brand);
}

.contentWrapper a:hover {
  color: var(--scl-brand-hover);
}

.contentWrapper .descrip,
.articlesFound {
  color: var(--scl-muted);
}

.articleList li a {
  color: var(--scl-brand);
}

.related {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-left: 0;
  padding: 24px 0 0;
  max-width: 580px;
}

/* Few people print a help article, and the icon overlaps the title once the card is gone */
#fullArticle .printArticle {
  display: none;
}

@media (max-width: 768px) {
  .contentWrapper {
    padding: 28px 20px 0;
  }

  /* Help Scout pads the strip on phones; the text column already has the gutter */
  section.related {
    margin: 0 20px;
    padding: 32px 0 0;
  }

  .related h3 {
    padding-left: 0;
  }

  .related ul {
    margin-left: 22px;
  }
}

.related h3 {
  color: var(--scl-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.related ul > li a,
.related ul > li a span {
  color: var(--scl-brand);
}

/* ---- Article body ---- */
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  color: var(--scl-fg-body);
}

/* Help Scout sets article text to 14px with 1.55 line height, on #fullArticle and on each of
   p, li, div, table and callout p. Docs read best at 16px with about 1.7. */
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table,
#fullArticle .callout p,
#fullArticle .callout-blue p,
#fullArticle .callout-green p,
#fullArticle .callout-red p,
#fullArticle .callout-yellow p {
  font-size: 16px;
  line-height: 1.7;
}

#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--scl-fg);
  text-wrap: balance;
}

/* Help Scout keeps 30px free right of the title for the print icon, which is hidden */
#fullArticle .title {
  margin-right: 0;
}

#fullArticle h2 {
  margin-top: 1.8em;
}

#fullArticle strong,
#fullArticle b {
  color: var(--scl-fg);
}

#fullArticle a,
#fullArticle strong a,
#fullArticle a strong {
  color: var(--scl-brand);
}

/* Links in running text need more than color: the blue is only 1.7:1 against body text, and
   WCAG 1.4.1 asks for 3:1 or another cue. A dim underline that turns solid on hover. */
#fullArticle a {
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--scl-brand) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}

#fullArticle a:hover {
  text-decoration-color: currentColor;
}

#fullArticle code,
#fullArticle .inline-code {
  background: var(--scl-accent);
  border: 1px solid var(--scl-border);
  border-radius: 4px;
  color: var(--scl-fg);
  padding: 1px 6px;
  font-size: 0.88em;
}

#fullArticle pre {
  background: var(--scl-bg);
  border: 1px solid var(--scl-border);
  border-radius: 8px;
  color: var(--scl-fg);
}

#fullArticle pre code {
  background: transparent;
  border: none;
  padding: 0;
}

#fullArticle blockquote {
  border-left: 3px solid var(--scl-brand);
  background: var(--scl-accent);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
}

#fullArticle img {
  border-radius: 8px;
  border: 1px solid var(--scl-border);
  max-width: 100%;
  height: auto;
}

#fullArticle hr {
  border-color: var(--scl-border);
}

/* ---- Callouts: a tinted panel with a colored edge ---- */
#fullArticle .callout-yellow,
#fullArticle .callout-blue,
#fullArticle .callout-red,
#fullArticle .callout-green,
#fullArticle .callout {
  border: none;
  border-left: 3px solid;
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  color: var(--scl-fg-body);
}

#fullArticle .callout-yellow > :last-child,
#fullArticle .callout-blue > :last-child,
#fullArticle .callout-red > :last-child,
#fullArticle .callout-green > :last-child,
#fullArticle .callout > :last-child {
  margin-bottom: 0;
}

#fullArticle .callout-yellow {
  background: oklch(0.8 0.15 85 / 0.1);
  border-left-color: oklch(0.8 0.15 85);
}

#fullArticle .callout-blue,
#fullArticle .callout {
  background: oklch(0.7 0.15 246 / 0.1);
  border-left-color: var(--scl-brand);
}

#fullArticle .callout-red {
  background: oklch(0.65 0.2 25 / 0.12);
  border-left-color: oklch(0.65 0.2 25);
}

#fullArticle .callout-green {
  background: oklch(0.72 0.15 150 / 0.1);
  border-left-color: oklch(0.72 0.15 150);
}

/* ---- Tables ---- */
#fullArticle table,
#fullArticle .hs-table {
  border-collapse: collapse;
  width: 100%;
}

#fullArticle table th,
#fullArticle table td {
  border: 1px solid var(--scl-border);
  padding: 8px 12px;
  height: auto;
  vertical-align: top;
  background: transparent;
  color: var(--scl-fg-body);
}

#fullArticle table th {
  background: var(--scl-accent);
  color: var(--scl-fg);
  font-weight: 600;
}

#fullArticle table td > div,
#fullArticle table td > p {
  margin: 0;
}

#fullArticle table tr:nth-child(even) td {
  background: oklch(1 0 0 / 0.02);
}

/* ---- Rating box ---- */
.articleRatings {
  background: var(--scl-card);
  border: none;
  border-radius: 8px;
  box-shadow: none;
}

.articleRatings-question,
.articleRatings-feedback-message {
  color: var(--scl-muted);
}

/* Tighter than Help Scout's 12px, since the button's 2px border already adds space. The vote ring still clears the text. */
.articleRatings-question {
  margin-right: 10px;
}

/* Help Scout's faces are built for a light page: pale gray heads with a white ring, turning cream
   and yellow on hover. Here the idle head is a gray that stands out from the box, and hover or a
   vote turns it amber with dark features, so it still reads as an emoji. */
.rateAction {
  background: oklch(0.38 0.015 250);
  border-color: var(--scl-card);
  box-shadow: none;
}

.rating-face {
  fill: oklch(0.8 0.01 250);
}

.rateAction:not([disabled="disabled"]):hover,
.rateAction:not([disabled="disabled"]):focus,
.rateAction.selected {
  background: oklch(0.83 0.15 85);
  box-shadow: none;
}

.rateAction.selected .rating-face,
.rateAction:hover:not([disabled="disabled"]) .rating-face,
.rateAction:focus:not([disabled="disabled"]) .rating-face {
  fill: oklch(0.32 0.07 60);
}

/* After a vote, the face that was not picked steps back */
.rateAction[disabled="disabled"]:not(.selected) {
  opacity: 0.45;
}

.articleRatings-failure {
  color: oklch(0.72 0.17 25);
}

/* ---- Article footer: Help Scout sets it in an italic serif ---- */
.articleFoot {
  border-top: 1px solid var(--scl-border);
  padding-top: 20px;
  margin-top: 32px;
}

.articleFoot p,
.articleFoot .help,
.articleFoot time,
.articleFoot .lu {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 13px;
  color: var(--scl-muted);
}

.articleFoot .icon-contact {
  color: var(--scl-muted);
}

/* ---- Sidebar ---- */
#sidebar h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--scl-muted);
  margin-bottom: 8px;
}

/* Matches the app's sidebar: a rounded fill on hover, and the current item in the brand color */
#sidebar .nav-list li a {
  display: block;
  padding: 7px 10px;
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 400;
  color: var(--scl-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  text-shadow: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

#sidebar .nav-list li a:hover {
  background-color: var(--scl-card);
  color: var(--scl-fg);
}

#sidebar .nav-list li.active a,
#sidebar .nav-list li.active a:hover,
#sidebar .nav-list li.active a:focus {
  background-color: var(--scl-card);
  color: var(--scl-brand) !important;
  font-weight: 500;
  border: none;
  text-shadow: none;
}

#sidebar .nav-list li a .icon-arrow {
  display: none !important;
}

/* ---- Sort select on category pages ----
   Like the app's select: card fill, no border, 14px, 36px tall. Help Scout's
   `#categoryHead .sort select` sets 11px, 24px and a fixed width, hence the longer selector. */
#categoryHead .sort {
  top: 0;
}

#categoryHead .sort #sortBy {
  appearance: none;
  -webkit-appearance: none;
  background: var(--scl-card)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a5abb3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--scl-fg-body);
  width: auto;
  height: 36px;
  line-height: 34px;
  margin: 0;
  padding: 0 34px 0 12px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

#categoryHead .sort #sortBy:hover {
  background-color: var(--scl-accent);
}

#categoryHead .sort #sortBy:focus-visible {
  border-color: var(--scl-primary);
  outline: none;
}

/* The open list is drawn by the browser; this keeps its options dark */
#sortBy option {
  background: var(--scl-card);
  color: var(--scl-fg);
}

@media (max-width: 768px) {
  #categoryHead .sort {
    display: none;
  }
}

/* ---- Breadcrumbs and page footer ---- */
.breadcrumbs,
.breadcrumbs a {
  color: var(--scl-muted);
}

/* Help Scout darkens these links to #222 on hover, which vanishes on the dark page */
footer p,
footer p a {
  font-family: "Inter", sans-serif;
  color: var(--scl-muted);
}

/* On pages with the sidebar, the footer starts at the text column: the 240px sidebar plus the
   56px gap of the page frame. */
@media (min-width: 769px) {
  footer:not(.center) p {
    text-align: left;
    margin-left: 296px;
    max-width: 580px;
  }
}

footer p a:hover,
footer p a:focus-visible {
  color: var(--scl-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Focus ----
   Help Scout's Bootstrap rings every focused link, mouse clicks included (a:focus with the browser's
   own ring, which shows white on a dark page). It also strips the ring from the header links, the
   hamburger and the rating faces, so keyboard users lose their place. Like the app: no ring on
   click, and a blue ring for keyboard focus only. */
a:focus,
button:focus,
select:focus,
.btn:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
.btn:focus-visible,
.navbar .nav li a:focus-visible,
.navbar .btn-navbar:focus-visible,
.rateAction:not([disabled="disabled"]):focus-visible {
  outline: 2px solid var(--scl-ring);
  outline-offset: 2px;
}

/* Inline links get a slightly rounded ring; blocks keep their own corners */
#fullArticle a:focus-visible,
footer a:focus-visible,
.navbar .nav li a:focus-visible {
  border-radius: 4px;
}

/* The logo link is padded far past the image, so ring the image instead */
.navbar .brand:focus-visible {
  outline: none;
}

.navbar .brand:focus-visible img {
  outline: 2px solid var(--scl-ring);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---- Print ----
   Browsers drop backgrounds when printing, which would leave the light text on white paper.
   Help Scout's own print styles already hide the header, sidebar and print icon. */
@media print {
  html,
  body,
  #fullArticle,
  #fullArticle * {
    background: #fff !important;
    color: #000 !important;
  }

  #fullArticle a {
    text-decoration-color: currentColor;
  }

  .articleRatings,
  .related,
  #mainNav {
    display: none !important;
  }
}