/* Kiosk Satellite docs: the site's look on top of Material for MkDocs.
   Material scales its root font to 125%, so sizes here are in px. */

:root {
  --ks-bg: #f5f4f2;
  --ks-surface: #ffffff;
  --ks-surface-2: #e8e6e1;
  --ks-surface-high: #efede9;
  --ks-border: #e3e0da;
  --ks-text: #212327;
  --ks-muted: #5d6066;
  --ks-primary: #488284;
  --ks-primary-deep: #3b6f71;
  --ks-primary-soft: #dfeaea;
  --ks-on-primary-soft: #1b3437;
  --ks-dark: #202124;
  --ks-radius: 24px;
  --ks-radius-sm: 12px;
  --ks-link: #488284;

  --md-primary-fg-color: var(--ks-primary);
  --md-primary-fg-color--light: #5fa0a3;
  --md-primary-fg-color--dark: var(--ks-primary-deep);
  --md-accent-fg-color: var(--ks-primary-deep);
  --md-accent-fg-color--transparent: rgba(72, 130, 132, 0.1);
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--ks-bg);
  --md-default-fg-color: var(--ks-text);
  --md-default-fg-color--light: var(--ks-muted);
  --md-default-fg-color--lighter: #8a8d93;
  --md-default-fg-color--lightest: var(--ks-border);
  --md-code-bg-color: var(--ks-surface-high);
  --md-code-fg-color: var(--ks-text);
  --md-typeset-a-color: var(--ks-primary);
  --md-typeset-table-color: var(--ks-border);
  --md-footer-bg-color: var(--ks-dark);
  --md-footer-bg-color--dark: #1a1b1e;
}

[data-md-color-scheme="slate"] {
  --ks-link: #7aa6aa;
  --ks-bg: #202124;
  --ks-surface: #2a2b2f;
  --ks-surface-2: #37383d;
  --ks-surface-high: #303136;
  --ks-border: #37383d;
  --ks-text: #e8eaed;
  --ks-muted: #b6babf;
  --ks-primary-soft: #2f4142;
  --ks-on-primary-soft: #d0e3e5;
  --md-primary-fg-color: #2a2b2f;
  --md-primary-fg-color--light: #37383d;
  --md-primary-fg-color--dark: #202124;
  --md-accent-fg-color: #6c9b9f;
  --md-typeset-a-color: #7aa6aa;
  --md-default-bg-color: var(--ks-bg);
  --md-default-fg-color: var(--ks-text);
  --md-default-fg-color--light: var(--ks-muted);
  --md-default-fg-color--lightest: var(--ks-border);
  --md-code-bg-color: #16171a;
  --md-code-fg-color: #e8eaed;
  --md-typeset-table-color: var(--ks-border);
}

/* ── Header: the site's nav band ─────────────────────────────────────── */
.md-header {
  background-color: #3f7173;
  background-image: linear-gradient(340deg, #3b6f71 0%, #488284 50%, #5fa0a3 100%);
  box-shadow: none;
}
.md-header::before {
  content: ""; position: absolute; inset: 0; background: rgba(14, 40, 42, 0.16); pointer-events: none;
}
.md-header__inner { position: relative; height: 72px; padding: 0 12px; }
.md-header__button.md-logo { display: inline-block; margin: 0; padding: 0 8px; }
.md-header__button.md-logo img, .md-header__button.md-logo svg { height: 36px; width: auto; }
/* The title stays in the flow as the spacer that pushes search and the repo badge right, just not visible: the wordmark already names the site */
.md-header__title { visibility: hidden; }
.md-header__button { color: #fff; }
.md-header__source { color: #fff; }
.md-header__source .md-source__facts { font-size: 11px; }
.md-search__form { border-radius: 999px; background: rgba(255, 255, 255, 0.16); height: 40px; }
.md-search__form:hover { background: rgba(255, 255, 255, 0.24); }
.md-search__input { font-size: 14px; }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form { border-radius: 20px 20px 0 0; background: var(--ks-surface); }
.md-search__output { border-radius: 0 0 20px 20px; }

.md-tabs {
  background-color: #488284;
  background-image: linear-gradient(340deg, #3b6f71 0%, #488284 50%, #5fa0a3 100%);
}
.md-tabs__list { padding: 0 8px; }
.md-tabs__link { font-size: 14px; font-weight: 600; opacity: 0.8; margin-top: 12px; padding-bottom: 12px; }
.md-tabs__link--active, .md-tabs__link:hover { opacity: 1; color: #fff; }
.md-tabs__item--active .md-tabs__link { border-bottom: 2px solid #fff; }
[data-md-color-scheme="slate"] .md-header, [data-md-color-scheme="slate"] .md-tabs { background-image: none; background-color: #2a2b2f; }
[data-md-color-scheme="slate"] .md-header::before { display: none; }

/* ── Layout: off-white ground, white cards for the rails and the page ── */
.md-grid { max-width: 1440px; }
.md-main__inner { margin-top: 24px; }
.md-sidebar { padding: 0; }
.md-sidebar__scrollwrap { margin: 0 12px; }
/* Sidebar rails, desktop only: on narrow screens Material's drawer keeps
   its own layout, where the title doubles as the back button. */
@media screen and (min-width: 76.25em) {
  .md-nav--primary .md-nav__title, .md-nav--secondary .md-nav__title {
    font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ks-primary); background: transparent; box-shadow: none; padding: 8px 12px 10px;
  }
  .md-nav--secondary .md-nav__title { color: var(--ks-muted); }
  .md-nav__item .md-nav__link { font-size: 15px; margin-top: 2px; padding: 8px 12px; border-radius: var(--ks-radius-sm); color: var(--ks-text); }
  .md-nav__item .md-nav__link:hover { background: var(--ks-surface-2); color: var(--ks-text); }
  .md-nav__link--active, .md-nav__item .md-nav__link--active:hover { background: var(--ks-primary-soft); color: var(--ks-on-primary-soft); font-weight: 600; }
  .md-nav--secondary .md-nav__link { font-size: 14px; color: var(--ks-muted); padding: 5px 12px; }
  .md-nav--secondary .md-nav__link--active { background: transparent; color: var(--ks-text); }
  .md-nav--secondary .md-nav__list .md-nav__list .md-nav__link { padding-left: 24px; }
  /* Material fades a lifted section's sticky header into the page with a
     blurred shadow in the page color; on the off-white ground that shadow
     washed over the first row's pill. The header stays sticky, unshadowed. */
  .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link { box-shadow: none; background: var(--ks-bg); }
}

.md-content { background: var(--ks-surface); border: 1px solid var(--ks-border); border-radius: var(--ks-radius); margin: 0 12px 48px; }
.md-content__inner { margin: 0; padding: 40px 48px 48px; }
.md-content__inner::before { display: none; }
.md-content__button { margin: 0 0 0 16px; color: var(--ks-muted); }
.md-content__button:hover { color: var(--ks-primary); }

/* ── Type: the site's scale ──────────────────────────────────────────── */
.md-typeset { font-size: 17px; line-height: 1.6; color: var(--ks-text); }
.md-typeset h1 { font-size: 34px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--ks-text); margin: 0 0 18px; }
.md-typeset h2 { font-size: 23px; line-height: 1.3; font-weight: 600; margin: 40px 0 12px; }
.md-typeset h3 { font-size: 19px; font-weight: 600; margin: 30px 0 8px; }
.md-typeset h4 { font-size: 17px; font-weight: 600; margin: 22px 0 6px; }
.md-typeset p, .md-typeset ul, .md-typeset ol { margin: 0 0 14px; }
.md-typeset li { margin-bottom: 4px; }
.md-typeset a:not(.md-button):not(.headerlink):not(.ks-support-button) { color: var(--ks-link); font-weight: 500; text-decoration: none; }
.md-typeset a:not(.md-button):not(.headerlink):not(.ks-support-button):hover { color: var(--ks-link); text-decoration: underline; }
.md-typeset .headerlink { color: var(--ks-border); }
.md-typeset strong { font-weight: 600; }

/* ── Code, tables, admonitions in the site's card vocabulary ─────────── */
.md-typeset pre > code { border-radius: 16px; padding: 18px 20px; font-size: 14.5px; line-height: 1.6; }
[data-md-color-scheme="default"] .md-typeset pre > code { background: var(--ks-dark); color: #e8eaed; }
[data-md-color-scheme="default"] .md-typeset .highlight .k, [data-md-color-scheme="default"] .md-typeset .highlight .kd { color: #8dbcbf; }
[data-md-color-scheme="default"] .md-typeset .highlight .s, [data-md-color-scheme="default"] .md-typeset .highlight .s2, [data-md-color-scheme="default"] .md-typeset .highlight .s1 { color: #cbb884; }
[data-md-color-scheme="default"] .md-typeset .highlight .c, [data-md-color-scheme="default"] .md-typeset .highlight .c1 { color: #8a8d93; }
[data-md-color-scheme="default"] .md-typeset .highlight .nt, [data-md-color-scheme="default"] .md-typeset .highlight .na, [data-md-color-scheme="default"] .md-typeset .highlight .nl { color: #9ccfd2; }
[data-md-color-scheme="default"] .md-typeset .highlight .p, [data-md-color-scheme="default"] .md-typeset .highlight .o { color: #b6babf; }
[data-md-color-scheme="default"] .md-typeset .highlight .mi, [data-md-color-scheme="default"] .md-typeset .highlight .kc { color: #e0b07a; }
.md-typeset .md-clipboard { color: #8a8d93; }
.md-typeset .md-clipboard:hover { color: #fff; }
.md-typeset code { border-radius: 6px; padding: 2px 6px; font-size: 14.5px; }
.md-typeset table:not([class]) { border: 1px solid var(--ks-border); border-radius: 16px; overflow: hidden; font-size: 15px; }
.md-typeset table:not([class]) th { background: var(--ks-surface-high); color: var(--ks-text); font-weight: 600; padding: 12px 16px; }
.md-typeset table:not([class]) td { padding: 12px 16px; border-top: 1px solid var(--ks-border); vertical-align: top; }
.md-typeset .admonition, .md-typeset details { border-radius: 16px; border: 1px solid var(--ks-border); border-left-width: 1px; box-shadow: none; font-size: 16px; }
.md-typeset .admonition-title, .md-typeset summary { border-radius: 16px 16px 0 0; }
.md-typeset .md-button { border-radius: 999px; font-weight: 600; padding: 10px 20px; }

/* ── Docs home ───────────────────────────────────────────────────────── */
.md-typeset .grid.cards > ul > li { border: 1px solid var(--ks-border); border-radius: 20px; padding: 24px; }
.md-typeset .grid.cards > ul > li:hover { border-color: var(--ks-primary); box-shadow: none; }
.md-typeset .grid.cards > ul > li > hr { margin: 12px 0; border-color: var(--ks-border); }
.md-typeset .grid.cards > ul > li > p { font-size: 15px; }
.md-typeset .grid.cards > ul > li > p:first-child { margin: 0; }
.ks-card-head { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; }
/* The remote admin's rail discs: icon on a filled circle, colors cycling
   sage, teal, ochre and rust (light values here, lifted ones in dark). */
.disc { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.disc svg { width: 19px; height: 19px; }
.d1 { background: #56814f; }
.d2 { background: #44686c; }
.d3 { background: #9c742a; }
.d4 { background: #a9501f; }
[data-md-color-scheme="slate"] .d1 { background: #749c6f; }
[data-md-color-scheme="slate"] .d2 { background: #7aa6aa; }
[data-md-color-scheme="slate"] .d3 { background: #ce9c3e; }
[data-md-color-scheme="slate"] .d4 { background: #d97e4c; }

/* ── Support card at the end of every page, the home page's card ─────── */
.ks-support { display: flex; align-items: center; gap: 28px; margin: 56px 0 0; padding: 32px 36px; background: #fdf8ee; border: 1px solid #f1e0bb; border-radius: 24px; }
[data-md-color-scheme="slate"] .ks-support { background: #2e2a22; border-color: #4a3a12; }
.ks-support-heart { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; background: #f1e0bb; color: #e8604c; font-size: 34px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
[data-md-color-scheme="slate"] .ks-support-heart { background: #4a3a12; }
.ks-support-copy { flex: 1; min-width: 0; }
.md-typeset .ks-support-copy p { margin: 0 0 6px; font-size: 15px; line-height: 1.6; color: var(--ks-muted); }
.md-typeset .ks-support-copy .ks-support-title { font-size: 20px; font-weight: 600; color: var(--ks-text); margin-bottom: 8px; }
.md-typeset .ks-support-copy .ks-support-sign { font-size: 15px; font-weight: 500; color: var(--ks-text); }
.md-typeset a.ks-support-button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: #f1e0bb; color: #3d2d06; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.md-typeset a.ks-support-button:hover { background: #e9d3a3; color: #3d2d06; text-decoration: none; }
@media screen and (max-width: 59.984375em) {
  .ks-support { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 20px; border-radius: 20px; margin-top: 40px; }
  .ks-support-heart { width: 52px; height: 52px; font-size: 28px; }
}

/* ── Footer: Material's own, on the site's dark ─────────────────────── */
.md-footer { background: var(--ks-dark); }
.md-footer__inner { padding: 16px 12px 8px; }
.md-footer__link { color: #e8eaed; opacity: 1; }
.md-footer__link:hover { color: #fff; opacity: 1; }
.md-footer__direction { color: #b6babf; opacity: 1; font-size: 12px; }
.md-footer__title { font-size: 15px; }
.md-footer-meta { background: #1a1b1e; }
.md-copyright, .md-copyright__highlight { color: #b6babf; font-size: 12.5px; }
.md-social__link { color: #b6babf; }
.md-social__link:hover { color: #fff; }

/* ── Narrow screens ──────────────────────────────────────────────────── */
/* The drawer exists up to the tablet breakpoint, not just on phones. Its
   top card shows the wordmark alone; the site name would repeat it. */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title[for="__drawer"] { display: flex; align-items: center; font-size: 0; line-height: 0; height: 72px; padding: 0 16px; overflow: hidden; }
  .md-nav--primary .md-nav__title[for="__drawer"] .md-nav__button { position: static; display: block; padding: 0; margin: 0; }
  .md-nav--primary .md-nav__title[for="__drawer"] .md-nav__button img { height: 32px; width: auto; display: block; }
}
@media screen and (max-width: 59.984375em) {
  /* Phone header: wordmark on the left, then search, theme and the menu
     button on the right, nothing wider than the screen. */
  .md-header__inner { height: 64px; padding: 0 8px; }
  .md-header__button { margin: 0; padding: 12px 8px; }
  .md-header__button.md-logo { padding: 0 8px; margin-right: auto; }
  .md-header__button.md-logo img { height: 28px; }
  .md-header__button[for="__drawer"] { order: 10; }
  .md-header__title { display: none; }
  .md-search { order: 8; }
  .md-header__option { order: 9; }

  .md-content { margin: 0 8px 32px; border-radius: 20px; }
  .md-content__inner { padding: 24px 20px 32px; }
  .md-typeset { font-size: 16px; }
  .md-typeset h1 { font-size: 30px; }
  .md-typeset h2 { font-size: 22px; }
}