@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&display=swap');

/* ==========================================================================
   Colloquial Support — help.colloquial.io
   Custom stylesheet for Help Scout Docs.

   Brand system lifted from www.colloquial.io (Inter + navy/mint scales) so the
   help centre reads as the same product, not a bolt-on.

   Load order in Help Scout is: platform CSS -> theme <style> block generated
   from the Docs colour settings -> this file. This file is last, so equal
   specificity wins. Where a rule fights the theme block it is commented.

   Sections
     @1  Tokens
     @2  Base
     @3  Header
     @4  Hero + search
     @5  Search suggestions
     @6  Home: collections + category cards
     @7  Category icons
     @8  Inner page layout
     @9  Article lists
     @10 Article typography
     @11 Callouts, tables, code, media
     @12 Article footer
     @13 Search results
     @14 Site footer
     @15 Responsive
     @16 Accessibility + print
   ========================================================================== */


/* @1 TOKENS ============================================================== */

:root {
  /* Brand — same values as the navy-* and mint-* Tailwind scales on www */
  --navy-50:  #f0f1f7;
  --navy-100: #cccfe0;
  --navy-200: #999fc1;
  --navy-300: #666fa2;
  --navy-400: #333f83;
  --navy-500: #000f64;
  --navy-600: #000c50;
  --navy-700: #00093c;
  --navy-800: #000628;

  --mint-50:  #f0fbf9;
  --mint-100: #ccf0ec;
  --mint-200: #99e1d9;
  --mint-300: #66d2c6;
  --mint-400: #33c3b3;
  --mint-500: #00b4a0;
  --mint-600: #009080;
  --mint-700: #006c60;
  --mint-800: #004840;

  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* Semantic */
  --page-bg: #f6f8fc;
  --surface: #ffffff;
  --surface-sunken: var(--slate-50);
  --ink: var(--slate-700);
  --ink-strong: var(--navy-500);
  --ink-muted: var(--slate-500);
  --ink-faint: var(--slate-400);
  /* slate-500 lands at 4.48:1 on --page-bg, just under AA for 13px meta text */
  --ink-quiet: #616f86;
  --hairline: rgb(0 15 100 / 9%);
  --hairline-strong: rgb(0 15 100 / 16%);
  --accent: var(--mint-500);
  /* WCAG 1.4.11 wants 3:1 for anything that identifies a control. The hairlines
     above are 1.2-1.4:1, which is fine for decorative card edges and dividers
     (those controls are identified by their text) but not for a form field,
     whose border is the only thing marking it. navy at 50% clears it at 3.49:1. */
  --field-border: #8087b2;
  /* Focus rings need 3:1 too. mint-500 is 2.6:1 on white, so focus is navy on
     light surfaces and mint-300 on the navy header (9.3:1). */
  --focus: var(--navy-500);
  --focus-on-navy: var(--mint-300);

  /* Type */
  --sans: 'Inter', 'Inter Variable', -apple-system, BlinkMacSystemFont,
          'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas,
          'Liberation Mono', 'Courier New', monospace;

  /* Shape + depth — matches the marketing site's rounded-xl/2xl and shadow-sm/lg */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(0 15 100 / 5%);
  --shadow-md: 0 1px 3px rgb(0 15 100 / 6%), 0 8px 20px -8px rgb(0 15 100 / 10%);
  --shadow-lg: 0 2px 4px rgb(0 15 100 / 5%), 0 18px 40px -12px rgb(0 15 100 / 16%);
  /* Decorative glow only — the compliant indicator is the border and outline. */
  --ring: 0 0 0 3px rgb(0 15 100 / 12%);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;

  --shell: 1200px;
  --gutter: 24px;
}


/* @2 BASE ================================================================ */

/* Theme block sets `body { background: #f1f5f3 }` — this replaces it with the
   cooler ground the marketing site uses. Also update Page Background in the
   Docs colour settings to #f6f8fc so there is no first-paint flash. */
body {
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input, button, select, textarea {
  font-family: var(--sans);
  letter-spacing: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  color: var(--ink-strong);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

::selection {
  background: var(--mint-100);
  color: var(--navy-700);
}

html {
  scroll-behavior: smooth;
}

a {
  transition: color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}


/* @3 HEADER ============================================================== */

.navbar {
  margin-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Theme block sets the navbar fill from Header Background (#000f64). Kept, with
   a mint hairline under it so the header edge reads as brand rather than shadow. */
.navbar .navbar-inner {
  background: var(--navy-500);
  border: 0;
  border-bottom: 1px solid rgb(0 180 160 / 28%);
  border-radius: 0;
  box-shadow: none;
  min-height: 68px;
  padding: 0;
}

.navbar .navbar-inner .container-fluid {
  align-items: center;
  display: flex;
  gap: 16px;
  margin: 0 auto;
  max-width: var(--shell);
  padding: 0 var(--gutter);
}

/* Logo is uploaded at 215x75; pin it to a sane optical height. */
.navbar .brand {
  align-items: center;
  display: inline-flex;
  height: 68px;
  margin: 0;
  padding: 0;
  text-shadow: none;
}

.navbar .brand > img {
  height: 34px;
  width: auto;
  max-width: 100%;
}

.navbar .nav-collapse {
  flex: 1 1 auto;
  min-width: 0;
}

.navbar .nav-collapse > nav {
  display: flex;
  justify-content: flex-end;
}

/* Platform absolutely positions ul.nav at right:0 of the navbar, which puts it
   outside the shell padding on narrow desktops. Put it back in flow. */
.navbar .nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  margin: 0 0 0 auto;
  position: static;
  right: auto;
}

.navbar .nav > li {
  line-height: normal;
}

.navbar .nav > li > a {
  border-radius: var(--r-pill);
  color: rgb(255 255 255 / 78%);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 8px 14px;
  text-shadow: none;
}

.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
  background: rgb(255 255 255 / 10%);
  color: #fff;
}

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  background: rgb(0 180 160 / 18%);
  box-shadow: inset 0 0 0 1px rgb(0 180 160 / 45%);
  color: #fff;
}

/* Bootstrap 2 leaves a caret glyph in the collection links; nothing opens.
   !important because the platform sets it from `.nav > .active > a .caret`. */
.navbar .nav > li > a .caret {
  display: none !important;
}

/* Contact is the one action in the header, and the only pill that does NOT take
   the marketing site's white-on-mint-700 CTA. On the navy header the two
   requirements collide: a white label needs a fill of #00786a or darker to
   clear 4.5:1, but any fill that dark drops to 2.65:1 against the navy behind
   it and the pill stops reading as a button. Bright mint with a navy label
   satisfies both — label 7.3:1, pill against the header 6.4:1. Every pill on a
   light surface uses white on mint-700 instead. */
.navbar .nav > li#contact > a {
  background: var(--mint-500);
  color: var(--navy-700);
  font-weight: 600;
  margin-left: 8px;
  padding: 8px 18px;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}

.navbar .nav > li#contact > a:active {
  transform: scale(0.96);
}

.navbar .nav > li#contact > a:hover,
.navbar .nav > li#contact > a:focus {
  background: var(--mint-300);
  box-shadow: none;
  color: var(--navy-700);
}

.navbar .nav > li#contactMobile {
  display: none;
}

/* Hamburger */
.navbar .btn-navbar {
  background: rgb(255 255 255 / 10%);
  border: 0;
  border-radius: var(--r-sm);
  box-shadow: none;
  margin: 0;
  padding: 10px 11px;
  text-shadow: none;
}

.navbar .btn-navbar:hover,
.navbar .btn-navbar:focus {
  background: rgb(255 255 255 / 18%);
}

.navbar .btn-navbar .icon-bar {
  background: #fff;
  border-radius: 2px;
  box-shadow: none;
  height: 2px;
  width: 18px;
}


/* @4 HERO + SEARCH ======================================================= */

/* Replaces the platform's grey band.
   The composition is the app's own sign-in background — see
   app/assets/stylesheets/tailwind-components/_devise_session.css in the core
   repo: a mint dome from above centre, a navy glow from the bottom corner, and
   a diagonal base ramp. Colours are the marketing palette rather than gaia's
   oklch tokens, because the two scales genuinely differ (gaia navy-500 is far
   lighter than the #000f64 the marketing site uses) and this site follows
   www.colloquial.io.
   Adapted in two ways. First, devise paints a full viewport, so its ramp can
   reach navy-200 at 100%; here the band is ~350px, which compressed that into a
   heavy blue edge, so the stop is pushed to 160% and only its leading edge
   shows. Second, the glow and end stop are held at a strength where the darkest
   point of the whole band (#cacfe1, bottom-right) still clears 4.5:1 for body
   text, so no future wording can land somewhere illegible. The h1 measures
   15.4:1 and the subtitle 6.9:1 where they actually sit. */
#docsSearch {
  background-color: var(--mint-50);
  background-image:
    radial-gradient(
      ellipse 135% 90% at 50% -42%,
      rgb(0 180 160 / 30%) 0%,
      rgb(102 210 198 / 17%) 38%,
      rgb(102 210 198 / 0) 58%
    ),
    radial-gradient(
      ellipse 90% 70% at 100% 108%,
      rgb(102 111 162 / 16%) 0%,
      rgb(102 111 162 / 0) 62%
    ),
    linear-gradient(
      168deg,
      var(--mint-100) 0%,
      var(--mint-50) 26%,
      var(--slate-100) 62%,
      #b4b9d3 160%
    );
  border: 0;
  border-bottom: 1px solid var(--hairline);
  margin: 0 0 56px;
  overflow: hidden;
  padding: 76px var(--gutter) 84px;
  position: relative;
  text-align: center;
}

#docsSearch h1 {
  color: var(--navy-500);
  font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0 auto;
  max-width: 20ch;
  padding: 0;
}

/* Standing subtitle under the H1. The platform gives no field for it, so it
   comes from content here — keep it in sync with the site description. */
#docsSearch h1::after {
  color: var(--slate-500);
  content: 'Guides, how-tos and release notes for Colloquial.';
  display: block;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.6;
  margin: 18px auto 0;
  max-width: 46ch;
}

#docsSearch #searchBar {
  display: flex;
  gap: 10px;
  margin: 34px auto 0;
  max-width: 620px;
  padding: 0;
  position: relative;
  width: 100%;
}

#docsSearch #searchBar .search-query {
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  color: var(--navy-700);
  flex: 1 1 auto;
  font-size: 1rem;
  height: 54px;
  margin: 0;
  padding: 0 22px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: auto;
}

#docsSearch #searchBar .search-query::placeholder {
  color: var(--slate-500);
}

#docsSearch #searchBar .search-query:focus {
  border-color: var(--navy-500);
  box-shadow: var(--ring);
}

/* Same recipe as the primary CTA on www.colloquial.io: bg-mint-700, white
   label, hover mint-800, rounded-full, active:scale-[0.96], 150ms ease-out. */
#docsSearch #searchBar button,
#searchBar button {
  background: var(--mint-700);
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 600;
  height: 54px;
  padding: 0 30px;
  position: static;
  text-shadow: none;
  top: auto;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}

#docsSearch #searchBar button:hover,
#searchBar button:hover {
  background: var(--mint-800);
}

#docsSearch #searchBar button:active {
  transform: scale(0.96);
}


/* @5 SEARCH SUGGESTIONS ================================================== */

#serp-dd {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  left: 0;
  overflow: hidden;
  padding: 6px;
  right: auto;
  text-align: left;
  top: calc(100% + 8px);
  width: 100%;
}

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

#serp-dd .result > li {
  border: 0;
  margin: 0;
}

/* 6px inner + 6px padding = the 12px outer radius */
#serp-dd .result > li > a {
  border-radius: 6px;
  color: var(--navy-600);
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 10px 14px;
  text-decoration: none;
}

#serp-dd .result > li > a:hover,
#serp-dd .result > li.active > a {
  background: var(--mint-50);
  color: var(--navy-700);
}


/* @6 HOME: COLLECTIONS + CATEGORY CARDS ================================== */

#contentArea {
  margin: 0 auto;
  max-width: var(--shell);
  padding: 0 var(--gutter) 72px;
}

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

.collection-category > h2 {
  align-items: baseline;
  display: flex;
  font-size: 1.375rem;
  font-weight: 600;
  gap: 12px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.collection-category > h2 a {
  color: var(--navy-500);
  text-decoration: none;
}

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

/* Hairline rule that fills the space beside the heading — cheap structure. */
.collection-category > h2::after {
  background: var(--hairline);
  content: '';
  flex: 1 1 auto;
  height: 1px;
}

/* Grid replaces the platform's inline-block 29% cards, which left ragged rows
   and unequal heights whenever a title wrapped. */
.category-list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin: 24px 0 0;
}

.category-list .category {
  align-content: start;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 0;
  margin: 0;
  min-height: 0;
  padding: 26px 24px 22px;
  text-align: left;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  width: auto;
}

.category-list .category:hover,
.category-list .category:focus-visible {
  background: var(--surface);
  border-color: var(--mint-300);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-2px);
}

/* Icon chip. The glyph itself comes from --category-icon in @7. */
.category-list .category::before {
  background-color: var(--mint-50);
  background-image: var(--category-icon, var(--icon-default));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  border: 1px solid var(--mint-100);
  border-radius: 11px;
  content: '';
  display: block;
  height: 42px;
  margin-bottom: 18px;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  width: 42px;
}

.category-list .category:hover::before {
  background-color: var(--mint-100);
  border-color: var(--mint-200);
}

.category-list .category h3 {
  color: var(--navy-500);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin: 0;
}

.category-list .category p {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 8px 0 0;
}

/* Descriptions are empty for most categories; don't reserve space for them. */
.category-list .category p:empty {
  display: none;
}

/* Theme block colours .article-count with the link colour (#00b4a0) — too light
   for 13px text, so it is restated here as a quiet meta pill. */
.category-list .category .article-count,
.category-list .category:hover .article-count {
  background: var(--slate-100);
  border-radius: var(--r-pill);
  color: var(--slate-600);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  justify-self: start;
  letter-spacing: 0.01em;
  margin-top: 16px;
  padding: 3px 10px;
}


/* @7 CATEGORY ICONS ======================================================
   Help Scout has no icon field, so each category card is keyed by its numeric
   id. Ids are stable — read them off the card markup (`id="category-49"`) or
   the category URL. Adding a category without a line here is safe: it falls
   back to --icon-default.
   ====================================================================== */

:root {
  --icon-default:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3C/svg%3E");
  --icon-flag:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4'/%3E%3Cpath d='M6 4h10l-1.6 4L16 12H6z'/%3E%3C/svg%3E");
  --icon-layers:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5 9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E");
  --icon-eye:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
  --icon-chart:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18'/%3E%3Cpath d='M6 20V12'/%3E%3Cpath d='M12 20V5'/%3E%3Cpath d='M18 20v-6'/%3E%3C/svg%3E");
  --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
  --icon-key:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='16' r='4'/%3E%3Cpath d='M11 13L21 3'/%3E%3Cpath d='M17 3h4v4'/%3E%3C/svg%3E");
  --icon-plug:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v6M15 3v6'/%3E%3Cpath d='M6 9h12v3a6 6 0 0 1-12 0V9z'/%3E%3Cpath d='M12 21v-3'/%3E%3C/svg%3E");
  --icon-shield:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8.3-8 9.3-4.5-1-8-4.3-8-9.3V6l8-3z'/%3E%3C/svg%3E");
  --icon-megaphone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2.5l12 4.5V6L3 11z'/%3E%3Cpath d='M17 9a3.6 3.6 0 0 1 0 7'/%3E%3Cpath d='M7 15v4'/%3E%3C/svg%3E");
  --icon-lifebuoy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Cpath d='M5.6 5.6l3.8 3.8M14.6 14.6l3.8 3.8M18.4 5.6l-3.8 3.8M9.4 14.6l-3.8 3.8'/%3E%3C/svg%3E");
  --icon-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 8h2M13 8h2M9 12h2M13 12h2M10 21v-4h4v4'/%3E%3C/svg%3E");
  --icon-grid:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");
  --icon-compass:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5 5-2z'/%3E%3C/svg%3E");
}

/* For all users */
#category-49 { --category-icon: var(--icon-flag); }      /* Get Started */
#category-30 { --category-icon: var(--icon-layers); }    /* Facts */
#category-33 { --category-icon: var(--icon-eye); }       /* Views */
#category-32 { --category-icon: var(--icon-chart); }     /* Insight */
#category-53 { --category-icon: var(--icon-compass); }   /* Other */

/* For admins */
#category-4  { --category-icon: var(--icon-flag); }      /* Getting Started */
#category-62 { --category-icon: var(--icon-building); }  /* Organisation */
#category-60 { --category-icon: var(--icon-grid); }      /* Workspace */
#category-25 { --category-icon: var(--icon-key); }       /* Identity and Access */
#category-10 { --category-icon: var(--icon-plug); }      /* Integrations */
#category-7  { --category-icon: var(--icon-shield); }    /* Privacy and security */
#category-12 { --category-icon: var(--icon-megaphone); } /* Release Notes */
#category-29 { --category-icon: var(--icon-lifebuoy); }  /* Support policy */


/* @8 INNER PAGE LAYOUT ===================================================
   Article and category pages ship as a Bootstrap 2 float grid (#main-content
   floats right of a .span3 sidebar). Grid gives a sticky left rail, the docs
   convention, and drops the float clearing entirely.
   ====================================================================== */

#contentArea .row-fluid {
  align-items: start;
  display: grid;
  gap: 48px;
  grid-template-columns: 264px minmax(0, 1fr);
  padding-top: 40px;
}

/* The row carries Bootstrap's :before/:after clearfix. Under grid or flex those
   become real items and inject a phantom row — they have no job here. */
#contentArea .row-fluid::before,
#contentArea .row-fluid::after {
  display: none;
}

#contentArea .row-fluid > #sidebar {
  float: none;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  position: sticky;
  top: 100px;
  width: auto;
}

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

.contentWrapper {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  min-height: 0;
  padding: 48px 56px 44px;
}

/* Sidebar search */
#sidebar #searchBar.sm {
  display: block;
  margin: 0 0 28px;
  padding: 0;
  width: auto;
}

#sidebar form .search-query {
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  box-shadow: none;
  color: var(--navy-700);
  height: 42px;
  font-size: 0.9375rem;
  padding: 0 38px 0 14px;
}

#sidebar form .search-query:focus {
  border-color: var(--navy-500);
  box-shadow: var(--ring);
}

#sidebar #searchBar button,
#sidebar #searchBar button:hover,
#sidebar #searchBar button:focus {
  background: none;
  border: 0;
  box-shadow: none;
  height: 42px;
  padding: 0 12px;
  position: absolute;
  right: 0;
  top: 0;
}

#sidebar .icon-search {
  color: var(--slate-500);
}

/* Sidebar section label */
#sidebar h3 {
  color: var(--ink-quiet);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  margin: 0 0 10px;
  padding-left: 12px;
  text-transform: uppercase;
}

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

#sidebar .nav-list > li {
  margin: 0;
}

#sidebar .nav-list > li > a {
  align-items: center;
  border-radius: var(--r-sm);
  color: var(--slate-600);
  display: flex;
  font-size: 0.9375rem;
  font-weight: 500;
  justify-content: space-between;
  line-height: 1.4;
  margin: 1px 0;
  padding: 9px 12px;
  text-decoration: none;
  text-shadow: none;
}

#sidebar .nav-list > li > a:hover,
#sidebar .nav-list > li > a:focus {
  background: rgb(0 15 100 / 4%);
  color: var(--navy-500);
  text-decoration: none;
}

#sidebar .nav-list > .active > a,
#sidebar .nav-list > .active > a:hover,
#sidebar .nav-list > .active > a:focus {
  background: var(--mint-50);
  box-shadow: inset 2px 0 0 var(--mint-500);
  color: var(--navy-500);
  font-weight: 600;
  text-shadow: none;
}

#sidebar .nav-list .icon-arrow {
  opacity: 0.35;
}

#sidebar .nav-list > li > a:hover .icon-arrow,
#sidebar .nav-list > .active > a .icon-arrow {
  opacity: 0.8;
}

/* Related block on article pages */
.related {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: none;
  margin-top: 28px;
  padding: 18px 20px;
}

.related h3 {
  padding-left: 0;
}

.related ul > li a {
  color: var(--navy-500);
  font-size: 0.9375rem;
  text-decoration: none;
}

.related ul > li a:hover {
  color: var(--mint-700);
  text-decoration: underline;
}


/* @9 ARTICLE LISTS ======================================================= */

#categoryHead {
  border-bottom: 1px solid var(--hairline);
  margin: 0 0 8px;
  padding-bottom: 22px;
  position: relative;
}

#categoryHead h1,
.contentWrapper h1 {
  color: var(--navy-500);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0;
}

#categoryHead p.descrip {
  color: var(--ink-muted);
  font-size: 1rem;
  margin: 10px 0 0;
  max-width: 62ch;
}

#categoryHead p.descrip:empty {
  display: none;
}

#categoryHead .sort {
  margin-top: 16px;
}

#categoryHead .sort select,
#sortBy {
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  box-shadow: none;
  color: var(--slate-600);
  font-size: 0.875rem;
  height: 36px;
  margin: 0;
  padding: 0 10px;
}

.articleList {
  font-size: 1rem;
  margin: 0;
}

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

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

.articleList > li > a {
  align-items: center;
  color: var(--navy-500);
  display: flex;
  font-size: 1.0625rem;
  font-weight: 500;
  gap: 12px;
  letter-spacing: -0.01em;
  margin: 0;
  padding: 16px 14px 16px 12px;
  border-radius: var(--r-sm);
  text-decoration: none;
}

.articleList > li > a:hover,
.articleList > li > a:focus {
  background: var(--mint-50);
  color: var(--navy-600);
}

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

/* Trailing chevron so rows read as navigation. */
.articleList > li > a::after {
  color: var(--mint-500);
  content: '';
  border-right: 1.6px solid currentColor;
  border-top: 1.6px solid currentColor;
  height: 7px;
  margin-left: auto;
  opacity: 0;
  transform: rotate(45deg) translateX(-2px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  width: 7px;
}

.articleList > li > a:hover::after,
.articleList > li > a:focus::after {
  opacity: 1;
  transform: rotate(45deg) translateX(0);
}

.articleList .icon-article-doc {
  color: var(--mint-600);
  flex: 0 0 auto;
  opacity: 0.85;
}


/* @10 ARTICLE TYPOGRAPHY =================================================
   The theme block colours #fullArticle text from Article Text Colour. These
   rules restate it at matching specificity and set the reading rhythm.
   ====================================================================== */

#fullArticle {
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.75;
}

#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle dd {
  color: var(--ink);
}

#fullArticle > *,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle blockquote,
#fullArticle table,
#fullArticle .callout-yellow,
#fullArticle .callout-blue,
#fullArticle .callout-red,
#fullArticle .callout-green,
#fullArticle aside {
  max-width: 74ch;
}

#fullArticle .title,
#fullArticle h1 {
  border-bottom: 1px solid var(--hairline);
  color: var(--navy-500);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 0 0 32px;
  max-width: 34ch;
  padding-bottom: 24px;
  padding-right: 48px;
}

#fullArticle h2 {
  color: var(--navy-500);
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin: 56px 0 16px;
  scroll-margin-top: 96px;
}

#fullArticle h3 {
  color: var(--navy-600);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin: 36px 0 12px;
  scroll-margin-top: 96px;
}

#fullArticle h4 {
  color: var(--navy-600);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 28px 0 10px;
}

#fullArticle > :first-child,
#fullArticle h1 + p,
#fullArticle .title + p,
#fullArticle .title + .printArticle + p {
  margin-top: 0;
}

/* Lead paragraph — the article convention is a one-line summary first. */
#fullArticle .title + p,
#fullArticle .title + .printArticle + p {
  color: var(--slate-600);
  font-size: 1.1875rem;
  line-height: 1.65;
  margin-bottom: 28px;
}

#fullArticle p {
  margin: 0 0 20px;
  text-wrap: pretty;
}

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

#fullArticle a {
  color: var(--navy-500);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--mint-400);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

#fullArticle a:hover,
#fullArticle a:focus {
  color: var(--mint-700);
  text-decoration-color: var(--mint-600);
}

/* The platform greys visited links to #a0a0a0, which is 2.5:1 on white. Every
   link surface therefore states its own :visited colour. */
#fullArticle a:visited {
  color: var(--navy-500);
}

#fullArticle a:visited:hover {
  color: var(--mint-700);
}

.articleList > li > a:visited,
.related ul > li a:visited,
#serp-dd .result > li > a:visited {
  color: var(--navy-500);
}

#sidebar .nav-list > li > a:visited {
  color: var(--slate-600);
}

#sidebar .nav-list > .active > a:visited {
  color: var(--navy-500);
}

.navbar .nav > li > a:visited {
  color: rgb(255 255 255 / 78%);
}

.navbar .nav > .active > a:visited,
.navbar .nav > li#contact > a:visited,
.navbar .nav > li#contactMobile > a:visited {
  color: #fff;
}

.navbar .nav > li#contact > a:visited {
  color: var(--navy-700);
}

.articleFoot p.help a.contactUs:visited {
  color: #fff !important;
}

footer p a:visited {
  color: var(--slate-600);
}

.collection-category > h2 a:visited {
  color: var(--navy-500);
}

#fullArticle ul,
#fullArticle ol {
  margin: 0 0 22px;
  padding-left: 26px;
}

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

#fullArticle li::marker {
  color: var(--mint-600);
  font-weight: 600;
}

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

#fullArticle hr,
#fullArticle hr[role='separator'] {
  background: rgb(0 15 100 / 14%);
  border: 0;
  height: 1px;
  margin: 48px 0;
}

#fullArticle hr + h2,
#fullArticle hr + h3 {
  margin-top: 0;
}

#fullArticle blockquote {
  background: var(--surface-sunken);
  border: 0;
  border-left: 3px solid var(--mint-400);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--slate-600);
  margin: 0 0 24px;
  padding: 16px 20px;
}

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

/* Print action, top-right of the article card */
#fullArticle .printArticle {
  color: var(--ink-faint);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  right: 0;
  top: 4px;
  text-decoration: none;
}

#fullArticle .printArticle:hover {
  background: var(--slate-100);
  color: var(--navy-500);
}


/* @11 CALLOUTS, TABLES, CODE, MEDIA ====================================== */

/* One callout system: tinted fill, matching left accent, no heavy borders.
   .callout-yellow is the admin-only notice used across the article set. */
#fullArticle .callout-yellow,
#fullArticle .callout-blue,
#fullArticle .callout-red,
#fullArticle .callout-green,
#fullArticle .callout,
#fullArticle .private-note,
#fullArticle aside {
  border: 1px solid var(--hairline);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  box-shadow: none;
  margin: 0 0 24px;
  padding: 16px 20px;
}

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

#fullArticle .callout-yellow {
  background: #fffaeb;
  border-color: #fde68a;
  border-left-color: #f0b429;
}

#fullArticle .callout-blue,
#fullArticle aside {
  background: var(--mint-50);
  border-color: var(--mint-100);
  border-left-color: var(--mint-500);
}

#fullArticle .callout-green {
  background: #f0fdf6;
  border-color: #bbf7d1;
  border-left-color: #16a34a;
}

#fullArticle .callout-red {
  background: #fef2f2;
  border-color: #fecaca;
  border-left-color: #dc2626;
}

#fullArticle .callout,
#fullArticle .private-note {
  background: var(--surface-sunken);
  border-color: var(--hairline);
  border-left-color: var(--navy-300);
}

/* Tables */
#fullArticle table {
  border: 1px solid var(--hairline);
  border-collapse: separate;
  border-radius: var(--r-md);
  border-spacing: 0;
  font-size: 0.9375rem;
  margin: 0 0 28px;
  overflow: hidden;
  width: 100%;
}

#fullArticle table th {
  background: var(--surface-sunken);
  border: 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--navy-500);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 16px;
  text-align: left;
  text-transform: uppercase;
}

#fullArticle table td {
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 12px 16px;
  vertical-align: top;
}

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

/* Code */
#fullArticle code,
#fullArticle .inline-code,
#fullArticle mark {
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
  border-radius: 5px;
  color: var(--mint-700);
  font-family: var(--mono);
  font-size: 0.875em;
  padding: 2px 6px;
  white-space: normal;
}

#fullArticle pre {
  background: var(--navy-700);
  border: 0;
  border-radius: var(--r-md);
  color: #e6e9f5;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0 0 26px;
  overflow-x: auto;
  padding: 18px 20px;
}

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

/* Screenshots carry most of the meaning in these articles — frame them. */
/* Outline is pure black at 10%, not the navy hairline: a tinted edge picks up
   the screenshot underneath it and reads as dirt. */
#fullArticle img {
  background: var(--surface);
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  display: block;
  height: auto;
  margin: 4px 0 24px;
  padding: 0;
}

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

/* Article images carry an inline width:100%, so a paragraph holding nothing but
   a screenshot has to escape the reading measure or the shot renders undersized. */
#fullArticle p:has(> img) {
  max-width: none;
}

#fullArticle img {
  max-width: 100%;
}

/* The authoring convention wraps screenshots in <figure> with a breadcrumb
   <figcaption> ("Colloquial > Settings > Security & SSO"). */
#fullArticle figure {
  margin: 4px 0 28px;
  max-width: none;
}

#fullArticle figure img {
  margin: 0;
}

/* Platform centres and italicises captions. These are UI breadcrumb paths, not
   pull quotes, so left-align them to the image edge and drop the italic. */
#fullArticle figcaption {
  color: var(--slate-500);
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.5;
  margin-top: 10px;
  text-align: left;
  text-wrap: pretty;
}

/* Breadcrumb captions are navigation paths, so keep the separators from
   collapsing into the words around them. */
#fullArticle figcaption > b,
#fullArticle figcaption > strong {
  color: var(--slate-600);
}

#fullArticle iframe,
#fullArticle video {
  border: 0;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  max-width: 100%;
}


/* @12 ARTICLE FOOTER ===================================================== */

.articleFoot {
  align-items: center;
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 56px;
  padding: 18px 22px;
}

.articleFoot .icon-contact {
  color: var(--mint-600);
  flex: 0 0 auto;
}

.articleFoot p.help {
  color: var(--slate-600);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-style: normal;
  margin: 0;
}

/* !important is load-bearing: the platform colours .articleFoot links #a0a0a0
   at a specificity four classes do not reach. Verified by A/B on a freshly
   fetched sheet — without it the label paints grey on the dark fill, which is
   1.9:1. With it, 6.3:1. */
.articleFoot p.help a.contactUs {
  background: var(--mint-700);
  border-radius: var(--r-pill);
  color: #fff !important;
  font-weight: 600;
  margin-left: 8px;
  padding: 6px 16px;
  text-decoration: none;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
  white-space: nowrap;
}

.articleFoot p.help a.contactUs:hover {
  background: var(--mint-800);
  color: #fff !important;
}

.articleFoot p.help a.contactUs:active {
  transform: scale(0.96);
}

.articleFoot time,
.articleFoot p.lu,
.articleFoot time.lu {
  color: var(--slate-500);
  font-variant-numeric: tabular-nums;
  float: none;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-style: normal;
  letter-spacing: 0.01em;
  margin: 0 0 0 auto;
}

#sbContactMobile {
  display: none;
}

.articleRatings {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: none;
  color: var(--navy-500);
  margin-top: 24px;
}


/* @13 SEARCH RESULTS ===================================================== */

#serp > h1 {
  color: var(--navy-500);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}

#serp > h1 strong {
  color: var(--mint-700);
  font-weight: 700;
}

#serp p.articlesFound {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  margin: 0 0 24px;
}

#serp p.articlesFound strong {
  color: var(--navy-500);
  font-variant-numeric: tabular-nums;
}

#serp .articleList > li {
  border-bottom: 1px solid var(--hairline);
  padding: 4px 0;
}

#serp .articleList > li > a {
  padding-bottom: 6px;
}

#serp .articleList > li > p {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 78ch;
  padding: 0 14px 0 12px;
}

#noResults {
  background: var(--surface);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-md);
  color: var(--ink-muted);
  margin: 24px 0;
  padding: 32px;
  text-align: center;
}


/* @14 SITE FOOTER ======================================================== */

footer,
footer.center {
  border-top: 1px solid var(--hairline);
  margin-top: 64px;
  padding: 28px 0 40px;
}

footer p {
  color: var(--ink-quiet);
  font-size: 0.8125rem;
  margin: 0;
}

/* Vertical padding on an inline link grows the hit area without changing the
   line box, so the 16px-tall footer links stay easy to hit. */
footer p a {
  color: var(--slate-600);
  display: inline-block;
  padding: 4px 0;
  text-decoration: none;
}

footer p a:hover {
  color: var(--navy-500);
  text-decoration: underline;
}


/* @15 RESPONSIVE ========================================================= */

@media (max-width: 1024px) {
  #contentArea .row-fluid {
    gap: 36px;
    grid-template-columns: 232px minmax(0, 1fr);
  }

  .contentWrapper {
    padding: 40px 40px 36px;
  }
}

@media (max-width: 860px) {
  #contentArea .row-fluid {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 28px;
  }

  #contentArea .row-fluid > #main-content {
    order: 2;
  }

  #contentArea .row-fluid > #sidebar {
    order: 1;
    border-bottom: 1px solid var(--hairline);
    margin: 0 0 28px;
    padding-bottom: 20px;
    position: static;
    top: auto;
  }

  /* Collapse the category rail into a scrollable row on small screens. */
  #sidebar .nav-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  #sidebar .nav-list > li > a {
    white-space: nowrap;
  }

  /* Match the platform's own `.nav-list > li.active > a .icon-arrow` specificity,
     otherwise the chevron survives into the horizontal rail. */
  #sidebar .nav-list > li > a > .icon-arrow,
  #sidebar .nav-list > .active > a > .icon-arrow {
    display: none;
  }

  /* A left accent bar reads as a stray bracket once the rail runs horizontally. */
  #sidebar .nav-list > .active > a,
  #sidebar .nav-list > .active > a:hover,
  #sidebar .nav-list > .active > a:focus {
    box-shadow: inset 0 0 0 1px var(--mint-200);
  }
}

@media (max-width: 768px) {
  .navbar .navbar-inner .container-fluid {
    display: block;
    padding: 0 16px;
  }

  .navbar .brand {
    height: 60px;
  }

  .navbar .brand > img {
    height: 28px;
  }

  .navbar .btn-navbar {
    margin-top: 14px;
    position: absolute;
    right: 16px;
    top: 0;
  }

  .navbar .nav {
    display: block;
    margin: 0;
    padding-bottom: 12px;
  }

  .navbar .nav > li > a {
    border-radius: var(--r-sm);
    display: block;
    padding: 10px 12px;
  }

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

  .navbar .nav > li#contactMobile {
    display: block;
  }

  .navbar .nav > li#contactMobile > a {
    background: var(--mint-500);
    color: var(--navy-700);
    font-weight: 600;
    margin-top: 8px;
    text-align: center;
  }

  /* Platform puts 20px padding on <body> below 768px; cancel it so the hero
     still runs edge to edge. */
  #docsSearch {
    margin: 0 -20px 36px;
    padding: 48px 20px 52px;
  }

  #docsSearch #searchBar {
    flex-direction: column;
    gap: 10px;
  }

  #docsSearch #searchBar .search-query,
  #docsSearch #searchBar button {
    height: 48px;
    width: 100%;
  }

  /* Platform swaps the button label for a bare magnifier here — it hides the
     label with font-size:0 and text-indent:-3000px. A full-width pill with a
     lone icon reads as a mystery button, so restore the word. */
  #docsSearch #searchBar button .icon-search {
    display: none;
  }

  #docsSearch #searchBar button span {
    display: inline;
    font-size: 1rem;
    text-indent: 0;
  }

  #contentArea {
    padding: 0 16px 48px;
  }

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

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

  .contentWrapper {
    padding: 28px 22px 24px;
  }

  #fullArticle {
    font-size: 1rem;
  }

  #fullArticle .title,
  #fullArticle h1,
  #categoryHead h1,
  .contentWrapper h1 {
    font-size: 1.625rem;
    padding-right: 40px;
  }

  #fullArticle h2 {
    font-size: 1.3125rem;
    margin-top: 40px;
  }

  #fullArticle table {
    display: block;
    overflow-x: auto;
  }

  .articleFoot {
    padding: 16px;
  }

  .articleFoot time,
  .articleFoot p.lu {
    margin-left: 0;
    width: 100%;
  }
}


/* @16 ACCESSIBILITY + PRINT ============================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  border-radius: var(--r-sm);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The offset gap exposes the surface behind the ring, so the ring reads on
   white, on the page ground and on the sunken fill alike. */
.navbar a:focus-visible,
.navbar button:focus-visible {
  outline-color: var(--focus-on-navy);
}

/* Pills already have their own radius; a squared ring around them looks broken. */
.navbar .nav > li > a:focus-visible,
.navbar .nav > li#contact > a:focus-visible,
.articleFoot p.help a.contactUs:focus-visible,
#docsSearch #searchBar .search-query:focus-visible,
#docsSearch #searchBar button:focus-visible {
  border-radius: var(--r-pill);
}

.category-list .category:focus-visible {
  border-radius: var(--r-lg);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .navbar,
  #docsSearch,
  #sidebar,
  .articleFoot,
  footer,
  .printArticle,
  #categoryHead .sort {
    display: none !important;
  }

  body {
    background: #fff;
  }

  #contentArea .row-fluid {
    display: block;
  }

  .contentWrapper {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  #fullArticle {
    font-size: 11pt;
  }

  #fullArticle a {
    color: #000;
    text-decoration: underline;
  }

  #fullArticle img {
    box-shadow: none;
    max-width: 100%;
    page-break-inside: avoid;
  }

  #fullArticle h2,
  #fullArticle h3 {
    page-break-after: avoid;
  }
}