/* CalcpadCE logo: circular grey badge in header */
.md-header__button.md-logo {
    background: hsl(0 0% 95%);
    border-radius: 50%;
    border: solid 1px hsl(0, 0%, 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: 0.6rem;
    width: 2em;
    height: 2em;
    padding: 1.2em;
}

.md-header__button.md-logo img {
    object-fit: contain;
}

[dir="ltr"] .md-header__title {
    margin-left: 0.5rem;
}

/* Inline icons are exported at 2x (HiDPI). Scale them down to
   match the surrounding text and keep line spacing consistent. */
img[height="20"] {
    height: 1.2em;
    width: auto;
    vertical-align: text-bottom;
}

/* Use system fonts instead of loading Roboto from Google Fonts. */
body {
    --md-text-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* CalcpadCE internal sylesheets */
.err {
    color: Crimson;
    background-color: #FEE;
}

.ok {
    color: Green;
    background-color: #F0FFF0;
}

.ref {
    float: right;
    margin-left: 18pt;
    color: Green;
    background-color: #F8FFF0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Examples page */

/* Full-width layout for Examples pages (override Material's max-width container) */
body:has(.calcpad-output) .md-grid {
    max-width: 100rem;
}

body:has(.calcpad-output) .md-content {
    max-width: 100rem;
}

.calcpad-output {
    overflow-x: auto;
    overflow-y: hidden;
}

.example-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}

.example-grid figure {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: start;
    margin: 0;
    width: initial;
    min-width: 0;
}

.example-grid figure img {
    margin: initial;
}

.example-grid figcaption {
    font-size: 0.8em;
    font-style: normal;
    font-weight: bold;
    color: hsl(0, 0%, 40%);
    margin: 0;
    text-align: start;
    letter-spacing: -0.04em;
}

.example-grid .highlight {
    position: relative;
    display: flex;
    flex: 1;
}

/* If the rendered output is taller than the code block, make the code block the same height */
/* Otherwise, cut the code block at the end of the output and make it scrollable */
.example-grid pre {
    position: absolute;
    display: flex;
    flex: 1;
    inset: 0;
    margin: 0;
}

.example-grid code {
    flex: 1;
    font-size: 0.9em;
    border-radius: 0.25rem;
}

span[title="Animated"] {
    cursor: default;
}

/* Headings inside calcpad output (replaced from <hN> to avoid polluting MkDocs TOC) */
.calcpad-h1,
.calcpad-h2,
.calcpad-h3 {
    font-size: 1.1em;
    font-weight: 600;
    margin: 0.6em 0 0.3em;
}

.calcpad-h4,
.calcpad-h5,
.calcpad-h6 {
    font-size: 1em;
    font-weight: 600;
    margin: 0.5em 0 0.2em;
}

@media (max-width: 750px) {
    .example-grid {
        flex-direction: column;
    }

    .example-grid pre {
        position: relative;
        width: 100%;
    }
}

/* Calcpad fold/unfold collapsible sections */
.fold {
    height: 2.4em;
    overflow: hidden;
}

.unfold {
    height: auto;
    overflow: auto;
}

.fold > :first-child,
.unfold > :first-child {
    cursor: pointer;
}

.fold > :first-child:hover,
.unfold > :first-child:hover {
    color: #0066bb;
    text-decoration: underline;
}

.fold > :first-child::after {
    content: " … ▼";
    font-size: 80%;
}

.unfold > :first-child::after {
    content: " ▲";
    font-size: 80%;
}

/* ---------------------------------------------------------------------------
   Light-mode syntax highlighting palette — mirrors Calcpad.Wpf/HighLighter.cs
   (Colors[] array). Slate (dark) mode keeps Material's bundled palette.

   Token classes emitted by docs/hooks/calcpad_lexer.py:
     .k   Keyword          (#-directives)            -> Magenta
     .nd  Name.Decorator   ($-methods, macros)       -> DarkMagenta
     .nb  Name.Builtin     (built-in functions)      -> Black + bold
     .nv  Name.Variable    (identifiers)             -> Blue
     .m   Number                                     -> Black
     .na  Name.Attribute   (unit suffix)             -> DarkCyan
     .o   Operator                                   -> Goldenrod
     .p   Punctuation      (brackets, ;, ,)          -> DeepPink
     .c1  Comment.Single   ('...' comments)          -> ForestGreen
     .cs  Comment.Special  ("..." title comments)    -> ForestGreen + bold
                                                        + #F5FFF0 background
     .nt  Name.Tag         (? input fields)          -> Red
   --------------------------------------------------------------------------- */

/* Apply only to Calcpad code blocks: example-grid containers (rendered by
   render_examples.py) and ```calcpad / ```cpd fenced blocks (registered via
   calcpad_lexer.register()). Other languages keep Material's defaults. */
[data-md-color-scheme="default"] :is(
    .example-grid .highlight,
    .language-calcpad.highlight,
    .language-cpd.highlight
) .k { color: #ff00ff; }

[data-md-color-scheme="default"] :is(
    .example-grid .highlight,
    .language-calcpad.highlight,
    .language-cpd.highlight
) .nd { color: #8b008b; }

[data-md-color-scheme="default"] :is(
    .example-grid .highlight,
    .language-calcpad.highlight,
    .language-cpd.highlight
) .nb { color: #000000; font-weight: bold; }

[data-md-color-scheme="default"] :is(
    .example-grid .highlight,
    .language-calcpad.highlight,
    .language-cpd.highlight
) .nv { color: #0000ff; }

[data-md-color-scheme="default"] :is(
    .example-grid .highlight,
    .language-calcpad.highlight,
    .language-cpd.highlight
) :is(.m, .mi, .mf, .mo, .mh, .mb) { color: #000000; }

[data-md-color-scheme="default"] :is(
    .example-grid .highlight,
    .language-calcpad.highlight,
    .language-cpd.highlight
) .na { color: #008b8b; }

[data-md-color-scheme="default"] :is(
    .example-grid .highlight,
    .language-calcpad.highlight,
    .language-cpd.highlight
) .o { color: #daa520; }

[data-md-color-scheme="default"] :is(
    .example-grid .highlight,
    .language-calcpad.highlight,
    .language-cpd.highlight
) .p { color: #ff1493; }

/* Plain comments: '...' — ForestGreen, normal weight. */
[data-md-color-scheme="default"] :is(
    .example-grid .highlight,
    .language-calcpad.highlight,
    .language-cpd.highlight
) :is(.c, .c1) { color: #228b22; font-style: normal; }

/* Title comments: "..." — ForestGreen, bold, light-green background tint
   (matches WPF TitleBackground = Color.FromRgb(245, 255, 240)). */
[data-md-color-scheme="default"] :is(
    .example-grid .highlight,
    .language-calcpad.highlight,
    .language-cpd.highlight
) .cs {
    color: #228b22;
    font-weight: bold;
    background-color: #f5fff0;
    font-style: normal;
}

/* Input placeholders (?) — WPF Types.Input is Red. */
[data-md-color-scheme="default"] :is(
    .example-grid .highlight,
    .language-calcpad.highlight,
    .language-cpd.highlight
) .nt { color: #ff0000; }