/* =========================================================================
   Workmates Docs theme — the website's dark palette and fonts (see
   site/css/style.css) mapped onto docsify-themeable's variables.
   ========================================================================= */
:root {
  /* Website tokens */
  --wm-bg: #0d120e;          /* near-black dark green canvas */
  --wm-bg-alt: #141a15;      /* alt sections / header */
  --wm-ink: #f4eeda;         /* bone text on dark */
  --wm-muted: #d1d8cd;       /* secondary text */
  --wm-accent: #ffd23f;      /* product yellow — links and primary accents */
  --wm-teal: #35d0a5;        /* secondary accent */
  --wm-border: rgba(244, 238, 218, 0.14);
  --wm-border-strong: rgba(244, 238, 218, 0.26);
  --wm-font-display: 'Bricolage Grotesque', 'Jost', system-ui, sans-serif;
  --wm-font-body: 'Jost', system-ui, -apple-system, sans-serif;

  /* docsify-themeable */
  --theme-color: var(--wm-accent);
  --base-background-color: var(--wm-bg);
  --base-color: var(--wm-ink);
  --base-font-family: var(--wm-font-body);
  --base-font-size: 17px;
  --base-line-height: 1.7;
  --heading-font-family: var(--wm-font-display);
  --heading-color: var(--wm-ink);
  --heading-font-weight: 700;
  --heading-h1-font-size: 2.4rem;
  --heading-h2-font-size: 1.6rem;
  --heading-h2-border-width: 0;
  --heading-h3-font-size: 1.2rem;
  --link-color: var(--wm-accent);
  --link-color--hover: var(--wm-teal);
  --link-text-decoration: none;
  --link-text-decoration--hover: underline;
  --strong-color: var(--wm-ink);
  --hr-border: 1px solid var(--wm-border);

  --sidebar-background: var(--wm-bg-alt);
  --sidebar-border-color: var(--wm-border);
  --sidebar-border-width: 0 1px 0 0;
  --sidebar-name-color: var(--wm-ink);
  --sidebar-name-font-family: var(--wm-font-display);
  --sidebar-nav-link-color: var(--wm-muted);
  --sidebar-nav-link-color--hover: var(--wm-ink);
  --sidebar-nav-link-color--active: var(--wm-accent);
  --sidebar-nav-link-font-weight--active: 600;
  --sidebar-nav-strong-color: var(--wm-teal);
  --sidebar-toggle-background: var(--wm-bg-alt);
  --sidebar-toggle-icon-color: var(--wm-ink);

  --search-input-background-color: var(--wm-bg);
  --search-input-border-color: var(--wm-border-strong);
  --search-input-color: var(--wm-ink);
  --search-result-heading-color: var(--wm-accent);
  --search-result-keyword-background: rgba(255, 210, 63, 0.18);
  --search-result-keyword-color: var(--wm-ink);
  --search-margin: 0;
  --sidebar-nav-margin: 0;

  --code-font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  --code-inline-background: rgba(244, 238, 218, 0.08);
  --code-inline-color: var(--wm-ink);
  --code-theme-background: #101611;
  --code-theme-text: var(--wm-ink);

  --blockquote-background: rgba(53, 208, 165, 0.08);
  --blockquote-border-color: var(--wm-teal);
  --blockquote-border-width: 0 0 0 4px;
  --blockquote-color: var(--wm-ink);
  --notice-background: rgba(255, 210, 63, 0.08);
  --notice-border-color: var(--wm-accent);
  --notice-border-width: 0 0 0 4px;
  --notice-font-style: normal;
  --notice-important-background: rgba(156, 63, 43, 0.18);
  --notice-important-border-color: #c4553b;
  --notice-tip-background: rgba(53, 208, 165, 0.08);
  --notice-tip-border-color: var(--wm-teal);

  --table-cell-border-color: var(--wm-border);
  --table-head-background: var(--wm-bg-alt);
  --table-row-odd-background: rgba(244, 238, 218, 0.03);
}

body { background: var(--wm-bg); }

/* Brand in the sidebar: the website's logo (same height as the site header's). */
/* Top margin centres the logo on the menu button beside it (both at 35px). */
.sidebar > h1 { margin: 15px 0 1rem; text-align: left; }
.sidebar > h1 .docs-logo { display: inline-block; height: 22px; width: auto; border: 0; border-radius: 0; vertical-align: middle; }

/* Section labels in the sidebar (the **bold** group names). */
.sidebar-nav > ul > li > p,
.sidebar-nav > ul > li > strong {
  font-family: var(--wm-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wm-teal);
  margin-top: 1.4rem;
}

/* Article links: chevron lines up with the section label above it (the
   theme indents this level by 17px); the article's own sections below
   stay indented. */
.sidebar-nav > ul > li > ul { margin-left: 0; }
/* An article's own sections: half the theme's indent, so their text lines
   up with the article title above them. */
.sidebar-nav .app-sub-sidebar { margin-left: 0; }
/* Long titles wrap onto a second line instead of being cut off with "…". */
.sidebar-nav a { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* Room at the bottom of the menu so its last items (Help › Troubleshooting)
   can scroll clear of a phone browser's own toolbar, and size the sidebar to
   the visible screen (dvh) where supported rather than the full 100vh. */
.sidebar-nav { padding-bottom: 140px; }
@supports (height: 100dvh) { .sidebar { height: 100dvh; } }

/* Inline links in articles are underlined, so they stand out from bold
   text. Headings are links too (for section anchors) — those stay plain. */
.markdown-section a:not(.anchor) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.markdown-section a:not(.anchor):hover { text-decoration-thickness: 2px; }

/* Keyboard keys: <kbd>Shift</kbd> — small inline badges. */
.markdown-section kbd {
  display: inline-block;
  min-width: 1.5em;
  margin: 0 0.1em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--wm-border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--wm-bg-alt);
  color: var(--wm-ink);
  font-family: var(--wm-font-body);
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  vertical-align: 0.1em;
  box-shadow: none;
}

/* Headings in the website's bold display face, with tighter spacing. */
.markdown-section h1,
.markdown-section h2,
.markdown-section h3 { font-family: var(--wm-font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1em; }
.markdown-section h1 { font-weight: 800; }
.markdown-section h2 { margin: 2.4rem 0 0.6rem; }
.markdown-section h3 { margin: 1.8rem 0 0.5rem; }
.markdown-section h2 + *,
.markdown-section h3 + * { margin-top: 0; }

.markdown-section table { display: table; width: 100%; }
.markdown-section img { border-radius: 10px; border: 0; }

/* Screenshots. Narrow ones sit on the right with the text wrapping round
   them; wide ones run the full width. On phones every one goes full width
   and they stack. Each new section starts below any picture still beside
   the text. */
.markdown-section img.shot { display: block; width: 100%; margin: 8px 0 24px; }
.markdown-section img.shot-right { float: right; width: 42%; max-width: 400px; margin: 4px 0 16px 28px; }
.markdown-section img.shot-right.shot-tall { width: 30%; max-width: 280px; }
.markdown-section h2 { clear: both; }
/* …unless it's tall (shot-wrap): then the following sections carry on
   beside it rather than leaving a gap. */
.markdown-section img.shot-wrap ~ h2 { clear: none; }
@media (max-width: 768px) {
  .markdown-section img.shot-right,
  .markdown-section img.shot-right.shot-tall { float: none; display: block; width: 100%; max-width: none; margin: 8px 0 24px; }
}
.markdown-section h1 + p { font-size: 1.15rem; color: var(--wm-muted); }

/* "Was this article helpful?" */
.wm-feedback {
  margin: 3.5rem 0 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--wm-border);
  border-radius: 10px;
  background: var(--wm-bg-alt);
  text-align: center;
}
.wm-feedback-title { margin: 0 !important; font-family: var(--wm-font-display); font-weight: 700; font-size: 1.1rem; color: var(--wm-ink); }
.wm-feedback-note { margin: 0.5rem 0 0 !important; color: var(--wm-muted); }
.wm-feedback-buttons { display: flex; justify-content: center; gap: 0.75rem; margin-top: 0.9rem; }
.wm-feedback-buttons button {
  font-family: var(--wm-font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
  border: 1px solid var(--wm-border-strong);
  background: transparent;
  color: var(--wm-ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wm-feedback-buttons button:hover,
.wm-feedback-buttons button:focus-visible { border-color: var(--wm-accent); color: var(--wm-accent); outline: none; }