/*
 * enrola help centre: custom stylesheet for Help Scout Docs
 *
 * Matches enrola 1.0's "quiet ledger" design: Geist type in three weights (400, 500, 600), warm neutral greys,
 * white card surfaces on a pale canvas, a light header, and enrola's pink (#c40b58) used sparingly as the accent
 * for links, the search button, focus and the current item. Dark mode follows the reader's system setting, using
 * enrola's own dark palette.
 *
 * Built for Help Scout Docs' standard site markup (#mainNav, #docsSearch, #contentArea, .collection-category,
 * .category-list .category, #categoryHead, .articleList, #fullArticle, .articleRatings, #sidebar, footer).
 * Upload it under Manage → Docs → (site) → Custom Code → Custom Stylesheet. See README.md.
 */

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

/* ------------------------------------------------------------------ tokens */

:root {
  /* From enrola 1.0: shared/scss/_design-tokens.scss and _theme.scss */
  --en-canvas: #f6f6f4;
  --en-surface: #ffffff;
  --en-subtle: #fafaf8;
  --en-fill: #f1f1ee;
  --en-line: #e4e4e0;
  --en-line-soft: #eeeeea;
  --en-control: #d9d9d4;
  --en-control-hover: #c4c4be;
  --en-ink: #1b1c1e;
  --en-ink-2: #3a3c40;
  --en-muted: #6a6e75;
  --en-faint: #8a8e95;
  --en-success: #1f6a3b;
  --en-success-fill: #e8f3ec;
  --en-success-line: #b9dcc6;
  --en-danger: #a1291c;
  --en-danger-fill: #fbecea;
  --en-danger-line: #e7c6c1;
  --en-caution-fill: #fef8db;
  --en-caution-line: #e9d27a;
  --en-info-fill: #eef3f8;
  --en-info-line: #c9d6e4;
  --en-info: #2b4c6f;

  /* enrola's brand accent, as on the marketing site */
  --en-accent: #c40b58;
  --en-accent-hover: #9e0947;
  --en-accent-tint: #fbe3ec;
  --en-accent-line: #f2d0de;
  --en-on-accent: #ffffff;

  --en-radius-sm: 7px;
  --en-radius: 8px;
  --en-radius-lg: 12px;
  --en-shadow-card: 0 1px 2px rgba(16, 24, 40, .04);
  --en-shadow-hover: 0 6px 18px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .05);
  --en-shadow-pop: 0 10px 28px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
  --en-focus: 0 0 0 3px rgba(196, 11, 88, .28);

  --en-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --en-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --en-measure: 46rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --en-canvas: #141516;
    --en-surface: #1c1d20;
    --en-subtle: #212226;
    --en-fill: #27292d;
    --en-line: #34363b;
    --en-line-soft: #2a2c30;
    --en-control: #66696f;
    --en-control-hover: #7c8087;
    --en-ink: #ebebe8;
    --en-ink-2: #cfd0d3;
    --en-muted: #a3a7ae;
    --en-faint: #8b8f96;
    --en-success: #6fcf97;
    --en-success-fill: #17291e;
    --en-success-line: #2b5a3c;
    --en-danger: #f28b7f;
    --en-danger-fill: #3b1f1c;
    --en-danger-line: #6e2b24;
    --en-caution-fill: #3a3112;
    --en-caution-line: #6b5a1c;
    --en-info-fill: #1b2530;
    --en-info-line: #34495f;
    --en-info: #a9c4e2;

    /* The accent keeps its hue but lightens to stay readable on the dark surfaces (3:1 and more). */
    --en-accent: #f06a9f;
    --en-accent-hover: #f58fb7;
    --en-accent-tint: rgba(196, 11, 88, .18);
    --en-accent-line: rgba(242, 208, 222, .25);
    --en-on-accent: #1b1c1e;

    --en-shadow-card: none;
    --en-shadow-hover: 0 6px 18px rgba(0, 0, 0, .35);
    --en-shadow-pop: 0 10px 28px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
    --en-focus: 0 0 0 3px rgba(240, 106, 159, .35);

    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ base */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--en-canvas);
  color: var(--en-ink);
  font-family: var(--en-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body,
input,
button,
select,
textarea,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--en-font);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--en-ink);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--en-accent);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

a:hover,
a:focus {
  color: var(--en-accent-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--en-focus);
  border-radius: var(--en-radius-sm);
}

::selection {
  background: var(--en-accent-tint);
  color: var(--en-ink);
}

hr {
  border: 0;
  border-top: 1px solid var(--en-line);
  margin: 32px 0;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ------------------------------------------------------------------ header */

#mainNav,
#mainNav.navbar {
  margin-bottom: 0;
}

#mainNav .navbar-inner {
  background: var(--en-surface);
  background-image: none;
  border: 0;
  border-bottom: 1px solid var(--en-line);
  border-radius: 0;
  box-shadow: none;
  filter: none;
  min-height: 64px;
  padding: 0;
}

#mainNav .container-fluid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

#mainNav .brand {
  color: var(--en-ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-left: 0;
  padding: 18px 0;
  text-shadow: none;
}

#mainNav .brand img {
  max-height: 30px;
  width: auto;
}

#mainNav .brand:hover,
#mainNav .brand:focus {
  color: var(--en-ink);
}

#mainNav .nav {
  margin: 0;
}

#mainNav .nav > li > a {
  border-radius: var(--en-radius);
  color: var(--en-ink-2);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  margin: 14px 2px;
  padding: 8px 12px;
  text-shadow: none;
}

#mainNav .nav > li > a:hover,
#mainNav .nav > li > a:focus {
  background: var(--en-fill);
  color: var(--en-ink);
}

#mainNav .nav > .active > a,
#mainNav .nav > .active > a:hover,
#mainNav .nav > .active > a:focus {
  background: var(--en-accent-tint);
  box-shadow: none;
  color: var(--en-accent);
}

#mainNav .nav .caret {
  display: none;
}

/* "Contact" link in the header, when the contact form is on */
#mainNav .nav li#contact > a,
#mainNav .nav li.contact > a {
  border: 1px solid var(--en-control);
  color: var(--en-ink);
}

#mainNav .nav li#contact > a:hover,
#mainNav .nav li.contact > a:hover {
  border-color: var(--en-control-hover);
}

/* The phone menu button */
#mainNav .btn-navbar {
  background: var(--en-surface);
  background-image: none;
  border: 1px solid var(--en-control);
  border-radius: var(--en-radius);
  box-shadow: none;
  margin-top: 14px;
  padding: 9px 11px;
}

#mainNav .btn-navbar .icon-bar {
  background-color: var(--en-ink);
  box-shadow: none;
}

/* ------------------------------------------------------------------ hero search (homepage) */

#docsSearch {
  background: var(--en-surface);
  background-image: none;
  border-bottom: 1px solid var(--en-line);
  margin: 0;
  padding: 64px 24px 56px;
  text-align: center;
}

#docsSearch h1 {
  color: var(--en-ink);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 24px;
  text-shadow: none;
}

#searchBar {
  margin: 0 auto;
  max-width: 640px;
  padding: 0;
  position: relative;
  text-align: left;
  width: auto;
}

#searchBar .search-query,
#searchBar input[type="text"] {
  margin: 0;
  background: var(--en-surface);
  border: 1px solid var(--en-control);
  border-radius: var(--en-radius-lg);
  box-shadow: var(--en-shadow-card);
  box-sizing: border-box;
  color: var(--en-ink);
  font-size: 17px;
  height: 56px;
  line-height: 24px;
  padding: 14px 128px 14px 20px;
  width: 100%;
}

#searchBar .search-query::placeholder {
  color: var(--en-faint);
  opacity: 1;
}

#searchBar .search-query:hover {
  border-color: var(--en-control-hover);
}

#searchBar .search-query:focus {
  border-color: var(--en-accent);
  box-shadow: var(--en-focus);
  outline: none;
}

#searchBar button {
  align-items: center;
  display: inline-flex;
  background: var(--en-accent);
  background-image: none;
  border: 0;
  border-radius: var(--en-radius);
  box-shadow: none;
  color: var(--en-on-accent);
  font-size: 15px;
  font-weight: 500;
  height: 44px;
  padding: 0 18px;
  position: absolute;
  right: 6px;
  text-shadow: none;
  top: 6px;
}

#searchBar button:hover,
#searchBar button:focus {
  background: var(--en-accent-hover);
}

#searchBar button .icon-search {
  color: inherit;
  display: none;
}

#searchBar button span {
  font-size: 15px;
  text-indent: 0;
  width: auto;
}

/* Search-as-you-type results */
#serp-dd {
  background: var(--en-surface);
  border: 1px solid var(--en-line);
  border-radius: var(--en-radius-lg);
  box-shadow: var(--en-shadow-pop);
  margin-top: 8px;
  overflow: hidden;
  text-align: left;
}

#serp-dd .result {
  margin: 0;
  padding: 6px;
}

#serp-dd .result > li,
#serp-dd .result a {
  border-radius: var(--en-radius);
  color: var(--en-ink);
}

#serp-dd .result a {
  display: block;
  font-size: 15px;
  padding: 10px 12px;
}

#serp-dd .result a:hover,
#serp-dd .result a:focus,
#serp-dd .result > li.active,
#serp-dd .result > li.active a {
  background: var(--en-fill);
  color: var(--en-ink);
}

#serp-dd .result .article-collection,
#serp-dd .result em {
  color: var(--en-muted);
}

/* The compact search box in the sidebar and on article pages */
#sidebar #searchBar.sm,
#searchBar.sm {
  margin: 0 0 28px;
  max-width: none;
}

#searchBar.sm .search-query {
  border-radius: var(--en-radius);
  font-size: 15px;
  height: 42px;
  padding: 9px 44px 9px 14px;
}

#searchBar.sm button {
  background: transparent;
  color: var(--en-muted);
  height: 32px;
  padding: 0 8px;
  right: 5px;
  top: 5px;
}

#searchBar.sm button:hover,
#searchBar.sm button:focus {
  background: var(--en-fill);
  color: var(--en-ink);
}

#searchBar.sm button .icon-search {
  display: block;
  margin-right: 0;
}

/* An empty search: Docs marks the box with .error */
#searchBar .search-query.error {
  border-color: var(--en-danger);
}

/* ------------------------------------------------------------------ layout */

#contentArea {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1200px;
  padding: 40px 24px 64px;
}

#contentArea .row-fluid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

#contentArea .row-fluid > #main-content {
  flex: 1 1 0;
  margin-left: 0;
  min-width: 0;
  width: auto;
}

#contentArea .row-fluid > #sidebar {
  flex: 0 0 264px;
  margin-left: 0;
  order: -1;
  width: auto;
}

#contentArea .row-fluid::before,
#contentArea .row-fluid::after {
  display: none;
}

.contentWrapper {
  background: var(--en-surface);
  border: 1px solid var(--en-line);
  border-radius: var(--en-radius-lg);
  box-shadow: var(--en-shadow-card);
  padding: 40px 48px 32px;
}

/* ------------------------------------------------------------------ homepage collections and categories */

.collection-category {
  margin-bottom: 40px;
}

.collection-category > h2 {
  color: var(--en-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.collection-category > h2 a {
  color: inherit;
}

.collection-category > h2 a:hover {
  color: var(--en-accent);
}

.category-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin: 0;
}

.category-list::before,
.category-list::after {
  display: none;
}

.category-list .category {
  background: var(--en-surface);
  border: 1px solid var(--en-line);
  border-radius: var(--en-radius-lg);
  box-shadow: var(--en-shadow-card);
  box-sizing: border-box;
  color: var(--en-ink);
  display: flex;
  flex-direction: column;
  float: none;
  margin: 0;
  min-height: 0;
  padding: 22px 24px 20px;
  text-align: left;
  width: auto;
}

.category-list .category:hover,
.category-list .category:focus {
  border-color: var(--en-accent-line);
  box-shadow: var(--en-shadow-hover);
  color: var(--en-ink);
  transform: translateY(-1px);
}

.category-list .category h3 {
  color: var(--en-ink);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
}

.category-list .category:hover h3 {
  color: var(--en-accent);
}

.category-list .category p {
  color: var(--en-muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.category-list .category .article-count {
  color: var(--en-faint);
  font-size: 13px;
  font-weight: 500;
  margin-top: auto;
  padding-top: 14px;
}

/* Homepage "collections" layout: one card per collection */
#contentArea > .collection,
.collection-list .collection {
  background: var(--en-surface);
  border: 1px solid var(--en-line);
  border-radius: var(--en-radius-lg);
  box-shadow: var(--en-shadow-card);
  padding: 24px;
}

/* Homepage "Most Popular Articles" layout with several collections: one card per collection */
.twoCol .collection,
.threeCol .collection {
  background: var(--en-surface);
  border: 1px solid var(--en-line);
  border-radius: var(--en-radius-lg);
  box-shadow: var(--en-shadow-card);
  box-sizing: border-box;
  padding: 24px;
}

.collection .collection-head h2 {
  font-size: 18px;
  margin: 0 0 4px;
}

.collection .collection-head h2 a {
  color: var(--en-ink);
}

.collection .collection-head p {
  color: var(--en-muted);
  font-size: 15px;
}

.collection .browse {
  font-weight: 500;
}

#contentArea hr.sep {
  border-top-color: var(--en-line);
  margin: 32px 0;
}

/* Homepage "Most popular articles" block */
.most-pop-articles {
  background: var(--en-surface);
  border: 1px solid var(--en-line);
  border-radius: var(--en-radius-lg);
  box-shadow: var(--en-shadow-card);
  margin-bottom: 40px;
  padding: 24px 28px;
}

.most-pop-articles h2 {
  color: var(--en-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.most-pop-articles .popArticles {
  column-gap: 32px;
  columns: 2 280px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.most-pop-articles .popArticles li {
  break-inside: avoid;
}

.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a:hover span {
  align-items: flex-start;
  color: var(--en-ink);
  display: flex;
  font-weight: 500;
  gap: 10px;
  padding: 7px 0;
}

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

.most-pop-articles .popArticles .icon-article-doc {
  color: var(--en-faint);
  margin-top: 4px;
}

/* No search results */
#noResults {
  background: var(--en-surface);
  border: 1px dashed var(--en-control);
  border-radius: var(--en-radius-lg);
  color: var(--en-muted);
  margin-bottom: 24px;
  padding: 24px;
  text-align: center;
}

/* ------------------------------------------------------------------ category page */

#categoryHead {
  border-bottom: 1px solid var(--en-line-soft);
  margin: 0 0 8px;
  padding-bottom: 20px;
  position: relative;
}

#categoryHead h1 {
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}

#categoryHead .descrip {
  color: var(--en-muted);
  font-size: 16px;
  margin: 0;
  max-width: var(--en-measure);
}

#categoryHead .sort {
  position: absolute;
  right: 0;
  top: 4px;
}

#categoryHead .sort select,
select#sortBy {
  background-color: var(--en-surface);
  border: 1px solid var(--en-control);
  border-radius: var(--en-radius);
  color: var(--en-ink-2);
  font-size: 14px;
  height: 36px;
  padding: 0 10px;
  width: auto;
}

/* Article lists: category pages and the search results page */
.articleList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.articleList > li {
  border-bottom: 1px solid var(--en-line-soft);
  margin: 0;
  padding: 0;
}

.articleList > li:last-child {
  border-bottom: 0;
}

.articleList > li > a {
  align-items: flex-start;
  border-radius: var(--en-radius);
  color: var(--en-ink);
  display: flex;
  font-size: 16px;
  font-weight: 500;
  gap: 12px;
  margin: 0 -12px;
  padding: 14px 12px;
}

.articleList > li > a:hover,
.articleList > li > a:focus {
  background: var(--en-subtle);
  color: var(--en-accent);
}

.articleList .icon-article-doc {
  color: var(--en-faint);
  flex: none;
  margin-top: 4px;
}

.articleList > li > a:hover .icon-article-doc {
  color: var(--en-accent);
}

/* Search results page: the excerpt under each title */
.articleList > li p,
.articleList .article-excerpt {
  color: var(--en-muted);
  font-size: 15px;
  font-weight: 400;
  margin: 2px 0 0;
}

/* Search results page */
#serp h1 {
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -.02em;
  margin: 0 0 4px;
}

#serp h1 strong {
  color: var(--en-accent);
  font-weight: 600;
}

#serp .articlesFound {
  color: var(--en-muted);
  font-size: 15px;
  margin: 0 0 12px;
}

#serp .articlesFound strong {
  color: var(--en-ink);
}

#serp .articleList > li {
  padding: 16px 0;
}

#serp .articleList > li > a {
  background: none;
  margin: 0;
  padding: 0;
}

#serp .articleList > li > p {
  margin: 4px 0 0 26px;
}

#serp .nada {
  color: var(--en-muted);
  font-size: 16px;
}

/* Paging */
.pagination {
  margin: 28px 0 0;
  text-align: center;
}

.pagination ul {
  border-radius: 0;
  box-shadow: none;
  display: inline-flex;
  gap: 4px;
}

.pagination ul > li > a,
.pagination ul > li > span {
  background: var(--en-surface);
  border: 1px solid var(--en-line);
  border-radius: var(--en-radius) !important;
  color: var(--en-ink-2);
  float: none;
  font-weight: 500;
  line-height: 20px;
  padding: 7px 13px;
}

.pagination ul > li > a:hover {
  background: var(--en-fill);
  color: var(--en-ink);
}

.pagination ul > .active > a,
.pagination ul > .active > span {
  background: var(--en-accent);
  border-color: var(--en-accent);
  color: var(--en-on-accent);
}

.pagination ul > .disabled > a,
.pagination ul > .disabled > span {
  background: transparent;
  color: var(--en-faint);
}

/* ------------------------------------------------------------------ sidebar */

#sidebar h3 {
  color: var(--en-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  margin: 0 0 8px;
  padding: 0 12px;
  text-transform: uppercase;
}

#sidebar .nav-list {
  margin: 0 0 28px;
  padding: 0;
}

#sidebar .nav-list > li > a {
  border-radius: var(--en-radius);
  color: var(--en-ink-2);
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 2px;
  padding: 8px 12px;
  text-shadow: none;
}

#sidebar .nav-list > li > a:hover,
#sidebar .nav-list > li > a:focus {
  background: var(--en-fill);
  color: var(--en-ink);
}

#sidebar .nav-list > .active > a,
#sidebar .nav-list > .active > a:hover,
#sidebar .nav-list > .active > a:focus {
  background: var(--en-accent-tint);
  color: var(--en-accent);
  text-shadow: none;
}

#sidebar .nav-list .active a .icon-arrow::before {
  color: var(--en-accent);
}

/* ------------------------------------------------------------------ article */

#fullArticle {
  color: var(--en-ink-2);
  font-size: 16px;
  line-height: 1.65;
  max-width: var(--en-measure);
  position: relative;
}

/* Help Scout writes the site's colour settings into a <style> before this sheet, with these same selectors; repeating
   them here (same specificity, later in the page) keeps enrola's colours in both themes. */
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  color: var(--en-ink-2);
}

#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd {
  font-size: 16px;
}

#fullArticle table td,
#fullArticle table th {
  font-size: 15px;
}

#fullArticle strong a,
#fullArticle a strong,
.contentWrapper a,
.collection a {
  color: var(--en-accent);
}

.category-list .category:hover .article-count {
  color: var(--en-faint);
}

#fullArticle .title,
#fullArticle h1 {
  color: var(--en-ink);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 40px 24px 0;
}

#fullArticle h2,
#fullArticle h3,
#fullArticle h4 {
  color: var(--en-ink);
  font-weight: 600;
}

#fullArticle h2 {
  border-top: 1px solid var(--en-line-soft);
  font-size: 22px;
  margin: 40px 0 12px;
  padding-top: 28px;
}

#fullArticle .title + h2,
#fullArticle h1 + h2 {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

#fullArticle h3 {
  font-size: 18px;
  margin: 28px 0 8px;
}

#fullArticle h4 {
  font-size: 16px;
  margin: 24px 0 6px;
}

#fullArticle p {
  margin: 0 0 16px;
}

#fullArticle ul,
#fullArticle ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

#fullArticle li {
  margin: 0 0 6px;
  padding-left: 4px;
}

#fullArticle li > ul,
#fullArticle li > ol {
  margin: 6px 0 0;
}

#fullArticle ol {
  list-style: decimal;
}

#fullArticle ol > li::marker {
  color: var(--en-muted);
  font-weight: 600;
}

#fullArticle ul > li::marker {
  color: var(--en-faint);
}

#fullArticle strong,
#fullArticle b {
  color: var(--en-ink);
  font-weight: 600;
}

#fullArticle a {
  color: var(--en-accent);
  text-decoration: underline;
  text-decoration-color: var(--en-accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

#fullArticle a:hover,
#fullArticle a:focus {
  color: var(--en-accent-hover);
  text-decoration-color: currentColor;
}

/* Screenshots and GIFs: framed like a card, so white screens don't merge into the page */
#fullArticle img {
  padding: 0;
  background: var(--en-surface);
  border: 1px solid var(--en-line);
  border-radius: var(--en-radius-lg);
  box-shadow: var(--en-shadow-card);
  box-sizing: border-box;
  display: block;
  height: auto;
  margin: 8px 0 24px;
  max-width: 100%;
}

#fullArticle p > img:only-child {
  margin-bottom: 8px;
}

/* The editor's "no border" image option */
#fullArticle img.noBdr {
  background: transparent;
  border: 0;
  box-shadow: none;
}

#fullArticle figure {
  margin: 8px 0 24px;
}

#fullArticle figcaption {
  color: var(--en-muted);
  font-size: 14px;
  margin-top: -14px;
}

/* Inline code and code blocks */
#fullArticle code,
#fullArticle kbd {
  background: var(--en-fill);
  border: 1px solid var(--en-line-soft);
  border-radius: 5px;
  color: var(--en-ink);
  font-family: var(--en-mono);
  font-size: .875em;
  padding: .1em .35em;
  white-space: normal;
}

#fullArticle pre {
  background: #1b1c1e;
  border: 0;
  border-radius: var(--en-radius);
  color: #ebebe8;
  font-family: var(--en-mono);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px;
  overflow-x: auto;
  padding: 16px 18px;
  white-space: pre;
}

#fullArticle pre code {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: inherit;
  padding: 0;
  white-space: inherit;
}

/* Tables */
#fullArticle table {
  border: 1px solid var(--en-line);
  border-collapse: separate;
  border-radius: var(--en-radius);
  border-spacing: 0;
  display: block;
  font-size: 15px;
  margin: 0 0 24px;
  max-width: 100%;
  overflow-x: auto;
  width: max-content;
}

#fullArticle table th,
#fullArticle table td {
  border: 0;
  border-bottom: 1px solid var(--en-line-soft);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

#fullArticle table th {
  background: var(--en-subtle);
  color: var(--en-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}

#fullArticle table tr:last-child td {
  border-bottom: 0;
}

#fullArticle table td p:last-child {
  margin-bottom: 0;
}

/* Quotes */
#fullArticle blockquote {
  border-left: 3px solid var(--en-line);
  color: var(--en-muted);
  font-style: normal;
  margin: 0 0 20px;
  padding: 2px 0 2px 16px;
}

/* Embedded video (YouTube, Vimeo, Wistia, Loom) */
#fullArticle iframe,
#fullArticle video {
  border: 1px solid var(--en-line);
  border-radius: var(--en-radius-lg);
  max-width: 100%;
}

#fullArticle .video,
#fullArticle .video-container,
#fullArticle .embed-responsive {
  border-radius: var(--en-radius-lg);
  margin: 8px 0 24px;
  overflow: hidden;
}

/* Callouts from the editor's Callout menu: callout (grey), -blue, -green, -yellow, -red */
#fullArticle .callout,
#fullArticle .callout-blue,
#fullArticle .callout-green,
#fullArticle .callout-yellow,
#fullArticle .callout-red,
#fullArticle .private-note {
  background: var(--en-subtle);
  border: 1px solid var(--en-line);
  border-left-width: 4px;
  border-radius: var(--en-radius);
  color: var(--en-ink-2);
  font-size: 15px;
  margin: 4px 0 24px;
  padding: 14px 18px;
}

#fullArticle .callout-blue {
  background: var(--en-info-fill);
  border-color: var(--en-info-line);
  border-left-color: var(--en-info);
}

#fullArticle .callout-green {
  background: var(--en-success-fill);
  border-color: var(--en-success-line);
  border-left-color: var(--en-success);
}

#fullArticle .callout-yellow {
  background: var(--en-caution-fill);
  border-color: var(--en-caution-line);
  border-left-color: #b88a00;
}

#fullArticle .callout-red {
  background: var(--en-danger-fill);
  border-color: var(--en-danger-line);
  border-left-color: var(--en-danger);
}

/* "Coming soon" articles start with a callout in the accent colour */
#fullArticle .callout-yellow.coming-soon,
#fullArticle .coming-soon {
  background: var(--en-accent-tint);
  border-color: var(--en-accent-line);
  border-left-color: var(--en-accent);
}

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

#fullArticle .callout p,
#fullArticle .callout-blue p,
#fullArticle .callout-green p,
#fullArticle .callout-yellow p,
#fullArticle .callout-red p {
  margin-bottom: 8px;
}

/* HTML blocks: definition lists draw as numbered steps, each dt a pill */
#fullArticle dt {
  background: var(--en-fill);
  border-radius: 999px;
  color: var(--en-ink);
  font-weight: 600;
}

#fullArticle dd {
  color: var(--en-ink-2);
}

/* Print button beside the title */
#fullArticle .printArticle {
  border-radius: var(--en-radius);
  color: var(--en-faint);
  padding: 6px 8px;
  position: absolute;
  right: 0;
  text-decoration: none;
  top: 4px;
}

#fullArticle .printArticle:hover {
  background: var(--en-fill);
  color: var(--en-ink);
}

/* "Did this answer your question?" */
.articleRatings {
  align-items: center;
  background: var(--en-subtle);
  border: 1px solid var(--en-line-soft);
  border-radius: var(--en-radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: center;
  margin: 40px 0 0;
  padding: 18px 20px;
}

.articleRatings-question {
  color: var(--en-ink);
  font-size: 15px;
  font-weight: 500;
}

.articleRatings-actions {
  display: flex;
  gap: 8px;
}

.articleRatings .rateAction {
  align-items: center;
  background: var(--en-surface);
  border: 1px solid var(--en-control);
  border-radius: 999px;
  color: var(--en-muted);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
  width: 40px;
}

.articleRatings .rateAction:hover,
.articleRatings .rateAction:focus {
  border-color: var(--en-accent);
  color: var(--en-accent);
}

.articleRatings .rateAction svg,
.articleRatings .rating-face svg {
  fill: currentColor;
}

.articleRatings-feedback,
.articleRatings-failure {
  color: var(--en-muted);
  font-size: 15px;
}

.articleRatings-feedback-tick svg {
  fill: var(--en-success);
}

/* "Still need help? Contact Us" (when Beacon is on) and "Last updated on …" */
.articleFoot {
  align-items: center;
  border-top: 0;
  color: var(--en-faint);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 8px 16px;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0;
}

.articleFoot p,
.articleFoot .lu,
.articleFoot time {
  color: var(--en-faint);
  float: none;
  font-family: var(--en-font);
  font-size: 14px;
  font-style: normal;
  margin: 0;
}

.articleFoot p.help {
  color: var(--en-muted);
}

.articleFoot .icon-article-doc,
.articleFoot .icon-contact {
  display: none;
}

/* Related articles: a card of its own under the article */
.related {
  background: var(--en-surface);
  border: 1px solid var(--en-line);
  border-radius: var(--en-radius-lg);
  box-shadow: var(--en-shadow-card);
  margin-top: 16px;
  padding: 24px 48px;
}

.related h3 {
  color: var(--en-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  margin: 0 0 8px;
  padding: 0;
  text-transform: uppercase;
}

.related ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.related ul > li {
  padding: 0;
}

.related ul > li > a {
  align-items: flex-start;
  border-radius: var(--en-radius);
  color: var(--en-ink);
  display: flex;
  font-size: 16px;
  font-weight: 500;
  gap: 10px;
  margin: 0 -10px;
  padding: 8px 10px;
}

.related ul > li a:hover span {
  text-decoration: none;
}

.related ul > li > a:hover {
  background: var(--en-subtle);
  color: var(--en-accent);
}

.related .icon-article-doc {
  color: var(--en-faint);
  margin-top: 4px;
}

/* ------------------------------------------------------------------ contact form (Docs' own modal) */

#contactModal,
.modal {
  background: var(--en-surface);
  border: 1px solid var(--en-line);
  border-radius: var(--en-radius-lg);
  box-shadow: var(--en-shadow-pop);
  color: var(--en-ink);
}

#contactModal .modal-header,
.modal .modal-header {
  border-bottom: 1px solid var(--en-line-soft);
  padding: 18px 24px;
}

#contactModal .modal-header h2,
#contactModal .modal-header h3,
.modal .modal-header h3 {
  font-size: 20px;
  margin: 0;
}

#contactModal .modal-body,
.modal .modal-body {
  padding: 20px 24px;
}

#contactModal .modal-footer,
.modal .modal-footer {
  background: var(--en-subtle);
  border-top: 1px solid var(--en-line-soft);
  border-radius: 0 0 var(--en-radius-lg) var(--en-radius-lg);
  box-shadow: none;
  padding: 14px 24px;
}

.modal-backdrop,
.modal-backdrop.fade.in {
  background: #141516;
  opacity: .55;
}

#contactModal label,
.modal label {
  color: var(--en-ink);
  font-size: 14px;
  font-weight: 500;
}

#contactModal input[type="text"],
#contactModal input[type="email"],
#contactModal textarea,
#contactModal select,
.modal input[type="text"],
.modal input[type="email"],
.modal textarea,
.modal select {
  background: var(--en-surface);
  border: 1px solid var(--en-control);
  border-radius: var(--en-radius);
  box-shadow: none;
  box-sizing: border-box;
  color: var(--en-ink);
  font-size: 15px;
  height: auto;
  padding: 9px 12px;
  width: 100%;
}

#contactModal textarea,
.modal textarea {
  min-height: 140px;
}

#contactModal input:focus,
#contactModal textarea:focus,
.modal input:focus,
.modal textarea:focus {
  border-color: var(--en-accent);
  box-shadow: var(--en-focus);
  outline: none;
}

/* Buttons Docs draws (contact form, ratings fallbacks) */
.btn {
  background: var(--en-surface);
  background-image: none;
  border: 1px solid var(--en-control);
  border-radius: var(--en-radius);
  box-shadow: none;
  color: var(--en-ink);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 16px;
  text-shadow: none;
}

.btn:hover,
.btn:focus {
  background: var(--en-fill);
  border-color: var(--en-control-hover);
  color: var(--en-ink);
}

.btn-primary,
.btn-success,
#contactModal .btn-primary,
#contactModal input[type="submit"],
.modal .btn-primary {
  background: var(--en-accent);
  background-image: none;
  border-color: var(--en-accent);
  color: var(--en-on-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
#contactModal .btn-primary:hover,
#contactModal input[type="submit"]:hover,
.modal .btn-primary:hover {
  background: var(--en-accent-hover);
  border-color: var(--en-accent-hover);
  color: var(--en-on-accent);
}

.alert {
  background: var(--en-caution-fill);
  border: 1px solid var(--en-caution-line);
  border-radius: var(--en-radius);
  color: var(--en-ink);
  text-shadow: none;
}

.alert-error,
.alert-danger {
  background: var(--en-danger-fill);
  border-color: var(--en-danger-line);
  color: var(--en-danger);
}

.alert-success {
  background: var(--en-success-fill);
  border-color: var(--en-success-line);
  color: var(--en-success);
}

/* ------------------------------------------------------------------ footer */

/* The footer sits inside #contentArea, after the page */
#contentArea footer,
footer {
  border-top: 1px solid var(--en-line);
  clear: both;
  margin: 48px 0 0;
  padding: 24px 0 0;
}

footer p,
footer.center p {
  color: var(--en-muted);
  font-size: 14px;
  margin: 0;
  text-align: left;
}

footer p a {
  color: var(--en-ink-2);
}

footer p a:hover {
  color: var(--en-accent);
  text-decoration: none;
}

footer span,
footer span a {
  color: var(--en-faint);
}

footer p span {
  float: right;
}

/* ------------------------------------------------------------------ phones and tablets */

@media (max-width: 979px) {
  #mainNav .nav-collapse .nav > li > a {
    margin: 2px 0;
  }

  #mainNav .nav-collapse.in {
    padding-bottom: 12px;
  }

  /* One column: the article first, then search and the category list */
  #contentArea .row-fluid {
    display: block;
  }

  #contentArea .row-fluid > #main-content,
  #contentArea .row-fluid > #sidebar {
    float: none;
    width: 100%;
  }

  #contentArea .row-fluid > #sidebar {
    margin-top: 28px;
  }
}

@media (max-width: 767px) {
  body {
    padding-left: 0;
    padding-right: 0;
  }

  #mainNav,
  #mainNav .navbar-inner,
  #docsSearch {
    margin-left: 0;
    margin-right: 0;
  }

  #mainNav .container-fluid {
    padding: 0 16px;
  }

  footer p span {
    display: block;
    float: none;
    margin-top: 4px;
  }

  #docsSearch {
    padding: 40px 16px 36px;
  }

  #docsSearch h1 {
    font-size: 28px;
    margin-bottom: 18px;
  }

  #searchBar .search-query,
  #searchBar input[type="text"] {
    font-size: 16px;
    height: 52px;
    padding-right: 56px;
  }

  #searchBar button {
    height: 40px;
    padding: 0 12px;
  }

  #searchBar button span {
    display: none;
  }

  #searchBar button .icon-search {
    display: block;
    margin-right: 0;
  }

  #contentArea {
    padding: 24px 16px 40px;
  }

  .contentWrapper {
    border-radius: var(--en-radius);
    padding: 24px 18px;
  }

  #fullArticle .title,
  #fullArticle h1 {
    font-size: 26px;
  }

  #fullArticle h2 {
    font-size: 20px;
    margin-top: 32px;
    padding-top: 22px;
  }

  #categoryHead h1 {
    font-size: 26px;
  }

  #categoryHead .sort {
    margin-top: 12px;
    position: static;
  }

  .category-list {
    grid-template-columns: 1fr;
  }

  #contentArea footer,
  footer {
    margin-top: 32px;
  }

  .related {
    border-radius: var(--en-radius);
    padding: 20px 18px;
  }
}

/* ------------------------------------------------------------------ motion and print */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
  }

  .category-list .category:hover {
    transform: none;
  }
}

@media print {
  #mainNav,
  #docsSearch,
  #sidebar,
  .articleRatings,
  .related,
  footer,
  #fullArticle .printArticle {
    display: none !important;
  }

  body,
  .contentWrapper {
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #000 !important;
    padding: 0 !important;
  }

  #fullArticle a {
    color: #000 !important;
  }

  #fullArticle img {
    break-inside: avoid;
    box-shadow: none;
  }
}