/* Colour: Synology's own brand palette.
 *
 * Taken from Synology's production stylesheet rather than from a brand-guide
 * screenshot or a guess: #0067e6 occurs 72 times in it and #2e3742 35 times,
 * which makes them the primary blue and the dark neutral. #0050bf, #107bff and
 * #c9d5e2 are from the same ramp.
 *
 * Every value below was contrast-checked before use, and two of Synology's own
 * accents were rejected for it: #5bc0de and #33d49b sit near 2:1 as text and
 * cannot carry a label. White on #0067e6 is 5.14:1, on the hover #0050bf
 * 7.24:1, and white on the lightest hero stop is 8.44:1.
 *
 * The layout and class vocabulary are shared with the related projects
 * (dellemc, netapp, purestorage) so the sites read as one family; only the
 * accent differs. Note that the hero gradient and the glows were hardcoded in
 * the shared stylesheet rather than tokenised, so changing the tokens alone
 * left a violet hero behind — they are set explicitly below.
 */
/* ============================================================
   jt-pve-storage-dellemc Documentation
   Design: Dell Blue, documentation-focused, no gimmicks
   ============================================================ */

:root {
    --navy: #2e3742;
    --navy-mid: #0050bf;
    --indigo: #0067e6;
    --indigo-hover: #0050bf;
    --indigo-light: #c9d5e2;
    --indigo-subtle: rgba(0, 103, 230, 0.07);

    --text: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    --surface-0: #ffffff;
    --surface-1: #f8fafc;
    --surface-2: #f1f5f9;
    --surface-3: #e8ecf1;

    --border: #e2e8f0;
    --border-light: #f1f5f9;

    --code-bg: #1a1f2e;
    --code-text: #d4d4d8;

    --red: #dc2626;
    --red-subtle: #fef2f2;
    --amber: #d97706;
    --amber-subtle: #fffbeb;
    --blue: #2563eb;
    --blue-subtle: #eff6ff;
    --green: #16a34a;
    --green-subtle: #f0fdf4;

    --sidebar-w: 272px;
    --header-h: 56px;
    --content-w: 920px;
    --section-px: 48px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI",
            "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
            "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
            Consolas, "Liberation Mono", monospace;

    --radius: 6px;
    --radius-lg: 10px;
}

/* -- Language -- */
html[data-lang="en"] .lang-zh { display: none !important; }
html[data-lang="zh"] .lang-en { display: none !important; }

/* -- Reset -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }

body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
    background: var(--surface-1);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--indigo-hover); }
img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   Header
   ============================================================ */
.top-nav {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--header-h);
    background: #0d0d12;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px;
}

.top-nav__brand {
    display: flex; align-items: center; gap: 10px;
    color: #fff; font-weight: 700; font-size: 0.95rem;
    letter-spacing: -0.01em;
}
.top-nav__brand-icon {
    width: 30px; height: 30px;
    background: var(--indigo); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.75rem; color: #fff;
}
.top-nav__actions { display: flex; align-items: center; gap: 8px; }

.lang-toggle {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9); padding: 5px 12px;
    border-radius: 5px; cursor: pointer;
    font-size: 0.8rem; font-family: var(--font);
    transition: background 0.15s;
}
.lang-toggle:hover { background: rgba(255,255,255,0.18); }

.github-link {
    display: flex; align-items: center; gap: 5px;
    color: rgba(255,255,255,0.8); font-size: 0.8rem;
    padding: 5px 12px; border-radius: 5px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.15s;
}
.github-link:hover { background: rgba(255,255,255,0.14); color: #fff; }

.hamburger {
    display: none; background: none; border: none;
    color: #fff; cursor: pointer; padding: 4px;
}
.hamburger svg { width: 22px; height: 22px; }

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
    position: fixed;
    top: var(--header-h); left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    overflow-y: auto; padding: 16px 0;
    z-index: 900; transition: transform 0.25s ease;
}
.sidebar__section { padding: 0 12px; margin-bottom: 4px; }

.sidebar__search {
    padding: 0 12px 12px;
}
.sidebar__search-input {
    width: 100%; padding: 7px 10px 7px 32px;
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 0.82rem; font-family: var(--font);
    color: var(--text); background: var(--surface-1);
    outline: none; transition: border-color 0.15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
}
.sidebar__search-input:focus {
    border-color: var(--indigo);
    background-color: var(--surface-0);
}
.sidebar__search-input::placeholder { color: var(--text-muted); }

.sidebar__heading {
    font-size: 0.82rem; font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text);
    padding: 16px 10px 6px;
}

.sidebar__link {
    display: block; padding: 6px 10px;
    font-size: 0.82rem; color: var(--text-secondary);
    border-radius: 5px; transition: all 0.12s;
    line-height: 1.45; margin-left: 10px;
}
.sidebar__link:hover { color: var(--text); background: var(--surface-2); }
.sidebar__link.active {
    color: var(--indigo); background: var(--indigo-subtle);
    font-weight: 600;
}

.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ============================================================
   Main Content
   ============================================================ */
.main-content {
    margin-left: var(--sidebar-w);
    margin-top: var(--header-h);
    min-height: calc(100vh - var(--header-h));
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
    background: linear-gradient(160deg, #1a2430 0%, #0b4a9e 45%, #08305f 100%);
    position: relative; overflow: hidden;
    padding: 72px var(--section-px) 64px;
    color: #fff;
}
.hero__grid-bg {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 52px 52px;
    pointer-events: none;
}
.hero__glow {
    position: absolute; top: -180px; right: -80px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(0,103,230,0.16) 0%, transparent 65%);
    pointer-events: none;
}
.hero__glow-left {
    position: absolute; bottom: -120px; left: -100px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(16,123,255,0.10) 0%, transparent 65%);
    pointer-events: none;
}
.hero__content { position: relative; max-width: 720px; }

.hero__badge {
    display: inline-flex; align-items: center;
    background: rgba(0,103,230,0.20);
    border: 1px solid rgba(0,103,230,0.32);
    color: var(--indigo-light);
    padding: 3px 12px; border-radius: 100px;
    font-size: 0.75rem; font-weight: 600;
    margin-bottom: 18px;
}
/* The rule is drawn by this box, so the element must be EMPTY: a middle dot inside a
   1px-wide inline-block paints outside it, which reads as a stray white speck next to
   the divider. */
.hero__badge-sep {
    display: inline-block; width: 1px; height: 10px;
    background: rgba(165,180,252,0.35);
    margin: 0 8px; vertical-align: middle;
    overflow: hidden;
}

.hero__title {
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 800; line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
    font-family: var(--mono);
    color: #fff;
}
.hero__project-desc {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: rgba(255,255,255,0.8);
    font-weight: 500; line-height: 1.4;
    margin-bottom: 12px;
}
.hero__subtitle {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.65;
    margin-bottom: 24px;
    max-width: 580px;
}
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 20px; border-radius: 6px;
    font-size: 0.85rem; font-weight: 600;
    font-family: var(--font); cursor: pointer;
    transition: all 0.15s; border: none; text-decoration: none;
}
.btn--primary {
    background: var(--indigo); color: #fff;
    box-shadow: 0 1px 3px rgba(0,103,230,0.30);
}
.btn--primary:hover {
    background: var(--indigo-hover); color: #fff;
    box-shadow: 0 2px 8px rgba(0,103,230,0.35);
}
.btn--outline {
    background: transparent; color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.2);
}
.btn--outline:hover {
    background: rgba(255,255,255,0.08); color: #fff;
    border-color: rgba(255,255,255,0.3);
}

/* ============================================================
   Content Sections
   ============================================================ */
.content-wrap { max-width: none; padding: 0; margin: 0; }

.doc-section {
    padding-top: 56px;
    padding-bottom: 56px;
    /* A gutter that cannot vanish.
     *
     * This was `calc((100% - var(--content-w)) / 2)`, which goes NEGATIVE as soon
     * as the section is narrower than 920px — and the section is the viewport
     * minus the 272px sidebar, not the viewport, so that happens at about 1190px
     * of browser width. A negative length makes the whole `padding` shorthand
     * invalid, so the horizontal padding was not reduced, it was DROPPED: text and
     * tables ran flush into both edges. The media queries below could not save it
     * because they trigger on the viewport, several hundred pixels later.
     */
    padding-left:  max(28px, (100% - var(--content-w)) / 2);
    padding-right: max(28px, (100% - var(--content-w)) / 2);
    min-height: 0;
}
@media (max-width: 1024px) {
    .doc-section { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 640px) {
    .doc-section { padding-left: 16px; padding-right: 16px; }
}

/* Alternating backgrounds with enough contrast to notice */
.doc-section:nth-child(odd)  { background: var(--surface-0); }
.doc-section:nth-child(even) { background: var(--surface-1); }

/* Thin separator between sections */
.doc-section + .doc-section {
    border-top: 1px solid var(--border);
}

/* Accent top for safety-critical sections */
.doc-section--accent {
    border-top: 3px solid var(--red) !important;
    background: var(--red-subtle) !important;
}

/* Marks a section as read-before-you-deploy WITHOUT tinting the background.
   The tint is fine behind two paragraphs and bad behind a wide table: the
   table's own white rows and grey header stop reading as a table at all. */
.doc-section--flag {
    border-top: 3px solid var(--red) !important;
}

.doc-section:last-child { border-bottom: none; }

/* -- Section Headings -- */
.section-title {
    font-size: 1.45rem; font-weight: 700;
    color: var(--navy); margin-bottom: 6px;
    letter-spacing: -0.015em; line-height: 1.3;
}

.section-subtitle {
    font-size: 0.9rem; color: var(--text-secondary);
    margin-bottom: 28px; line-height: 1.6;
}

.subsection-title {
    font-size: 1.05rem; font-weight: 600;
    color: var(--navy); margin: 28px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}

.subsection-title-sm {
    font-size: 0.95rem; font-weight: 600;
    color: var(--text); margin: 20px 0 8px;
}

/* -- Paragraphs & Lists -- */
.doc-section p { margin-bottom: 10px; font-size: 0.9rem; color: var(--text-secondary); }
.doc-section ul, .doc-section ol { margin: 6px 0 14px 18px; font-size: 0.9rem; }
.doc-section li { margin-bottom: 4px; line-height: 1.6; color: var(--text-secondary); }

/* ============================================================
   Alerts
   ============================================================ */
.alert {
    padding: 14px 18px; border-radius: var(--radius);
    border-left: 3px solid; margin: 16px 0;
    font-size: 0.87rem; line-height: 1.6;
}
.alert strong { font-weight: 600; }

.alert--danger  { background: var(--red-subtle);   border-color: var(--red);   color: #7f1d1d; }
.alert--warning { background: var(--amber-subtle); border-color: var(--amber); color: #78350f; }
.alert--info    { background: var(--blue-subtle);  border-color: var(--blue);  color: #1e3a5f; }
.alert--success { background: var(--green-subtle); border-color: var(--green); color: #14532d; }

/* ============================================================
   Feature Cards
   ============================================================ */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.card {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 4px 12px rgba(15,37,71,0.06);
}

.card__icon {
    width: 38px; height: 38px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.card__icon svg { flex-shrink: 0; }

.card:nth-child(3n+1) .card__icon { background: rgba(0,103,230,0.08); color: #0067e6; }
.card:nth-child(3n+2) .card__icon { background: rgba(0,80,191,0.08);  color: #0050bf; }
.card:nth-child(3n)   .card__icon { background: rgba(46,55,66,0.08);  color: #2e3742; }

.card__title {
    font-size: 0.88rem; font-weight: 600;
    color: var(--text); margin-bottom: 4px;
}
.card__desc {
    font-size: 0.82rem; color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================
   Hero capability line, measured-number cards, verified/not split
   ============================================================ */

/* The one line that answers "what does it do" before any prose. */
.hero__caps {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.82);
    margin-bottom: 22px;
    line-height: 1.7;
}

/* The measured numbers, above the prose that explains them: a reader deciding
   whether to try this wants the evidence before the narrative.
 *
 * One panel divided by hairlines rather than six bordered boxes. The 1px grid gap
 * over a border-coloured background draws every separator, so the rules stay right
 * at three columns, at two and at one, with no per-cell border to switch off.
 *
 * Every tile has the same two parts in the same order — what was measured, then the
 * figure — because six tiles whose shapes differ read as six unrelated things.
 */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    /* The gap shows this through, so the separators are the accent colour rather
       than another grey line on a page that already has plenty. */
    background: var(--indigo-light);
    border: 1px solid var(--indigo-light);
    border-top: 3px solid var(--indigo);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 8px 0 22px;
}
@media (max-width: 1180px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stat-strip { grid-template-columns: 1fr; } }

.stat {
    background: var(--surface-0);
    padding: 15px 20px 17px;
    transition: background 0.15s;
}
.stat:hover { background: var(--indigo-subtle); }

.stat__cap {
    font-size: 0.73rem; color: var(--text-secondary);
    line-height: 1.45; letter-spacing: 0.01em;
    margin-bottom: 8px;
    min-height: 2.1em;
    padding-left: 10px;
    position: relative;
}
/* A small mark in the accent colour, so each tile has a starting point for the eye. */
.stat__cap::before {
    content: ""; position: absolute;
    left: 0; top: 0.45em;
    width: 4px; height: 4px;
    border-radius: 1px;
    background: var(--indigo);
}
.stat__cap code { font-size: 0.95em; }

.stat__value {
    font-size: 1.85rem; font-weight: 700;
    /* White on this is 5.14:1 and it is the site's primary, so the figure carries it:
       the caption grey then reads as a caption instead of as the same ink twice. */
    color: var(--indigo); line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    padding-left: 10px;
}
.stat__unit {
    font-size: 0.85rem; font-weight: 600;
    color: var(--navy);
    letter-spacing: 0;
    margin-left: 5px;
}

/* Verified and not verified, side by side and the same size, so neither half
   is easier to skip than the other. */
.split-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    margin: 14px 0 16px;
}
.split-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px 8px;
    background: var(--surface-0);
}
.split-card--yes { border-top: 3px solid var(--green); }
.split-card--no  { border-top: 3px solid var(--amber); }
.split-card__head {
    font-size: 0.86rem; font-weight: 700;
    color: var(--navy); margin-bottom: 8px;
}
.split-card ul { margin: 0 0 8px 18px; }
.split-card li { font-size: 0.84rem; line-height: 1.6; margin-bottom: 5px; }

/* The verdict column is a word or a mark, never a paragraph: a fixed narrow
   column made the two explained rows wrap to one character per line. The reason
   belongs under the operation name, where there is room for it. */
/* The two guest-type columns: the heading sits over its own ticks, not off to the
   left of them. `th` is left-aligned globally, which is right for a data table and
   wrong for a matrix. */
.table--matrix th:not(:first-child) { text-align: center; }
.table--matrix th:not(:first-child),
.table--matrix td.yes,
.table--matrix td.verdict { width: 17%; }

td.yes, td.verdict {
    text-align: center;
    white-space: nowrap;
    width: 104px;
    font-weight: 700;
}
td.yes { color: var(--green); font-size: 1rem; }
td.verdict { font-size: 0.8rem; }
td.verdict--no       { color: var(--red); }
td.verdict--untested { color: var(--amber); }
td.verdict--na       { color: var(--text-muted); font-weight: 400; }

/* A qualified yes keeps the tick, because the answer IS yes; the amber and the
   condition under it are what make it a qualified one. Three states, three colours,
   one shape where the answer is the same: green tick, amber tick, and words. */
td.verdict--part { white-space: normal; }
.verdict__mark {
    display: block;
    color: var(--amber); font-weight: 700; font-size: 1rem;
    line-height: 1.1;
}
.verdict__note {
    display: block;
    color: var(--amber); font-weight: 600;
    font-size: 0.72rem; line-height: 1.35;
    margin-top: 2px;
}

.cell-note {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.55;
    font-weight: 400;
}

/* ============================================================
   Tables
   ============================================================ */
.table-wrap {
    overflow-x: auto; margin: 14px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }

thead { background: var(--surface-2); }
th {
    padding: 10px 14px; text-align: left;
    font-weight: 600; font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}
td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top; color: var(--text-secondary);
}

/* Column separators, so a value can be read against its heading rather than
   by counting across. The last cell of a row is skipped: the wrapper already
   draws the outer edge, and a border there would double it. A cell spanning
   the whole width has no column to be separated from. */
th:not(:last-child),
td:not(:last-child) { border-right: 1px solid var(--border-light); }

th:not(:last-child) { border-right-color: var(--border); }

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--indigo-subtle); }

/* A value that is the same for every family spans the columns. Left-aligned
   it reads as if it belonged to the first one, which is the opposite of what
   it means. It is the last cell in its row, so it takes no column separator
   from the rule above — which is right, as it has no column to be separated
   from. */
td.all-families {
    text-align: center;
    color: var(--text-secondary);
}

/* The family columns of the feature matrix are centred, headings and values
   together. Centring the headings alone would leave 'dm-multipath' hanging
   at the left of a column whose title sits in the middle; centring the values
   alone is what the spanning rows already do. The first column is the feature
   name and stays left, because that is what the eye reads down. */
.feature-matrix th:not(:first-child),
.feature-matrix td:not(:first-child) { text-align: center; }

td code {
    background: var(--indigo-subtle);
    padding: 1px 5px; border-radius: 3px;
    font-family: var(--mono); font-size: 0.8rem;
    color: var(--indigo);
}

/* ============================================================
   Code
   ============================================================ */
pre {
    background: var(--code-bg);
    color: var(--code-text);
    padding: 18px 22px;
    border-radius: var(--radius-lg);
    overflow-x: auto;
    font-family: var(--mono); font-size: 0.82rem;
    line-height: 1.65; margin: 14px 0;
    border: 1px solid rgba(255,255,255,0.04);
}
/* The copy button sits over the block's top-right corner. `pre` keeps its own
   margin, so the wrapper is positioning only and adds no spacing of its own. */
.code-wrap { position: relative; }
.copy-btn {
    position: absolute; top: 14px; right: 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    color: #cbd5e1;
    font: inherit; font-size: 0.72rem; font-weight: 600;
    padding: 4px 10px; border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.code-wrap:hover .copy-btn,
.copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
.copy-btn--done {
    opacity: 1;
    background: rgba(22,163,74,0.22);
    border-color: rgba(22,163,74,0.5);
    color: #86efac;
}
/* On a touch screen there is no hover, so it is always there. */
@media (hover: none) { .copy-btn { opacity: 1; } }

pre .comment { color: #6b7280; }
pre .keyword { color: #a78bfa; }
pre .string  { color: #6ee7b7; }
pre .cmd     { color: #7dd3fc; }
pre .flag    { color: #f9a8d4; }
pre .output  { color: #9ca3af; }

code { font-family: var(--mono); font-size: 0.84em; }
p code, li code {
    background: var(--indigo-subtle);
    padding: 1px 5px; border-radius: 3px;
    font-size: 0.82em; color: var(--indigo);
}

.config-block {
    background: var(--code-bg); color: var(--code-text);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    font-family: var(--mono); font-size: 0.82rem;
    line-height: 1.6; margin: 12px 0;
    white-space: pre-wrap;
}

.ascii-diagram {
    background: var(--code-bg);
    color: var(--indigo-light);
    padding: 20px 24px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.04);
    overflow-x: auto;
    font-family: Menlo, "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
    font-size: 12.5px; line-height: 1.4;
    margin: 14px 0; white-space: pre;
    font-variant-ligatures: none;
    -webkit-text-size-adjust: none;
}

.diagram {
    margin: 18px 0;
    padding: 16px;
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
}
.diagram img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* ============================================================
   Collapsible (details/summary)
   ============================================================ */
details {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 8px 0; background: var(--surface-0);
}
details[open] { box-shadow: 0 1px 4px rgba(0,0,0,0.04); }

summary {
    padding: 12px 16px; cursor: pointer;
    font-weight: 600; font-size: 0.9rem;
    color: var(--text); list-style: none;
    display: flex; align-items: center; gap: 8px;
    user-select: none;
}
summary::before {
    content: ""; display: inline-block;
    width: 5px; height: 5px;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(-45deg); transition: transform 0.15s;
    flex-shrink: 0;
}
details[open] > summary::before { transform: rotate(45deg); }
summary::-webkit-details-marker { display: none; }

details .detail-content {
    padding: 0 16px 16px;
    font-size: 0.87rem; color: var(--text-secondary);
    line-height: 1.65;
}
/* An answer long enough to need paragraphs gets them: the section's own `p` rule
   sets a smaller font, and without this the last paragraph carries a margin the
   box's padding already provides. */
details .detail-content p {
    font-size: inherit; color: inherit; line-height: inherit;
    margin: 0 0 0.7em;
}
details .detail-content p:last-child { margin-bottom: 0; }

/* ============================================================
   Changelog
   ============================================================ */
.changelog-entry {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
}
.changelog-entry:last-child { border-bottom: none; }

.changelog-version {
    font-size: 0.95rem; font-weight: 700;
    color: var(--text); margin-bottom: 2px;
    font-family: var(--mono);
}
.changelog-date {
    font-size: 0.78rem; color: var(--text-muted); margin-bottom: 6px;
}

.changelog-tag {
    display: inline-block; font-size: 0.65rem; font-weight: 700;
    padding: 1px 6px; border-radius: 3px;
    margin-right: 4px; text-transform: uppercase; letter-spacing: 0.03em;
}
.changelog-tag--critical { background: var(--red-subtle);   color: var(--red); }
.changelog-tag--feature  { background: var(--green-subtle); color: var(--green); }
.changelog-tag--fix      { background: var(--blue-subtle);  color: var(--blue); }

.changelog-summary {
    font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55;
}
.changelog-summary ul { margin: 6px 0; padding-left: 18px; }
.changelog-summary li { margin-bottom: 3px; }

/* ============================================================
   Steps (installation)
   ============================================================ */
.step { display: flex; gap: 14px; margin: 16px 0; }

.step__number {
    width: 28px; height: 28px;
    background: var(--navy); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.78rem;
    flex-shrink: 0; margin-top: 1px;
}
.step__content { flex: 1; min-width: 0; }
.step__title {
    font-weight: 600; font-size: 0.9rem;
    color: var(--text); margin-bottom: 6px;
}

/* ============================================================
   Status badges
   ============================================================ */
.status-badge {
    display: inline-block; font-size: 0.72rem; font-weight: 600;
    padding: 1px 8px; border-radius: 100px;
}
.status-badge--supported { background: var(--green-subtle); color: var(--green); }
.status-badge--partial   { background: var(--amber-subtle); color: var(--amber); }
.status-badge--planned   { background: var(--blue-subtle);  color: var(--blue); }

/* ============================================================
   Module list
   ============================================================ */
.module-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px; margin: 14px 0;
}
.module-item {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px;
}
.module-item__name {
    font-family: var(--mono); font-size: 0.85rem;
    font-weight: 600; color: var(--indigo); margin-bottom: 3px;
}
.module-item__desc { font-size: 0.8rem; color: var(--text-muted); }

/* ============================================================
   Footer
   ============================================================ */
.footer {
    background: var(--surface-2);
    color: var(--text-secondary);
    padding: 24px var(--section-px);
    font-size: 0.78rem;
    border-top: 1px solid var(--border);
}
.footer__inner {
    max-width: var(--content-w); margin: 0 auto;
    display: flex; justify-content: space-between;
    align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer__center { color: var(--text-muted); font-size: 0.74rem; }
.footer__center a { color: var(--text-secondary); }
.footer__center a:hover { color: var(--indigo); }
.footer a { color: var(--text-secondary); }
.footer a:hover { color: var(--indigo); }

/* ============================================================
   Utility
   ============================================================ */
.mt-0 { margin-top: 0; }   .mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); box-shadow: 8px 0 24px rgba(0,0,0,0.3); }
    .main-content { margin-left: 0; }
    .hamburger { display: block; }
    .hero { padding: 48px 24px 40px; }
    .hero__title { font-size: clamp(1.6rem, 4vw, 2.2rem); }
    .hero__project-desc { font-size: 1rem; }
}

@media (max-width: 640px) {
    .hero__title { font-size: 1.5rem; }
    .hero__project-desc { font-size: 0.9rem; }
    .hero__subtitle { font-size: 0.85rem; }
    .hero__actions { flex-direction: column; }
    .card-grid { grid-template-columns: 1fr; }
    .top-nav { padding: 0 14px; }
    .top-nav__brand span { display: none; }
    .github-link span { display: none; }
    .footer { padding: 20px 16px; }
    .footer__inner { flex-direction: column; text-align: center; }
    table { font-size: 0.78rem; }
    th, td { padding: 7px 10px; }
}

/* -- Sidebar overlay (mobile) -- */
.sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 899;
}
.sidebar-overlay.show { display: block; }

/* -- Search highlight -- */
mark.search-hl {
    background: #fde68a;
    color: inherit;
    padding: 1px 2px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(245,158,11,0.3);
}

/* A pointer to the deeper page. Deliberately quiet: a general reader does not
   need what is behind it, and the page was drowning in warning boxes before
   this. The archaeology lives in docs/TESTING.md. */
.muted {
    font-size: 0.86rem;
    color: var(--text-muted);
    margin: 10px 0 22px;
}
.muted a { color: var(--text-muted); text-decoration: underline; }
.muted a:hover { color: var(--text); }

/* A warning callout is collapsed by default: the summary carries the title so the
   reader still sees what it is about, and the body only appears when asked for.
   The generic `details` rules above give a neutral surface — these put the alert's
   own colour back and align the marker with the text rather than with the box. */
details.alert { padding: 0; }
details.alert > summary {
    padding: 12px 14px;
    color: inherit;
    font-weight: 600;
}
details.alert > summary::before {
    border-right-color: currentColor;
    border-bottom-color: currentColor;
    opacity: 0.55;
}
details.alert > summary > strong { font-weight: 600; }
/* THE BODY OF A CALLOUT IS A SPAN, and padding on an inline element applies only at
   the start and end of the inline box — not to every line. So the first line was
   indented by 14px and every line after it ran to the edge of the box, which is what
   an expanded callout looked like. Making the body a block is the whole fix.

   The language switcher hides the other language with `display: none !important`, so
   this cannot un-hide it, and only one of the two spans is ever visible — which is
   why the bottom padding goes on both rather than on :last-child. */
details.alert > *:not(summary) {
    display: block;
    padding: 0 14px;
    margin: 0 0 0.75em;
    line-height: 1.7;
}
/* The bottom gap belongs to the box, not to the last child: the last child is
   often the HIDDEN language, and a margin on a `display: none` element is no
   margin at all. */
details.alert[open] { padding-bottom: 6px; }
details.alert[open] > summary { padding-bottom: 8px; }