/* ==========================================================================
   Legends Documentation Portal - Stylesheet

   Themed to match the LegendsChat application so the two read as one product.

   Source of truth for the design tokens is the LegendsChat frontend:
     it-api-exp-legendschat/src/LegendsChat.Frontend/src/theme/tokens.scss
     it-api-exp-legendschat/docs/web/design-system.md
   The tokens below are a hand-maintained copy of those values (the chat app is
   SCSS/React and cannot be imported here). When the chat tokens change, update
   section 1 to match; sections 2-4 only reference the semantic tokens.

   Organized as:
   1. TOKENS     - LegendsChat semantic tokens (light + dark)
   2. BASE       - Mapping onto Material for MkDocs custom properties, chrome
   3. COMPONENTS - Reusable UI patterns
   4. UTILITIES  - Responsive adjustments
   5. SEARCH     - Pagefind results

   Rule: components use the semantic --color-* tokens, never raw hex values.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS - LegendsChat design tokens
   ========================================================================== */

:root,
[data-md-color-scheme="default"] {
  color-scheme: light;

  /* Surfaces */
  --color-bg: #ffffff;
  --color-bg-subtle: #f7f7f6;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #efefee;
  --color-border: #e0dfde;
  --color-border-strong: #c7c6c5;
  --color-overlay: rgba(31, 30, 30, 0.45);

  /* Text */
  --color-text: #1f1e1e;
  --color-text-secondary: #4a4848;
  --color-text-muted: #7d7b7b;
  --color-text-inverse: #ffffff;

  /* Brand / primary */
  --color-primary: #46700f;
  --color-primary-hover: #37580c;
  --color-primary-active: #253c08;
  --color-primary-subtle: #f2f8e9;
  --color-primary-subtle-hover: #e3f1d0;
  --color-primary-border: #c8e3a4;
  --color-on-primary: #ffffff;
  --color-brand: #558712;

  /* Status */
  --color-success: #46700f;
  --color-success-subtle: #f2f8e9;
  --color-warning: #a35f00;
  --color-warning-fill: #facb47;
  --color-warning-subtle: #fef6e2;
  --color-danger: #c31a1d;
  --color-danger-fill: #e01f22;
  --color-danger-subtle: #fdecec;
  --color-info: #0b6fa4;
  --color-info-fill: #0092dd;
  --color-info-subtle: #e6f4fc;

  /* Interaction */
  --color-link: #0b6fa4;
  --color-focus: #0092dd;
  --color-selection: #e3f1d0;

  /* Code */
  --color-code-bg: #f7f7f6;
  --color-code-border: #e0dfde;
  --color-code-text: #333131;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(31, 30, 30, 0.08);
  --shadow-md: 0 4px 12px rgba(31, 30, 30, 0.1);
  --shadow-lg: 0 12px 32px rgba(31, 30, 30, 0.16);
}

[data-md-color-scheme="slate"] {
  color-scheme: dark;

  --color-bg: #141313;
  --color-bg-subtle: #1f1e1e;
  --color-surface: #1f1e1e;
  --color-surface-raised: #292727;
  --color-surface-sunken: #191818;
  --color-border: #3a3838;
  --color-border-strong: #4a4848;
  --color-overlay: rgba(0, 0, 0, 0.6);

  --color-text: #f2f2f1;
  --color-text-secondary: #c7c6c5;
  --color-text-muted: #a3a2a1;
  --color-text-inverse: #141313;

  --color-primary: #7dc623;
  --color-primary-hover: #93d64a;
  --color-primary-active: #6baa1e;
  --color-primary-subtle: #23300f;
  --color-primary-subtle-hover: #2e3f14;
  --color-primary-border: #46700f;
  --color-on-primary: #10160a;
  --color-brand: #7dc623;

  --color-success: #7dc623;
  --color-success-subtle: #23300f;
  --color-warning: #facb47;
  --color-warning-fill: #facb47;
  --color-warning-subtle: #322810;
  --color-danger: #ff6b6d;
  --color-danger-fill: #e01f22;
  --color-danger-subtle: #351515;
  --color-info: #4fb6f0;
  --color-info-fill: #0092dd;
  --color-info-subtle: #102733;

  --color-link: #4fb6f0;
  --color-focus: #4fb6f0;
  --color-selection: #2e3f14;

  --color-code-bg: #191818;
  --color-code-border: #3a3838;
  --color-code-text: #e0dfde;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65);
}

:root {
  /* Typography. Segoe UI Variable is Windows-only; the chat app uses the same
     fallback chain, so the portal matches it wherever the chat does. */
  --font-sans:
    "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
    arial, sans-serif;
  --font-mono:
    "Cascadia Code", "Cascadia Mono", ui-monospace, "SF Mono", consolas,
    "Liberation Mono", monospace;

  /* Spacing scale */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
}


/* ==========================================================================
   2. BASE - Material for MkDocs mapping
   ========================================================================== */

/* theme.font is disabled in mkdocs.yml, so Material does not inject its own
   font variables or fetch web fonts. */
:root {
  --md-text-font-family: var(--font-sans);
  --md-code-font-family: var(--font-mono);
}

.md-grid {
  max-width: 1800px;
}

[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--color-primary);
  --md-primary-fg-color--light: var(--color-primary-hover);
  --md-primary-fg-color--dark: var(--color-primary-active);
  --md-primary-bg-color: var(--color-on-primary);
  --md-primary-bg-color--light: var(--color-on-primary);

  --md-accent-fg-color: var(--color-primary-hover);
  --md-accent-fg-color--transparent: var(--color-primary-subtle);
  --md-accent-bg-color: var(--color-primary);

  --md-default-fg-color: var(--color-text);
  --md-default-fg-color--light: var(--color-text-secondary);
  --md-default-fg-color--lighter: var(--color-text-muted);
  --md-default-fg-color--lightest: var(--color-border);
  --md-default-bg-color: var(--color-bg);
  --md-default-bg-color--light: var(--color-bg-subtle);
  --md-default-bg-color--lighter: var(--color-surface-sunken);
  --md-default-bg-color--lightest: var(--color-surface-sunken);

  --md-typeset-color: var(--color-text);
  --md-typeset-a-color: var(--color-link);
  --md-typeset-mark-color: var(--color-selection);

  --md-code-bg-color: var(--color-code-bg);
  --md-code-fg-color: var(--color-code-text);
  --md-code-hl-color: var(--color-selection);
  --md-code-hl-color--light: var(--color-primary-subtle);
  --md-code-hl-keyword-color: var(--color-primary);
  --md-code-hl-string-color: var(--color-link);
  --md-code-hl-number-color: var(--color-warning);
  --md-code-hl-constant-color: var(--color-warning);
  --md-code-hl-function-color: var(--color-info);
  --md-code-hl-special-color: var(--color-danger);
  --md-code-hl-name-color: var(--color-code-text);
  --md-code-hl-variable-color: var(--color-code-text);
  --md-code-hl-operator-color: var(--color-text-secondary);
  --md-code-hl-punctuation-color: var(--color-text-secondary);
  --md-code-hl-comment-color: var(--color-text-muted);
  --md-code-hl-generic-color: var(--color-text-muted);

  --md-footer-bg-color: var(--color-bg-subtle);
  --md-footer-bg-color--dark: var(--color-surface-sunken);
  --md-footer-fg-color: var(--color-text-secondary);
  --md-footer-fg-color--light: var(--color-text-muted);
  --md-footer-fg-color--lighter: var(--color-text-muted);

  --md-shadow-z1: var(--shadow-sm);
  --md-shadow-z2: var(--shadow-md);
  --md-shadow-z3: var(--shadow-lg);

  /* Material reads these to theme Mermaid diagrams in both schemes. */
  --md-mermaid-font-family: var(--font-sans);
  --md-mermaid-node-bg-color: var(--color-primary-subtle);
  --md-mermaid-node-fg-color: var(--color-primary-border);
  --md-mermaid-label-bg-color: var(--color-surface);
  --md-mermaid-label-fg-color: var(--color-text);
  --md-mermaid-edge-color: var(--color-text-secondary);
  --md-mermaid-sequence-actor-bg-color: var(--color-primary-subtle);
  --md-mermaid-sequence-actor-fg-color: var(--color-text);
  --md-mermaid-sequence-actor-border-color: var(--color-primary-border);
  --md-mermaid-sequence-actor-line-color: var(--color-border-strong);
  --md-mermaid-sequence-participant-bg-color: var(--color-primary-subtle);
  --md-mermaid-sequence-participant-fg-color: var(--color-text);
  --md-mermaid-sequence-participant-border-color: var(--color-primary-border);
  --md-mermaid-sequence-message-line-color: var(--color-text-secondary);
  --md-mermaid-sequence-message-bg-color: var(--color-surface);
  --md-mermaid-sequence-message-fg-color: var(--color-text);
  --md-mermaid-sequence-loop-bg-color: var(--color-surface-sunken);
  --md-mermaid-sequence-loop-fg-color: var(--color-text);
  --md-mermaid-sequence-loop-border-color: var(--color-border-strong);
  --md-mermaid-sequence-note-bg-color: var(--color-warning-subtle);
  --md-mermaid-sequence-note-fg-color: var(--color-text);
  --md-mermaid-sequence-note-border-color: var(--color-warning-fill);
}

::selection {
  background: var(--color-selection);
}

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--color-text);
  font-weight: 600;
  letter-spacing: 0;
}

.md-typeset h1 {
  margin-bottom: var(--space-6);
}

.md-typeset hr {
  border-bottom-color: var(--color-border);
}

.md-typeset blockquote {
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-border-strong);
  color: var(--color-text-secondary);
}

/* -------------------------------------------------------------------------
   Header and navigation tabs

   Flat surface with a 1px border and a soft green pill for the active link,
   as in the LegendsChat top nav. Material draws both from the --md-primary-*
   pair, so that pair is re-pointed at the surface colours for these elements
   only; everywhere else --md-primary-fg-color stays the brand green.
   ------------------------------------------------------------------------- */
.md-header,
.md-tabs {
  --md-primary-fg-color: var(--color-surface);
  --md-primary-bg-color: var(--color-text);
  --md-primary-bg-color--light: var(--color-text-secondary);

  background: var(--color-surface);
  color: var(--color-text);
}

.md-header {
  box-shadow: none;
}

.md-header[data-md-state="shadow"] {
  box-shadow: var(--shadow-sm);
}

.md-header__title {
  font-weight: 600;
}

.md-tabs {
  border-bottom: 1px solid var(--color-border);
}

.md-tabs__link {
  margin-top: 0.45rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-weight: 500;
  opacity: 1;
  transition:
    background-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.md-tabs__link:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link--active {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-weight: 600;
}

/* The header search field sits on the surface colour, not on a dark scrim. */
.md-search__form {
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.md-search__form:hover {
  background: var(--color-primary-subtle);
}

.md-search__input::placeholder {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Primary Sidebar (site navigation)

   Every top-level nav entry is a single leaf page (Home, Package
   Libraries, ...) with no children, so the left "primary" sidebar that
   Material renders alongside the top tabs has nothing useful to show --
   just the current page's title repeated. Navigation lives entirely in
   the top tab bar, so hide the primary sidebar column site-wide.
   ------------------------------------------------------------------------- */
.md-sidebar--primary {
  display: none;
}

/* -------------------------------------------------------------------------
   Sidebar Navigation

   Distinguishes between top-level section headers and nested sub-items.
   Top-level section titles are larger and bolder than sub-items.
   ------------------------------------------------------------------------- */
.md-nav__item > .md-nav__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.md-nav__item > .md-nav__link ~ .md-nav .md-nav__item > .md-nav__link {
  font-size: 0.775rem;
  font-weight: 400;
  color: var(--color-text-secondary);
}

.md-nav .md-nav__link--active {
  color: var(--color-primary);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.md-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.md-footer-meta {
  background: var(--color-surface-sunken);
}

.md-footer-meta__inner,
.md-copyright,
.md-copyright a {
  color: var(--color-text-secondary);
}

/* -------------------------------------------------------------------------
   Code
   ------------------------------------------------------------------------- */
.md-typeset :not(pre) > code {
  padding: 1px 4px;
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-sm);
  background: var(--color-code-bg);
  color: var(--color-code-text);
}

.md-typeset pre > code {
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-md);
  background: var(--color-code-bg);
  color: var(--color-code-text);
}

.md-typeset kbd {
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
   Admonitions
   ------------------------------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--radius-md);
  box-shadow: none;
}

/* -------------------------------------------------------------------------
   Tabbed content (pymdownx.tabbed)
   ------------------------------------------------------------------------- */
.md-typeset .tabbed-labels > label {
  font-weight: 500;
}

.md-typeset .tabbed-set > input:checked + label {
  color: var(--color-primary);
}


/* ==========================================================================
   3. COMPONENTS - Reusable UI Patterns
   ========================================================================== */

/* -------------------------------------------------------------------------
   Hero Section (Homepage)
   ------------------------------------------------------------------------- */
.forge-hero {
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-primary-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--color-primary-subtle);
  text-align: center;
}

.forge-hero h1,
.forge-hero h2 {
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-size: 1.75rem;
  font-weight: 600;
}

.forge-hero p {
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

.forge-hero a.headerlink {
  color: var(--color-text-muted);
}

.forge-hero a:not(.headerlink) {
  display: inline-block;
  margin: 0 var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--motion-ease);
}

.forge-hero a:not(.headerlink):first-of-type {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.forge-hero a:not(.headerlink):first-of-type:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

.forge-hero a:not(.headerlink):last-of-type {
  background: transparent;
  color: var(--color-primary);
}

.forge-hero a:not(.headerlink):last-of-type:hover {
  background: var(--color-primary-subtle-hover);
}

/* -------------------------------------------------------------------------
   Feature Cards Grid

   Usage: Homepage and landing pages for multi-option navigation. Generated
   by scripts/clone-repos.ps1 (docs/index.md and the section pages).
   Classes: .feature-cards (container), .feature-card (items)
   ------------------------------------------------------------------------- */
.feature-cards,
.forge-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-7);
  margin: var(--space-8) 0;
}

/* Cap the grid at three columns on wide screens. `auto-fit` on its own keeps
   packing tracks in until the row is full, which left six cramped cards on a
   large monitor. The `:has()` guard keeps grids of one or two cards stretching
   to fill the row instead of stranding an empty third column. */
@media screen and (min-width: 76.25em) {
  .feature-cards:has(> :nth-child(3)),
  .forge-features:has(> :nth-child(3)) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card,
.forge-feature-card {
  display: block;
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
}

.feature-card:hover,
.forge-feature-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature-card h3,
.forge-feature-card h3 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-size: 1.17rem;
}

.feature-card p,
.forge-feature-card p {
  margin: 0;
  color: var(--color-text-secondary);
}

/* -------------------------------------------------------------------------
   Custom Admonitions
   ------------------------------------------------------------------------- */

/* Platform admonition - for platform-specific guidance */
.md-typeset .admonition.platform,
.md-typeset details.platform {
  border-color: var(--color-info-fill);
}

.md-typeset .platform > .admonition-title,
.md-typeset .platform > summary {
  background-color: var(--color-info-subtle);
}

.md-typeset .platform > .admonition-title::before,
.md-typeset .platform > summary::before {
  background-color: var(--color-info);
  -webkit-mask-image: var(--md-admonition-icon--info);
  mask-image: var(--md-admonition-icon--info);
}

/* Forge admonition - for forge-specific features */
.md-typeset .admonition.forge,
.md-typeset details.forge {
  border-color: var(--color-primary);
}

.md-typeset .forge > .admonition-title,
.md-typeset .forge > summary {
  background-color: var(--color-primary-subtle);
}

.md-typeset .forge > .admonition-title::before,
.md-typeset .forge > summary::before {
  background-color: var(--color-primary);
  -webkit-mask-image: var(--md-admonition-icon--tip);
  mask-image: var(--md-admonition-icon--tip);
}

/* Security admonition - for security-related notices */
.md-typeset .admonition.security,
.md-typeset details.security {
  border-color: var(--color-danger-fill);
}

.md-typeset .security > .admonition-title,
.md-typeset .security > summary {
  background-color: var(--color-danger-subtle);
}

.md-typeset .security > .admonition-title::before,
.md-typeset .security > summary::before {
  background-color: var(--color-danger);
  -webkit-mask-image: var(--md-admonition-icon--warning);
  mask-image: var(--md-admonition-icon--warning);
}

/* -------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-weight: 600;
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  border-color: var(--color-border);
}

.md-typeset table:not([class]) tbody tr:hover {
  background: var(--color-bg-subtle);
  box-shadow: none;
}

/* -------------------------------------------------------------------------
   Version Badges

   Usage: Inline indicators for version/release status in tables and text.
   Classes: .version-badge.new, .version-badge.beta, .version-badge.deprecated
   ------------------------------------------------------------------------- */
.version-badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
}

.version-badge.new {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.version-badge.deprecated {
  background-color: var(--color-danger-fill);
  color: #ffffff;
}

.version-badge.beta {
  background-color: var(--color-warning-fill);
  color: #1f1e1e;
}

/* -------------------------------------------------------------------------
   Quick Links Section

   Usage: Pill-styled navigation links for index pages and resource sections.
   Classes: .quick-links (container with flex layout)
   ------------------------------------------------------------------------- */
.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-7) 0;
}

.quick-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.83rem;
  text-decoration: none;
  transition:
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.quick-links a:hover {
  border-color: var(--color-primary-border);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

/* -------------------------------------------------------------------------
   Status Indicators

   Usage: Feature/component maturity indicators with colored dots.
   Classes: .status.stable, .status.preview, .status.deprecated
   ------------------------------------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.83rem;
  font-weight: 500;
}

.status::before {
  content: "";
  width: var(--space-3);
  height: var(--space-3);
  border-radius: 50%;
}

.status.stable::before {
  background-color: var(--color-success);
}

.status.preview::before {
  background-color: var(--color-warning-fill);
}

.status.deprecated::before {
  background-color: var(--color-danger-fill);
}


/* ==========================================================================
   4. UTILITIES - Responsive Adjustments
   ========================================================================== */

@media screen and (max-width: 76.1875em) {
  .forge-hero {
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-4);
    padding: var(--space-4);
  }

  .forge-hero h1 {
    font-size: 1.75rem;
  }

  .feature-cards {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 44.9375em) {
  .forge-hero {
    padding: var(--space-4) var(--space-3);
  }

  .forge-hero h1 {
    font-size: 1.17rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .feature-card:hover,
  .forge-feature-card:hover {
    transform: none;
  }
}


/* ==========================================================================
   5. SEARCH - Pagefind results
   ========================================================================== */

/* Material's stock search typography is tuned for short prose pages: a .8rem
   title over a .64rem teaser. This portal's results are dense identifier-heavy
   reference pages, which are hard to scan at that size, so titles, teasers and
   the row spacing are all scaled up a little.

   These selectors are Material's own - the results are rendered into its
   markup by docs/overrides/partials/pagefind.html. */

.md-search-result .md-typeset {
  font-size: 0.72rem;
  line-height: 1.7;
}

.md-search-result .md-typeset h1.md-search-result__title {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.25rem;
}

.md-search-result__article {
  padding: 0.7rem 0.8rem;
}

/* Material pins the article's inline padding to leave room for a result icon
   that this build hides; reclaim it so the text is not needlessly indented. */
[dir="ltr"] .md-search-result__article {
  padding-left: 0.9rem;
}

[dir="rtl"] .md-search-result__article {
  padding-right: 0.9rem;
}

.md-search-result__teaser {
  margin: 0;
  -webkit-line-clamp: 3;
}

.md-search-result__meta {
  font-size: 0.7rem;
  line-height: 2.2rem;
}

[dir="ltr"] .md-search-result__meta {
  padding-left: 0.9rem;
}

[dir="rtl"] .md-search-result__meta {
  padding-right: 0.9rem;
}

/* Keep matched terms legible against the accent colour at the larger size. */
.md-search-result mark {
  font-weight: 600;
}