/* WireTrail on Material for MkDocs. Tokens follow the WireTrail 1.0 brand kit
   (06-implementation/brand-tokens.css): Signature #28C5DC, Highlight #96EAF4,
   Night #101820, Paper #F3F6F5. On light surfaces, text and filled controls use
   the darker #006779 (white text on it). In dark mode, links use #6FDEEC and filled
   controls use #28C5DC with Night text. Status colours always come with a label, and
   the product colour is never a severity scale.
   Scale: 12 / 14 / 16 / 20 / 28 / 40 px. Spacing base 4 px, controls 4 px, panels 8 px.
   Material sets 1rem to 20px, so 0.6rem is 12px, 0.7rem 14px, 0.8rem 16px. */
@font-face{font-family:"Space Grotesk";src:url("../assets/fonts/SpaceGrotesk.woff") format("woff");font-weight:300 700;font-display:swap}
@font-face{font-family:Inter;src:url("../assets/fonts/Inter.woff") format("woff");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/IBMPlexMono-Regular.woff") format("woff");font-weight:400;font-display:swap}

:root {
  --wt-signature: #28C5DC;
  --wt-highlight: #96EAF4;
  --wt-night: #101820;
  --wt-paper: #F3F6F5;
  --wt-font-display: "Space Grotesk", Inter, system-ui, sans-serif;
  --wt-font-ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wt-font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --md-text-font: var(--wt-font-ui);
  --md-code-font: var(--wt-font-data);
}

/* Light scheme */
[data-md-color-scheme="default"] {
  --wt-bg: #F3F6F5;
  --wt-surface: #FFFFFF;
  --wt-raised: #E8EFF0;
  --wt-text: #101820;
  --wt-muted: #50616A;
  --wt-border: #7B8A91;
  --wt-divider: #CDD8DB;
  --wt-accent: #006779;
  --wt-primary: #006779;
  --wt-primary-hover: #00505E;
  --wt-on-primary: #FFFFFF;
  --wt-selection: #DAF4F7;
  --wt-success: #176447;
  --wt-warning: #805000;
  --wt-danger: #AC302B;
  --wt-focus: #006779;

  --md-primary-fg-color: var(--wt-night);
  --md-primary-fg-color--light: #21323D;
  --md-primary-fg-color--dark: #0B1117;
  --md-primary-bg-color: var(--wt-paper);
  --md-primary-bg-color--light: rgba(243, 246, 245, 0.72);
  --md-accent-fg-color: var(--wt-accent);
  --md-accent-fg-color--transparent: rgba(0, 103, 121, 0.1);
  --md-accent-bg-color: #FFFFFF;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
  --md-default-bg-color: var(--wt-bg);
  --md-default-bg-color--light: rgba(243, 246, 245, 0.7);
  --md-default-bg-color--lighter: rgba(243, 246, 245, 0.3);
  --md-default-bg-color--lightest: rgba(243, 246, 245, 0.12);
  --md-default-fg-color: var(--wt-text);
  --md-default-fg-color--light: var(--wt-muted);
  --md-default-fg-color--lighter: var(--wt-border);
  --md-default-fg-color--lightest: var(--wt-divider);
  --md-typeset-color: var(--wt-text);
  --md-typeset-a-color: var(--wt-accent);
  --md-typeset-mark-color: rgba(40, 197, 220, 0.30);
  --md-typeset-kbd-color: var(--wt-surface);
  --md-typeset-kbd-accent-color: var(--wt-raised);
  --md-typeset-kbd-border-color: var(--wt-divider);
  --md-typeset-table-color: var(--wt-divider);
  --md-typeset-table-color--light: rgba(16, 24, 32, 0.035);
  --md-admonition-bg-color: var(--wt-surface);
  --md-admonition-fg-color: var(--wt-text);
  --md-code-bg-color: var(--wt-raised);
  --md-code-bg-color--light: var(--wt-raised);
  --md-code-bg-color--lighter: var(--wt-divider);
  --md-code-fg-color: var(--wt-text);
  --md-code-hl-color: rgba(40, 197, 220, 0.2);
  --md-code-hl-color--light: rgba(40, 197, 220, 0.12);
  --md-code-hl-keyword-color: #006779;
  --md-code-hl-function-color: #101820;
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-variable-color: #101820;
  --md-code-hl-string-color: #176447;
  --md-code-hl-number-color: #805000;
  --md-code-hl-constant-color: #805000;
  --md-code-hl-special-color: #006779;
  --md-code-hl-operator-color: #50616A;
  --md-code-hl-punctuation-color: #50616A;
  --md-code-hl-comment-color: #50616A;
  --md-code-hl-generic-color: #50616A;
  --md-footer-bg-color: var(--wt-night);
  --md-footer-bg-color--dark: #0B1117;
  --md-shadow-z1: 0 0.1rem 0.3rem rgba(16, 24, 32, 0.08);
  --md-shadow-z2: 0 0.2rem 0.5rem rgba(16, 24, 32, 0.12);
  --md-shadow-z3: 0 0.3rem 0.8rem rgba(16, 24, 32, 0.16);
}

/* Dark scheme: Night surfaces, lifted foregrounds */
[data-md-color-scheme="slate"] {
  --wt-bg: #101820;
  --wt-surface: #18252E;
  --wt-raised: #21323D;
  --wt-text: #F3F6F5;
  --wt-muted: #A7B7BE;
  --wt-border: #718792;
  --wt-divider: #324550;
  --wt-accent: #6FDEEC;
  --wt-primary: #28C5DC;
  --wt-primary-hover: #6FDEEC;
  --wt-on-primary: #101820;
  --wt-selection: #123E47;
  --wt-success: #81D9AE;
  --wt-warning: #FFD38A;
  --wt-danger: #FFA9A3;
  --wt-focus: #96EAF4;

  --md-primary-fg-color: var(--wt-night);
  --md-primary-fg-color--light: #21323D;
  --md-primary-fg-color--dark: #0B1117;
  --md-primary-bg-color: var(--wt-paper);
  --md-primary-bg-color--light: rgba(243, 246, 245, 0.72);
  --md-accent-fg-color: var(--wt-accent);
  --md-accent-fg-color--transparent: rgba(111, 222, 236, 0.12);
  --md-accent-bg-color: #101820;
  --md-accent-bg-color--light: rgba(16, 24, 32, 0.7);
  --md-default-bg-color: var(--wt-bg);
  --md-default-bg-color--light: rgba(16, 24, 32, 0.54);
  --md-default-bg-color--lighter: rgba(16, 24, 32, 0.26);
  --md-default-bg-color--lightest: rgba(16, 24, 32, 0.07);
  --md-default-fg-color: var(--wt-text);
  --md-default-fg-color--light: var(--wt-muted);
  --md-default-fg-color--lighter: var(--wt-border);
  --md-default-fg-color--lightest: var(--wt-divider);
  --md-typeset-color: var(--wt-text);
  --md-typeset-a-color: var(--wt-accent);
  --md-typeset-mark-color: rgba(40, 197, 220, 0.34);
  --md-typeset-kbd-color: var(--wt-raised);
  --md-typeset-kbd-accent-color: var(--wt-surface);
  --md-typeset-kbd-border-color: var(--wt-divider);
  --md-typeset-table-color: var(--wt-divider);
  --md-typeset-table-color--light: rgba(243, 246, 245, 0.04);
  --md-admonition-bg-color: var(--wt-surface);
  --md-admonition-fg-color: var(--wt-text);
  --md-code-bg-color: var(--wt-raised);
  --md-code-bg-color--light: var(--wt-raised);
  --md-code-bg-color--lighter: var(--wt-divider);
  --md-code-fg-color: var(--wt-text);
  --md-code-hl-color: rgba(40, 197, 220, 0.22);
  --md-code-hl-color--light: rgba(40, 197, 220, 0.12);
  --md-code-hl-keyword-color: #6FDEEC;
  --md-code-hl-function-color: #F3F6F5;
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-variable-color: #F3F6F5;
  --md-code-hl-string-color: #81D9AE;
  --md-code-hl-number-color: #FFD38A;
  --md-code-hl-constant-color: #FFD38A;
  --md-code-hl-special-color: #6FDEEC;
  --md-code-hl-operator-color: #A7B7BE;
  --md-code-hl-punctuation-color: #A7B7BE;
  --md-code-hl-comment-color: #A7B7BE;
  --md-code-hl-generic-color: #A7B7BE;
  --md-footer-bg-color: #0B1117;
  --md-footer-bg-color--dark: #080D12;
  --md-shadow-z1: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
  --md-shadow-z2: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.36);
  --md-shadow-z3: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.42);
}

::selection { background: var(--wt-selection); color: var(--wt-text); }
:focus-visible { outline: 2px solid var(--wt-focus); outline-offset: 3px; }

/* Header: Night in both schemes, with a Signature rule */
.md-header { box-shadow: none; border-bottom: 3px solid var(--wt-signature); }
.md-header__title { font-family: var(--wt-font-display); font-weight: 600; }
.md-header__button.md-logo img, .md-header__button.md-logo svg { height: 1.7rem; width: auto; }
.md-tabs { background-color: var(--md-primary-fg-color); }
.md-tabs__link { opacity: 1; color: #A7B7BE; }
.md-tabs__link--active, .md-tabs__link:hover { color: var(--wt-highlight); }
.md-nav__title { font-family: var(--wt-font-display); }

/* Page titles that only screen readers need (the home page shows a hero instead) */
.md-typeset .md-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Typography: Space Grotesk for headings, Inter for reading, IBM Plex Mono for commands and data */
.md-typeset { font-size: 0.8rem; line-height: 1.7; font-family: var(--wt-font-ui); }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { font-family: var(--wt-font-display); color: var(--md-default-fg-color); }
.md-typeset h1 { font-size: 2.5em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.9em; }
.md-typeset h2 { font-size: 1.75em; font-weight: 600; letter-spacing: -0.01em; margin-top: 2em; }
.md-typeset h3 { font-size: 1.25em; font-weight: 600; }
.md-typeset h4 { font-size: 1em; font-weight: 600; }
.md-typeset .lead { font-size: 1.06em; color: var(--md-default-fg-color--light); margin-top: -0.4em; }
.md-typeset code, .md-typeset kbd, .md-typeset pre { font-family: var(--wt-font-data); }
.md-typeset :not(pre) > code { border-radius: 4px; padding: 0.05em 0.35em; }
.md-typeset kbd { border-radius: 4px; font-size: 0.78em; }

/* Small labels: monospace, capitals, letter-spaced */
.md-typeset .wt-eyebrow { font: 400 0.6rem/1.4 var(--wt-font-data); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wt-accent); margin: 0 0 1em; }

/* Tables */
.md-typeset table:not([class]) { border-radius: 8px; font-size: 0.7rem; border: 1px solid var(--wt-divider); background: var(--wt-surface); }
.md-typeset table:not([class]) th { background: var(--wt-raised); font-weight: 600; font-family: var(--wt-font-display); }
.md-typeset table:not([class]) td { vertical-align: top; }
/* Keep flags and class names intact; let long patterns wrap inside the cell */
.md-typeset table:not([class]) td code { white-space: pre-wrap; word-break: break-word; }

/* Code and command output: a bordered panel on the surface colour */
.md-typeset .highlight, .md-typeset pre > code { border-radius: 8px; }
.md-typeset pre > code { background: var(--wt-surface); border: 1px solid var(--wt-divider); font-size: 0.7rem; }
.md-typeset .highlight .filename { font-family: var(--wt-font-data); font-size: 0.6rem; letter-spacing: 0.02em; }
/* The copy button is a control, so it is always readable; Material's hover and focus colours still apply. */
.md-code__button { color: var(--wt-muted); }
.md-typeset .tabbed-set { border-radius: 8px; }
/* Real tool output is wide. Scroll it; never wrap it, so columns stay aligned. */
.md-typeset pre > code { white-space: pre; }

/* Home hero */
.wt-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 2rem; align-items: center; margin: 0.5rem 0 2.2rem; }
.md-typeset .wt-hero h2 { font-size: 2em; font-weight: 600; margin: 0 0 0.7rem; line-height: 1.12; letter-spacing: -0.02em; }
.wt-hero p { margin: 0 0 1rem; }
.wt-hero .md-button { margin: 0.2rem 0.4rem 0.2rem 0; padding: 0.5em 1.2em; }
/* Below 75em the terminal would be narrower than its longest line, so it takes the full width. */
@media screen and (max-width: 75em) { .wt-hero { grid-template-columns: 1fr; } }
@media screen and (max-width: 44.9375em) {
  .wt-hero { margin-top: 0; }
  .md-typeset .wt-hero h2 { font-size: 1.75em; }
  .wt-hero .md-button { display: block; text-align: center; margin-right: 0; }
}

/* Buttons: filled controls use the primary colour with its own text colour */
.md-typeset .md-button { border-radius: 4px; font-family: var(--wt-font-ui); font-weight: 600; }
.md-typeset .md-button--primary { background: var(--wt-primary); border-color: var(--wt-primary); color: var(--wt-on-primary); }
.md-typeset .md-button--primary:is(:hover, :focus) { background: var(--wt-primary-hover); border-color: var(--wt-primary-hover); color: var(--wt-on-primary); }
.md-typeset .md-button:not(.md-button--primary) { color: var(--md-default-fg-color); border-color: var(--wt-border); }
.md-typeset .md-button:not(.md-button--primary):is(:hover, :focus) { background: var(--wt-raised); border-color: var(--wt-accent); color: var(--wt-accent); }

/* The home terminal: a bordered panel that follows the theme. The text inside is real tool output. */
.wt-terminal { border-radius: 8px; background: var(--wt-surface); border: 1px solid var(--wt-border); overflow: hidden; min-width: 0; }
.wt-terminal__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--wt-divider); }
.wt-terminal__bar i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--wt-muted); display: inline-block; }
.wt-terminal__bar b { margin-left: auto; font: 400 0.6rem var(--wt-font-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wt-muted); }
.md-typeset .wt-terminal pre { margin: 0; background: transparent; padding: 0.8rem; overflow-x: auto; }
.wt-terminal .md-code__nav { display: none; }
.md-typeset .wt-terminal pre code { background: transparent; border: 0; border-radius: 0; padding: 0; font-size: 0.6rem; line-height: 1.7; color: var(--wt-text); white-space: pre; }
.wt-terminal .p { color: var(--wt-accent); }
.wt-terminal .d { color: var(--wt-muted); }
.wt-terminal .hl { color: var(--wt-accent); font-weight: 600; }
.wt-terminal__note { margin: 0; padding: 0.4rem 0.8rem 0.6rem; font: 400 0.6rem var(--wt-font-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wt-muted); }

/* Cards */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card { border-radius: 8px; border-color: var(--wt-divider); background: var(--wt-surface); transition: border-color 0.2s; }
.md-typeset .grid.cards > ul > li:hover { border-color: var(--wt-accent); box-shadow: none; }
.md-typeset .grid.cards .lg { color: var(--wt-accent); }

/* Admonitions: the title is the label; the colour is a semantic token, never the product colour alone */
.md-typeset .admonition, .md-typeset details { border-radius: 8px; border-width: 0.05rem; border-left-width: 0.2rem; font-size: 0.7rem; }
.md-typeset :is(.admonition, details):is(.note, .info, .abstract) { border-color: var(--wt-accent); }
.md-typeset :is(.admonition, details):is(.tip, .success) { border-color: var(--wt-success); }
.md-typeset :is(.admonition, details):is(.warning, .caution) { border-color: var(--wt-warning); }
.md-typeset :is(.admonition, details):is(.danger, .failure, .bug) { border-color: var(--wt-danger); }
.md-typeset :is(.admonition, details):is(.example, .question, .quote) { border-color: var(--wt-muted); }
.md-typeset :is(.note, .info, .abstract) > :is(.admonition-title, summary) { background-color: color-mix(in srgb, var(--wt-accent) 10%, transparent); }
.md-typeset :is(.tip, .success) > :is(.admonition-title, summary) { background-color: color-mix(in srgb, var(--wt-success) 10%, transparent); }
.md-typeset :is(.warning, .caution) > :is(.admonition-title, summary) { background-color: color-mix(in srgb, var(--wt-warning) 12%, transparent); }
.md-typeset :is(.danger, .failure, .bug) > :is(.admonition-title, summary) { background-color: color-mix(in srgb, var(--wt-danger) 10%, transparent); }
.md-typeset :is(.example, .question, .quote) > :is(.admonition-title, summary) { background-color: color-mix(in srgb, var(--wt-muted) 12%, transparent); }
.md-typeset :is(.note, .info, .abstract) > :is(.admonition-title, summary)::before { background-color: var(--wt-accent); }
.md-typeset :is(.tip, .success) > :is(.admonition-title, summary)::before { background-color: var(--wt-success); }
.md-typeset :is(.warning, .caution) > :is(.admonition-title, summary)::before { background-color: var(--wt-warning); }
.md-typeset :is(.danger, .failure, .bug) > :is(.admonition-title, summary)::before { background-color: var(--wt-danger); }
.md-typeset :is(.example, .question, .quote) > :is(.admonition-title, summary)::before { background-color: var(--wt-muted); }

/* Recipe summary box (recipe pages) */
.md-typeset .recipe-meta { border-left: 4px solid var(--wt-accent); background: var(--wt-surface); padding: 0.6rem 1rem; border-radius: 0 8px 8px 0; font-size: 0.7rem; margin: 0 0 1.4em; }
/* md_in_html wraps the spans in one <p>, so the row layout goes on that. */
.md-typeset .recipe-meta p { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; }
.md-typeset .recipe-meta strong { color: var(--md-default-fg-color--light); font-weight: 600; margin-right: 0.3em; }

/* Diagrams drawn as inline SVG take their colours from the page */
/* Material makes a figure shrink to fit, which would draw the SVG small; a diagram takes the width it is given. */
.md-typeset .wt-diagram { display: block; width: 100%; margin: 1.4em auto; max-width: 46rem; }
.wt-diagram svg { width: 100%; height: auto; display: block; }
.wt-diagram figcaption { font-size: 0.7rem; color: var(--md-default-fg-color--light); margin-top: 0.4rem; }
.wt-diagram .stroke { stroke: var(--md-default-fg-color--light); fill: none; }
.wt-diagram .box { fill: var(--wt-surface); stroke: var(--wt-border); }
/* The object the diagram is about, and the set it retains: the theme's accent, so it reads in both schemes */
.wt-diagram .target { stroke: var(--wt-accent); }
.wt-diagram .retained { stroke: var(--wt-accent); fill: none; }
.wt-diagram .ink { fill: var(--md-default-fg-color); font-family: var(--md-text-font-family); }
.wt-diagram .dim { fill: var(--md-default-fg-color--light); font-family: var(--md-text-font-family); }
.wt-diagram .mono { font-family: var(--md-code-font-family); }

/* "Draft" page status in the navigation */
:root { --md-status--draft: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.06 9 15 9.94 5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z"/></svg>'); }
.md-status--draft::after { mask-image: var(--md-status--draft); -webkit-mask-image: var(--md-status--draft); }

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