/* ==========================================================================
   miczit_2027 — single stylesheet for the whole theme.

   Structure:
     1. Fonts (self-hosted, see static/fonts/LICENSE-FONTS.txt)
     2. Tokens (:root = dark default, [data-theme="light"] overrides)
     3. Base / layout
     4. Header, lang-switcher
     6. Content typography (links, lists, code, tables, figures, helpers)
     7. Addon hero + card grid (shortcodes) + go-back
     8. Home (full-bleed photo, wordmark, tagline)
     9. Footer + theme toggle
    10. Responsive / motion / focus
   ========================================================================== */

/* 1. Fonts ------------------------------------------------------------- */

@font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader-latin-var.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-latin-var.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-italic-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Inter Tight";
    src: url("../fonts/inter-tight-latin-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* 2. Tokens ------------------------------------------------------------ */

:root {
    --bg: #16171b;
    --bg-raised: #1d1f24;
    --bg-sunken: #101114;
    --ink: #e8e6e0;
    --ink-muted: #a8a49c;
    --ink-faint: #7d7a74;
    --hairline: rgba(232, 230, 224, 0.14);
    --hairline-strong: rgba(232, 230, 224, 0.30);
    --accent: #8ab4e8;
    --accent-strong: #aecdf0;
    --ok: #93c393;
    --off: #cf9494;
    --code-bg: #101114;
    --code-ink: #dedbd4;
    --syn-key: #8ab4e8;             /* code highlighting (.chroma): keys */
    --syn-string: #e3c08a;          /* strings */
    --syn-literal: #d4a2d8;         /* numbers, true / false / null */
    --syn-punct: #a8a49c;           /* braces, brackets, colons, commas */
    --photo-ink: #f4f2ee;
    --photo-ink-muted: rgba(244, 242, 238, 0.75);
    --scrim:
        linear-gradient(180deg, rgba(9, 10, 12, 0.45) 0%, rgba(9, 10, 12, 0.66) 52%, rgba(9, 10, 12, 0.90) 100%);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.35);
    --header-ink: #f4f4f2;          /* internal page header: logo + current crumb */
    --header-ink-muted: #8a8b90;    /* ancestor crumbs + separators */
    --header-rule: #3a3b40;         /* logo | breadcrumb divider */

    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
    --sans: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, sans-serif;
    --text: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;   /* body copy */
    --display-sans: "Inter Tight", "Inter", system-ui, sans-serif; /* header breadcrumb */

    --measure: 720px;   /* reading column */
    --wide: 1020px;     /* feature column (addon hero, header, footer) */
    --gutter: clamp(20px, 5vw, 32px);
    color-scheme: dark;
}

[data-theme="light"] {
    --bg: #faf9f6;
    --bg-raised: #f1efe9;
    --bg-sunken: #e9e7e0;
    --ink: #22211e;
    --ink-muted: #6b675f;
    --ink-faint: #8b877e;
    --hairline: rgba(34, 33, 30, 0.16);
    --hairline-strong: rgba(34, 33, 30, 0.32);
    --accent: #28618f;
    --accent-strong: #1d4d75;
    --ok: #3d7a44;
    --off: #a04848;
    --code-bg: #f1efe9;
    --code-ink: #2c2b27;
    --syn-key: #28618f;
    --syn-string: #85570a;
    --syn-literal: #87408c;
    --syn-punct: #6b675f;
    --photo-ink: #f4f2ee;          /* the home photo zone keeps its own ink */
    --photo-ink-muted: rgba(244, 242, 238, 0.75);
    --shadow: 0 1px 2px rgba(30, 28, 24, 0.08), 0 10px 28px rgba(30, 28, 24, 0.08);
    --header-ink: var(--ink);
    --header-ink-muted: var(--ink-muted);
    --header-rule: var(--hairline-strong);
    color-scheme: light;
}

/* 3. Base / layout ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--text);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

.page-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

main:focus { outline: none; }

.post {
    flex: 1;
    width: 100%;
    max-width: var(--wide);
    margin-inline: auto;
    padding: clamp(22px, 4vw, 44px) var(--gutter) clamp(48px, 7vw, 88px);
}

.content { width: 100%; }
.content > * { max-width: var(--measure); margin-inline: auto; }
.content > .addon-hero,
.content > .doc-grid,
.content > .info-grid,
.content > .steps,
.content > .addon-credits,
.content > .feature-split,
.content > .full-width { max-width: 100%; }

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }

.skip-link {
    position: absolute;
    left: 12px;
    top: -48px;
    z-index: 100;
    padding: 8px 14px;
    background: var(--bg-raised);
    border: 1px solid var(--hairline-strong);
    border-radius: 8px;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 13px;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* 4. Header, lang-switcher --------------------------------- */

.site-header {
    border-bottom: 1px solid var(--hairline);
}

.site-header-inner {
    max-width: var(--wide);
    margin-inline: auto;
    padding: 26px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.wordmark {
    flex: none;
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--header-ink);
    text-decoration: none;
}
.wordmark:hover { color: var(--header-ink); }

/* Logo | breadcrumb: the crumbs wrap inside their own box, the logo stays put */
.site-header-lead {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}
.header-divider {
    flex: none;
    width: 1px;
    height: 28px;
    background: var(--header-rule);
}
.header-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-width: 0;
    font-family: var(--display-sans);
    font-size: 21px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--header-ink-muted);
    overflow-wrap: anywhere;
}
.header-title h1 {
    margin: 0;
    font: inherit;
    font-weight: 500;
    letter-spacing: inherit;
    color: var(--header-ink);
}
.header-parent {
    color: var(--header-ink-muted);
    text-decoration: none;
}
.header-parent:hover { color: var(--header-ink); }
.header-sep {
    color: var(--header-ink-muted);
    user-select: none;
}

.site-nav { display: flex; gap: 18px; }
.site-nav a {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-muted);
    text-decoration: none;
}
.site-nav a:hover,
.site-nav a.active { color: var(--ink); }

.page-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 30px;
}
.page-top:not(:has(*)) { display: none; }

.lang-switcher {
    font-family: var(--mono);
    font-size: 13px;
    margin: 0;
}
.lang-switcher a {
    margin-right: 0.9em;
    color: var(--accent);
    text-decoration: none;
}
.lang-switcher a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.lang-switcher a.current {
    font-weight: 700;
    color: var(--ink);
    pointer-events: none;
}

/* 6. Content typography -------------------------------------------------- */

/* In-content h1 is used only by the ThunderAI status pages for issue notices. */
.content h1 {
    margin: 1.8em auto 1em;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.4;
    text-wrap: balance;
}
/* Those notices open and close with a <br>: drop them, the margins do the spacing. */
.content h1 > br:first-child,
.content h1 > br:last-child { display: none; }
.content h2 {
    margin: 1.7em 0 0.55em;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.content h2.tutorial { margin-top: 1.6em; }
.content h3 {
    margin: 1.5em 0 0.45em;
    font-size: 20.5px;
    font-weight: 600;
    line-height: 1.3;
}
.content h4 {
    margin: 1.3em 0 0.4em;
    font-size: 18px;
    font-weight: 600;
}

.content p { margin: 0 0 1.05em; text-wrap: pretty; }
.content strong { font-weight: 600; }
.content b { font-weight: 600; }
.content small { color: var(--ink-muted); }
.content i, .content em { font-style: italic; }

.content a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.content a:hover {
    color: var(--accent-strong);
    text-decoration-color: var(--accent-strong);
}

.content ul, .content ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.content li { margin: 0.3em 0; }
.content li::marker { color: var(--ink-faint); }

.content hr {
    border: 0;
    border-top: 1px solid var(--hairline);
    height: 1px;
    margin: 3em 0 2em;
}

.content blockquote {
    margin: 1.4em 0;
    padding: 0.1em 0 0.1em 20px;
    border-left: 2px solid var(--hairline-strong);
    color: var(--ink-muted);
    font-style: italic;
}

/* code */
.content code, .content kbd, .content samp {
    font-family: var(--mono);
    font-size: 0.82em;
    background: var(--code-bg);
    color: var(--code-ink);
    border: 1px solid var(--hairline);
    border-radius: 5px;
    padding: 1px 5px;
    word-break: break-word;
}
.content pre {
    margin: 1.2em 0;
    padding: 14px 16px;
    background: var(--code-bg);
    color: var(--code-ink);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    overflow-x: auto;
    line-height: 1.55;
}
.content pre code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 13.5px;
}
.content pre.tutorial { margin: 8px 0 16px; }

/* code highlighting: Hugo's Chroma with classes (config.toml: markup.highlight.noClasses = false) */
.chroma .nt { color: var(--syn-key); }
.chroma .s, .chroma .s1, .chroma .s2, .chroma .l { color: var(--syn-string); }
.chroma .m, .chroma .mi, .chroma .mf, .chroma .kc { color: var(--syn-literal); }
.chroma .p, .chroma .o, .chroma .err { color: var(--syn-punct); }

/* images and figures */
.content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
.content img.img-full { max-width: 100%; height: auto; } /* legacy class: keep responsive */
.content img.alignleft { float: left; margin: 4px 20px 12px 0; }
.content img.alignright { float: right; margin: 4px 0 12px 20px; }
.content .img_center { width: 100%; text-align: center; }
.content img.homepage_img { max-width: 100%; }
/* an image in two versions, one per theme (shortcodes ui_button and themed_screenshot) */
[data-theme="light"] .only-dark,
html:not([data-theme="light"]) .only-light { display: none !important; }

.content figure {
    margin: 1.6em 0;
    padding: 14px;
    background: var(--bg-raised);
    border: 1px solid var(--hairline);
    border-radius: 12px;
}
.content figure img { display: block; margin-inline: auto; border-radius: 4px; }
.content figcaption {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-muted);
    text-align: center;
}

/* tables */
.content table {
    width: 100%;
    margin: 1.4em 0;
    border-collapse: collapse;
    font-size: 0.94em;
}
.content th, .content td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--hairline);
    text-align: left;
    vertical-align: top;
}
.content thead th {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    border-bottom: 1px solid var(--hairline-strong);
}
.content tr:last-child td { border-bottom: 0; }
.content table.guides { margin: 10px 0 1.4em; }

/* helper classes used by the content files */
.content .sup_comment { font-size: 0.8em; font-style: italic; color: var(--ink-muted); }
.content .small_text { font-size: 0.8em; font-style: italic; color: var(--ink-muted); }
.content .paragraph-space { margin-top: 25px; }
.content p.center, .content .center { text-align: center; margin-inline: auto; }
.content a img.weblate_svg {
    display: inline;
    margin: 0 0 0 8px;
    position: relative;
    top: 4px;
    border-radius: 0;
}

/* translate page (thtr-*) */
.content .thtr-help-normal { border: 1px solid var(--hairline-strong); }
.content .thtr-box {
    display: inline-block;
    position: relative;
    top: 5px;
    min-width: 30px;
    min-height: 20px;
}
.content .thtr-help-empty { box-shadow: 0 0 3px 0 #e2574c; }
.content .thtr-help-diff { box-shadow: 0 0 2px 1px #e2a54c; }
.content .thtr-unchanged { background: color-mix(in srgb, var(--ink) 10%, var(--bg)); color: var(--ink-faint); }
.content .thtr-todo { background: color-mix(in srgb, var(--ink) 14%, var(--bg)); color: var(--ink); }
.content .thtr-done { background: color-mix(in srgb, var(--ok) 22%, var(--bg)); color: var(--ink); }

.content ul.translate-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 2em 0 0 1.5em;
    list-style: none;
}
.content ul.translate-links li { margin: 0.45em 0; }
.content .translate-credits {
    display: block;
    font-size: 0.68em;
    font-style: italic;
    color: var(--ink-faint);
    margin: 0 0 0.7em;
}

/* ThunderAI data placeholders page (shortcode placeholders_list + .ph-doc wrapper)
   and enterprise key reference (policy_keys_list): shared .ph-* list UI */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ph-doc,
.ph {
    --ph-ink: #e6e4df;
    --ph-meta: #8a8c94;
    --ph-chip-bg: #23262e;
    --ph-chip-ink: #f0c987;
    --ph-field-bg: #1e2026;
    font-family: var(--sans);
    color: var(--ph-ink);
}
[data-theme="light"] .ph-doc,
[data-theme="light"] .ph {
    --ph-ink: var(--ink);
    --ph-meta: #6b6d74;
    --ph-chip-bg: #f1ede4;
    --ph-chip-ink: #8a5a00;
    --ph-field-bg: #ffffff;
}
html:not([data-theme="light"]) body:has(.ph-doc) { --bg: #17181c; }

.content > .ph-doc { max-width: 860px; }
.ph-doc p { margin: 0 0 1em; }
.ph-doc .ph-intro { font-size: 16px; line-height: 1.6; color: var(--ink-muted); margin-bottom: 1.2em; }
.ph-doc .ph-after { margin-top: 72px; font-size: 15px; line-height: 1.6; }
.content .ph-section-h {
    margin: 1.8em 0 0.4em;
    padding-bottom: 10px;
    font: 600 22px/1.3 var(--sans);
    letter-spacing: -0.005em;
    color: var(--ph-ink);
    border-bottom: 1px solid var(--hairline);
    scroll-margin-top: 20px;
}
.ph-after > .ph-section-h:first-child { margin-top: 0; }
.ph-intro + .ph-section-h { margin-top: 0.6em; }

.ph [hidden] { display: none !important; }

/* sticky search bar */
.ph-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 0 22px;
    padding: 12px 0 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
}
.ph-search-wrap { position: relative; }
.ph-search {
    width: 100%;
    padding: 10px 40px 10px 14px;
    font: 400 15px/1.4 var(--sans);
    color: var(--ph-ink);
    background: var(--ph-field-bg);
    border: 1px solid var(--hairline-strong);
    border-radius: 8px;
    -webkit-appearance: none;
    appearance: none;
}
.ph-search::placeholder { color: var(--ph-meta); opacity: 1; }
.ph-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.content .ph-kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 6px;
    font-size: 12px;
    color: var(--ph-meta);
    pointer-events: none;
}
.ph-search:focus + .ph-kbd,
.ph-search:not(:placeholder-shown) + .ph-kbd { display: none; }

.ph-bar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 10px;
}
.ph .ph-count { margin: 0; font-size: 13px; color: var(--ph-meta); }

/* Group by switch */
.ph-switch {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
    background: var(--bg-raised);
    border: 1px solid var(--hairline);
    border-radius: 9px;
}
.ph-switch-label { padding: 0 6px 0 8px; font-size: 13px; color: var(--ph-meta); }
.ph-switch-btn {
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--ink-muted);
    font: 500 13px/1.4 var(--sans);
    padding: 0.35em 0.9em;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ph-switch-btn:hover:not([aria-pressed="true"]) {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.ph-switch-btn[aria-pressed="true"] {
    background: var(--bg);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .ph-switch-btn[aria-pressed="true"] { box-shadow: 0 1px 4px rgba(30, 28, 24, 0.15); }
.ph-switch-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* groups */
.ph-group { margin: 0 0 30px; scroll-margin-top: 130px; }
.content .ph-group-h {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 10px;
    font: 600 16px/1.3 var(--sans);
    letter-spacing: 0;
    color: var(--ph-ink);
}
.ph-n {
    font: 500 12px/1 var(--sans);
    color: var(--ph-meta);
    padding: 3px 7px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
}
.content .ph-card {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    overflow: hidden;
}

/* placeholder row (stacked) */
.content .ph-row {
    margin: 0;
    padding: 16px 18px;
    border-top: 1px solid var(--hairline);
    scroll-margin-top: 130px;
}
.content .ph-row:first-child { border-top: 0; }
.content .ph-row:target { background: color-mix(in srgb, var(--ph-chip-ink) 7%, transparent); }
.ph-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
}
.ph-chip {
    max-width: 100%;
    margin: 0;
    padding: 3px 8px;
    text-align: left;
    background: var(--ph-chip-bg);
    color: var(--ph-chip-ink);
    border: 1px solid transparent;
    border-radius: 6px;
    font: 500 15px/1.45 var(--mono);
    overflow-wrap: anywhere;
    cursor: copy;
    transition: border-color 0.15s ease;
}
.ph-chip:hover { border-color: color-mix(in srgb, var(--ph-chip-ink) 45%, transparent); }
.ph-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.content .ph-chip code {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    word-break: normal;
}
/* name + context chips (Reading, Compose, or both) */
.ph-name {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
}
.ph-ctx {
    font: 500 12px/1.4 var(--sans);
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--ph-ctx) 45%, transparent);
    border-radius: 999px;
    color: var(--ph-ctx);
    background: color-mix(in srgb, var(--ph-ctx) 10%, transparent);
    white-space: nowrap;
}
.ph-ctx-reading { --ph-ctx: #7fb8e6; }
.ph-ctx-compose { --ph-ctx: #8fcf9a; }
[data-theme="light"] .ph-ctx-reading { --ph-ctx: #1f5f99; }
[data-theme="light"] .ph-ctx-compose { --ph-ctx: #2d7a3a; }
.ph-tag { display: none; }
.ph[data-view="az"] .ph-tag {
    display: inline-block;
    margin-left: auto;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-muted);
    padding: 2px 8px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    white-space: nowrap;
}
.ph .ph-since {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    font-style: normal;
    color: var(--ph-meta);
}
.ph .ph-desc {
    margin: 8px 0 0;
    max-width: 72ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ph-ink);
}
.ph-desc code {
    font-size: 0.88em;
    background: var(--ph-chip-bg);
    color: var(--ph-ink);
}
.ph .ph-empty { padding: 24px 0; text-align: center; color: var(--ph-meta); }

/* "Copied" toast */
.ph-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 50;
    max-width: calc(100vw - 32px);
    padding: 8px 14px;
    font: 500 14px/1.4 var(--sans);
    color: var(--bg);
    background: var(--ink);
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow-wrap: anywhere;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.ph-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ThunderAI enterprise configuration page (policy_keys_list + #section-nav) */

/* admonitions */
.content .admon {
    margin: 1.4em 0;
    padding: 0.8em 1.2em;
    background: var(--bg-raised);
    border-left: 4px solid var(--hairline-strong);
    border-radius: 0 10px 10px 0;
}
.content .admon h3 { margin-top: 0.2em; }
.content .admon > *:last-child { margin-bottom: 0.2em; }
.content .admon.warn {
    border-left-color: color-mix(in srgb, #e8a317 75%, var(--ink));
    background: color-mix(in srgb, #e8a317 10%, var(--bg));
}
.content .admon.wip {
    border-left-color: color-mix(in srgb, #e8620c 75%, var(--ink));
    background: color-mix(in srgb, #e8620c 13%, var(--bg));
}

/* sticky section nav with scroll spy */
html:has(#section-nav) { scroll-behavior: smooth; }
#section-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 2px;
    margin: 1.6em 0 2em;
    padding: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    background: color-mix(in srgb, var(--bg) 92%, var(--ink));
    border: 1px solid var(--hairline);
    border-radius: 10px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font: 500 13px/1.4 var(--sans);
}
#section-nav::-webkit-scrollbar { display: none; }
/* Centered entries. Auto margins instead of justify-content: center, which would push
   the first entries out of reach on the left when the bar scrolls on narrow screens. */
#section-nav > :first-child { margin-left: auto; }
#section-nav > :last-child { margin-right: auto; }
.content #section-nav a {
    flex: 0 0 auto;
    padding: 0.45em 0.85em;
    border-radius: 7px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ink-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.content #section-nav a:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.content #section-nav a.current {
    color: var(--ink);
    background: var(--bg);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] #section-nav a.current { box-shadow: 0 1px 4px rgba(30, 28, 24, 0.15); }
/* Grouped nav: #section-nav-wrap is the sticky bar and the containing block of the
   submenus, so they are not clipped by the horizontal scrolling of the bar itself.
   The scrolling nav must not carry backdrop-filter/filter/transform: any of them
   would make it the containing block instead and clip the submenus. */
#section-nav-wrap {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 1.6em 0 2em;
    background: color-mix(in srgb, var(--bg) 92%, var(--ink));
    border: 1px solid var(--hairline);
    border-radius: 10px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
#section-nav-wrap #section-nav {
    position: static;
    z-index: auto;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* A parent entry opens a submenu of its sub-sections on hover or focus. */
#section-nav .nav-group { display: flex; flex: 0 0 auto; }
#section-nav .nav-sub {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    flex-direction: column;
    gap: 2px;
    min-width: 11em;
    padding: 6px;
    background: color-mix(in srgb, var(--bg) 92%, var(--ink));
    border: 1px solid var(--hairline);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
#section-nav .nav-group.open .nav-sub,
#section-nav .nav-group:focus-within .nav-sub { display: flex; }
#section-nav .nav-sub a.current { box-shadow: none; }
[data-theme="light"] #section-nav .nav-sub { box-shadow: 0 4px 14px rgba(30, 28, 24, 0.18); }
/* headings must clear the sticky bar when jumped to (read by the scroll-spy script) */
#section-nav ~ h2[id],
#section-nav ~ h3[id],
#section-nav-wrap ~ h2[id],
#section-nav-wrap ~ h3[id] { scroll-margin-top: 4.5em; }

/* collapsible blocks */
.content details {
    margin: 0.9em 0;
    padding: 0 1em;
    border: 1px solid var(--hairline);
    border-radius: 10px;
}
.content details > summary {
    margin: 0 -0.3em;
    padding: 0.6em 0.3em;
    font: 600 15px/1.4 var(--sans);
    border-radius: 7px;
    cursor: pointer;
}
.content details > summary:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.content details[open] > summary {
    margin-bottom: 0.8em;
    border-bottom: 1px solid var(--hairline);
    border-radius: 7px 7px 0 0;
}
.content details > *:last-child { margin-bottom: 1em; }

/* key reference (policy_keys_list): .ph list with Type / Default columns */
.pk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem 9rem;
    gap: 6px 18px;
    align-items: start;
}
.ph-cols {
    padding: 0 18px 6px;
    font: 600 11px/1.4 var(--sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ph-meta);
}
.ph .ph-values {
    margin: 4px 0 0;
    font: 400 13px/1.5 var(--mono);
    color: var(--ph-meta);
    overflow-wrap: anywhere;
}
.pk-type,
.pk-default {
    padding-top: 4px;
    font: 400 14px/1.45 var(--sans);
    color: var(--ph-ink);
    overflow-wrap: anywhere;
}
.content .pk-default code {
    font: 400 13px/1.45 var(--mono);
    background: none;
    border: 0;
    padding: 0;
    color: var(--ph-ink);
    word-break: normal;
    overflow-wrap: anywhere;
}
.pk-label { display: none; }
.ph-keys[data-view="az"] .ph-tag { margin-left: 0; }
@media (max-width: 600px) {
    .pk-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .ph-cols { display: none; }
    .pk-type,
    .pk-default { padding-top: 0; font-size: 13px; }
    .pk-type { margin-top: 6px; }
    .pk-label {
        display: inline-block;
        min-width: 4.5em;
        font: 500 12px/1.4 var(--sans);
        color: var(--ph-meta);
    }
}
/* the search bar sticks below the page's sticky #section-nav */
#section-nav ~ .ph .ph-bar,
#section-nav-wrap ~ .ph .ph-bar { top: 42px; }
#section-nav ~ .ph .ph-group,
#section-nav ~ .ph .ph-row,
#section-nav-wrap ~ .ph .ph-group,
#section-nav-wrap ~ .ph .ph-row { scroll-margin-top: 190px; }
.content > .ph { margin-inline: 0; }

/* ThunderAI permissions (permissions_list): .ph list grouped by status */
.ph-perms { --pm-required: #7fb8e6; --pm-optional: #8fcf9a; --pm-removed: #e08a7f; }
[data-theme="light"] .ph-perms { --pm-required: #1f5f99; --pm-optional: #2d7a3a; --pm-removed: #a63d30; }
.ph-perms .ph-group-h::before {
    content: "";
    align-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pm-dot);
}
.pm-required { --pm-dot: var(--pm-required); }
.pm-optional { --pm-dot: var(--pm-optional); }
.pm-removed { --pm-dot: var(--pm-removed); }
.ph .pm-note { margin: -4px 0 12px; font-size: 14px; line-height: 1.5; color: var(--ph-meta); }
.pm-title { font: 600 16px/1.45 var(--sans); color: var(--ph-ink); }
.pm-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 8px;
}
.pm-meta .ph-chip { font-size: 13px; padding: 2px 7px; }
.ph .pm-meta .ph-since { margin: 0; }
.ph .pm-meta .ph-since + .ph-since::before { content: "· "; }
.content .pm-row-removed .pm-title { text-decoration: line-through; color: var(--ph-meta); }
.ph .pm-row-removed .ph-desc { color: var(--ph-meta); }
.ph .pm-why { margin-top: 4px; font-style: italic; }
.ph-perms[data-view="az"] .ph-tag { border-color: color-mix(in srgb, var(--pm-tag) 45%, transparent); color: var(--pm-tag); }
.pm-tag-required { --pm-tag: var(--pm-required); }
.pm-tag-optional { --pm-tag: var(--pm-optional); }
.pm-tag-removed { --pm-tag: var(--pm-removed); }

/* 7. Addon hero + card grid + go-back ----------------------------------- */

.addon-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(32px, 6vw, 72px);
    align-items: start;
    margin: 0 0 2.2em;
}

.addon-hero--compact { align-items: center; }

.addon-intro { font-size: 1.04em; }

.addon-side { display: grid; gap: 18px; text-align: center; }

.addon-icon {
    display: block;
    width: 128px;
    height: 128px;
    margin-inline: auto;
    border-radius: 22px;
    background: var(--bg-raised);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow);
}

.side-card {
    background: var(--bg-raised);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 0.92em;
}
.side-card p { margin: 0 0 0.6em; }
.side-card p:last-child { margin-bottom: 0; }
.side-card-centered {
    max-width: 360px;
    margin: 2em auto;
    text-align: center;
}
.side-card-title { font-size: 1.5em; line-height: 1.2; }
.side-card-icon {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 0.6em;
}

/* buttons */
.btn, .content .btn, a.btn {
    display: inline-block;
    padding: 0.5em 1.25em;
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    background: var(--bg-raised);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.btn:hover, a.btn:hover {
    border-color: var(--accent);
    color: var(--accent-strong);
}
.btn-primary, .content a.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #101114;
    font-weight: 600;
}
.btn-primary:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #101114;
}
[data-theme="light"] .btn-primary,
[data-theme="light"] .content a.btn-primary,
[data-theme="light"] .btn-primary:hover {
    color: #fff;
}
.btn-sm { font-size: 12.5px; padding: 0.35em 1em; }

/* GitHub icon on every link to github.com: a mask filled with currentColor, so one icon fits both themes */
a[href*="//github.com/"]:not(.doc-card)::before,
a.doc-card[href*="//github.com/"] .doc-card-title::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.3em;
    vertical-align: -0.125em;
    background-color: currentColor;
    --gh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z'/%3E%3C/svg%3E");
    -webkit-mask: var(--gh-icon) no-repeat center / contain;
    mask: var(--gh-icon) no-repeat center / contain;
}

/* external-link arrow after every other link that leaves the site (GitHub links have their own icon;
   image-only links such as the PayPal donate buttons are skipped) */
a[href^="http"]:not([href*="//github.com/"]):not([href*="//micz.it"]):not([href*="//www.micz.it"]):not(:has(> img:not(.weblate_svg)))::after {
    content: "";
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-left: 0.2em;
    vertical-align: 0;
    background-color: currentColor;
    --ext-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
    -webkit-mask: var(--ext-icon) no-repeat center / contain;
    mask: var(--ext-icon) no-repeat center / contain;
}

.go-back {
    text-align: center;
    margin-top: 3em;
}

/* add-on sidebar (partials/addon-nav.html): a column left of the page, as wide as the page
   column was before, so the reading column keeps its width. Below 1100px: a box above the page. */
.with-addon-nav {
    flex: 1;
    width: 100%;
    max-width: calc(var(--wide) + 264px);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
}
.with-addon-nav > .post { max-width: none; padding-inline: 0; }
.addon-nav {
    position: sticky;
    top: 0;
    max-height: 100svh;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: clamp(22px, 4vw, 44px) 4px 32px 0;
    font-size: 14px;
    line-height: 1.35;
}
.addon-nav summary { display: none; }
.addon-nav-group + .addon-nav-group { margin-top: 1.4em; }
.addon-nav-group-title {
    margin: 0 0 0.5em;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.addon-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--hairline);
}
.addon-nav ul ul { margin: 2px 0 4px 12px; font-size: 13.5px; }
.addon-nav a {
    display: block;
    margin-left: -1px;
    padding: 5px 10px;
    border-left: 2px solid transparent;
    color: var(--ink-muted);
    text-decoration: none;
}
.addon-nav a:hover { color: var(--ink); border-left-color: var(--hairline-strong); }
.addon-nav a[aria-current="page"] {
    color: var(--ink);
    border-left-color: var(--accent);
    background: var(--bg-raised);
}

/* card grid (list-thunderbird-pages) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin: 1.2em 0 1.6em;
    padding: 0;
    list-style: none;
}
.card-grid > li {
    display: flex;
    margin: 0;
}
.card-grid a.card {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-raised);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.card-grid a.card:hover {
    border-color: var(--hairline-strong);
    text-decoration: none;
}
.card-grid .card-icon {
    flex: none;
    border-radius: 8px;
    background: var(--bg);
}
.card-grid .card-title {
    color: var(--ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}
.card-grid .card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card-grid .card-title,
.card-grid .card-desc {
    display: block;
}
.card-grid .card-desc,
.card-grid a.card:hover .card-desc {
    color: var(--ink-muted);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    text-decoration: none;
}
.card-grid .card-sub {
    color: var(--ink-faint);
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* documentation grid (addon pages) */
.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin: 1.2em 0 1.8em;
}
.doc-grid-single {
    grid-template-columns: minmax(0, 340px);
    justify-content: center;
}
.doc-grid + .doc-grid-single { margin-top: calc(14px - 1.8em); }
/* three equal columns; a lone card on the last row is centered with the same width */
.doc-grid-3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.doc-grid-3 > * { grid-column: span 2; }
.doc-grid-3 > :last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
@media (max-width: 880px) {
    .doc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .doc-grid-3 > *, .doc-grid-3 > :last-child:nth-child(3n+1) { grid-column: auto; }
}
@media (max-width: 560px) {
    .doc-grid-3 { grid-template-columns: minmax(0, 1fr); }
}
.doc-grid .doc-card,
.steps > li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px 17px;
    background: var(--bg-raised);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.doc-grid .doc-card:hover { border-color: var(--hairline-strong); }
.doc-grid .doc-card-title { color: var(--ink); font-weight: 600; font-size: 16.5px; line-height: 1.4; }
.doc-grid .doc-card-text { color: var(--ink-muted); font-size: 14.5px; line-height: 1.5; }
.doc-grid .doc-card-link { text-decoration: none; }
.doc-grid .doc-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.doc-grid .doc-card-flags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 18px; line-height: 1; }
.doc-grid .doc-card-flags a { text-decoration: none; }

.addon-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 1.4em 0 0;
}
.addon-cta a.btn { margin: 0; }

/* info blocks (short non-clickable sections on addon pages): plain text with a side rule, not cards */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px 32px;
    margin: 2em 0 1.8em;
}
.info-grid .info-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 0 2px 16px;
    border-left: 2px solid var(--hairline-strong);
}
.info-grid .info-card-title {
    color: var(--ink);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.info-grid .info-card p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.55; }
.info-grid .info-card p + p { margin-top: 0.6em; }

/* numbered steps */
.content ol.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 1.2em 0 1.8em;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.steps > li {
    counter-increment: step;
    margin: 0;
    color: var(--ink-muted);
    font-size: 15px;
    line-height: 1.55;
}
.steps > li::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 4px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}

/* credits at the bottom of addon pages */
.addon-credits {
    margin-top: 2.5em;
    padding-top: 1em;
    border-top: 1px solid var(--hairline);
    color: var(--ink-faint);
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.6;
}
.addon-credits p { margin: 0 0 0.3em; }

/* callouts */
.content .callout {
    margin: 1.4em 0;
    padding: 14px 18px;
    background: var(--bg-raised);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    color: var(--ink-muted);
}
.content .callout-warn { border-left-color: var(--off); }
.content .callout p:last-child { margin-bottom: 0; }

/* feature split (prose beside a framed figure, e.g. dynamic-menu) */
.feature-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 44px);
    align-items: center;
    margin: 1.6em 0;
}
.feature-split figure { margin: 0; }
.feature-split .feature-text p:last-child { margin-bottom: 0; }

/* sentautomove note */
.content .sam-note {
    text-align: right;
    font-size: 0.85em;
    position: relative;
    top: -14px;
    font-style: italic;
    color: var(--ink-muted);
}

/* 8. Home ---------------------------------------------------------------- */

body.home .page-shell { position: relative; }

body.home .page-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: url("/images/home.jpg") no-repeat center center fixed;
    background-size: cover;
}
body.home .page-shell::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 62% 46% at 50% 40%, rgba(9, 10, 12, 0.38) 0%, rgba(9, 10, 12, 0) 100%),
        linear-gradient(180deg, rgba(9, 10, 12, 0.22) 0%, rgba(9, 10, 12, 0.38) 52%, rgba(9, 10, 12, 0.70) 100%);
}

/* The photo's grey canopy spans roughly 20%-60% of the viewport height on any
   aspect ratio (cover + center); the bright sky strip starts below it. Keep the
   wordmark, rule and tagline packed together and centered at 40vh so the
   tagline never drifts onto the sky. */
.home-hero {
    flex: none;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 var(--gutter);
    text-align: center;
}

.home-wordmark {
    margin: 0;
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-size: clamp(54px, 11vw, 100px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--photo-ink);
    text-wrap: balance;
}

.home-rule {
    width: 46px;
    height: 1px;
    margin: 22px auto 18px;
    background: var(--photo-ink-muted);
}

.home-tagline {
    margin: 0;
    font-style: italic;
    font-size: clamp(18px, 2.4vw, 22px);
    color: var(--photo-ink-muted);
}

/* 9. Footer + toggle ----------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--hairline);
    padding: 26px var(--gutter) 30px;
}

.footer-inner {
    max-width: var(--wide);
    margin-inline: auto;
    /* 1fr | auto | 1fr keeps the toggle block centered on the page */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px 24px;
}
.footer-inner > :first-child { justify-self: start; }
.footer-inner > :last-child { justify-self: end; }

.footer-rail {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-muted);
}
.footer-rail a {
    color: var(--ink-muted);
    text-decoration: none;
}
.footer-rail a:hover { color: var(--ink); }
.footer-rail a.rail-privacy { color: var(--ink-faint); }
.footer-rail a.rail-privacy:hover { color: var(--ink-muted); }
.footer-rail .rail-sep {
    margin-inline: 2px;
    color: var(--ink-faint);
    user-select: none;
}
.footer-rail img {
    width: 16px;
    height: 16px;
    position: relative;
    top: 3px;
    border-radius: 0;
}

.footer-toggle { display: flex; align-items: center; gap: 22px; }
.footer-toggle a {
    font-size: 11.5px;
    color: var(--ink-faint);
}
.footer-toggle a:hover { color: var(--ink-muted); }

.footer-credit {
    margin: 0;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-muted);
}
.footer-credit a { color: var(--ink-muted); text-decoration: none; }
.footer-credit a:hover { color: var(--ink); }

/* footer over the home photo: keep its own light ink, the photo does not change with the theme */
.site-footer.on-photo {
    border-top-color: rgba(244, 242, 238, 0.25);
}
.site-footer.on-photo,
.site-footer.on-photo .footer-rail,
.site-footer.on-photo .footer-rail a,
.site-footer.on-photo .footer-credit,
.site-footer.on-photo .footer-credit a {
    color: var(--photo-ink-muted);
}
.site-footer.on-photo .footer-rail a:hover,
.site-footer.on-photo .footer-credit a:hover {
    color: var(--photo-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.site-footer.on-photo .footer-rail .rail-sep { color: rgba(244, 242, 238, 0.5); }
.site-footer.on-photo .footer-rail a.rail-privacy { color: rgba(244, 242, 238, 0.55); }
.site-footer.on-photo .footer-rail a.rail-privacy:hover { color: var(--photo-ink); }
.site-footer.on-photo .footer-rail a,
.site-footer.on-photo .footer-credit a,
.site-footer.on-photo .theme-toggle {
    text-shadow: 0 1px 10px rgba(9, 10, 12, 0.65);
}
.site-footer.on-photo .footer-toggle a { color: rgba(244, 242, 238, 0.55); }
.site-footer.on-photo .footer-toggle a:hover { color: var(--photo-ink); }

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--hairline-strong);
    background: var(--bg-raised);
    color: var(--ink-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--accent); }
.site-footer.on-photo .theme-toggle {
    background: rgba(9, 10, 12, 0.45);
    border-color: rgba(244, 242, 238, 0.4);
    color: var(--photo-ink);
}
.site-footer.on-photo .theme-toggle:hover {
    border-color: var(--photo-ink);
    color: var(--photo-ink);
}

[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }

/* 10. Responsive / motion / focus ---------------------------------------- */

@media (max-width: 1100px) {
    /* add-on sidebar: a collapsed box above the page, aligned and as wide as the reading column */
    .with-addon-nav { display: block; max-width: var(--wide); padding-inline: 0; }
    .with-addon-nav > .post { padding-inline: var(--gutter); }
    .addon-nav {
        position: static;
        max-height: none;
        overflow: visible;
        max-width: calc(var(--measure) + 2 * var(--gutter));
        padding: clamp(22px, 4vw, 44px) var(--gutter) 0;
    }
    .addon-nav details {
        border: 1px solid var(--hairline);
        border-radius: 10px;
        background: var(--bg-raised);
    }
    .addon-nav summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        cursor: pointer;
        list-style: none;
        font-weight: 600;
        color: var(--ink);
    }
    .addon-nav summary::-webkit-details-marker { display: none; }
    .addon-nav summary span {
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 400;
        color: var(--ink-muted);
    }
    .addon-nav summary span::after { content: " ▾"; }
    .addon-nav details[open] summary span::after { content: " ▴"; }
    .addon-nav details[open] summary { border-bottom: 1px solid var(--hairline); }
    .addon-nav-groups {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 18px 24px;
        padding: 14px;
    }
    .addon-nav-group + .addon-nav-group { margin-top: 0; }
    .with-addon-nav .post { padding-top: 22px; }
}

@media (max-width: 880px) {
    /* icon stays beside the intro, donation card drops below it */
    .addon-hero {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "intro icon" "card card";
        gap: 20px 24px;
        align-items: start;
    }
    .addon-intro { grid-area: intro; }
    .addon-side { display: contents; }
    .addon-icon {
        grid-area: icon;
        width: 88px;
        height: 88px;
        margin: 0;
        border-radius: 16px;
    }
    .addon-side .side-card { grid-area: card; }
    .feature-split { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    body { font-size: 16.5px; }

    .addon-hero { gap: 18px 16px; }
    .addon-icon { width: 64px; height: 64px; border-radius: 12px; }

    .site-header-inner { flex-direction: column; gap: 8px; align-items: flex-start; padding-block: 20px; }
    .page-top { flex-direction: column; align-items: flex-start; }
    .site-header-lead { gap: 14px; }
    .wordmark { font-size: 26px; }
    .header-divider { height: 24px; }
    .header-title { font-size: 17px; gap: 2px 8px; }

    .footer-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    .content img.alignleft,
    .content img.alignright {
        float: none;
        display: block;
        margin: 12px auto;
    }

    .content > #section-nav,
    .content > #section-nav-wrap {
        max-width: none;
        margin-inline: calc(-1 * var(--gutter));
        border-inline: 0;
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:has(#section-nav) { scroll-behavior: auto; }
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}