/* ============================================================
   Treon Knowledge Base — treon.fi look
   Built on treon.fi's tokens and type (Space Grotesk / Space Mono, 4px purple buttons,
   black treon.fi footer), arranged per Keti's KB brand guidelines: Midnight Blue header
   with the white logo, search and a support button; the KB navigation lives in a side
   drawer opened from the header. Header, drawer and footer markup come from the theme
   overrides (overrides/partials/); this file styles them. One light colour scheme only:
   the dark palette and its toggle are gone (Keti's feedback, 2026-11-06).
   Key visuals and product photos come from the Treon Media Kit (assets/brand/media-kit/).

   Colour tokens are treon.fi's own (wp-content/themes/treon, 2026-10-28):
     text primary #0F0F10 · secondary #2E2E3F · muted #6D6D7D
     link / filled action #6743BD · accent text #4332A1 · hover pill #C8C3FF
     violet #B77DFF (buttons on dark) · Treon Purple #B266FF
     surface (lavender) #EBEEFF · midnight #040D40 · footer #0F0F10
     orange #FF5900 (warnings only) · dividers rgba(46,46,63,.16) / borders .32
   ============================================================ */

:root {
  --tk-ink: #0f0f10;
  --tk-ink-2: #2e2e3f;
  --tk-muted: #6d6d7d;
  --tk-link: #6743bd;
  --tk-accent: #4332a1;
  --tk-pill: #c8c3ff;
  --tk-violet: #b77dff;
  --tk-purple: #b266ff;
  --tk-lavender: #ebeeff;
  --tk-midnight: #040d40;
  --tk-black: #0f0f10;
  --tk-orange: #ff5900;
  --tk-divider: rgba(46,46,63,.16);
  --tk-border: rgba(46,46,63,.32);
  --tk-input-border: rgba(4,13,64,.35);
  /* treon.fi sizes its nav in rem with html{font-size:.520833vw}, capped at 10px from
     1920px up. --tk-u is that unit, so the bar, logo and menu scale exactly as on treon.fi. */
  --tk-u: min(.520833vw, 10px);
  --tk-bar-h: calc(4.8 * var(--tk-u) + 24px);             /* 60px at 1440, 72px at 1920 */
  --tk-ctl-h: calc(2.4 * var(--tk-u) + 24px);             /* Contact button / search field */
  --tk-header-h: var(--tk-bar-h);
}
@media screen and (max-width: 59.984375em) {
  :root { --tk-bar-h: 64px; --tk-header-h: 64px; }
}

/* Material's palette sets its variables on <body>; match that element so these win.
   The body always carries the default (light) scheme: the dark one has been removed. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--tk-midnight);
  --md-primary-fg-color--light: #0b1556;
  --md-primary-fg-color--dark: var(--tk-midnight);
  --md-primary-bg-color: #fff;
  --md-accent-fg-color: var(--tk-accent);
  --md-accent-fg-color--transparent: rgba(103,67,189,.10);
  --md-typeset-a-color: var(--tk-link);
  --md-default-fg-color: var(--tk-ink);
  --md-default-fg-color--light: var(--tk-muted);
  --md-typeset-color: var(--tk-ink);
  --md-code-bg-color: #f4f5ff;
  --md-footer-bg-color: #fff;
  --md-footer-fg-color: var(--tk-ink);
  --tk-chrome-fg: var(--tk-ink);
  --tk-heading: var(--tk-ink);
  --tk-h2: var(--tk-accent);
  --tk-surface: var(--tk-lavender);
  --tk-card-bg: #fff;
  --tk-line: var(--tk-divider);
  --tk-nav-guide: var(--tk-link);
}

/* ============================================================
   Header: Midnight Blue bar with the white Treon logo (KB brand guidelines:
   logo, global search, support link). The menu button opens the side drawer.
   ============================================================ */
[data-md-color-primary] .md-header {
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: rgba(255,255,255,.7);
  background-color: var(--tk-midnight);
  color: #fff;
  box-shadow: none;
}
[data-md-color-primary] .md-header--shadow { box-shadow: 0 2px 12px rgba(4,13,64,.25); }

.md-header__inner {
  height: var(--tk-bar-h);
  margin: 0 auto;
  padding: 0 calc(2.4 * var(--tk-u)) 0 calc(3.2 * var(--tk-u) - 8px);
  gap: calc(.8 * var(--tk-u));
}
/* treon.fi's container: 152 units (1140px at 1440, 1520px from 1920). The header bar and
   the page body share it so their edges line up. */
@media screen and (min-width: 76.25em) {
  .md-grid { max-width: calc(152 * var(--tk-u)); }
}

/* Menu button, then the logo (white wordmark, links to treon.fi) */
.tk-burger {
  order: -2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease-out;
}
.tk-burger:hover, .tk-burger[aria-expanded="true"] { background-color: rgba(255,255,255,.12); }
.tk-burger:focus-visible { outline: 2px solid var(--tk-violet); outline-offset: 2px; }
.md-header__button.md-logo { display: block; order: -1; margin: 0 auto 0 0; padding: 4px 0; }
.md-header__button.md-logo .tk-logo { display: block; width: calc(10.7 * var(--tk-u)); height: auto; fill: none; color: #fff; }
.md-header__button.md-logo:hover { opacity: .75; }

/* No page title in the bar; keep Material's element (its JS uses it) out of sight */
.md-header__title { visibility: hidden; flex-grow: 1; margin: 0 !important; min-width: 0; }
/* Material's own drawer button: the side drawer replaces its drawer on every width */
.md-header__button[for="__drawer"] { display: none !important; }

.md-header__button.md-icon { color: #fff; }
.md-header__button.md-icon:hover { opacity: .75; }

/* ---------- Search: light field on the dark bar ---------- */
@media screen and (min-width: 60em) {
  .md-search__inner { padding: 0; }
  .md-search__inner { width: calc(30 * var(--tk-u)); }
  .md-search__form,
  .md-search__form:hover {
    height: var(--tk-ctl-h);
    background-color: rgba(255,255,255,.1);
    border: 1.5px solid rgba(255,255,255,.35);
    border-radius: 4px;
  }
  .md-search__form:hover { border-color: rgba(255,255,255,.7); }
  .md-search__input { color: #fff; font-size: calc(1.6 * var(--tk-u)); }
  .md-search__suggest { font-size: calc(1.6 * var(--tk-u)); }   /* keep the suggestion under the typed text */
  .md-search__input::placeholder { color: rgba(255,255,255,.75); }
  .md-search__input + .md-search__icon { color: #fff; }
  /* open: Material's white field and results panel, dark text */
  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    background-color: var(--md-default-bg-color);
    border-color: var(--tk-link);
    border-radius: 4px 4px 0 0;
  }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__input,
  [data-md-toggle="search"]:checked ~ .md-header .md-search__icon { color: var(--md-default-fg-color); }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__input::placeholder { color: var(--tk-muted); }
  /* centre the magnifier / back / clear icons in the taller field */
  .md-search__form .md-search__icon { top: calc((var(--tk-ctl-h) - 3px - 1.2rem) / 2); }
  .md-search__output { top: calc(var(--tk-ctl-h) - 1px); border-radius: 0 0 4px 4px; }
}
.md-search-result__meta { background-color: var(--tk-surface); color: var(--tk-muted); }
.md-search-result mark { color: var(--tk-link); }

/* ---------- Contact support button (primary on dark, as in the "Need help?" band) ---------- */
.tk-contact {
  order: 9;
  flex: none;
  margin-left: calc(.8 * var(--tk-u));
  padding: 10px 19px;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: var(--tk-violet);
  color: var(--tk-ink);
  font-size: calc(1.6 * var(--tk-u));
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  transition: background-color .3s ease-out;
}
.tk-contact:hover, .tk-contact:focus { background-color: #c1acff; color: var(--tk-ink); }
.tk-contact:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
[data-md-toggle="search"]:checked ~ .md-header .tk-contact { display: none; }

/* ---------- Narrow screens ---------- */
@media screen and (max-width: 76.234375em) {
  :root { --tk-u: 7.5px; }
  .md-header__inner { padding: 0 8px 0 8px; }
}
@media screen and (max-width: 59.984375em) {
  .md-header__inner { max-width: none; }
  .tk-contact { display: none; }
}

/* ============================================================
   Side drawer: the knowledge base navigation (markup from overrides/partials/drawer.html,
   behaviour in nav-controls.v2.js). Slides in from the left over a dimmed page.
   ============================================================ */
.tk-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 6;
  background: rgba(4,13,64,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease-out, visibility 0s linear .25s;
}
.tk-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  width: min(22rem, 88vw);
  background: var(--tk-card-bg);
  box-shadow: 0 0 32px rgba(4,13,64,.2);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .25s ease-out, visibility 0s linear .25s;
}
.tk-drawer-open .tk-drawer-overlay { opacity: 1; visibility: visible; transition: opacity .25s ease-out; }
.tk-drawer-open .tk-drawer { transform: none; visibility: visible; transition: transform .25s ease-out; }
.tk-drawer-open, .tk-drawer-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .tk-drawer, .tk-drawer-overlay, .tk-drawer-open .tk-drawer, .tk-drawer-open .tk-drawer-overlay { transition: none; }
}

.tk-drawer__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: var(--tk-bar-h);
  padding: 0 8px 0 20px;
  background: var(--tk-midnight);
  color: #fff;
}
.tk-drawer__label {
  font-family: var(--md-code-font-family);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tk-drawer__close {
  display: flex;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #fff;
  cursor: pointer;
}
.tk-drawer__close:hover { background-color: rgba(255,255,255,.12); }
.tk-drawer__close:focus-visible { outline: 2px solid var(--tk-violet); outline-offset: 2px; }
.tk-drawer__nav {
  flex: 1;
  padding: 12px 12px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 15px;
  line-height: 1.35;
}
.tk-dnav, .tk-dnav__list { margin: 0; padding: 0; list-style: none; }
.tk-dnav__list { margin-left: 12px; padding-left: 8px; border-left: 1px solid var(--tk-line); }
.tk-dnav__list[hidden] { display: none; }
.tk-dnav > .tk-dnav__item > .tk-dnav__row > .tk-dnav__link,
.tk-dnav > .tk-dnav__item > .tk-dnav__link,
.tk-dnav > .tk-dnav__item > .tk-dnav__row > .tk-dnav__toggle:only-child { font-size: 16px; font-weight: 500; }
.tk-dnav__row { display: flex; align-items: stretch; }
.tk-dnav__link,
.tk-dnav__toggle {
  display: block;
  margin: 1px 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--tk-ink);
  font: inherit;
  text-align: left;
  transition: background-color .2s ease-out, color .2s ease-out;
}
.tk-dnav__row > .tk-dnav__link { flex: 1; min-width: 0; }
.tk-dnav__toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.tk-dnav__toggle:only-child { flex: 1; }
.tk-dnav__link:hover, .tk-dnav__toggle:hover { background-color: var(--md-accent-fg-color--transparent); color: var(--tk-link); }
.tk-dnav__link:focus-visible, .tk-dnav__toggle:focus-visible { outline: 2px solid var(--tk-link); outline-offset: -2px; }
.tk-dnav__link[aria-current="page"] { background-color: var(--md-accent-fg-color--transparent); color: var(--tk-link); font-weight: 500; }
.tk-dnav__chev {            /* CSS chevron: points right when closed, down when open */
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease-out;
}
.tk-dnav__toggle[aria-expanded="true"] .tk-dnav__chev { transform: translateY(-2px) rotate(45deg); }

/* Full-bleed bands (homepage hero, support band) paint past the content column with a
   box-shadow; keep anything decorative from widening the page */
.md-main { overflow-x: clip; }

/* Offsets that depend on the taller header */
/* (below 76.25em the primary sidebar is Material's fixed drawer and keeps top: 0) */
@media screen and (min-width: 76.25em) {
  .md-sidebar { top: var(--tk-header-h); }
}
@media screen and (min-width: 60em) {
  .md-sidebar--secondary { top: var(--tk-header-h); }
}
.md-typeset :target { --md-scroll-margin: calc(var(--tk-header-h) + 1rem); }
.md-top {
  top: calc(var(--tk-header-h) + 12px);
  border: 1.5px solid var(--tk-border);
  border-radius: 4px;
  box-shadow: none;
  color: var(--tk-chrome-fg);
}
.md-top:hover { background-color: var(--tk-link); border-color: var(--tk-link); color: #fff; }

/* ============================================================
   Article typography (treon.fi: regular-weight, tight headings)
   ============================================================ */
.md-typeset h1 {
  color: var(--tk-heading);
  font-size: 2.3em;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.04em;
}
.md-typeset h2 {
  color: var(--tk-h2);
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.md-typeset h3 { color: var(--tk-heading); font-weight: 500; letter-spacing: -.01em; }
.md-typeset h4, .md-typeset h5, .md-typeset h6 { font-weight: 500; }

/* Left navigation */
.md-nav__link { transition: color .2s ease-out; }
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code { color: var(--tk-link); font-weight: 500; }
.md-nav__link:is(:focus, :hover) { color: var(--tk-link); }
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title {
    color: var(--tk-h2);
    font-family: var(--md-code-font-family);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
}

/* ============================================================
   Buttons (treon.fi: 4px radius, weight 500)
   ============================================================ */
.md-typeset .md-button {
  padding: .55em 1.2em;
  border: 1.5px solid var(--tk-link);
  border-radius: 4px;
  background: transparent;
  color: var(--tk-link);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: background-color .3s ease-out, border-color .3s ease-out, color .3s ease-out;
}
.md-typeset .md-button--primary {
  background: var(--tk-link);
  border-color: var(--tk-link);
  color: #fff;
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background: rgba(103,67,189,.08);
  border-color: var(--tk-link);
  color: var(--tk-link);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background: var(--tk-accent);
  border-color: var(--tk-accent);
  color: #fff;
}

/* ============================================================
   Homepage
   ============================================================ */
/* The hero is a Midnight Blue band edge to edge under the header, with the Media Kit's
   KV 1 line system on the right (brand guidelines: Midnight Blue hero; key visual only on
   the homepage hero, banners, empty states, footer and landing pages) */
.md-main:has(.tk-hero) .md-main__inner { margin-top: 0; }
.md-content__inner:has(.tk-hero) { padding-top: 0; }
.md-content__inner:has(.tk-hero)::before { display: none; }

.tk-hero {
  position: relative;
  isolation: isolate;
  margin: 0 0 3.2rem;
  padding: 2.4rem 0 3.6rem;
  background: var(--tk-midnight);
  box-shadow: 0 0 0 100vmax var(--tk-midnight);
  clip-path: inset(0 -100vmax);
  color: #dfe3ff;
  text-align: left;
}
.tk-hero::after {                       /* KV 1 (dark mode): lines fanning out to the right edge */
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: calc(50% - 50vw);          /* run to the window edge, not the content edge */
  bottom: 0;
  width: min(46rem, 55vw);
  background: url("../assets/brand/media-kit/kv-1-dark.webp") right center / contain no-repeat;
  opacity: .8;
  pointer-events: none;
}
.md-typeset .tk-hero h1 {
  max-width: 36rem;
  margin: 0 0 1rem;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.04em;
}
.tk-hero p { max-width: 34rem; margin: 0 0 1.6rem; font-size: .9rem; line-height: 1.5; }
@media screen and (max-width: 44.984375em) {
  .tk-hero::after { opacity: .3; }
  .tk-hero__search kbd { display: none; }   /* no "/" shortcut on touch screens */
  .md-typeset .tk-hero h1 { font-size: 2rem; }
}
.tk-hero .md-button { margin: 0 .5rem .4rem 0; }
.tk-hero a { text-decoration: none; }
/* Buttons on the dark band: violet primary, white outline secondary */
.md-typeset .tk-hero .md-button--primary { background: var(--tk-violet); border-color: var(--tk-violet); color: var(--tk-ink); }
.md-typeset .tk-hero .md-button--primary:hover { background: #c1acff; border-color: #c1acff; color: var(--tk-ink); }
.md-typeset .tk-hero .md-button:not(.md-button--primary) { border-color: rgba(235,238,255,.6); color: #fff; }
.md-typeset .tk-hero .md-button:not(.md-button--primary):hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* Search field on the homepage: a label that opens Material's search */
.tk-hero__search {
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: 30rem;
  margin: 0 0 1.4rem;
  padding: .65rem .9rem;
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: 4px;
  color: var(--tk-muted);
  font-size: .8rem;
  cursor: text;
  transition: border-color .3s ease-out;
}
.tk-hero__search:hover { border-color: var(--tk-violet); }
.tk-hero__search svg { width: 1.2rem; height: 1.2rem; fill: var(--tk-link); flex: none; }
.tk-hero__search span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tk-hero__search kbd {
  padding: .1rem .45rem;
  border-radius: 4px;
  background: var(--tk-lavender);
  box-shadow: none;
  color: var(--tk-midnight);
  font-family: var(--md-code-font-family);
  font-size: .7rem;
}

.md-typeset h2.tk-section { margin-top: 2.4rem; }

/* "Start here": small cards right under the hero, one per entry point (whole card is the link) */
.tk-start { margin: 0 0 2.4rem; }
.md-typeset .tk-start h2.tk-section { margin: 0 0 1rem; }
.md-typeset .tk-start > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
[dir=ltr] .md-typeset .tk-start > ul { margin-left: 0; }
[dir] .md-typeset .tk-start > ul > li { margin: 0; padding: 0; }
.md-typeset .tk-start__card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  height: 100%;
  padding: .9rem 1rem 1rem;
  background: var(--tk-card-bg);
  border: 1.5px solid var(--tk-line);
  border-radius: 8px;
  color: var(--tk-ink-2);
  text-decoration: none;
  transition: border-color .3s ease-out, box-shadow .3s ease-out;
}
.md-typeset .tk-start__card:hover,
.md-typeset .tk-start__card:focus-visible {
  border-color: var(--tk-link);
  box-shadow: 0 8px 24px rgba(4,13,64,.06);
  color: var(--tk-ink-2);
}
.md-typeset .tk-start__card:focus-visible { outline: 2px solid var(--tk-link); outline-offset: 2px; }
.tk-start__title { color: var(--tk-heading); font-size: .85rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.md-typeset .tk-start__card:hover .tk-start__title { color: var(--tk-link); }
.tk-start__desc { color: var(--tk-muted); font-size: .7rem; line-height: 1.45; }

/* "Need help?": a Lavender band (an information panel, so light; the hero and footer
   carry the Midnight Blue) */
.tk-support {
  margin: 3.2rem 0 -1.2rem;
  padding: 3.6rem 1rem;
  background: var(--tk-lavender);
  box-shadow: 0 0 0 100vmax var(--tk-lavender);
  clip-path: inset(0 -100vmax);
  color: var(--tk-ink-2);
  text-align: center;
}
.md-typeset .tk-support h2 { margin: 0 0 .8rem; color: var(--tk-ink); font-size: 1.9rem; letter-spacing: -.04em; }
.tk-support p { margin: 0 auto 1.4rem; max-width: 32rem; font-size: .75rem; }
.tk-support .md-button { margin: 0 .3rem .3rem; }
.tk-support a { text-decoration: none; }

/* ---------- Grid cards: treon.fi card (hairline border, 8px radius) ---------- */
.md-typeset .grid.cards > ul > li {
  padding: 1.4rem 1.4rem 1.2rem;
  background: var(--tk-card-bg);
  border: 1.5px solid var(--tk-line);
  border-radius: 8px;
  transition: border-color .3s ease-out, box-shadow .3s ease-out;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--tk-link);
  box-shadow: 0 8px 24px rgba(4,13,64,.06);
}
.md-typeset .grid.cards > ul > li > hr { border-bottom-color: var(--tk-line); }
.md-typeset .grid.cards .twemoji svg { fill: var(--tk-link); height: 1.5rem; width: 1.5rem; }
.md-typeset .grid.cards > ul > li > p:first-child { font-size: 1.05em; }
.md-typeset .grid.cards > ul > li > p:first-child strong { font-weight: 500; }
.md-typeset .grid.cards > ul > li > p:first-child a { color: var(--tk-heading); letter-spacing: -.01em; }
.md-typeset .grid.cards > ul > li > p:first-child a:hover { color: var(--tk-link); }

/* ============================================================
   Screenshots as framed figures
   ============================================================ */
.md-typeset img {
  display: block;
  margin: 1.4em auto;
  max-width: 100%;
  max-height: 560px;
  width: auto;
  border: 1.5px solid var(--tk-line);
  border-radius: 8px;
  box-shadow: 0 2px 14px rgba(4,13,64,.08);
  background: var(--md-default-bg-color);
}
/* tighter detail crops sit inline-sized, not full-width figures */
.md-typeset img.snippet { max-height: 260px; box-shadow: 0 1px 8px rgba(4,13,64,.08); }
/* product photos (Media Kit, transparent background): modest and unframed */
.md-typeset img.product {
  max-height: 240px; border: 0; border-radius: 0; box-shadow: none; background: none;
}
/* phone screenshots: portrait frames that sit side by side when paired */
.md-typeset img.phone {
  display: inline-block; margin: .6em .5em; max-height: 470px; vertical-align: top;
}
.md-typeset img + em {
  display: block; text-align: center; margin-top: -0.8em;
  font-size: .8rem; color: var(--md-default-fg-color--light);
}
/* Portrait technical diagrams (labelled parts, exploded views) need more height
   than a screenshot crop, or their callout letters become unreadable. */
.md-typeset img.tall { max-height: 760px; }
/* logos and icons in the chrome must not inherit the figure frame */
.md-header img, .md-nav img, .tk-footer img {
  border: 0; box-shadow: none; border-radius: 0; margin: 0; max-height: none; background: none;
}

/* ============================================================
   Admonitions
   ============================================================ */
.md-typeset .admonition, .md-typeset details { border-radius: 8px; border-width: 1.5px; }

/* Supporting information (note, info, tip, example…): lavender panel, purple marker */
.md-typeset :is(.admonition, details):is(.note, .info, .todo, .abstract, .summary, .tldr,
  .tip, .hint, .important, .example, .question, .help, .faq) {
  border-color: var(--tk-link);
  background-color: var(--tk-surface);
}
.md-typeset :is(.note, .info, .todo, .abstract, .summary, .tldr, .tip, .hint, .important,
  .example, .question, .help, .faq) > :is(.admonition-title, summary) {
  background-color: rgba(103,67,189,.10);
}
.md-typeset :is(.note, .info, .todo, .abstract, .summary, .tldr, .tip, .hint, .important,
  .example, .question, .help, .faq) > :is(.admonition-title, summary)::before {
  background-color: var(--tk-link);
}

/* Warnings: Treon Orange is reserved for these, so it keeps its meaning */
.md-typeset :is(.admonition, details):is(.warning, .caution, .attention) {
  border-color: var(--tk-orange);
}
.md-typeset :is(.warning, .caution, .attention) > :is(.admonition-title, summary) {
  background-color: rgba(255,89,0,.12);
}
.md-typeset :is(.warning, .caution, .attention) > :is(.admonition-title, summary)::before {
  background-color: var(--tk-orange);
}

/* ---------- Tables ---------- */
.md-typeset table:not([class]) { border: 1.5px solid var(--tk-line); border-radius: 8px; overflow: hidden; }
.md-typeset table:not([class]) th { background: var(--tk-surface); font-weight: 500; }

/* ============================================================
   Footer: Previous / Next on the page surface, then the treon.fi footer
   ============================================================ */
.md-footer { background-color: var(--md-footer-bg-color); color: var(--md-footer-fg-color); }
.md-footer__inner { padding: 1.2rem 0; border-top: 1px solid var(--tk-divider); }
.md-footer__link { opacity: 1; }
.md-footer__link:hover, .md-footer__link:focus { color: var(--tk-link); opacity: 1; }
.md-footer__direction {
  font-family: var(--md-code-font-family);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 1;
  color: var(--tk-h2);
}
.md-footer__title { font-size: 1rem; letter-spacing: -.02em; }

/* Midnight Blue (brand guidelines) with the Media Kit's KV 2 waveform along the bottom */
.md-footer-meta.tk-footer {
  position: relative;
  isolation: isolate;
  padding: 56px 0 140px;
  background: var(--tk-midnight);
  color: #ebeeff;
  font-size: 14px;
  line-height: 1.5;
}
.md-footer-meta.tk-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 200px;
  background: url("../assets/brand/media-kit/kv-2-dark.webp") center bottom / auto 100% repeat-x;
  opacity: .22;
  pointer-events: none;
}
.tk-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 0 .8rem;
}
.tk-footer__title {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(235,238,255,.16);
  font-family: var(--md-code-font-family);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tk-footer__text { margin: 0; line-height: 2; }
.tk-footer ul { margin: 0; padding: 0; list-style: none; }
.tk-footer li { margin: 0 0 6px; }
.md-footer-meta.tk-footer a { color: #ebeeff; }
.md-footer-meta.tk-footer a:hover, .md-footer-meta.tk-footer a:focus { color: var(--tk-violet); }
.tk-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  padding: 0 .8rem;
}
.tk-footer__logo-svg { display: block; width: 107px; height: auto; color: #fff; }
.tk-footer__logo:hover { opacity: .7; }
.tk-footer__end { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.tk-footer__socials { display: flex; gap: 14px; }
.tk-footer__socials img { width: 28px; height: 28px; }
.tk-footer__socials a:hover { opacity: .7; }
.tk-footer__copy { margin: 0; font-size: 13px; }
@media screen and (max-width: 59.984375em) {
  .tk-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}
@media screen and (max-width: 29.984375em) {
  .tk-footer__cols { grid-template-columns: 1fr; }
  .tk-footer__bottom { flex-direction: column; align-items: flex-start; }
  .tk-footer__end { align-items: flex-start; }
}

/* ============================================================
   Navigation tree (review 2026-08-28 v2)
   ============================================================ */

/* The vertical guide line beside the current page's headings is drawn by Material
   with --md-primary-fg-color (Midnight Blue); it uses its own token, --tk-nav-guide,
   set with the palette above.
   Material scopes this as
   [dir=ltr] .md-nav--integrated>.md-nav__list>.md-nav__item--active .md-nav--secondary
   so the override has to carry the same [dir] and .md-nav--integrated to win.
   Material's own width is .05rem (~0.8px), which all but disappears — widen it too. */
[dir] .md-nav--integrated > .md-nav__list > .md-nav__item--active .md-nav--secondary {
  border-left-color: var(--tk-nav-guide);
  border-right-color: var(--tk-nav-guide);
  border-left-width: 2px;
  border-right-width: 2px;
}

/* Expand all / Collapse all, injected directly above the sidebar tree by
   nav-controls.js. Deliberately quiet: two small text actions, right-aligned over
   the tree, separated from it by a hairline — not buttons competing with the nav. */
.tk-nav-controls {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: .5rem;
  margin: .2rem 0 .45rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--tk-divider);
  line-height: 1.2;
}
.tk-nav-controls button {
  font: inherit;
  font-size: .58rem;
  padding: 0;
  cursor: pointer;
  color: var(--md-default-fg-color--light);
  background: none;
  border: 0;
  transition: color .12s ease;
}
.tk-nav-controls button:hover,
.tk-nav-controls button:focus-visible {
  color: var(--md-accent-fg-color);
  text-decoration: underline;
}
.tk-nav-controls .tk-nav-controls__sep {
  font-size: .58rem;
  color: var(--md-default-fg-color--lighter);
  user-select: none;
}
/* Only meaningful on the desktop sidebar tree; the mobile drawer is a drill-down. */
@media screen and (max-width: 76.1875em) {
  .tk-nav-controls { display: none; }
}

/* ============================================================
   Review 2026-09-14 (v3)
   ============================================================ */

/* Accessibility: content links carry an underline, not colour alone. Excludes
   buttons, the heading anchors, and the card grids' own chrome. */
.md-typeset a:not(.md-button):not(.headerlink):not(.md-icon):not(.tk-start__card) {
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: from-font;
}
.md-typeset a:not(.md-button):not(.headerlink):not(.md-icon):not(.tk-start__card):hover {
  text-decoration-thickness: 2px;
}
/* Card titles are headings, not inline links; a Start-here card is a whole-card link
   whose border and hover state mark it as one */
.md-typeset .grid.cards > ul > li > p:first-child a { text-decoration: none; }

/* ============================================================
   Support chat answer highlight (javascripts/answer-highlight.js, which only the support
   chat's site copy loads; inert without it)
   The section an answer came from, wrapped in div.tk-answer: lavender tint with a
   purple left rule, and a short pulse when it appears.
   ============================================================ */
.md-typeset .tk-answer {
  --tk-answer-bg: rgba(178,102,255,.10);
  --tk-answer-rule: var(--tk-link);
  --tk-answer-glow: rgba(178,102,255,.45);
  margin: 0 -.8rem;                 /* bleeds into Material's .8rem gutter, phones included */
  padding: .1rem .8rem .1rem calc(.8rem - 4px);
  border-left: 4px solid var(--tk-answer-rule);
  border-radius: 0 4px 4px 0;
  background: var(--tk-answer-bg);
  scroll-margin-top: calc(var(--tk-header-h) + .75rem);
  animation: tk-answer-pulse 1.6s ease-out 1;
}
.md-typeset .tk-answer > :first-child { margin-top: .6em; }
@keyframes tk-answer-pulse {
  0%   { box-shadow: 0 0 0 0 var(--tk-answer-glow); }
  35%  { box-shadow: 0 0 0 8px var(--tk-answer-glow); }
  100% { box-shadow: 0 0 0 16px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .md-typeset .tk-answer { animation: none; }
}