/* =============================================
   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) {
  /* Rows reach 12px past the gutter so their text lines up with the logo. The panel itself takes
     the negative margin: Bootstrap clips it (overflow: hidden, for the height animation), so a
     list wider than the panel loses its sides. */
  .navbar .nav-collapse {
    background: var(--scl-bg);
    margin: 0 -12px;
  }

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

  .navbar .nav-collapse .nav {
    margin: 4px 0 12px;
    text-align: left;
  }

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

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

  /* Help Scout makes the phone's Contact item an inline block, as wide as its text. As a block
     its row fills the menu like Home's, and so does its fill when pressed. */
  .navbar .nav-collapse .nav > li#contactMobile {
    display: block;
  }

  .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;
}

/* A bare URL has no spaces to wrap at, and one wider than a phone widens the whole page */
#fullArticle {
  overflow-wrap: anywhere;
}

#fullArticle pre {
  overflow-x: auto;
}

/* 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;
  /* A command stays in one piece. As an inline block it moves to the next line whole when the
     rest of the line is too short, and wraps inside only when it is wider than a full line.
     Then it breaks at its spaces. break-word, unlike the article's anywhere, splits a word only
     when the word alone is wider than the line, and leaves a table column as wide as its
     longest command. */
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.3;
  vertical-align: baseline;
  white-space: normal;
  overflow-wrap: break-word;
}

#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;
  display: inline;
  line-height: inherit;
  white-space: inherit;
}

#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);
}

/* The browser sizes the columns by how long their text is, so a long description squeezes the
   first column until a command wraps at its spaces. With room for both columns, the first one
   is as wide as its longest command, up to 300px: half the text column. A longer command wraps
   at its spaces. nowrap would do the same without the limit, and a long command would then push
   the table out of the column. */
@media (min-width: 601px) {
  #fullArticle table td:first-child code {
    width: max-content;
    max-width: 300px;
  }
}

/* On a phone a command table has no room for two columns: the longest command takes half the
   width and leaves the description a few words per line. Each row stacks instead, the command
   above its description. Only tables of that shape stack: no header row, two cells per row. */
@media (max-width: 600px) {
  #fullArticle table:not(:has(th, td:nth-child(3))),
  #fullArticle table:not(:has(th, td:nth-child(3))) tbody,
  #fullArticle table:not(:has(th, td:nth-child(3))) tr,
  #fullArticle table:not(:has(th, td:nth-child(3))) td {
    display: block;
    width: auto;
  }

  #fullArticle table:not(:has(th, td:nth-child(3))) {
    border: 1px solid var(--scl-border);
    border-radius: 8px;
    overflow: hidden;
  }

  #fullArticle table:not(:has(th, td:nth-child(3))) tr + tr {
    border-top: 1px solid var(--scl-border);
  }

  #fullArticle table:not(:has(th, td:nth-child(3))) td {
    border: none;
    padding: 0 12px 10px;
  }

  #fullArticle table:not(:has(th, td:nth-child(3))) td:first-child {
    padding: 10px 12px 4px;
  }
}

/* ---- 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;
  }
}