/*
 * Styles for the public site: home, documentation, FAQ, support and about
 * (templates extending layout/public_site.jinja2). This is the only stylesheet
 * those pages load besides the app's vendor and app CSS.
 *
 * Classes use the "lv-" prefix. <body> carries "lv2" plus a page class
 * (lv-page-home, lv-page-docs, lv-page-faq, lv-page-support, lv-page-about)
 * used only to scope the few per-page adjustments at the end of each section.
 * Colour tokens switch with the app's data-bs-theme attribute.
 *
 * Order: tokens and base, site chrome, shared components, then one section
 * per page.
 */

body.lv2 {
    --lv-paper: #f3f5f4;
    --lv-surface: #ffffff;
    --lv-ink: #14232d;
    --lv-text: #2d3b45;
    --lv-muted: #5b6973;
    --lv-rule: #d5ddda;
    --lv-rule-strong: #aebcb7;
    --lv-accent: #0a7a65;
    --lv-accent-hover: #075f4f;
    --lv-band: #10202a;
    --lv-band-text: #c3d0d6;
    --lv-band-muted: #8a9ca5;
    --nt-a: #228b4e;
    --nt-c: #1d64c2;
    --nt-g: #b97300;
    --nt-t: #b53b2e;
    --lv-sans: "IBM Plex Sans", "Open Sans", system-ui, sans-serif;
    --lv-mono: "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace;
    margin: 0;
    background: var(--lv-paper);
    color: var(--lv-text);
    font-family: var(--lv-sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

html[data-bs-theme="dark"] body.lv2 {
    --lv-paper: #0f1a20;
    --lv-surface: #15232b;
    --lv-ink: #eef3f5;
    --lv-text: #cdd8dd;
    --lv-muted: #94a4ac;
    --lv-rule: #263740;
    --lv-rule-strong: #3d505a;
    --lv-accent: #4fcdb3;
    --lv-accent-hover: #7adcc8;
    --lv-band: #0a1318;
    --nt-a: #3fb771;
    --nt-c: #5294ea;
    --nt-g: #e0a43a;
    --nt-t: #e36b5e;
}

.lv2 h1, .lv2 h2, .lv2 h3, .lv2 p, .lv2 dl, .lv2 dd, .lv2 ol, .lv2 ul, .lv2 figure {
    margin: 0;
}

.lv2 a {
    color: var(--lv-accent);
    text-decoration: none;
}

.lv2 a:hover {
    color: var(--lv-accent-hover);
}

.lv2 a:focus-visible,
.lv2 button:focus-visible,
.lv2 [tabindex]:focus-visible {
    outline: 2px solid var(--lv-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.lv-wrap {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.lv-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Notice bar and navigation */

.lv-notice {
    background: var(--lv-band);
    color: var(--lv-band-text);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.lv-notice .lv-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.55rem;
}

.lv-notice p {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: var(--lv-band-text);
}

.lv-notice i {
    font-size: 1rem;
    color: var(--lv-band-muted);
}

.lv-nav {
    border-bottom: 1px solid var(--lv-rule);
    background: var(--lv-paper);
    padding-block: 0.9rem;
}

.lv-nav .lv-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.lv-nav .navbar-nav {
    gap: 0.25rem 1.6rem;
}

.lv2 .lv-nav .nav-link {
    color: var(--lv-text);
    font-size: 0.9375rem;
    font-weight: 500;
    padding-inline: 0;
}

.lv2 .lv-nav .nav-link:hover {
    color: var(--lv-ink);
}

.lv2 .lv-nav .nav-link[aria-current="page"] {
    color: var(--lv-ink);
    text-decoration: underline;
    text-decoration-color: var(--lv-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.5rem;
}

.lv-nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lv-theme-toggle {
    border: 0;
    background: none;
    color: var(--lv-muted);
    padding: 0.25rem;
    font-size: 1.25rem;
    line-height: 1;
}

.lv-theme-toggle:hover {
    color: var(--lv-ink);
}

.lv2 .lv-nav-link {
    color: var(--lv-text);
    font-size: 0.9375rem;
    font-weight: 500;
}

.lv-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lv-btn-sm {
    padding: 0.5rem 0.9rem;
}

.lv2 .lv-btn-primary {
    background: var(--lv-accent);
    color: #ffffff;
}

.lv2 .lv-btn-primary:hover {
    background: var(--lv-accent-hover);
    color: #ffffff;
}

html[data-bs-theme="dark"] .lv2 .lv-btn-primary,
html[data-bs-theme="dark"] .lv2 .lv-btn-primary:hover {
    color: #0a1318;
}

.lv2 .lv-btn-secondary {
    border-color: var(--lv-rule-strong);
    background: transparent;
    color: var(--lv-ink);
}

.lv2 .lv-btn-secondary:hover {
    border-color: var(--lv-ink);
    color: var(--lv-ink);
}

/* Sections */

.lv-section {
    padding-block: clamp(3.5rem, 7vw, 6rem);
    border-top: 1px solid var(--lv-rule);
}

.lv-section-head {
    max-width: 46rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.lv2 h2 {
    font-family: var(--lv-sans);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--lv-ink);
}

.lv-section-head p {
    margin-top: 1rem;
    max-width: 64ch;
    color: var(--lv-text);
}

.lv2 h3 {
    font-family: var(--lv-sans);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--lv-ink);
}

/* DNA barcode strip (footer and record card) */

.lv-strip {
    display: block;
    width: 100%;
    height: 10px;
    shape-rendering: crispEdges;
}

/* Footer */

.lv-footer {
    background: var(--lv-band);
    color: var(--lv-band-text);
    font-size: 0.875rem;
}

.lv-footer .lv-strip {
    height: 6px;
}

.lv-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    padding-block: 3.5rem 2.5rem;
}

.lv-footer p {
    color: var(--lv-band-text);
}

.lv-footer-about p {
    margin-top: 1rem;
    max-width: 40ch;
    line-height: 1.6;
}

.lv-footer h2 {
    font-family: var(--lv-sans);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #ffffff;
}

.lv-footer ul {
    margin-top: 0.8rem;
    padding: 0;
    list-style: none;
}

.lv-footer li + li {
    margin-top: 0.45rem;
}

.lv2 .lv-footer a {
    color: var(--lv-band-text);
}

.lv2 .lv-footer a:hover {
    color: #ffffff;
}

.lv-footer-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-block: 1.25rem 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--lv-band-muted);
    font-size: 0.8125rem;
}

.lv-footer-base p {
    color: var(--lv-band-muted);
}

/* Responsive */

@media (max-width: 991.98px) {
    .lv-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lv-footer-about {
        grid-column: 1 / -1;
    }

    .lv-nav .navbar-collapse {
        padding-top: 1rem;
    }

    .lv-nav-actions {
        margin-top: 1rem;
    }
}

@media (max-width: 575.98px) {
    .lv-footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lv-btn {
        transition: none;
    }
}

/* Origins and partners (includes/public_site/partners.jinja2) */

.lv-origins-copy p + p {
    margin-top: 0.9rem;
}

.lv-partner-row {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 1rem 2.5rem;
    padding-block: 1.75rem;
    border-top: 1px solid var(--lv-rule);
}

.lv-partner-row h3 {
    padding-top: 0.4rem;
}

.lv-logos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 0;
    list-style: none;
}

.lv-logos .is-wide {
    grid-column: span 2;
}

.lv2 .lv-logos a {
    display: grid;
    gap: 0.6rem;
    color: var(--lv-text);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.lv2 .lv-logos a:hover {
    color: var(--lv-ink);
}

.lv-logo-name {
    color: var(--lv-accent);
    font-weight: 500;
}

.lv-logo-name i {
    margin-left: 0.3rem;
    font-size: 0.875rem;
    vertical-align: -0.1em;
}

.lv-logos a:hover .lv-logo-name {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Logos keep a white plate in both themes; most are drawn for white. */
.lv-logo-plate {
    display: grid;
    place-items: center;
    height: 7rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--lv-rule);
    border-radius: 6px;
    background: #ffffff;
    transition: border-color 0.15s ease;
}

.lv-logos .is-wide .lv-logo-plate {
    height: 8.5rem;
}

.lv-logos a:hover .lv-logo-plate {
    border-color: var(--lv-rule-strong);
}

.lv-logo-plate img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 4.25rem;
    object-fit: contain;
}

.lv-logos .is-wide .lv-logo-plate img {
    max-height: 5.5rem;
}

@media (max-width: 991.98px) {
    .lv-partner-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .lv-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ======================================================================
   Shared components
   ====================================================================== */

/* Components shared by several pages */

.lv2 h1 {
    font-family: var(--lv-sans);
    font-size: clamp(2.2rem, 4.2vw, 3.15rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--lv-ink);
}

.lv-page-intro {
    padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 3.5rem);
}

.lv2 .lv-lede {
    margin-top: 1.1rem;
    max-width: 62ch;
    font-size: 1.125rem;
    line-height: 1.6;
}

.lv2 .lv-lede + .lv-lede {
    margin-top: 0.9rem;
}

.lv2 .lv-intro-note {
    margin-top: 0.75rem;
    max-width: 72ch;
    font-size: 0.9375rem;
    color: var(--lv-muted);
}

.lv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.lv-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 3rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.lv-points > div {
    padding-top: 1.25rem;
    border-top: 1px solid var(--lv-rule-strong);
}

.lv-points p {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.lv-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 4rem;
}

.lv-control {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0 0.75rem;
    padding-block: 1.4rem;
    border-top: 1px solid var(--lv-rule);
}

.lv-control i {
    font-size: 1.35rem;
    line-height: 1.4rem;
    color: var(--lv-accent);
}

.lv-control p {
    margin-top: 0.4rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 58ch;
}

.lv-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 2.5rem;
    padding: 0;
    list-style: none;
}

.lv-links li {
    padding-block: 1.1rem 1.3rem;
    border-top: 1px solid var(--lv-rule);
}

.lv-links a {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.15s ease;
}

.lv-links a:hover {
    text-decoration-color: currentColor;
}

.lv-links p {
    margin-top: 0.3rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--lv-muted);
}

@media (max-width: 991.98px) {
    .lv-points {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }

    .lv-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .lv-controls {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .lv-links {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lv-links a {
        transition: none;
    }
}

/* ======================================================================
   Home (landing.jinja2)
   ====================================================================== */

/* Hero */

.lv-hero {
    padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 4.5rem);
}

.lv-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy figure";
    gap: 2.5rem 4rem;
    align-items: center;
}

.lv-hero-copy {
    grid-area: copy;
}

.lv-hero-figure {
    grid-area: figure;
}

.lv-hero-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1134 / 941;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--lv-rule);
    background: var(--lv-rule);
}

.lv-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 2rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem) !important;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.lv-facts > div {
    padding-block: 0.75rem;
    border-top: 1px solid var(--lv-rule);
}

.lv-facts dt {
    font-weight: 400;
    color: var(--lv-muted);
    font-size: 0.875rem;
}

.lv-facts dd {
    color: var(--lv-ink);
    font-weight: 500;
}

/* Barcode: the page's one visual statement */

.lv-plot {
    position: relative;
    height: clamp(68px, 10vw, 128px);
    cursor: crosshair;
    touch-action: pan-y;
}

.lv-bars {
    display: block;
    width: 100%;
    height: 100%;
    shape-rendering: crispEdges;
}

/* Set by script only, so the bars stay visible without JavaScript. */

.lv-plot.is-pending .lv-bars {
    clip-path: inset(0 100% 0 0);
}

.lv-plot.is-drawing .lv-bars {
    animation: lv-read 1.8s cubic-bezier(0.25, 0.6, 0.2, 1) forwards;
}

@keyframes lv-read {
    to {
        clip-path: inset(0 0 0 0);
    }
}

.lv2 .nt-a {
    fill: var(--nt-a);
    color: var(--nt-a);
}

.lv2 .nt-c {
    fill: var(--nt-c);
    color: var(--nt-c);
}

.lv2 .nt-g {
    fill: var(--nt-g);
    color: var(--nt-g);
}

.lv2 .nt-t {
    fill: var(--nt-t);
    color: var(--nt-t);
}

.lv-cursor {
    position: absolute;
    top: -6px;
    bottom: -6px;
    width: 0;
    border-left: 2px solid var(--lv-ink);
    transform: translateX(-1px);
    opacity: 0;
    pointer-events: none;
}

.lv-plot.is-reading .lv-cursor {
    opacity: 1;
}

.lv-axis {
    position: relative;
    height: 1.6rem;
    border-top: 1px solid var(--lv-rule-strong);
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--lv-muted);
    font-variant-numeric: tabular-nums;
}

.lv-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    padding-top: 0.3rem;
}

.lv-tick::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 0.3rem;
    border-left: 1px solid var(--lv-rule-strong);
}

.lv-tick:first-child {
    transform: none;
}

.lv-tick:first-child::before {
    left: 0;
}

.lv-tick:last-child {
    transform: translateX(-100%);
}

.lv-tick:last-child::before {
    left: auto;
    right: 0;
}

.lv-barcode figcaption {
    display: grid;
    gap: 1rem;
    margin-top: 0.75rem;
}

.lv-caption {
    max-width: 62ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--lv-muted);
}

.lv-caption em {
    font-style: italic;
}

.lv-readout {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.5rem;
    min-height: 2.75rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--lv-rule);
    border-radius: 4px;
    background: var(--lv-surface);
    font-size: 0.875rem;
    color: var(--lv-muted);
}

.lv-readout-pos {
    font-variant-numeric: tabular-nums;
    min-width: 9.5rem;
}

.lv-readout-pos b {
    color: var(--lv-ink);
    font-weight: 600;
}

.lv-readout-seq {
    font-family: var(--lv-mono);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.lv-readout-seq mark {
    padding: 0.05rem 0.2rem;
    margin-inline: 0.1rem;
    border-radius: 3px;
    background: var(--lv-ink);
}

.lv-readout-seq mark.nt-a,
.lv-readout-seq mark.nt-c,
.lv-readout-seq mark.nt-g,
.lv-readout-seq mark.nt-t {
    color: var(--lv-paper);
}

.lv-readout-seq mark.nt-a {
    background: var(--nt-a);
}

.lv-readout-seq mark.nt-c {
    background: var(--nt-c);
}

.lv-readout-seq mark.nt-g {
    background: var(--nt-g);
}

.lv-readout-seq mark.nt-t {
    background: var(--nt-t);
}

.lv-readout-base {
    color: var(--lv-ink);
    font-weight: 500;
}

/* Process: a genuine sequence of stages */

.lv-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2rem;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.lv-steps::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    left: 1.1rem;
    right: 0;
    border-top: 1px solid var(--lv-rule-strong);
}

.lv-step {
    position: relative;
}

.lv-step-n {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--lv-ink);
    border-radius: 50%;
    background: var(--lv-paper);
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--lv-ink);
}

.lv-step h3 {
    margin-top: 1.1rem;
}

.lv-step p {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--lv-text);
}

/* Methods table */

.lv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.lv-table th, .lv-table td {
    padding: 1.1rem 1.5rem 1.1rem 0;
    border-bottom: 1px solid var(--lv-rule);
    vertical-align: top;
    text-align: left;
}

.lv-table thead th {
    padding-block: 0 0.6rem;
    border-bottom: 1px solid var(--lv-rule-strong);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lv-muted);
}

.lv-table tbody th {
    width: 19%;
    font-weight: 600;
    color: var(--lv-ink);
}

.lv-table .lv-question {
    width: 31%;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--lv-ink);
}

.lv-table td:last-child {
    padding-right: 0;
    color: var(--lv-text);
}

.lv-note {
    margin-top: 1.25rem !important;
    max-width: 70ch;
    font-size: 0.9375rem;
    color: var(--lv-muted);
}

/* Record anatomy */

.lv-record-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 3rem 4rem;
    align-items: start;
}

.lv-record {
    border: 1px solid var(--lv-rule-strong);
    border-radius: 6px;
    background: var(--lv-surface);
    overflow: hidden;
}

.lv-record-head {
    display: grid;
    gap: 0.75rem;
    padding: 1.1rem 1.4rem 0;
}

.lv2 .lv-record-title {
    font-family: var(--lv-sans);
    font-size: 1.1875rem;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: var(--lv-ink);
}

.lv-record-fields {
    padding: 0.4rem 1.4rem 0.6rem;
}

.lv-record-fields > div {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr);
    gap: 0.25rem 1.25rem;
    padding-block: 0.85rem;
    border-top: 1px dotted var(--lv-rule-strong);
}

.lv-record-fields > div:first-child {
    border-top: 0;
}

.lv-record-fields dt {
    font-weight: 600;
    color: var(--lv-ink);
    font-size: 0.9375rem;
}

.lv-record-fields dd {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--lv-text);
}

.lv-files {
    display: grid;
    gap: 1.5rem;
    padding-top: calc(1.1rem + 1px);
}

.lv-files h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--lv-ink);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--lv-rule);
}

.lv-files ul {
    margin-top: 0.6rem;
    padding-left: 1.1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.lv-files li + li {
    margin-top: 0.3rem;
}

.lv-files li::marker {
    color: var(--lv-rule-strong);
}

.lv-files .lv-cols {
    columns: 2;
    column-gap: 2rem;
}

.lv-files .lv-cols li {
    break-inside: avoid;
}

/* DNA barcoding */

/* Method template note */

.lv-extend {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0 0.75rem;
    margin-top: 2.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--lv-rule);
    border-radius: 6px;
    background: var(--lv-surface);
}

.lv-extend i {
    font-size: 1.35rem;
    line-height: 1.4rem;
    color: var(--lv-accent);
}

.lv-extend p {
    margin-top: 0.4rem;
    max-width: 80ch;
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Data model links */

.lv-model-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.5rem;
    margin-top: 1.25rem !important;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
}

.lv-model-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}

.lv-model-links i {
    font-size: 1.15rem;
}

.lv-tag {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--lv-accent);
}

/* Custody and access */

/* Reference links */

/* Responsive */

@media (max-width: 991.98px) {
    .lv-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
                    "copy"
                    "figure";
    }

    .lv-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lv-record-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .lv-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }

    .lv-steps::before {
        top: 1.1rem;
        bottom: 1.1rem;
        left: 1.1rem;
        right: auto;
        border-top: 0;
        border-left: 1px solid var(--lv-rule-strong);
    }

    .lv-step {
        display: grid;
        grid-template-columns: 2.2rem minmax(0, 1fr);
        column-gap: 1.1rem;
    }

    .lv-step-n {
        grid-row: span 2;
    }

    .lv-step h3 {
        margin-top: 0.3rem;
    }
}

@media (max-width: 767.98px) {
    .lv-tick-minor {
        display: none;
    }

    .lv-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .lv-table thead {
        display: none;
    }

    .lv-table,
    .lv-table tbody,
    .lv-table tr,
    .lv-table th,
    .lv-table td {
        display: block;
        width: auto !important;
    }

    .lv-table tr {
        padding-block: 1.1rem;
        border-bottom: 1px solid var(--lv-rule);
    }

    .lv-table th, .lv-table td {
        padding: 0;
        border: 0;
    }

    .lv-table .lv-question {
        margin-block: 0.35rem 0.5rem;
    }

    .lv-record-fields > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .lv-files .lv-cols {
        columns: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lv-plot.is-pending .lv-bars, .lv-plot.is-drawing .lv-bars {
        animation: none;
        clip-path: none;
    }
}

/* Home: per-page adjustments to shared components */

.lv-page-home h1 {
    text-wrap: balance;
}

.lv-page-home .lv-lede {
    margin-top: 1.4rem;
    max-width: 56ch;
}

/* ======================================================================
   Documentation (documentation.jinja2)
   ====================================================================== */

body.lv2 {
    --lv-layer-1: var(--lv-surface);
    --lv-layer-2: #e8f0ee;
    --lv-layer-3: #d4e3df;
    --lv-layer-4: var(--lv-band);
    --lv-draft: #9a6200;
}

html[data-bs-theme="dark"] body.lv2 {
    --lv-layer-2: #18292f;
    --lv-layer-3: #1e363d;
    --lv-layer-4: #071015;
    --lv-draft: #e0a43a;
}

/* Intro and layer diagram */

.lv-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 1rem;
    margin-top: clamp(2rem, 4vw, 2.75rem);
}

.lv-stack-layers {
    display: grid;
    border: 1px solid var(--lv-rule-strong);
    border-radius: 6px;
    overflow: hidden;
}

.lv2 .lv-band {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    gap: 0.25rem 1rem;
    align-items: start;
    padding: 1.15rem 1.4rem;
    color: var(--lv-text);
    transition: filter 0.15s ease;
}

.lv2 .lv-band + .lv-band {
    border-top: 1px solid var(--lv-rule-strong);
}

.lv2 .lv-band:hover {
    filter: brightness(0.97);
}

.lv-band.is-1 {
    background: var(--lv-layer-1);
}

.lv-band.is-2 {
    background: var(--lv-layer-2);
}

.lv-band.is-3 {
    background: var(--lv-layer-3);
}

.lv-band.is-4 {
    background: var(--lv-layer-4);
}

.lv2 .lv-band.is-4, .lv2 .lv-band.is-4 .lv-band-title {
    color: #e8eff2;
}

.lv2 .lv-band.is-4 .lv-band-meta,
.lv2 .lv-band.is-4 .lv-band-audience {
    color: var(--lv-band-muted);
}

.lv-band-n {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.9375rem;
    font-weight: 600;
}

.lv-band-title {
    display: block;
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--lv-ink);
}

.lv-band-summary {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.lv-band-audience {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--lv-muted);
}

.lv-band-meta {
    font-size: 0.8125rem;
    color: var(--lv-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lv2 .lv-shelf {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    padding: 1.15rem 1.25rem;
    border: 1px dashed var(--lv-rule-strong);
    border-radius: 6px;
    color: var(--lv-text);
}

.lv-shelf-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--lv-ink);
}

.lv-shelf ul {
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
}

.lv-shelf li + li {
    margin-top: 0.3rem;
}

.lv-shelf p {
    font-size: 0.8125rem;
    color: var(--lv-muted);
}

/* Body: sidebar and outline */

.lv-docs-body {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3.5rem;
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.lv-docs-nav {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding-top: 2.4rem;
    font-size: 0.875rem;
}

.lv-docs-nav ul {
    padding: 0;
    list-style: none;
}

.lv-docs-nav > ul > li + li {
    margin-top: 1rem;
}

.lv2 .lv-docs-nav > ul > li > a {
    font-weight: 600;
    color: var(--lv-ink);
}

.lv-docs-nav ul ul {
    margin-top: 0.4rem;
    padding-left: 0.85rem;
    border-left: 1px solid var(--lv-rule);
}

.lv-docs-nav ul ul li + li {
    margin-top: 0.25rem;
}

.lv2 .lv-docs-nav ul ul a {
    color: var(--lv-text);
}

.lv2 .lv-docs-nav a:hover {
    color: var(--lv-accent);
}

.lv-docs-content > section {
    padding-top: 2.4rem;
    scroll-margin-top: 1rem;
}

.lv-docs-content > section + section {
    margin-top: 2.5rem;
    border-top: 1px solid var(--lv-rule-strong);
}

.lv-layer-head {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0.25rem 1rem;
    margin-bottom: 1.75rem;
}

.lv-layer-head .lv-band-n {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.0625rem;
    color: var(--lv-ink);
}

.lv-layer-head p {
    margin-top: 0.5rem;
    max-width: 68ch;
}

.lv-layer-head .lv-band-audience {
    font-size: 0.875rem;
}

.lv-chapters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 3rem;
    align-items: start;
}

.lv-chapter {
    scroll-margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lv-rule);
}

.lv-chapter > p {
    margin-top: 0.3rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--lv-muted);
}

.lv-pages {
    margin-top: 0.85rem;
    padding: 0;
    list-style: none;
}

.lv-pages li {
    padding-block: 0.55rem;
    border-top: 1px dotted var(--lv-rule-strong);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.lv2 .lv-pages a {
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}

.lv2 .lv-pages a:hover {
    text-decoration-color: currentColor;
}

.lv-page-title {
    color: var(--lv-ink);
}

.lv-page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.9rem;
    margin-top: 0.2rem;
}

.lv-formats {
    display: inline-flex;
    gap: 0.4rem;
    color: var(--lv-muted);
    font-size: 1rem;
}

.lv-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--lv-muted);
}

.lv-status::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
}

.lv-status.is-available {
    color: var(--lv-accent);
}

.lv-status.is-available::before {
    background: currentColor;
}

.lv-status.is-external {
    color: var(--lv-draft);
}

.lv-status.is-external::before {
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* Roles and key */

.lv-roles {
    display: grid;
    gap: 0;
    padding: 0;
    list-style: none;
}

.lv-roles li {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 0.25rem 2rem;
    padding-block: 1rem;
    border-top: 1px solid var(--lv-rule);
}

.lv-roles p {
    font-size: 0.9375rem;
}

.lv-start {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin-top: 0.35rem;
    font-size: 0.875rem;
}

.lv-start a {
    font-weight: 500;
}

.lv-start-planned {
    color: var(--lv-muted);
}

.lv-key {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 3rem;
    margin-top: 2rem;
    padding: 1.1rem 1.4rem;
    border: 1px solid var(--lv-rule);
    border-radius: 6px;
    background: var(--lv-surface);
    font-size: 0.875rem;
}

.lv-key h3 {
    font-size: 0.9375rem;
}

.lv-key ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-top: 0.5rem;
    padding: 0;
    list-style: none;
}

.lv-key li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.lv-key i {
    font-size: 1rem;
    color: var(--lv-muted);
}

.lv-ops {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0 0.75rem;
    padding: 1.25rem 1.5rem;
    border: 1px dashed var(--lv-rule-strong);
    border-radius: 6px;
}

.lv-ops i {
    font-size: 1.35rem;
    line-height: 1.4rem;
    color: var(--lv-muted);
}

.lv2 .lv-ops-title {
    font-size: 1.125rem;
    letter-spacing: -0.01em;
}

.lv-ops p {
    margin-top: 0.35rem;
    font-size: 0.9375rem;
    max-width: 72ch;
}

/* Responsive */

@media (max-width: 991.98px) {
    .lv-docs-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .lv-docs-nav {
        display: none;
    }

    .lv-stack {
        grid-template-columns: minmax(0, 1fr);
    }

    .lv-chapters {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .lv2 .lv-band {
        grid-template-columns: 2.4rem minmax(0, 1fr);
    }

    .lv-band-meta {
        grid-column: 2;
    }

    .lv-roles li, .lv-key {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lv2 .lv-band {
        transition: none;
    }
}

/* Documentation: per-page adjustments to shared components */

.lv-page-docs .lv-lede {
    max-width: 64ch;
}

/* Documentation article (documentation_page.jinja2) */

.lv-doc {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr) 12rem;
    gap: 3rem;
    padding-block: 2rem clamp(3.5rem, 7vw, 6rem);
}

.lv-doc-side {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    font-size: 0.875rem;
}

.lv-doc-layer {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.lv2 .lv-doc-layer a {
    color: var(--lv-ink);
}

.lv-doc-side details + details {
    margin-top: 0.35rem;
}

.lv-doc-side summary {
    cursor: pointer;
    padding: 0.3rem 0;
    font-weight: 600;
    color: var(--lv-ink);
    list-style: none;
}

.lv-doc-side summary::-webkit-details-marker {
    display: none;
}

.lv-doc-side summary::before {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.5rem;
    border-right: 1.5px solid var(--lv-muted);
    border-bottom: 1.5px solid var(--lv-muted);
    transform: rotate(-45deg);
    vertical-align: 0.15rem;
    transition: transform 0.15s ease;
}

.lv-doc-side details[open] summary::before {
    transform: rotate(45deg);
}

.lv-doc-side ul {
    margin: 0.2rem 0 0.5rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--lv-rule);
    list-style: none;
}

.lv-doc-side li {
    padding: 0.2rem 0 0.2rem 0.6rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
}

.lv-doc-side li[aria-current="page"] {
    border-left-color: var(--lv-accent);
}

.lv2 .lv-doc-side li a {
    color: var(--lv-text);
}

.lv2 .lv-doc-side li[aria-current="page"] a {
    color: var(--lv-ink);
    font-weight: 600;
}

.lv-doc-planned {
    color: var(--lv-muted);
}

.lv-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--lv-muted);
}

.lv-doc-head {
    margin: 1rem 0 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--lv-rule);
}

.lv-page-article h1 {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.lv-doc-summary {
    margin-top: 0.75rem;
    max-width: 62ch;
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--lv-text);
}

.lv-doc-formats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin-top: 0.9rem;
    font-size: 0.8125rem;
    color: var(--lv-muted);
}

.lv-doc-formats i {
    margin-right: 0.3rem;
    font-size: 0.95rem;
}

.lv-prose {
    max-width: 70ch;
    font-size: 1.0625rem;
    line-height: 1.7;
}

.lv-prose > :first-child {
    margin-top: 0;
}

.lv-prose h2 {
    margin: 2.4rem 0 0.8rem;
    font-size: 1.45rem;
    scroll-margin-top: 1rem;
}

.lv-prose h3 {
    margin: 1.8rem 0 0.5rem;
    font-size: 1.125rem;
}

.lv-prose p,
.lv-prose ul,
.lv-prose ol {
    margin: 0 0 1rem;
}

.lv-prose ul,
.lv-prose ol {
    padding-left: 1.4rem;
}

.lv-prose li + li {
    margin-top: 0.35rem;
}

.lv-prose li::marker {
    color: var(--lv-muted);
}

.lv2 .lv-prose a {
    text-decoration: underline;
    text-decoration-color: var(--lv-rule-strong);
    text-underline-offset: 3px;
}

.lv2 .lv-prose a:hover {
    text-decoration-color: currentColor;
}

.lv-prose code {
    font-family: var(--lv-mono);
    font-size: 0.875em;
    padding: 0.05em 0.35em;
    border: 1px solid var(--lv-rule);
    border-radius: 3px;
    background: var(--lv-surface);
    overflow-wrap: anywhere;
}

.lv-prose pre {
    margin: 0 0 1.2rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--lv-rule);
    border-radius: 6px;
    background: var(--lv-surface);
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.5;
}

.lv-prose pre code {
    padding: 0;
    border: 0;
    background: none;
}

.lv-prose table {
    width: 100%;
    margin: 0.25rem 0 1.5rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.lv-prose th,
.lv-prose td {
    padding: 0.55rem 0.75rem 0.55rem 0;
    border-bottom: 1px solid var(--lv-rule);
    text-align: left;
    vertical-align: top;
}

.lv-prose th {
    font-weight: 600;
    color: var(--lv-ink);
    border-bottom-color: var(--lv-rule-strong);
}

.lv-prose blockquote {
    margin: 1.4rem 0;
    padding: 0.9rem 1.2rem;
    border: 1px solid var(--lv-rule-strong);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(20, 35, 45, 0.06);
    background: var(--lv-surface);
    font-size: 0.9375rem;
}

.lv-prose blockquote p {
    margin: 0;
}

.lv-prose blockquote p + p {
    margin-top: 0.6rem;
}

/* Annotated screenshots: image in a plain card, numbered legend below. */
.lv-figure {
    margin: 1.5rem 0 1.75rem;
}

.lv-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--lv-rule-strong);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(20, 35, 45, 0.06);
    background: #ffffff;
}

.lv-figure figcaption {
    margin-top: 0.75rem;
}

.lv-callouts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: callout;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--lv-text);
}

.lv-callouts li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.5rem;
    margin: 0;
    counter-increment: callout;
}

.lv-callouts li::before {
    content: counter(callout);
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #0a7a65;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
}

.lv-prose hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--lv-rule);
}

.lv-doc-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lv-rule);
}

.lv2 .lv-doc-pager a {
    display: block;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--lv-rule);
    border-radius: 6px;
    color: var(--lv-ink);
    font-weight: 600;
    line-height: 1.35;
}

.lv2 .lv-doc-pager a:hover {
    border-color: var(--lv-rule-strong);
}

.lv2 .lv-doc-pager a[aria-disabled="true"] {
    color: var(--lv-muted);
    pointer-events: none;
}

.lv-doc-pager a span {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--lv-muted);
}

.lv-doc-next {
    text-align: right;
}

.lv-doc-toc {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    font-size: 0.8125rem;
}

.lv-doc-toc p {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--lv-ink);
}

.lv-doc-toc ul {
    padding-left: 0.75rem;
    border-left: 1px solid var(--lv-rule);
    list-style: none;
}

.lv-doc-toc li + li {
    margin-top: 0.3rem;
}

.lv2 .lv-doc-toc a {
    color: var(--lv-text);
}

.lv2 .lv-doc-toc a:hover {
    color: var(--lv-accent);
}

@media (max-width: 1199.98px) {
    .lv-doc {
        grid-template-columns: 14rem minmax(0, 1fr);
    }

    .lv-doc-toc {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .lv-doc {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .lv-doc-side {
        position: static;
        max-height: none;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--lv-rule);
    }

    .lv-doc-pager {
        grid-template-columns: minmax(0, 1fr);
    }

    .lv-doc-next {
        text-align: left;
    }

    /* Wide tables scroll sideways inside the article instead of squeezing. */
    .lv-callouts {
        grid-template-columns: minmax(0, 1fr);
    }

    .lv-prose table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lv-doc-side summary::before {
        transition: none;
    }
}

/* ======================================================================
   FAQ (faq.jinja2)
   ====================================================================== */

.lv-faq-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: 4rem;
    align-items: start;
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* Questions */

.lv-faq {
    border-bottom: 1px solid var(--lv-rule);
}

.lv-faq details {
    border-top: 1px solid var(--lv-rule);
    scroll-margin-top: 1rem;
}

.lv-faq summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.5rem;
    gap: 1rem;
    align-items: start;
    padding-block: 1.15rem;
    cursor: pointer;
    list-style: none;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--lv-ink);
}

.lv-faq summary::-webkit-details-marker {
    display: none;
}

.lv-faq summary:hover {
    color: var(--lv-accent);
}

.lv-faq summary i {
    justify-self: end;
    margin-top: 0.15rem;
    font-size: 1.15rem;
    color: var(--lv-muted);
    transition: transform 0.15s ease;
}

.lv-faq details[open] summary i {
    transform: rotate(180deg);
}

.lv-answer {
    max-width: 68ch;
    padding-bottom: 1.4rem;
}

.lv-answer p + p {
    margin-top: 0.75rem;
}

.lv-answer a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Help aside */

.lv-help {
    position: sticky;
    top: 1.5rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--lv-rule);
    border-radius: 6px;
    background: var(--lv-surface);
}

.lv-help h2 {
    font-size: 1.0625rem;
    letter-spacing: -0.005em;
}

.lv-help ul {
    margin-top: 0.4rem;
    padding: 0;
    list-style: none;
}

.lv-help li {
    padding-block: 0.7rem;
    border-top: 1px solid var(--lv-rule);
}

.lv-help li:first-child {
    border-top: 0;
}

.lv-help a {
    font-weight: 600;
}

.lv-help p {
    margin-top: 0.15rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--lv-muted);
}

@media (max-width: 991.98px) {
    .lv-faq-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .lv-help {
        position: static;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lv-faq summary i {
        transition: none;
    }
}

/* FAQ: per-page adjustments to shared components */

.lv-page-faq .lv-page-intro {
    padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
}

.lv-page-faq .lv-lede {
    max-width: 60ch;
}

/* ======================================================================
   Support (support.jinja2)
   ====================================================================== */

/* Knowledge base */

.lv-kb-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.25rem;
}

.lv-search {
    position: relative;
    flex: 1 1 22rem;
    max-width: 34rem;
}

.lv-search i {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    transform: translateY(-50%);
    color: var(--lv-muted);
    font-size: 1.1rem;
    pointer-events: none;
}

.lv2 .lv-input, .lv2 .lv-select, .lv2 .lv-textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--lv-rule-strong);
    border-radius: 4px;
    background: var(--lv-surface);
    color: var(--lv-ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
}

.lv2 .lv-search .lv-input {
    padding-left: 2.5rem;
}

.lv2 .lv-input:focus,
.lv2 .lv-select:focus,
.lv2 .lv-textarea:focus {
    outline: 2px solid var(--lv-accent);
    outline-offset: 1px;
    border-color: var(--lv-accent);
}

.lv-kb-count {
    font-size: 0.875rem;
    color: var(--lv-muted);
}

.lv-kb {
    border-bottom: 1px solid var(--lv-rule);
}

.lv-kb details {
    border-top: 1px solid var(--lv-rule);
    scroll-margin-top: 1rem;
}

.lv-kb summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.5rem;
    gap: 0.2rem 1rem;
    padding-block: 1rem;
    cursor: pointer;
    list-style: none;
}

.lv-kb summary::-webkit-details-marker {
    display: none;
}

.lv-kb-problem {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--lv-ink);
}

.lv-kb summary:hover .lv-kb-problem {
    color: var(--lv-accent);
}

.lv-kb-area {
    grid-column: 1;
    font-size: 0.8125rem;
    color: var(--lv-muted);
}

.lv-kb summary i {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-top: 0.1rem;
    font-size: 1.15rem;
    color: var(--lv-muted);
    transition: transform 0.15s ease;
}

.lv-kb details[open] summary i {
    transform: rotate(180deg);
}

.lv-kb-body {
    max-width: 68ch;
    padding-bottom: 1.4rem;
}

.lv-kb-symptoms {
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--lv-rule-strong);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(20, 35, 45, 0.06);
    background: var(--lv-surface);
    font-size: 0.9375rem;
}

.lv-kb-symptoms b {
    font-weight: 600;
    color: var(--lv-ink);
}

.lv-kb-body > p {
    margin-top: 0.85rem;
}

.lv-kb-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--lv-muted);
}

.lv-kb-foot a {
    font-weight: 600;
}

.lv-kb-empty {
    padding-block: 1.25rem;
    border-top: 1px solid var(--lv-rule);
    color: var(--lv-text);
}

/* Request form */

.lv-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 3rem 4rem;
    align-items: start;
}

.lv-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
}

.lv-field {
    display: grid;
    gap: 0.35rem;
    align-content: start;
}

.lv-field.is-wide {
    grid-column: 1 / -1;
}

.lv-field label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--lv-ink);
}

.lv-field label span {
    font-weight: 400;
    color: var(--lv-muted);
}

.lv-hint {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--lv-muted);
}

.lv2 .lv-textarea {
    min-height: 7rem;
    resize: vertical;
}

.lv-form-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.lv2 .lv-btn[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.lv-form-note {
    font-size: 0.8125rem;
    color: var(--lv-muted);
}

.lv-form-note a {
    text-decoration: underline;
}

.lv-status-message {
    grid-column: 1 / -1;
}

.lv-status-message:empty {
    display: none;
}

.lv-status-message.is-error {
    padding: 0.75rem 1rem;
    border: 1px solid #b53b2e;
    border-radius: 6px;
    background: var(--lv-surface);
    color: var(--lv-ink);
}

.lv-sent {
    padding: 1.5rem 1.6rem;
    border: 1px solid var(--lv-rule-strong);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(20, 35, 45, 0.06);
    background: var(--lv-surface);
}

.lv-sent h3 {
    font-size: 1.125rem;
}

.lv-sent p {
    margin-top: 0.5rem;
}

.lv-sent button {
    margin-top: 1rem;
}

/* Honeypot: present for bots, hidden from people and assistive tech. */

.lv-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lv-guide {
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--lv-rule);
    border-radius: 6px;
    background: var(--lv-surface);
}

.lv-guide h3 {
    font-size: 1.0625rem;
}

.lv-guide ul {
    margin-top: 0.75rem;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.lv-guide li {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.5rem;
}

.lv-guide li + li {
    margin-top: 0.7rem;
}

.lv-guide li i {
    margin-top: 0.15rem;
    color: var(--lv-accent);
}

.lv-guide-example {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lv-rule);
    font-size: 0.875rem;
    color: var(--lv-muted);
}

.lv-guide-example b {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--lv-ink);
}

@media (max-width: 991.98px) {
    .lv-contact {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .lv-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lv-kb summary i {
        transition: none;
    }
}

/* Support: per-page adjustments to shared components */

.lv-page-support .lv-actions {
    margin-top: 1.75rem;
}

/* ======================================================================
   About (about.jinja2)
   ====================================================================== */

/* Three points under the intro */

.lv2 .lv-point-title {
    font-size: 1.0625rem;
    line-height: 1.35;
    letter-spacing: 0;
}

/* Purpose */

.lv-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2.5rem 4rem;
    align-items: start;
}

.lv-prose .lv-section-head {
    margin-bottom: 1.25rem;
}

.lv-prose p + p {
    margin-top: 1rem;
}

.lv-prose p {
    max-width: 64ch;
}

.lv-principle {
    margin: 0;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--lv-rule-strong);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(20, 35, 45, 0.06);
    background: var(--lv-surface);
}

.lv-principle p {
    font-size: 1.125rem;
    line-height: 1.55;
    font-weight: 500;
    color: var(--lv-ink);
}

.lv-principle footer {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--lv-muted);
}

/* Security and access */

/* Working model figure */

.lv-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--lv-rule);
    border-radius: 6px;
    background: #ffffff;
}

.lv-figure figcaption {
    margin-top: 0.6rem;
    font-size: 0.875rem;
    color: var(--lv-muted);
}

/* Components */

.lv-components {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 2.5rem;
    padding: 0;
    list-style: none;
}

.lv-components li {
    padding-top: 1.1rem;
    border-top: 2px solid var(--lv-ink);
}

.lv-components p {
    margin-top: 0.45rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.lv-components .lv-tech {
    margin-top: 0.6rem;
    font-size: 0.8125rem;
    color: var(--lv-muted);
}

.lv-components-note {
    margin-top: 1.75rem !important;
    max-width: 72ch;
    font-size: 0.9375rem;
    color: var(--lv-muted);
}

/* Related pages */

@media (max-width: 991.98px) {
    .lv-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .lv-components {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem 2.5rem;
    }
}

@media (max-width: 575.98px) {
    .lv-components {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* About: per-page adjustments to shared components */

.lv-page-about h1 {
    max-width: 24ch;
    text-wrap: balance;
}

.lv-page-about .lv-page-intro {
    padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 4.5rem);
}

.lv-page-about .lv-lede {
    margin-top: 1.25rem;
}