/* ============================================================
   jt-pve-storage-dellemc Documentation
   Design: Dell Blue, documentation-focused, no gimmicks
   ============================================================ */

:root {
    --navy: #00447c;
    --navy-mid: #005a9e;
    --indigo: #0076ce;
    --indigo-hover: #005a9e;
    --indigo-light: #7fc4ef;
    --indigo-subtle: rgba(0, 118, 206, 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;
    /* Table rules are their own tone. --border-light is right for a
       divider under a heading, where the eye already knows the boundary;
       inside a table it is what the reader follows across four columns to
       find the cell that belongs to a family, and at #f1f5f9 it was not
       there to follow. */
    --table-line: #d5dde7;

    --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, #131029 0%, #1a1040 45%, #0f1d3a 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(79,70,229,0.12) 0%, transparent 65%);
    pointer-events: none;
}
.hero__glow-left {
    position: absolute; bottom: -120px; left: -100px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 65%);
    pointer-events: none;
}
.hero__content { position: relative; max-width: 720px; }

.hero__badge {
    display: inline-flex; align-items: center;
    background: rgba(79,70,229,0.18);
    border: 1px solid rgba(79,70,229,0.25);
    color: var(--indigo-light);
    padding: 3px 12px; border-radius: 100px;
    font-size: 0.75rem; font-weight: 600;
    margin-bottom: 18px;
}
.hero__badge-sep {
    display: inline-block; width: 1px; height: 10px;
    background: rgba(165,180,252,0.35);
    margin: 0 8px; vertical-align: middle;
}

.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(79,70,229,0.3);
}
.btn--primary:hover {
    background: var(--indigo-hover); color: #fff;
    box-shadow: 0 2px 8px rgba(79,70,229,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: 56px max(24px, calc((100% - var(--content-w)) / 2));
    padding-top: 56px;
    padding-bottom: 56px;
    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;
}

.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);
}

/* A card that is a link. The whole card is the target, so it must not carry
   the underline and the link colour a run of text would — the hover border
   is what says it can be clicked. */
a.card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.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; }

/* The two-letter mark a related project's card carries instead of an icon.
   Sized here rather than inline so the three cards cannot drift apart. */
.card__icon {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.card:nth-child(3n+1) .card__icon { background: rgba(79,70,229,0.08);  color: var(--indigo); }
.card:nth-child(3n+2) .card__icon { background: rgba(14,165,233,0.08); color: #0284c7; }
.card:nth-child(3n)   .card__icon { background: rgba(139,92,246,0.08); color: #7c3aed; }

.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;
}

/* ============================================================
   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(--table-line);
    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(--table-line); }

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);
}
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;
}

/* ============================================================
   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 short qualification under a table cell: why a row is not a plain yes,
   what the operator has to know before relying on it. Kept small and quiet
   so the answer column stays readable at a glance. */
.note {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted, #8b93a1);
}