/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #1f6fd0;
  --ifm-color-primary-dark: #1c64bb;
  --ifm-color-primary-darker: #1a5eb1;
  --ifm-color-primary-darkest: #164e92;
  --ifm-color-primary-light: #3c83d8;
  --ifm-color-primary-lighter: #4e8fdc;
  --ifm-color-primary-lightest: #76a9e6;
  --ifm-code-font-size: 95%;
  /* Everything on this site is sized in rem off this one value, so the body, the sidebar,
     the cards and the headings move together rather than each being nudged on its own -
     which is what had 16px body text sitting next to 12.8px card text and reading as two
     unrelated scales. 14px was tried and read as too small; the ratios below are what
     matter and they are unchanged. */
  --ifm-font-size-base: 100%;
  --ifm-pre-background: #232136;
}

html[data-theme="dark"] {
  --ifm-color-primary: #5c9fee;
  --ifm-color-primary-dark: #4a91ea;
  --ifm-color-primary-darker: #3f89e8;
  --ifm-color-primary-darkest: #1f6ed4;
  --ifm-color-primary-light: #6eadf1;
  --ifm-color-primary-lighter: #7ab5f3;
  --ifm-color-primary-lightest: #a3cbf7;
}

/* Card surface: the border/background/radius recipe shared by the homepage feature cards
   (src/pages/styles.module.css's .card) and the segment catalog's cards
   (SegmentCatalog/styles.module.css's .item) - previously spelled out by hand in both places,
   with radii that had quietly drifted apart (9px vs 8px). --omp-card-radius settles on 8px (the
   segment catalog's) as the one true value going forward. The dark-mode override is the piece
   most likely to drift again if left duplicated, so it lives here once instead of per-page. */
:root {
  --omp-card-border-color: var(--ifm-color-emphasis-200);
  --omp-card-background: var(--ifm-color-emphasis-100);
  --omp-card-radius: 8px;
}

html[data-theme="dark"] {
  --omp-card-background: var(--ifm-background-surface-color);
}

/* Shared "show only the render matching the reader's light/dark toggle" pair - any component
   that ships two pre-rendered SVGs (one per mode) rather than picking one client-side wraps each
   in one of these instead of introducing its own version: the homepage hero
   (src/pages/index.js) and the theme gallery (ThemeGallery/index.js) both need it. defaultMode is
   'light' (docusaurus.config.js), so light is the unadorned baseline here and dark is the
   html[data-theme="dark"] override, the same convention --omp-card-background above uses.
   The selector is doubled (.omp-light-only.omp-light-only) to raise specificity to (0,2,0):
   these classes sit alongside a component's own single-class wrapper (e.g. .svgWrapper,
   0,1,0) on the very same element, and CSS modules bundle after custom.css in Docusaurus's
   webpack output, so a plain (0,1,0) rule here would lose the tie-break to that later,
   equally-specific display:block and never actually hide anything. */
.omp-light-only.omp-light-only {
  display: block;
}

.omp-dark-only.omp-dark-only {
  display: none;
}

html[data-theme="dark"] .omp-light-only.omp-light-only {
  display: none;
}

html[data-theme="dark"] .omp-dark-only.omp-dark-only {
  display: block;
}

/* Typography and spacing scale for the segment catalog and studio pages (see their own
   styles.module.css) - collapses the nine near-identical font sizes and the ad-hoc gap values
   the two pages had each accumulated on their own into one shared set of steps, and points
   secondary text at emphasis-700 (5.72:1 contrast on white) instead of emphasis-600 (3.06:1,
   fails WCAG AA). */
:root {
  --omp-text-body: 1rem;
  --omp-label-size: 0.8rem;
  --omp-label-tracking: 0.12em;
  --omp-text-secondary: var(--ifm-color-emphasis-700);
  --omp-radius-sm: 4px;
  --omp-space-1: 0.375rem;
  --omp-space-2: 0.75rem;
  --omp-space-3: 1.25rem;
}

/* Headings, brought closer to the body. Infima's own steps assume a page title that
   shouts: .markdown h1:first-child overrides itself to 3rem, three times the body text it
   sits above. These bring the ratio back to something that reads as the same document
   rather than a banner stapled to it. */
:root {
  --ifm-h1-font-size: 1.85rem;
  --ifm-h2-font-size: 1.45rem;
  --ifm-h3-font-size: 1.2rem;
}

/* Infima re-declares each of these locally on the element rather than reading the :root
   value, so overriding it at the root alone leaves markdown headings at their original
   steps - h2 stayed at 2rem, a hair under h1, which is what made the two indistinguishable
   in the first pass. Each needs matching at the same selector. */
.markdown h1:first-child {
  --ifm-h1-font-size: 2.15rem;
}

.markdown > h2 {
  --ifm-h2-font-size: 1.5rem;
}

.markdown > h3 {
  --ifm-h3-font-size: 1.2rem;
}

/* Category carets. Infima ships a filled wedge and paints it at a 2rem background size
   inside a 1.25rem box, so a 24-unit icon is upscaled and reads heavy and soft-edged. This is
   Lucide's chevron at stroke-width 2 - the shape most doc sites use - rendered at the box's
   own size so the stroke stays the weight it was drawn at.

   Drawn pointing UP on purpose: Infima rotates it 180deg for the expanded state and 90deg for
   the collapsed one, so supplying a chevron-down here would invert both. The dark-mode filter
   Infima already declares handles the colour. */
:root {
  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgba(0,0,0,0.55)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>');
}

.menu__link--sublist-caret:after,
.menu__caret:before {
  background-size: 1.25rem 1.25rem;
}

.docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

.badge {
  display: none !important;
}

.header-github-link:hover {
  opacity: 0.6;
}

.header-github-link:before {
  content: "";
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

html[data-theme="dark"] .header-github-link:before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.header-bluesky-link:hover {
  opacity: 0.6;
}

.header-bluesky-link:before {
  content: "";
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 568 501' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%230085ff' d='M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.454-149.07-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.66 0 75.293 0 57.947 0-28.906 76.135-1.611 123.121 33.664z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.header-discord-link:hover {
  opacity: 0.6;
}

.header-discord-link:before {
  content: "";
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 127.14 96.36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill%3D%22%235865F2%22 d='M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

html[data-theme="dark"] .header-discord-link:before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 127.14 96.36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill%3D%22%235865F2%22 d='M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Admonition */

div.theme-admonition.theme-admonition-tip.alert.alert--success {
  background-color: #9ccfd8;
  border-color: #56949f;
}

html[data-theme="dark"] div.theme-admonition.theme-admonition-tip {
  color: #102445;
}

html[data-theme="dark"] div.theme-admonition.theme-admonition-tip svg {
  fill: #102445;
}

html[data-theme="dark"] div.theme-admonition.theme-admonition-tip a {
  color: #102445;
}

iframe.youtube {
  width: 100%;
  margin-bottom: 15px;
}

@media screen and (max-width: 350px) {
  iframe.youtube {
    height: 200px;
  }
}

@media screen and (min-width: 350px) {
  iframe.youtube {
    height: 300px;
  }
}

@media screen and (min-width: 600px) {
  iframe.youtube {
    height: 400px;
  }
}

.winstore {
  width: 200px;
  border-radius: 8px;
  margin-top: 25px;
}

[data-theme="dark"] .withings {
  background: white;
  padding: 17px 10px 10px 10px;
  display: inline;
  border-radius: 10px;
}

[data-theme="light"] .withings {
  background: black;
  padding: 17px 10px 10px 10px;
  display: inline;
  border-radius: 10px;
}

.withings svg {
  width: 150px;
}

[data-theme="light"] .withings svg path {
  fill: white;
}

[data-theme="dark"] .withings svg path {
  fill: black;
}

/* Fonts */

/* VictorMono.ttf is the Mono patched Nerd Font variant (VictorMono NFM), not
   the plain one. Both patch the same 11,658 codepoints at the same advance,
   so nothing about the grid changes - but the plain variant leaves an icon's
   ink at its natural width while still advancing one cell, and Nerd Font
   icons are far wider than a cell: U+F07B (folder) inks 1.693 cells, U+F120
   (terminal) 1.903. That ink runs over whatever follows the icon, which in
   the theme gallery is the space each segment template writes after it. The
   Mono variant scales every icon to exactly one cell. Keep this variant when
   versioning the font up. */
@font-face {
  font-family: "Victor Mono";
  src: url('/fonts/VictorMono.ttf') format("truetype");
  font-display: swap;
}

:root {
  --ifm-font-family-monospace: "Victor Mono", "Symbols Nerd Font Mono",
    "Symbols Nerd Font", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ifm-font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ifm-heading-font-weight: 600;
  --ifm-heading-line-height: 1.2;
}

h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

h1,
h2 {
  text-wrap: balance;
}

/* Page header parity: studio.js and segments.js each render a bare <h1>+<p> outside the
   .markdown wrapper that gives docs pages their 3rem heading (Infima's .markdown h1:first-child),
   so they were falling back to the plain 2rem h1 and reading as sub-pages of nothing next to the
   homepage hero (.hero__title, also 3rem). One definition, used by both pages, brings them in
   line; the breakpoint mirrors Infima's own docs breakpoint instead of inventing a new one. The
   intro paragraph is capped the same way the homepage subtitle is (52ch) - just wider, since these
   pages needed room for a plugin-computed count inline with prose - to stop it running the full
   ~1290px container at 150+ characters per line. */

code {
  font-family: var(--ifm-font-family-monospace);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

code[class*="language-"],
pre[class*="language-"] {
  font-family: var(--ifm-font-family-monospace);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

table {
  /* We need this to be able to use border-radius. */
  border-collapse: separate;

  /* Add a 1px border spacing for out box-shadow to fit into. Increase this if you want to increase the border width. */
  border-spacing: 1px;
}

table th,
table td {
  /* Remove any borders from our stylesheet. */
  border: 0;

  /* Use the spread value on the box-shadow to set the border width. */
  box-shadow: 0 0 0 1px var(--ifm-table-border-color);
}

table th:first-child {
  border-top-left-radius: 6.4px;
}

table th:last-child {
  border-top-right-radius: 6.4px;
}

table tr:last-child td:first-child {
  border-bottom-left-radius: 6.4px;
}

table tr:last-child td:last-child {
  border-bottom-right-radius: 6.4px;
}

/* Docs prev/next pagination (Infima's .pagination-nav, rendered by theme-classic's DocPaginator -
   global classes, not CSS modules, so no hashed name to work around here). Infima's defaults
   (1rem padding, a 1rem label, a 0.875rem sublabel) were sized for a generic doc footer and read
   as oversized next to this site's own type scale. Padding steps down to --omp-space-2, the title
   to --omp-text-body, and the "Previous"/"Next" sublabel is rebuilt as the same micro-label recipe
   already used for SegmentCatalog's facet legends and the studio's pane labels (monospace, tracked,
   uppercase, --omp-text-secondary) instead of a plain semibold line - consistent with the rest of
   the site rather than a one-off shrink. Padding uses --omp-space-2 rather than --omp-space-1 so
   the click target stays comfortable on both a long and a short doc page. */
.pagination-nav__link {
  padding: var(--omp-space-2);
  border-color: var(--omp-card-border-color);
  border-radius: var(--omp-card-radius);
}

.pagination-nav__label {
  font-size: var(--omp-text-body);
}

.pagination-nav__sublabel {
  font-family: var(--ifm-font-family-monospace);
  font-size: var(--omp-label-size);
  letter-spacing: var(--omp-label-tracking);
  text-transform: uppercase;
  color: var(--omp-text-secondary);
  font-weight: 400;
  margin-bottom: var(--omp-space-1);
}

/* The footer takes the navbar's surface, in whichever colour mode is active. Both are chrome
   bracketing the page, so a footer on its own palette (Infima's .footer--dark, which the config
   no longer asks for - see docusaurus.config.js) read as a slab bolted to the bottom, especially
   in light mode where it stayed dark while everything above it was white. Mapping the footer's
   own tokens to the navbar's, rather than restating colours, means a later navbar change carries
   to the footer for free. The box-shadow is the navbar's --ifm-navbar-shadow with its offset
   flipped, so the hairline that separates the navbar from the page below it separates the footer
   from the page above it - which in light mode is the only thing distinguishing either of them
   from a white page. */
.footer {
  --ifm-footer-background-color: var(--ifm-navbar-background-color);
  --ifm-footer-color: var(--ifm-navbar-link-color);
  --ifm-footer-title-color: var(--ifm-navbar-link-color);
  --ifm-footer-link-color: var(--ifm-navbar-link-color);
  box-shadow: 0 -1px 2px 0 #0000001a;
}
