/* ==========================================================================
   Alpha Strike Labs Documentation Theme

   Structure (cascade order intentionally preserved)
   01. Fonts and design tokens
   02. Header, tabs and search
   03. Typography and links
   04. Navigation and table of contents
   05. Footer
   06. Admonitions and collapsible details
   07. Code blocks and API comparison panels
   08. Cards and guide lists
   09. Tables, screenshots and captions

   Notes
   - Material for MkDocs overrides are intentionally specific.
   - Light mode: [data-md-color-scheme="default"]
   - Dark mode:  [data-md-color-scheme="slate"]
   ========================================================================== */

/* ---------------------------------------------------------------------------
 * Light theme — `prefers-color-scheme: light` (Material "default" scheme)
 * ------------------------------------------------------------------------- */
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Bold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
}

 :root {

  /*Brand colours — uncomment and set to the Inspector design tokens.*/
  --md-primary-color: #005BC4;
  --md-primary-color--dark: #66AAF9;
  --md-primary-color--light: #005BC4;
  /* --md-accent-color: #...; */
  /* --md-accent-color--dark: #...; */
  /* --md-accent-color--light: #...; */


  /* Typography — uncomment to override the fonts set in mkdocs.yml.*/
  --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --md-code-font: "Inspector Mono", "SFMono-Regular", Consolas, monospace;

}


[data-md-color-scheme="default"] {
  --md-primary-fg-color: #11181C;
}

[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-header__title,
[data-md-color-scheme="default"] .md-header__button,
[data-md-color-scheme="default"] .md-tabs__link {
    color: #11181C;
}

[data-md-color-scheme="slate"] .md-header__title {
    color: #D4D4D8;
}

[data-md-color-scheme="default"] .md-header {
    background-color: rgb(255 255 255 / 80%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-md-color-scheme="default"] .md-search__form {
    background: white;
    border: 2px solid #E4E4E7;
    border-radius: 12px;
}

[data-md-color-scheme="default"] .md-search__form:hover {
    border: 2px solid #A1A1AA;
}

[data-md-color-scheme="default"] .md-search__input {
    color: #11181C;
}

[data-md-color-scheme="default"] .md-search__input::placeholder {
    color: #52525B;
}

[data-md-color-scheme="default"] .md-search__icon {
    color: #71717A;
}

[data-md-color-scheme="default"] .md-tabs {
    background-color: rgb(255 255 255 / 80%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #E4E4E7;
}

[data-md-color-scheme="default"]
[data-md-toggle="search"]:checked ~ .md-header
.md-search__form {
    border-radius: 8px 8px 0 0;
    border: none;
    box-shadow: none;
}

[data-md-color-scheme="default"]
[data-md-toggle="search"]:checked ~ .md-header
.md-search__output {
    border-radius: 0 0 8px 8px;
}

.md-search-result__meta {
    background-color: white;
}

[data-md-color-scheme="default"] .md-typeset h1 {
    color: #11181C;
    font-size: 1.5rem;      /* 24px */
    line-height: 2.25rem;    /* 36px */
    font-weight: 500;       /* Semi-Bold */
}

[data-md-color-scheme="default"] .md-typeset h2 {
    color: #11181C;
    font-size: 1.125rem;    /* 18px */
    line-height: 1.5rem;    /* 24px */
    font-weight: 500;       /* Semi-Bold */
}

[data-md-color-scheme="default"] .md-typeset h3 {
  color: #11181C;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 2rem 0 0.75rem;
}


/* ---------------------------------------------------------------------------
 * Light mode — Table of contents
 * ------------------------------------------------------------------------- */

/* Titel */
[data-md-color-scheme="default"] .md-nav--secondary .md-nav__title {
    color: #52525B;
}

/* Links */
[data-md-color-scheme="default"] .md-nav--secondary .md-nav__link {
    color: #005BC4;
    line-height: 1.45;
    text-decoration-line:none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    text-decoration-skip-ink: none;
    text-decoration-color: #005BC4;
}


/* Hover-Zustand */
[data-md-color-scheme="default"] .md-nav--secondary .md-nav__link:hover {
    color: #11181C;
    text-decoration-color: #11181C;
    text-decoration-line:underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    text-decoration-skip-ink: none;
}

/* Mehr vertikaler Abstand zwischen Einträgen */
[data-md-color-scheme="default"] .md-nav--secondary .md-nav__item {
    margin-bottom: 0.60rem;
}

/* Einzug der Unterpunkte entfernen */
.md-nav--secondary .md-nav__list .md-nav__list {
    margin-left: 0;
    padding-left: 0;
}

/* ---------------------------------------------------------------------------
 * Dark theme — `prefers-color-scheme: dark` (Material "slate" scheme)
 * ------------------------------------------------------------------------- */
:root[data-md-color-scheme="slate"] {
  /*
   * Dark-mode overrides for the tokens above, if different from light mode.
   */
  --md-primary-color: #66AAF9;
  --md-default-bg-color: #1F1F21;
}

[data-md-color-scheme="slate"] .md-search__icon {
    color: #A1A1AA;
}

[data-md-color-scheme="slate"] [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    background-color: rgb(31 31 33);
    box-shadow: none;
}

[data-md-color-scheme="slate"] .md-main {
    background-color: #1F1F21;
}


[data-md-color-scheme="slate"] .md-header {
    background-color: rgb(31 31 33 / 80%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    box-shadow: none;
}

[data-md-color-scheme="slate"] .md-tabs {
    background: rgb(31 31 33 / 80%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #3F3F46;
}

[data-md-color-scheme="slate"] .md-typeset h1 {
    color: #D4D4D8;
    font-size: 1.5rem;      /* 24px */
    line-height: 2.25rem;    /* 36px */
    font-weight: 600;       /* Semi-Bold */
}

[data-md-color-scheme="slate"] .md-typeset h2 {
    color: #D4D4D8;
    font-size: 1.125rem;    /* 18px */
    line-height: 1.5rem;    /* 24px */
    font-weight: 600;       /* Semi-Bold */
}

[data-md-color-scheme="slate"] .md-typeset h3 {
  color: #D4D4D8;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 2rem 0 0.75rem;
}


/* Beim Scrollen */
[data-md-color-scheme="slate"] .md-header--shadow {
    box-shadow: 0 1px 0 #3f3f46;
}


[data-md-color-scheme="slate"] .md-search__form {
    background: #1F1F21;
    border: 2px solid #3F3F46;
    border-radius: 12px;
}

[data-md-color-scheme="slate"] .md-search__form:hover {
    border: 2px solid #71717A;
}

[data-md-color-scheme="slate"]
[data-md-toggle="search"]:checked ~ .md-header
.md-search__form {
    border-radius: 8px 8px 0 0;
    border: none;
    box-shadow: none;
}

[data-md-color-scheme="slate"]
[data-md-toggle="search"]:checked ~ .md-header
.md-search__output {
    border-radius: 0 0 8px 8px;
}

[data-md-color-scheme="slate"] .md-search-result__meta {
    background-color: #1F1F21;
}

[data-md-color-scheme="slate"] .md-typeset h1 {
    color: #D4D4D8;
    font-size: 1.5rem;      /* 24px */
    font-weight: 500;       /* Semi-Bold */
}

[data-md-color-scheme="slate"] .md-typeset h2 {
    color: #D4D4D8;
    font-size: 1.125rem;    /* 18px */
    line-height: 1.5rem;    /* 24px */
    font-weight: 500;       /* Semi-Bold */
}

[data-md-color-scheme="slate"] .md-typeset h3 {
  color: #D4D4D8;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 2rem 0 0.75rem;
}


/* ---------------------------------------------------------------------------
 * Dark mode — Table of contents
 * ------------------------------------------------------------------------- */

/* Titel */
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__title {
    color: #D4D4D8;
}

/* Links */
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link {
    color: #66AAF9;
    text-decoration: none;
    text-underline-offset: 0.25em;
    line-height: 1.45;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: none;
}

/* Aktiver Link */
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
    color: #66AAF9;
}

/* Hover */
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link:hover {
    color: #D4D4D8;
    text-decoration: underline;
}

/* Mehr vertikaler Abstand zwischen Einträgen */
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__item {
    margin-bottom: 0.60rem;
}


[data-md-color-scheme="slate"][data-md-color-primary="indigo"] {
    --md-typeset-a-color: #66AAF9;
}

.md-nav--lifted>.md-nav__list>.md-nav__item--active>.md-nav__link {
    background: none;
    box-shadow: none;
}

 .md-nav--secondary .md-nav__title {
    background: none;
    box-shadow: none;
}

/* TOC Scrollbar */

/* Light Mode */
[data-md-color-scheme="default"] .md-sidebar__scrollwrap:hover,
[data-md-color-scheme="default"] .md-sidebar__scrollwrap:focus-within {
    scrollbar-color: #A1A1AA transparent;
}

/* Dark Mode */
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap:hover,
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap:focus-within {
    scrollbar-color: #71717A transparent;
}


/* Add custom component styling below (banners, callouts, brand blocks, ...).*/


 .md-header {
    height: 68px;
}

.md-header__inner {
    height: 68px;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 36px;
    width: auto;
}

[dir=ltr] .md-header__title {
    margin-left: .0rem;
    margin-right: .4rem;
}


/* ---------------------------------------------------------------------------
 * Search
 * ------------------------------------------------------------------------- */

.md-search {
    margin-left: .6rem;
}

.md-search__form {
    border-radius: 12px;
    background-color: #001731;
}

[data-md-color-scheme="slate"] .md-search-result__list {
    background-color: #1F1F21;
}

.md-header__option label[for^="__palette"] svg {
    display: none;
}

.md-header__option label[for^="__palette"] {
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 22px 22px;
    mask-size: 22px 22px;
}

[data-md-color-scheme="default"] .md-search-result__link:hover,
[data-md-color-scheme="default"] .md-search-result__link:focus {
    background-color: #F4F4F5;
}

[data-md-color-scheme="slate"] .md-search-result__link:hover,
[data-md-color-scheme="slate"] .md-search-result__link:focus {
    background-color: #27272A;
}

.md-search-result__title {
    font-size: 0.85rem;
    font-weight: 600;
}

.md-search .md-search-result__article h1 {
    margin: 6px 0 6px 0;
    font-size: 18px;
    line-height: 1.1rem;
    font-weight: 500;
}

.md-search .md-search-result__article h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.4rem;
    font-weight: 500;
}

.md-search-result__article p {
    font-size: 14px !important;
    line-height: 1.1rem !important;
    color: #11181C;
}

[data-md-color-scheme="default"] .md-search mark {
    color: #005BC4;
}

[data-md-color-scheme="slate"] .md-search mark {
    color: #60A5FA;
}

[data-md-color-scheme="slate"] .md-search-result__article p {
    font-size: 14px !important;
    line-height: 1.1rem !important;
    color: #D4D4D8;
}

.md-search-result__icon::after {
    -webkit-mask-image: url("/assets/icons/search-result.svg") !important;
    mask-image: url("/assets/icons/search-result.svg") !important;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    background-color: #71717A;
    transform: translateY(-1px);
    margin-left: 5px;

    width: 16px;
    height: 16px;
}

[data-md-color-scheme="slate"] .md-search-result__icon::after {
    background-color: #A1A1AA;
}

[data-md-color-scheme="default"] .md-search-result__more {
    color: #005BC4;
    background-color: #F4F4F5;
}

[data-md-color-scheme="default"] .md-search-result__more a {
    display: block;
    color: #005BC4;
}

.md-search-result__more>summary:focus>div, .md-search-result__more>summary:hover>div {
    background-color: #E6F1FE;
    color: #005BC4;
}

[data-md-color-scheme="slate"] .md-search-result__more > summary:focus > div,
[data-md-color-scheme="slate"] .md-search-result__more > summary:hover > div {
    background-color: #27272A;
    color: #D4D4D8;
}


/* Im hellen Modus: Mond anzeigen */
[data-md-color-scheme="default"]
.md-header__option label[for^="__palette"] {
    -webkit-mask-image: url("/assets/icons/moon.svg");
    mask-image: url("/assets/icons/moon.svg");
    color: #71717A;
}

/* Im dunklen Modus: Sonne anzeigen */
[data-md-color-scheme="slate"]
.md-header__option label[for^="__palette"] {
    -webkit-mask-image: url("/assets/icons/sun.svg");
    mask-image: url("/assets/icons/sun.svg");
    color: #D4D4D8;
}

/* ==========================================================
   Links im Content
   ========================================================== */

.md-typeset a {
    color: #005BC4;
    text-decoration: underline;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: 0.15em; /* 3.5px */
    text-underline-position: from-font;
}

.md-typeset a:hover {
    color: #11181C;
    text-decoration-color: currentColor;
}

.md-typeset a:visited {
    color: #005BC4;
}


[data-md-color-scheme="slate"] .md-typeset a {
    color: #66AAF9;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
    color: #D4D4D8;
}


/* ==========================================================
   Footer
   ========================================================== */

/* ---------- Light Mode ---------- */

[data-md-color-scheme="default"] .md-footer {
    background-color: white;
    color: #11181C;
    border-top: 1px solid #E4E4E7;
}

[data-md-color-scheme="default"] .md-footer-meta {
    background-color: white;
}


[data-md-color-scheme="default"] .md-copyright {
    color: #11181C;
}

body[data-md-color-scheme="default"] .md-footer-meta.md-typeset a {
    color: #005bc4;
    text-decoration: underline;
    text-decoration-color: currentColor;
}

body[data-md-color-scheme="default"] .md-footer-meta.md-typeset a:hover {
    color: #11181c;
}


/* ---------- Dark Mode ---------- */

[data-md-color-scheme="slate"] .md-footer {
    background-color: #1F1F21;
    color: #D4D4D8;
    border-top: 1px solid rgba(255,255,255,.10);
}

[data-md-color-scheme="slate"] .md-footer-meta {
    background-color: transparent;
}

body[data-md-color-scheme="slate"] .md-footer-meta.md-typeset a {
    color: #66AAF9;
    text-decoration: underline;
    text-decoration-color: currentColor;
}

body[data-md-color-scheme="slate"] .md-footer-meta.md-typeset a:hover {
    color: #D4D4D8;
}

[data-md-color-scheme="slate"] .md-copyright {
    color: #D4D4D8;
}


/* ==========================================================
   Admonition Container – nur normale Boxen
   ========================================================== */

.md-typeset .admonition > .admonition-title {
    font-size: 16px;
}

[dir="ltr"] .md-typeset .admonition > .admonition-title,
[dir="rtl"] .md-typeset .admonition > .admonition-title {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    font-size: 16px;
    font-weight: 600;
    margin-top: 8px;
}

.md-typeset .admonition {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 4px 20px rgba(0, 0, 0, 0.08);
    border: none;
    font-size: 16px;
    padding-bottom: 6px;
}

[data-md-color-scheme="default"] .md-typeset .admonition {
    color: #11181C;
    margin-bottom: 2em;
}

[data-md-color-scheme="slate"] .md-typeset .admonition {
    color: #D4D4D8;
}

.md-typeset .admonition > .admonition-title {
    background-color: transparent !important;
    padding-top: 0.65rem;
}

.md-typeset .admonition > .admonition-title {
    padding-left: 2.5rem;
    padding-right: 1rem;
}


.md-typeset .admonition > *:not(.admonition-title) {
    padding-left: 1.925rem;
    padding-right: 1rem;
}


.md-typeset .admonition > .admonition-title::before {
    left: 1rem;
    top: 0.65rem;
}

.md-typeset .admonition > .admonition-title + p {
    margin-top: 0;
}

[data-md-color-scheme="default"] .md-typeset .admonition.note {
    border-color: white;
}

[data-md-color-scheme="slate"] .md-typeset .admonition {
    background-color: #27272A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 2em;
}


/* ==========================================================
   Note
   ========================================================== */

:root {
    --md-admonition-icon--note: url("/assets/icons/note.svg");
}

.md-typeset .admonition.note > .admonition-title::before {
    width: 16px;
}

[data-md-color-scheme="default"]
.md-typeset .admonition.note > .admonition-title::before {
    background-color: #005BC4;
}


/* ==========================================================
   Info
   ========================================================== */

:root {
    --md-admonition-icon--info: url("/assets/icons/info.svg");
}

.md-typeset .admonition.info > .admonition-title::before {
    width: 18px;
}

[data-md-color-scheme="default"]
.md-typeset .admonition.info > .admonition-title::before {
    background-color: #0097A7;
}


/* ==========================================================
   Tip
   ========================================================== */

:root {
    --md-admonition-icon--tip: url("/assets/icons/tip.svg");
}

.md-typeset .admonition.tip > .admonition-title::before {
    width: 16px;
}

[data-md-color-scheme="default"]
.md-typeset .admonition.tip > .admonition-title::before {
    background-color: #005BC4;
}


/* ==========================================================
   Success
   ========================================================== */

:root {
    --md-admonition-icon--success: url("/assets/icons/success.svg");
}

.md-typeset .admonition.success > .admonition-title::before {
    width: 18px;
}

[data-md-color-scheme="default"]
.md-typeset .admonition.success > .admonition-title::before {
    background-color: #12A150;
}


/* ==========================================================
   Warning
   ========================================================== */

:root {
    --md-admonition-icon--warning: url("/assets/icons/warning.svg");
}

.md-typeset .admonition.warning > .admonition-title::before {
    width: 18px;
}

[data-md-color-scheme="default"]
.md-typeset .admonition.warning > .admonition-title::before {
    background-color: #F5A524;
}


/* ==========================================================
   Danger
   ========================================================== */

:root {
    --md-admonition-icon--danger: url("/assets/icons/danger.svg");
}

.md-typeset .admonition.danger > .admonition-title::before {
    -webkit-mask-image: url("/assets/icons/danger.svg") !important;
    mask-image: url("/assets/icons/danger.svg") !important;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    width: 17px;
}

[data-md-color-scheme="default"]
.md-typeset .admonition.danger > .admonition-title::before {
    background-color: #C20E4D;
}

[data-md-color-scheme="slate"]
.md-typeset .admonition.danger > .admonition-title::before {
    background-color: #F871A0;
}


/* ==========================================================
   Failure
   ========================================================== */

:root {
    --md-admonition-icon--failure: url("/assets/icons/failure.svg");
}

.md-typeset .admonition.failure > .admonition-title::before {
    -webkit-mask-image: url("/assets/icons/failure.svg") !important;
    mask-image: url("/assets/icons/failure.svg") !important;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    width: 17px;
}

[data-md-color-scheme="default"]
.md-typeset .admonition.failure > .admonition-title::before {
    background-color: #C20E4D;
}


/* ==========================================================
   Example
   ========================================================== */

:root {
    --md-admonition-icon--example: url("/assets/icons/example.svg");
}

.md-typeset .admonition.example > .admonition-title::before {
    width: 18px;
}

[data-md-color-scheme="default"]
.md-typeset .admonition.example > .admonition-title::before {
    background-color: #7828C8;
}

[data-md-color-scheme="slate"]
.md-typeset .admonition.example > .admonition-title::before {
    background-color: #AE7EDE;
}


/* ==========================================================
   Quote
   ========================================================== */

:root {
    --md-admonition-icon--quote: url("/assets/icons/quote.svg");
}

.md-typeset .admonition.quote > .admonition-title::before {
    width: 18px;
}

[data-md-color-scheme="default"]
.md-typeset .admonition.quote > .admonition-title::before {
    background-color: #71717A;
}


/* ==========================================================
   Collapsable Admonitions
   ========================================================== */

.md-typeset details {
    border-radius: 0.75rem;
    overflow: hidden;
    /*box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 4px 20px rgba(0, 0, 0, 0.08);*/
    padding-bottom: 0.5rem;
}

.md-typeset details:not([open]) {
    /*box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 4px 20px rgba(0, 0, 0, 0.08);*/
    padding-bottom: 0;
}

/* ==========================================================
   Title
   ========================================================== */

[dir="ltr"] .md-typeset details > summary {
    position: relative;

    min-height: 3rem;

    padding-top: 0.8rem;
    padding-right: 3rem;
    padding-bottom: 0.65rem;
    padding-left: 2.5rem;

    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;

    background-color: transparent !important;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.5rem;

    cursor: pointer;
}


/* ==========================================================
   Admonition Icon
   ========================================================== */

[dir="ltr"] .md-typeset details > summary::before {
    left: 1rem;
    top: 1rem;
    background-color: #45D483;
}


/* ==========================================================
   Expand / Collapse Arrow
   ========================================================== */

[dir="ltr"] .md-typeset details > summary::after {
    right: 0.7rem;
    top: 50%;

    background-color: #71717A;
    opacity: 1;

    transform: translateY(-50%);
}

[dir="ltr"] .md-typeset details[open] > summary::after {
    transform:
        translateY(-50%)
        rotate(90deg);
}


/* ==========================================================
   Content
   ========================================================== */

.md-typeset details > *:not(summary) {
    padding-left: 2rem;
    padding-right: 1rem;
}

.md-typeset details > summary + p {
    margin-top: 0;
    font-size: 16px;
}

.md-typeset details > :last-child {
    margin-bottom: 1rem;
}


/* ==========================================================
   Light Mode
   ========================================================== */

[data-md-color-scheme="default"] .md-typeset details {
    border: 1px solid #E4E4E7;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

[data-md-color-scheme="default"] .md-typeset details:hover {
    border-color: #A1A1AA;
}

[data-md-color-scheme="default"] .md-typeset details > summary::after {
    background-color: #71717A;
}

[data-md-color-scheme="default"] .md-typeset details > summary:hover {
    border-color: #71717A !important;
}


/* ==========================================================
   Dark Mode
   ========================================================== */

[data-md-color-scheme="slate"] .md-typeset details {
    color: #D4D4D8;
    border: 1px solid rgba(255,255,255,.08);
    background-color: #27272A;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

[data-md-color-scheme="slate"] .md-typeset details:hover {
    border-color: rgba(255,255,255,.18);
}

[data-md-color-scheme="slate"] .md-typeset details > summary::after {
    background-color: #A1A1AA;
}

[data-md-color-scheme="slate"] .md-typeset details > summary:hover {
    background-color: transparent !important;
}


/* Note */

[data-md-color-scheme="default"]
.md-typeset details.note > summary::before {
    background-color: #12A150;
}

.md-typeset details.note > summary::before {
    -webkit-mask-image: url("/assets/icons/help-chat.svg") !important;
    mask-image: url("/assets/icons/help-chat.svg") !important;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    width: 22px;
}


/* Info */

.md-typeset details.info > summary::before {
    width: 18px;
}

[data-md-color-scheme="default"]
.md-typeset details.info > summary::before {
    background-color: #0097A7;
}


/* Tip */

.md-typeset details.tip > summary::before {
    width: 16px;
}

[data-md-color-scheme="default"]
.md-typeset details.tip > summary::before {
    background-color: #005BC4;
}


/* Success */

.md-typeset details.success > summary::before {
    width: 18px;
}

[data-md-color-scheme="default"]
.md-typeset details.success > summary::before {
    background-color: #12A150;
}


/* Warning */

.md-typeset details.warning > summary::before {
    width: 18px;
}

[data-md-color-scheme="default"]
.md-typeset details.warning > summary::before {
    background-color: #F5A524;
}


/* Danger */

.md-typeset details.danger > summary::before {
    -webkit-mask-image: url("/assets/icons/danger.svg") !important;
    mask-image: url("/assets/icons/danger.svg") !important;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    width: 17px;
}

[data-md-color-scheme="default"]
.md-typeset details.danger > summary::before {
    background-color: #C20E4D;
}

[data-md-color-scheme="slate"]
.md-typeset details.danger > summary::before {
    background-color: #F871A0;
}


/* Failure */

.md-typeset details.failure > summary::before {
    -webkit-mask-image: url("/assets/icons/failure.svg") !important;
    mask-image: url("/assets/icons/failure.svg") !important;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    width: 17px;
}

[data-md-color-scheme="default"]
.md-typeset details.failure > summary::before {
    background-color: #C20E4D;
}


/* Example */

.md-typeset details.example > summary::before {
    width: 18px;
}

[data-md-color-scheme="default"]
.md-typeset details.example > summary::before {
    background-color: #7828C8;
}

[data-md-color-scheme="slate"]
.md-typeset details.example > summary::before {
    background-color: #AE7EDE;
}


/* Quote */

.md-typeset details.quote > summary::before {
    width: 18px;
}

[data-md-color-scheme="default"]
.md-typeset details.quote > summary::before {
    background-color: #71717A;
}


/* ==========================================================
   Code Blocks – Light Mode
   ========================================================== */
.highlight span.filename {
    margin-top: 0;
}

[data-md-color-scheme="default"] .md-typeset .highlight {
    border-radius: 0.625rem;
    background-color: inherit;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

[data-md-color-scheme="default"] .md-typeset .highlight pre {
    background-color: #F4F4F5;
}

[data-md-color-scheme="default"] .md-typeset .highlight code {
    font-size: 0.8125rem;
    line-height: 1.5rem;
    color: #52525B;
}

[data-md-color-scheme="default"] .md-code__button:after {
    background: #52525B;
    opacity: 1;
}

[data-md-color-scheme="default"] .md-code__button:hover::after {
    background: #1F1F21;
    opacity: 1;
}
[data-md-color-scheme="default"] .md-typeset pre > code {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

[data-md-color-scheme="default"] .md-typeset .highlight pre,
[data-md-color-scheme="default"] .md-typeset .highlight code,
[data-md-color-scheme="default"] .md-typeset pre code {
    font-size: 14px;
    line-height: 20px;
    margin: 0;
}

[data-md-color-scheme="default"] .md-typeset .highlight code {
    line-height: 20px;
    color: #21216a;
    font-size: 14px;
    padding-bottom: 18px;
}

[data-md-color-scheme="default"] .md-typeset .highlight code span {
    font-size: inherit;
}

[data-md-color-scheme="default"] .md-typeset pre>code:hover {
    scrollbar-color: #717171 #0000;
}


/* ==========================================================
   Code Blocks – Dark Mode
   ========================================================== */

[data-md-color-scheme="slate"] .md-typeset .highlight {
    border-radius: 0.625rem;
    background-color: #27272A;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

[data-md-color-scheme="slate"] .md-typeset .highlight pre {
    background-color: #27272A;
}

[data-md-color-scheme="slate"] .md-typeset .highlight code {
    background-color: #27272A;
    font-size: 0.8125rem;
    line-height: 1.5rem;
    color: #d95fe0;
}

[data-md-color-scheme="slate"] .md-code__button:after {
    background: #A1A1AA;
    opacity: 1;
}

[data-md-color-scheme="slate"] .md-code__button:hover::after {
    background: #D4D4D8;
    opacity: 1;
}

[data-md-color-scheme="slate"] .md-code__nav {
    background-color: #00000000;
}

[data-md-color-scheme="slate"] .md-typeset pre > code {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

[data-md-color-scheme="slate"] .md-typeset pre>code:hover {
    scrollbar-color: #8f8f8f #0000;
}

[data-md-color-scheme="slate"] .md-typeset .highlight pre,
[data-md-color-scheme="slate"] .md-typeset .highlight code,
[data-md-color-scheme="slate"] .md-typeset pre code {
    font-size: 14px;
    line-height: 20px;
}

[data-md-color-scheme="slate"] .md-typeset .highlight code {
    line-height: 20px;
    font-size: 14px;
    padding-bottom: 18px;
}

[data-md-color-scheme="slate"] .md-typeset .highlight code span {
    font-size: inherit;
}


/* ==========================================================
   Back to top button
   ========================================================== */

[data-md-color-scheme="default"] .md-top:hover {
    background-color: #005BC4;
}

[data-md-color-scheme="slate"] .md-top:hover {
    background-color: #005BC4;
}

/* ==========================================================
   Cards
   ========================================================== */

/* Light Mode */

.md-typeset .grid {
    grid-gap: .4rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(min(100%, 16rem), 1fr));
    margin: 1em 0;
}


.md-typeset .grid.cards {
    gap: 1.5rem;
}

.md-typeset .grid.cards > ul > li {
    display: flex;
    flex-direction: column;
    border: 1px solid #E4E4E7;
    border-radius: 16px;
    padding: 1.2rem;
    background: #FFFFFF;
    box-shadow:
        0 2px 4px rgba(15,23,42,.04),
        0 8px 24px rgba(15,23,42,.06);
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.md-typeset .grid.cards > ul > li:hover {
    border-color: #A1A1AA;
    box-shadow:
        0 6px 18px rgba(15,23,42,.08),
        0 16px 32px rgba(15,23,42,.08);
    transform: translateY(-2px);
}

.md-typeset .grid.cards strong {
    font-size: 18px;
    font-weight: 500;
}

.md-typeset .grid.cards p {
    color: #52525B;
}

.md-typeset .grid.cards a {
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
}

.md-typeset .grid.cards a:hover {
    text-decoration: underline;
}

.card-icon {
    width: 22px;
    margin-bottom: 0rem;
    color: currentColor;
}

.card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.card-title {
    font-size: 18px;
    font-weight: 500;
    color: #11181C;
}


.md-typeset .grid.cards > ul > li > p:last-child {
    margin-top: auto;
}

.card-icon-dark {
    display: none;
}

.card-icon-light {
    display: block;
}


/* Dark Mode */

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li {
    background: #1F1F21;

    border: 1px solid rgba(255,255,255,.20);

    box-shadow:
        0 4px 12px rgba(0,0,0,.25),
        0 10px 30px rgba(0,0,0,.35);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover {

    border-color: rgba(255,255,255,.30);

    box-shadow:
        0 8px 20px rgba(0,0,0,.35),
        0 18px 40px rgba(0,0,0,.45);

    transform: translateY(-2px);
}

[data-md-color-scheme="slate"] .card-title {
    color: #D4D4D8;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards p {
    color: rgba(255,255,255,.72);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards a {
    color: #66AAF9;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards a:hover {
    color: #D4D4D8;
}

[data-md-color-scheme="slate"] .card-icon-light {
    display: none;
}

[data-md-color-scheme="slate"] .card-icon-dark {
    display: block;
}


/* ==========================================================
   Getting Started Guide List
   ========================================================== */

.md-typeset .guide-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
    align-items: stretch;
}

/* Guide-Card */
.md-typeset .guide-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 0.875rem;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 4px 12px rgba(15, 23, 42, 0.04);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.md-typeset .guide-card:hover {
    border-color: rgba(15, 23, 42, 0.2);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.05),
        0 10px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

/* Icon-Fläche */
.md-typeset .guide-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 0.50rem;
}

/* Individuelle Light-Mode-Hintergründe */
.md-typeset .guide-card__icon--project {
    background: #f1eafe;
}

.md-typeset .guide-card__icon--search {
    background: #e4f1ff;
}

.md-typeset .guide-card__icon--scan {
    background: #dcfbfb;
}

.md-typeset .guide-card__icon--findings {
    background: #e3f8ed;
}

.md-typeset .guide-card__icon--monitoring {
    background: #fde7ee;
}

/* Icons */
.md-typeset .guide-icon {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    object-fit: contain;
}

/* Dark Icon im Light Mode ausblenden */
.md-typeset .guide-icon-dark {
    display: none;
}

/* Inhalt */
.md-typeset .guide-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}


/* Material erzeugt teils zusätzliche Abstände in HTML-Markdown-Blöcken */
.md-typeset .guide-card__content > :first-child {
    margin-top: 0;
}

.md-typeset .guide-card__content > :last-child {
    margin-bottom: 0;
}

/* Titel */
.md-typeset .guide-card__content h2 {
    margin: 0 0 0.4rem;
    color: #18181b;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: -0.01em;
}

/* Beschreibung */
.md-typeset .guide-card__content p {
    margin: 0 0 0.75rem;
    color: #60646c;
    font-size: 16px;
    line-height: 24px;
}

/* Link */
.md-typeset .guide-card__content a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #006adc;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
}

.md-typeset .guide-card__content a:hover {
    color: #004fa3;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

/* ==========================================================
   Getting Started Guide List - Dark Mode
   ========================================================== */

[data-md-color-scheme="slate"] .md-typeset .guide-card {
    background: #1F1F21;
    border: 1px solid rgba(255,255,255,.20);

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 6px 18px rgba(0, 0, 0, 0.18);
}

[data-md-color-scheme="slate"] .md-typeset .guide-card:hover {
    background: #202024;
    border-color: rgba(255, 255, 255, 0.30);

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.25),
        0 14px 32px rgba(0, 0, 0, 0.28);
}

/* Light Icons ausblenden */
[data-md-color-scheme="slate"] .md-typeset .guide-icon-light {
    display: none;
}

/* Dark Icons einblenden */
[data-md-color-scheme="slate"] .md-typeset .guide-icon-dark {
    display: block;
}

/* Individuelle Dark-Mode-Hintergründe */
[data-md-color-scheme="slate"]
.md-typeset
.guide-card__icon--project {
    background: #6020A0;
}

[data-md-color-scheme="slate"]
.md-typeset
.guide-card__icon--search {
    background: #005BC4;
}

[data-md-color-scheme="slate"]
.md-typeset
.guide-card__icon--scan {
    background: #00838F;
}

[data-md-color-scheme="slate"]
.md-typeset
.guide-card__icon--findings {
    background: #0E793C;
}

[data-md-color-scheme="slate"]
.md-typeset
.guide-card__icon--monitoring {
    background: #610726;
}

/* Texte */
[data-md-color-scheme="slate"]
.md-typeset
.guide-card__content h2 {
    color: #D4D4D8;
}

[data-md-color-scheme="slate"]
.md-typeset
.guide-card__content p {
    color: #a1a1aa;
}

/* Links */
[data-md-color-scheme="slate"]
.md-typeset
.guide-card__content a {
    color: #60a5fa;
}

[data-md-color-scheme="slate"]
.md-typeset
.guide-card__content a:hover {
    color: #93c5fd;
}

/* ==========================================================
   Tables
   ========================================================== */

.md-typeset table th,
.md-typeset table td {
    font-size: 16px;
}

.md-typeset .md-typeset__table {
    border-radius: 0.75rem;
    overflow: hidden;
    display: block;
    width: 100%;
}

.md-typeset table:not([class]) {
    background-color: transparent;
    border-radius: 0.75rem;
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) {
    border: 1px solid #E4E4E7;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
    border: 1px solid #3F3F46;
}
.md-typeset .md-typeset__table table {
    display: table;
    width: 100%;
    min-width: 100%;
}


/* ==========================================================
   Images (Screenshots)
   ========================================================== */

.md-typeset img.screenshot {
    display: block;
    border-radius: 0.50rem;
    border: 1px solid #E4E4E7;
}

[data-md-color-scheme="slate"] .md-typeset img.screenshot {
    border-color: rgba(255,255,255,.30);
}


/* ==========================================================
   Left Navigation
   ========================================================== */

.md-nav--primary .md-nav__link {
    display: block;
    padding: 0.6rem 0.8rem;
    border-radius: 0.5rem;
    transition:
        background-color .2s ease,
        border-color .2s ease;
}

[data-md-color-scheme="default"] .md-nav--primary .md-nav__link:hover {
    background: #F4F4F5;
    color: #11181C;
}

[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link {
    font-weight: 400;
}

[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link:hover {
    background: #27272A;
    color: #D4D4D8;
}

[data-md-color-scheme="default"] .md-nav--primary .md-nav__link--active {
    background: #EEF5FF;
    color: #005BC4;
    font-weight: 600;
}

[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link--active {
    background: rgba(96,165,250,.12);
    color: #60A5FA;
    font-weight: 600;
}

.md-sidebar--primary .md-sidebar__inner {
    padding: 0.4rem 0.2rem 0.7rem 0.2rem;
    border-radius: 0.75rem;
    border: 1px solid #E4E4E7;
}

[data-md-color-scheme="slate"] .md-sidebar--primary .md-sidebar__inner {
    border-color: #3F3F46;
    background: #1F1F21;
    font-weight: 600;
}


/* ==========================================================
   Image Captions
   ========================================================== */

.image-caption {
    display: block;

    margin-top: 0.25rem;
    margin-bottom: 2rem;

    font-size: 14px;
    font-style: normal;
    line-height: 1.5;

    color: #52525B;
}

.image-caption strong {
    font-weight: 600;
    font-style: normal;
}

[data-md-color-scheme="slate"] .image-caption {
    color: #A1A1AA;
}

/* Anchor-Symbol an Überschriften ausblenden */
.md-typeset .headerlink {
    display: none;
}


:root {
  --asl-curl:  #005BC4;   /* cURL panels        — blue   */
  --asl-cli:   #0E793C;   /* alpha-strike CLI   — green  */
  --asl-resp:  #b24a00;   /* Response panels    — orange */
}


/* --------------------------------------------------------------------------
   2. LIGHT MODE  ·  data-md-color-scheme="default"
   -------------------------------------------------------------------------- */

[data-md-color-scheme="default"] {
  --md-code-bg-color:              #f6f7f9;
  --md-code-fg-color:              #24292f;

  --md-code-hl-comment-color:      #6a737d;
  --md-code-hl-keyword-color:      #b0208c;  /* commands: curl, export      */
  --md-code-hl-string-color:       #7c5300;  /* quoted strings              */
  --md-code-hl-number-color:       #bc4c00;
  --md-code-hl-constant-color:     #0a7c4a;  /* env vars                    */
  --md-code-hl-function-color:     #6f42c1;
  --md-code-hl-name-color:         #0550ae;  /* JSON keys, URLs             */
  --md-code-hl-variable-color:     #953800;
  --md-code-hl-operator-color:     #57606a;
  --md-code-hl-punctuation-color:  #57606a;
  --md-code-hl-generic-color:      #4b5563;  /* flags: -s, -X, -H           */
  --md-code-hl-special-color:      #0550ae;
  --md-code-hl-color:              rgba(79, 156, 255, 0.12);  /* line accent */

  --asl-panel-border:              rgba(0, 0, 0, 0.08);
  --asl-curl-bg:                   #f2f6fd;
  --asl-cli-bg:                    #f0faf5;
  --asl-resp-bg:                   #fdf6f0;
}


/* --------------------------------------------------------------------------
   3. DARK MODE  ·  data-md-color-scheme="slate"
   (values taken from the original asl-api-guide.html)
   -------------------------------------------------------------------------- */


[data-md-color-scheme="slate"] {
  --md-code-bg-color:              #141720;
  --md-code-fg-color:              #e8eaf0;

  --md-code-hl-comment-color:      #4a5568;
  --md-code-hl-keyword-color:      #e879f9;  /* .c-cmd    */
  --md-code-hl-string-color:       #fcd34d;  /* .c-str    */
  --md-code-hl-number-color:       #fb923c;  /* .c-num    */
  --md-code-hl-constant-color:     #34d399;  /* .c-env    */
  --md-code-hl-function-color:     #a78bfa;  /* .c-hdr    */
  --md-code-hl-name-color:         #7dd3fc;  /* .c-key / .c-url */
  --md-code-hl-variable-color:     #a5f3c7;  /* .c-val    */
  --md-code-hl-operator-color:     #7a7f94;  /* .c-op     */
  --md-code-hl-punctuation-color:  #7a7f94;
  --md-code-hl-generic-color:      #94a3b8;  /* .c-flag   */
  --md-code-hl-special-color:      #7dd3fc;
  --md-code-hl-color:              rgba(79, 156, 255, 0.16);

  --asl-panel-border:              rgba(255, 255, 255, 0.07);
  --asl-curl-bg:                   #0f1520;
  --asl-cli-bg:                    #0a1a12;
  --asl-resp-bg:                   #16120e;

  --asl-curl:                      #66aaf9;
  --asl-cli:                       #5ee0b5;
  --asl-resp:                      #fb923c;
}

/* Comments were italic in the original guide */
[data-md-color-scheme="slate"] .md-typeset .highlight .c,
[data-md-color-scheme="slate"] .md-typeset .highlight .c1,
[data-md-color-scheme="slate"] .md-typeset .highlight .cm {
  font-style: italic;
}

/* --------------------------------------------------------------------------
   4. Panel chrome — coloured title bar per box type
   Classes come from the fenced blocks: .asl-curl / .asl-cli / .asl-resp
   -------------------------------------------------------------------------- */

.md-typeset .asl-curl,
.md-typeset .asl-cli,
.md-typeset .asl-resp {
  border: 1px solid var(--asl-panel-border);
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
}

.md-typeset .asl-curl > pre > code { background: var(--asl-curl-bg); }
.md-typeset .asl-cli  > pre > code { background: var(--asl-cli-bg); }
.md-typeset .asl-resp > pre > code { background: var(--asl-resp-bg); }

.md-typeset .asl-curl > .filename,
.md-typeset .asl-cli  > .filename,
.md-typeset .asl-resp > .filename {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 0.45em 0.9em;
  border-bottom: 1px solid var(--asl-panel-border);
  background: transparent;
}

/* Leading status dot, matching the original panel headers */
.md-typeset .asl-curl > .filename::before,
.md-typeset .asl-cli  > .filename::before,
.md-typeset .asl-resp > .filename::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  margin-right: 0.6em;
  vertical-align: 0.05em;
  background: currentcolor;
}

.md-typeset .asl-curl > .filename {
  color: var(--asl-curl);
  background: color-mix(in srgb, var(--asl-curl) 8%, transparent);
}
.md-typeset .asl-cli > .filename {
  color: var(--asl-cli);
  background: color-mix(in srgb, var(--asl-cli) 8%, transparent);
}
.md-typeset .asl-resp > .filename {
  color: var(--asl-resp);
  background: color-mix(in srgb, var(--asl-resp) 8%, transparent);
}


/* --------------------------------------------------------------------------
   5. Side-by-side comparison grid
   Two equal columns on desktop, stacked below 60em.
   -------------------------------------------------------------------------- */

.md-typeset .grid.asl-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem 1.4rem;
  margin: 1em 0 2em 0;
  align-items: stretch;
}

.md-typeset .grid.asl-compare > * {
  margin: 0;
  min-width: 0;   /* lets long command lines scroll instead of stretching the column */
}

@media screen and (max-width: 60em) {
  .md-typeset .grid.asl-compare {
    grid-template-columns: 1fr;
  }
}

/* Wider content area — side-by-side code needs the room */
.md-grid {
  max-width: 68rem;
}


.md-typeset .grid.asl-compare .highlight {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.md-typeset .grid.asl-compare .highlight pre {
    flex: 1;
    margin: 0;
}


/* --------------------------------------------------------------------------
   6. Copy button — compatibility with the pinned Material version

   The rules above style `.md-code__button`, which is the copy button in Material
   9.6 and later. ip-intelligence-deploy/images/docs/Dockerfile pins
   mkdocs-material==9.5.44, and that release calls the same button
   `.md-clipboard` - so on the version this site is actually built with, none of
   those rules match. The button then keeps Material's own default, measured at
   `rgba(0, 0, 0, 0.07)` against the #F4F4F5 code background: present in the DOM
   and effectively invisible.

   Selector-only duplication of the four declarations above, deliberately not a
   restyle. Delete this block when the Dockerfile pin moves to 9.6 or later; the
   rules it mirrors will take over on their own.
   -------------------------------------------------------------------------- */

[data-md-color-scheme="default"] .md-clipboard:after {
    background: #52525B;
    opacity: 1;
}

[data-md-color-scheme="default"] .md-clipboard:hover::after {
    background: #1F1F21;
    opacity: 1;
}

[data-md-color-scheme="slate"] .md-clipboard:after {
    background: #A1A1AA;
    opacity: 1;
}

[data-md-color-scheme="slate"] .md-clipboard:hover::after {
    background: #D4D4D8;
    opacity: 1;
}


/* --------------------------------------------------------------------------
   7. Wide tables must stay reachable on a narrow viewport

   The Tables section above sets `overflow: hidden` on the table wrapper, which
   is what clips the 0.75rem corners. It also clips the horizontal axis, and
   `hidden` gives the reader no way to scroll: a table wider than the column is
   cut off rather than scrollable.

   That is not hypothetical here. Measured on docs.ip.alphastrike.io's own guide
   at a 375px viewport: two of its eight tables lay out 403px and 413px of
   content inside a 375px wrapper, so their last column was unreachable on a
   phone. Those tables are the search-syntax reference, which
   ip-intelligence-frontend/AGENTS.md calls the most-read thing on the site.

   `overflow-x: auto` restores scrolling; `overflow-y: hidden` keeps the corner
   clipping the original rule was there for, so the radius is unaffected.
   -------------------------------------------------------------------------- */

.md-typeset .md-typeset__table {
    overflow-x: auto;
    overflow-y: hidden;
}