/* LockDownRadioControl pages - shared styles.  Load AFTER styles.css:
       <link rel="stylesheet" href="/css/styles.css?v=4">
       <link rel="stylesheet" href="/css/ldrc.css?v=1">
   and give the page <body class="ldrc">.

   Rules:
   - Anything that changes a site-wide class (.site-title, .btn, .gallery,
     h2, links ...) is scoped to body.ldrc, so the rest of messiter.com
     looks exactly as before.
   - New components (.ldrc-subnav, .ldrc-hero, .feature-card, .steps, .box,
     .table-scroll, .mark, .lightbox ...) are not scoped, so a page without
     body.ldrc (a Rotorflight page, say) can borrow them.
   - Every coloured panel has a SOLID background and dark text (Malcolm is
     dyslexic; pilots read this outdoors on phones). Colour never carries
     meaning alone: each mark and box also has a word and a shape.
   - Copy-paste HTML for every component: scratchpad/site/snippets.md. */

:root {
    --ldrc-ink: #1E1A14;          /* = --nav-bg: headings, dark buttons, table heads */
    --ldrc-text: #2D2416;         /* = --text-color */
    --ldrc-muted: #5A4D37;        /* captions: 7.6:1 on white */
    --ldrc-link: #6B4E0E;         /* dark gold, 7.7:1 on white (the site gold is 2.3:1) */
    --ldrc-link-hover: #8B2500;   /* = --accent-color */
    --ldrc-gold: #C9A84C;         /* = --primary-color */
    --ldrc-gold-pale: #FFF6DC;
    --ldrc-cream: #FDF8ED;
    --ldrc-panel: #FAF6EE;
    --ldrc-line: #E8DFCC;
    --ldrc-line-strong: #D3C4A2;
    --ldrc-radius: 12px;
    --ldrc-shadow: 0 2px 8px rgba(30, 26, 20, .10);
    --ldrc-gutter: 16px;
    --ldrc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* Boxes: pale solid background, dark text, strong left edge. */
    --note-bg: #E6F0F6;   --note-line: #3E6E8E;   --note-ink: #17242E;
    --tip-bg: #E3F1E1;    --tip-line: #2E7D32;    --tip-ink: #13301A;
    --warn-bg: #FFF0D0;   --warn-line: #B26B00;   --warn-ink: #3A2600;
    --safety-bg: #FBE3E0; --safety-line: #A4161A; --safety-ink: #3D0E0B;

    /* Comparison marks: word + symbol + colour. */
    --yes-bg: #DDF0DC;  --yes-ink: #1B5E20;
    --part-bg: #FFF0CC; --part-ink: #6B4A00;
    --no-bg: #F6DEDC;   --no-ink: #8A1C12;
    --na-bg: #ECE8DF;   --na-ink: #4A4234;
}

/* ===== Page frame (scoped) ===================================== */

/* Phones: a 16 px gutter instead of the site's 5 % + 1 rem (35 px). */
@media (max-width: 600px) {
    body.ldrc .container {
        width: 100%;
        padding-left: var(--ldrc-gutter);
        padding-right: var(--ldrc-gutter);
    }
}

/* The brand line in the header.  It is a <p class="site-title"> on LDRC
   pages (each page has its own <h1> in main), so give it the h1 look the
   site gives h1.site-title.  Audit 12: "LockDownRadioControl" is one long
   word and was cut off on phones; clamp() shrinks it there, <wbr> in the
   HTML lets it break between words if it still does not fit, and at
   desktop widths it is the same 2.8 rem as every other page. */
body.ldrc .site-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--nav-bg);
    line-height: 1.15;
    margin-top: 1rem;
    font-size: clamp(1.55rem, 7vw, 2.8rem);
    overflow-wrap: break-word;
}
body.ldrc .site-title a,
body.ldrc .site-title a:hover {
    color: inherit;
    text-decoration: none;
}
@media (max-width: 600px) {
    body.ldrc header { padding: 1.1rem 0 .9rem; }
    body.ldrc .site-subtitle { font-size: 1.05rem; margin-bottom: 0; }
}

/* The site's footer has an h3 that inherits the dark heading colour. */
body.ldrc footer h3 { color: var(--ldrc-cream); }
body.ldrc footer a { color: var(--ldrc-cream); text-decoration: underline; text-underline-offset: 2px; }
body.ldrc footer a:hover { color: var(--ldrc-gold); }

.ldrc-footer {
    max-width: 68ch;
    margin: 0 auto 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #3A3226;
    font-size: .95rem;
    line-height: 1.55;
}
.ldrc-footer p { margin-bottom: .6rem; }
.ldrc-footer-links { font-weight: 600; }
.ldrc-footer-links a { white-space: nowrap; }   /* a link never splits; lines break after a dot (&nbsp;&middot; in the HTML) */

/* Skip link: invisible until a keyboard user tabs to it. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: .5rem;
    z-index: 2000;
    background: #fff;
    color: var(--ldrc-ink);
    padding: .6rem 1rem;
    border: 2px solid var(--ldrc-ink);
    border-radius: 6px;
    font-weight: 600;
}
.skip-link:focus { left: .5rem; }

/* ===== LDRC sub-navigation ====================================
   Desktop: one row of pills, sticks to the top while you scroll.
   Phone: a 3 x 2 grid of big buttons under the header, not sticky
   (it would eat a fifth of the screen). Current page: filled dark,
   marked with aria-current="page". */
.ldrc-subnav {
    background: var(--ldrc-cream);
    border-bottom: 1px solid var(--ldrc-line-strong);
    padding: 0;                      /* styles.css pads every <nav> */
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 2px 6px rgba(30, 26, 20, .06);
}
.ldrc-subnav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin: 0;
    padding: .5rem 0;
}
.ldrc-subnav a {
    display: block;
    padding: .45rem .95rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--ldrc-ink);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}
.ldrc-subnav a:hover {
    background: #F1E7CF;
    border-color: var(--ldrc-line-strong);
    color: var(--ldrc-ink);
    text-decoration: none;
}
.ldrc-subnav a[aria-current="page"] {
    background: var(--ldrc-ink);
    border-color: var(--ldrc-ink);
    color: var(--ldrc-cream);
}
.ldrc-subnav a:focus-visible { outline: 3px solid var(--ldrc-link); outline-offset: 2px; }

@media (min-width: 701px) and (max-width: 960px) {
    .ldrc-subnav ul { gap: .2rem; }
    .ldrc-subnav a { padding: .45rem .7rem; font-size: .97rem; }
}
@media (max-width: 700px) {
    .ldrc-subnav { position: static; box-shadow: none; }
    .ldrc-subnav ul {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 8px 0;
    }
    .ldrc-subnav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: .35rem .25rem;
        border-radius: 8px;
        border-color: var(--ldrc-line-strong);
        background: #fff;
        font-size: .95rem;
        text-align: center;
        white-space: normal;
        line-height: 1.2;
    }
}

/* Headings jump under the sticky sub-nav, not behind it. */
@media (min-width: 701px) {
    body.ldrc main [id] { scroll-margin-top: 4.25rem; }
}

/* ===== Text (scoped; :where() keeps specificity at zero so any
   component class below overrides these without a fight) ======== */

:where(body.ldrc) main { font-size: 1.0625rem; }   /* 17 px */
:where(body.ldrc main) h1 {
    font-size: clamp(1.85rem, 5.2vw, 2.6rem);
    line-height: 1.15;
    margin: .75rem 0 .75rem;
}
:where(body.ldrc main) h2 {
    font-size: clamp(1.5rem, 4.2vw, 2rem);
    line-height: 1.2;
    margin-top: 2.5rem;
}
:where(body.ldrc main) h3 {
    font-size: clamp(1.2rem, 3.4vw, 1.4rem);
    line-height: 1.25;
    margin: 1.5rem 0 .5rem;
}
/* Playfair Display draws old-style numbers by default: "500" looks like
   "5oo" and "2020" like "2o2o". Numbers that look like letters trip a
   dyslexic reader, so headings, buttons and badges use full-height
   (lining) numbers. Playfair has them built in (OpenType lnum). */
body.ldrc :is(h1, h2, h3, h4, .site-title, .btn),
.badge { font-variant-numeric: lining-nums; }

:where(body.ldrc main) :where(ul, ol) { padding-left: 1.4rem; margin-bottom: 1rem; }
:where(body.ldrc main) li { margin-bottom: .35rem; }
:where(body.ldrc main) li > :where(ul, ol) { margin: .35rem 0 0; }
/* A readable line length for running text (about 12 words). */
:where(body.ldrc main) :where(section, .page-head, .split > div) > :where(p, ul, ol:not(.steps)) { max-width: 72ch; }

:where(body.ldrc main) a {
    color: var(--ldrc-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
:where(body.ldrc main) a:hover { color: var(--ldrc-link-hover); text-decoration-thickness: 2px; }
:where(body.ldrc main) a:focus-visible { outline: 3px solid var(--ldrc-link); outline-offset: 2px; border-radius: 2px; }

:where(body.ldrc main) code {
    font-family: var(--ldrc-mono);
    font-size: .9em;
    background: #F3EEE2;
    border: 1px solid var(--ldrc-line);
    border-radius: 4px;
    padding: .05em .35em;
    overflow-wrap: anywhere;
}
:where(body.ldrc main) kbd {
    font-family: var(--ldrc-mono);
    font-size: .88em;
    background: #fff;
    border: 1px solid var(--ldrc-line-strong);
    border-bottom-width: 3px;
    border-radius: 5px;
    padding: .05em .4em;
}

body.ldrc main section { margin-bottom: 2.5rem; }

.lead {
    font-size: 1.2rem;
    line-height: 1.55;
    color: var(--ldrc-text);
}
.muted, .small { color: var(--ldrc-muted); }
.small { font-size: .92rem; }
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* Page title block for pages that are not the overview. */
.page-head { margin: .25rem 0 2rem; }
.page-head h1 { margin-top: .25rem; }
/* The site menu button (☰): a full-size tap target on phones. */
body.ldrc .mobile-nav-toggle { min-width: 48px; min-height: 44px; }
/* main.container loses main's top padding to .container's, so give the title room under the sub-nav. */
body.ldrc main > .page-head:first-child { margin-top: 1.75rem; }
.page-head .lead { margin-bottom: 1rem; }

/* "On this page" list for long pages (build guide, help). */
.toc {
    background: var(--ldrc-panel);
    border: 1px solid var(--ldrc-line);
    border-radius: var(--ldrc-radius);
    padding: 1rem 1.25rem .5rem;
    margin: 1rem 0 2rem;
}
.toc h2 {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    border: 0;
    margin: 0 0 .5rem;
    padding: 0;
}
.toc ol, .toc ul {
    columns: 2 15rem;
    column-gap: 2rem;
    padding-left: 1.4rem;
    margin: 0 0 .5rem;
}
.toc li { break-inside: avoid; margin-bottom: .4rem; }

/* Small labels: "Version 2", "New", "Only on LDRC". Always a word. */
.badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.3;
    padding: .12rem .55rem;
    border-radius: 999px;
    background: var(--ldrc-ink);
    color: var(--ldrc-cream);
    vertical-align: middle;
    white-space: nowrap;
}
.badge.gold   { background: var(--ldrc-gold); color: var(--ldrc-ink); }
.badge.unique { background: var(--ldrc-gold-pale); color: #5A3F00; border: 1px solid #C79B2E; }
.badge.light  { background: #fff; color: var(--ldrc-ink); border: 1px solid var(--ldrc-line-strong); }

/* ===== Buttons (match the site, but readable) ====================
   The site's gold button has cream text (2.2:1). On LDRC pages the gold
   button keeps its gold and gets dark text (7.6:1); the others keep
   light text. All are at least 44 px tall for fingers. */
body.ldrc .btn {
    color: var(--ldrc-ink);
    font-weight: 600;
    line-height: 1.35;
    min-height: 44px;
    padding: .6rem 1.25rem;
    border-radius: 6px;
    border: 2px solid transparent;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
}
body.ldrc .btn:hover { background-color: #DCC170; color: var(--ldrc-ink); text-decoration: none; }
body.ldrc .btn:focus-visible { outline: 3px solid var(--ldrc-ink); outline-offset: 2px; }
body.ldrc .btn-secondary { color: var(--ldrc-cream); }
body.ldrc .btn-secondary:hover { background-color: #4E4332; color: var(--ldrc-cream); }
body.ldrc .btn-accent { color: var(--ldrc-cream); }
body.ldrc .btn-accent:hover { background-color: #6E1D00; color: var(--ldrc-cream); }
.btn.btn-dark,
body.ldrc .btn.btn-dark { background-color: var(--ldrc-ink); color: var(--ldrc-cream); }
.btn.btn-dark:hover,
body.ldrc .btn.btn-dark:hover { background-color: #3A3226; color: var(--ldrc-cream); }
.btn.btn-outline,
body.ldrc .btn.btn-outline { background-color: #fff; color: var(--ldrc-ink); border: 2px solid var(--ldrc-ink); }
.btn.btn-outline:hover,
body.ldrc .btn.btn-outline:hover { background-color: var(--ldrc-cream); color: var(--ldrc-ink); }
.btn.btn-lg,
body.ldrc .btn.btn-lg { font-size: 1.1rem; padding: .75rem 1.5rem; min-height: 52px; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.25rem 0;
}
@media (max-width: 480px) {
    .btn-row .btn { flex: 1 1 100%; }
}

/* ===== Hero ======================================================
   Text first (the action), picture second. Two columns on a desktop,
   stacked on a phone. Solid cream panel with the site's gold edge. */
.ldrc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2rem;
    align-items: center;
    background: var(--ldrc-panel);
    border: 1px solid var(--ldrc-line);
    border-left: 6px solid var(--ldrc-gold);
    border-radius: var(--ldrc-radius);
    padding: 2rem;
    margin: .5rem 0 2.5rem;
}
.ldrc-hero h1 { margin-top: 0; }
.ldrc-hero .lead { margin-bottom: 0; }
.ldrc-hero .btn-row { margin-bottom: 0; }
.ldrc-hero figure { margin: 0; }
@media (max-width: 820px) {
    .ldrc-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        padding: 1.25rem 1.1rem;
        border-left-width: 5px;
    }
}

/* ===== Figures ================================================== */
:where(body.ldrc main) figure { margin: 1.5rem 0; }
figure > img,
figure > a > img,
figure > picture > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
figcaption {
    font-size: .95rem;
    line-height: 1.45;
    color: var(--ldrc-muted);
    margin-top: .5rem;
}
figure.narrow { max-width: 460px; }
figure.center { margin-left: auto; margin-right: auto; }
figure.center figcaption { text-align: center; }
/* A phone screenshot: never wider than a phone. */
figure.phone-shot { max-width: 300px; }
figure.phone-shot img { border-radius: 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }

/* A transmitter screen render (800 x 480): a dark bezel makes it read as a screen. */
img.screen {
    border: 6px solid #111;
    border-radius: 10px;
    background: #111;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
/* A real photograph. */
img.photo { box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }

/* Text and a picture side by side; stacked on a phone (text first). */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    margin: 1.5rem 0;
}
.split > figure { margin: 0; }
.split.reverse > :first-child { order: 2; }
@media (max-width: 760px) {
    .split { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .split.reverse > :first-child { order: 0; }
}

/* A picture you can tap to enlarge (js/ldrc.js opens the lightbox).
   The small magnifier badge tells phone users it can be enlarged. */
a.zoom {
    display: block;
    position: relative;
    cursor: zoom-in;
    border-radius: 8px;
}
body.ldrc a.zoom { text-decoration: none; }
a.zoom::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1E1A14 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDF8ED' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    border: 2px solid #FDF8ED;
    pointer-events: none;
}
a.zoom:focus-visible { outline: 3px solid var(--ldrc-link); outline-offset: 3px; }

/* A 16:9 video (YouTube iframe or <video>). */
.video {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 1.5rem 0;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.video iframe, .video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ===== Feature cards ============================================
   A picture on top, a heading, two or three short lines, a "more" link.
   Screen renders are 800 x 480 (5:3), so the picture box is 5:3. */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1.25rem;
    margin: 1.25rem 0 2rem;
}
.feature-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ldrc-line);
    border-radius: var(--ldrc-radius);
    box-shadow: var(--ldrc-shadow);
    overflow: hidden;
}
.feature-card > figure,
.feature-card > .media {
    margin: 0;
    background: #111;
}
.feature-card > figure img,
.feature-card > .media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    border-radius: 0;
}
.feature-card > figure a.zoom { border-radius: 0; }
/* A phone screenshot in a card: show the top of the page, uncropped sideways. */
.feature-card.phone > figure img,
.feature-card.phone > .media img { object-position: top; }
/* A photo or picture with a light background. */
.feature-card.light > figure,
.feature-card.light > .media { background: var(--ldrc-panel); }
.feature-card .card-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
    padding: 1rem 1.15rem 1.15rem;
}
.feature-card h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.feature-card p { margin: 0; max-width: none; }
.feature-card ul { margin: 0; }
.feature-card .more { margin-top: auto; padding-top: .35rem; font-weight: 600; }
/* Cards without pictures (for short lists of reasons). */
.feature-card.text-only { border-top: 5px solid var(--ldrc-gold); }

/* ===== Gallery ==================================================
   Thumbnails cropped to a common shape (the lightbox shows the whole
   picture). Use .gallery.phones for portrait phone screenshots and
   .gallery.natural to keep each picture's own shape. */
body.ldrc .gallery,
.ldrc-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 1rem;
    margin: 1rem 0 2rem;
}
.gallery > figure {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--ldrc-line);
    border-radius: 10px;
    box-shadow: var(--ldrc-shadow);
}
.gallery > figure img {
    aspect-ratio: 5 / 3;
    object-fit: cover;
    border-radius: 6px;
    background: #111;
}
.gallery > figure figcaption { font-size: .9rem; margin-top: .45rem; padding: 0 .15rem; }
.gallery.natural > figure img { aspect-ratio: auto; object-fit: contain; }
.gallery.phones,
body.ldrc .gallery.phones { grid-template-columns: repeat(auto-fill, minmax(min(44%, 170px), 1fr)); }
.gallery.phones > figure img { aspect-ratio: 6 / 13; object-position: top; border-radius: 12px; }
.gallery.photos > figure img { aspect-ratio: 4 / 3; }

/* ===== Note / tip / warning / safety boxes ======================
   The first line names the kind of box in words ("Note", "Safety"),
   with a shape: circle = note, tick = tip, triangle = warning,
   octagon = safety. */
.box {
    background: var(--note-bg);
    color: var(--note-ink);
    border: 1px solid var(--note-line);
    border-left-width: 6px;
    border-radius: 8px;
    padding: .9rem 1.1rem;
    margin: 1.25rem 0;
    max-width: 80ch;
}
.box > :last-child { margin-bottom: 0; }
.box p { margin-bottom: .6rem; }
.box ul, .box ol { margin-bottom: .6rem; }
.box a { color: inherit; text-decoration: underline; }
.box-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-body);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
    margin: 0 0 .4rem;
    border: 0;
    padding: 0;
}
.box-title::before {
    content: "i";
    content: "i" / "";
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--note-line);
    color: #fff;
    font: 700 1rem/1 Georgia, serif;
}
.box.note { background: var(--note-bg); color: var(--note-ink); border-color: var(--note-line); }

.box.tip { background: var(--tip-bg); color: var(--tip-ink); border-color: var(--tip-line); }
.box.tip .box-title::before { content: "\2713"; content: "\2713" / ""; background: var(--tip-line); font-family: var(--font-body); }

.box.warning { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.box.warning .box-title::before {
    content: "!";
    content: "!" / "";
    background: var(--warn-line);
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    padding-top: .3rem;
    font-family: var(--font-body);
    font-size: .95rem;
}

.box.safety { background: var(--safety-bg); color: var(--safety-ink); border-color: var(--safety-line); border-width: 2px 2px 2px 8px; }
.box.safety .box-title::before {
    content: "!";
    content: "!" / "";
    background: var(--safety-line);
    border-radius: 0;
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
    font-family: var(--font-body);
}

/* ===== Build steps ==============================================
   <ol class="steps"> with one <li> per big step: a large number, a
   heading, short lines, maybe a picture, and a "Check:" line saying
   what you should see before going on. To continue numbering in a
   second list: <ol class="steps" style="counter-reset: step 6">. */
ol.steps {
    list-style: none;
    counter-reset: step;
    margin: 1.5rem 0;
    padding: 0;
}
ol.steps > li {
    counter-increment: step;
    position: relative;
    background: #fff;
    border: 1px solid var(--ldrc-line);
    border-radius: var(--ldrc-radius);
    box-shadow: var(--ldrc-shadow);
    padding: 1.1rem 1.35rem 1.15rem 5rem;
    margin: 0 0 1rem;
}
ol.steps > li::before {
    content: counter(step);
    position: absolute;
    left: 1.1rem;
    top: 1rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--ldrc-ink);
    color: var(--ldrc-cream);
    font: 700 1.4rem/2.8rem var(--font-body);
    text-align: center;
}
ol.steps > li > :last-child { margin-bottom: 0; }
ol.steps > li > h3,
ol.steps .step-title {
    font-size: 1.3rem;
    line-height: 1.25;
    margin: .45rem 0 .6rem;
}
ol.steps > li > p,
ol.steps > li > ul,
ol.steps > li > ol { max-width: 72ch; }
ol.steps > li > figure { margin: 1rem 0; max-width: 640px; }
ol.steps .time {
    display: inline-block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ldrc-muted);
    margin: -.2rem 0 .6rem;
}
/* "Check:" what you should see now. Tick shape + the word. */
.check {
    background: var(--tip-bg);
    color: var(--tip-ink);
    border-left: 5px solid var(--tip-line);
    border-radius: 6px;
    padding: .55rem .8rem;
    margin: .75rem 0;
}
.check strong:first-child::before { content: "\2713\00a0"; content: "\2713\00a0" / ""; }
/* A finished step can be ticked off on the page (js adds nothing; plain CSS). */
ol.steps > li.done::before { content: "\2713"; background: var(--tip-line); }

@media (max-width: 600px) {
    ol.steps > li {
        display: grid;
        grid-template-columns: 2.5rem minmax(0, 1fr);
        column-gap: .75rem;
        padding: 1rem;
    }
    ol.steps > li::before {
        position: static;
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
        line-height: 2.5rem;
    }
    ol.steps > li > * { grid-column: 1 / -1; }
    ol.steps > li > h3:first-child,
    ol.steps > li > .step-title:first-child {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        margin: 0;
    }
    ol.steps > li > h3:first-child + *,
    ol.steps > li > .step-title:first-child + * { margin-top: .75rem; }
    ol.steps > li > h3:first-child + .time { margin-top: .6rem; }
}

/* ===== Tables: parts, comparison, specifications ================
   Wrap every table in <div class="table-scroll" tabindex="0" role="region"
   aria-label="...">. On a phone the table slides sideways and its first
   column stays put. js/ldrc.js adds a "slide sideways" hint when needed. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0 1.5rem;
    background: #fff;
    border: 1px solid var(--ldrc-line-strong);
    border-radius: 10px;
}
.table-scroll:focus-visible { outline: 3px solid var(--ldrc-link); outline-offset: 2px; }
.table-scroll .table-responsive { overflow: visible; }  /* scripts.js wraps tables; keep one scroller */
.table-scroll table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .97rem;
    line-height: 1.45;
}
.table-scroll th,
.table-scroll td {
    padding: .6rem .8rem;
    text-align: left;
    vertical-align: top;
    background: #fff;
    border-bottom: 1px solid var(--ldrc-line);
}
.table-scroll thead th {
    background: var(--ldrc-ink);
    color: var(--ldrc-cream);
    font-weight: 600;
    vertical-align: bottom;
}
.table-scroll tbody tr:nth-child(even) > * { background: #FBF8F1; }
.table-scroll tbody tr:last-child > * { border-bottom: 0; }
.table-scroll tbody th { font-weight: 600; }
.table-scroll tfoot td,
.table-scroll tfoot th {
    background: var(--ldrc-panel);
    font-weight: 700;
    border-top: 2px solid var(--ldrc-line-strong);
    border-bottom: 0;
}
.table-scroll .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-scroll .nowrap { white-space: nowrap; }
.table-scroll td small, .table-scroll th small { display: block; color: var(--ldrc-muted); font-weight: 400; font-size: .85rem; }
.table-scroll table a { color: var(--ldrc-link); }

/* Sticky first column (parts, compare, specs). */
table.parts tr > :first-child,
table.compare tr > :first-child,
table.specs tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: inset -1px 0 0 var(--ldrc-line-strong);
}
table.parts thead tr > :first-child,
table.compare thead tr > :first-child,
table.specs thead tr > :first-child { z-index: 2; }

/* Parts list. */
table.parts { min-width: 680px; }
table.parts tr > :first-child { min-width: 9.5rem; max-width: 13rem; }
table.parts tr.optional > * { color: var(--ldrc-muted); }
table.parts tr.group > * {
    box-shadow: none;
    background: var(--ldrc-panel) !important;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--ldrc-ink);
    border-top: 2px solid var(--ldrc-line-strong);
}

/* Comparison. The LDRC column is pale gold so the eye finds it; the
   marks say Yes / Partly / No in words with a symbol. */
table.compare { min-width: 620px; }
table.compare tr > :first-child { min-width: 10rem; max-width: 15rem; }
table.compare thead th.us { background: var(--ldrc-gold); color: var(--ldrc-ink); }
table.compare td.us { background: var(--ldrc-gold-pale) !important; }
table.compare td { min-width: 7.5rem; }
.cell-note {
    display: block;
    font-size: .85rem;
    font-weight: 400;
    color: var(--ldrc-muted);
    margin-top: .3rem;
    line-height: 1.35;
}

/* Specification table (key / value, or V1 / V2 columns). It fits a phone
   screen by wrapping; add class="wide" to a table with many columns so it
   slides sideways instead. */
table.specs { min-width: 0; }
.table-scroll table.wide { min-width: 640px; }
table.specs tr > :first-child { min-width: 9rem; max-width: 14rem; }

/* Yes / Partly / No / Not applicable. */
.mark {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .12rem .6rem .12rem .3rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.3;
    white-space: nowrap;
}
.mark::before {
    display: inline-grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    color: #fff;
    font-size: .78rem;
    line-height: 1;
}
.mark.yes  { background: var(--yes-bg);  color: var(--yes-ink); }
.mark.part { background: var(--part-bg); color: var(--part-ink); }
.mark.no   { background: var(--no-bg);   color: var(--no-ink); }
.mark.na   { background: var(--na-bg);   color: var(--na-ink); }
.mark.yes::before  { content: "\2713"; content: "\2713" / ""; background: var(--yes-ink); }
.mark.part::before { content: "~";     content: "~" / "";     background: var(--part-ink); font-size: .95rem; }
.mark.no::before   { content: "\2715"; content: "\2715" / ""; background: var(--no-ink); }
.mark.na::before   { content: "\2013"; content: "\2013" / ""; background: var(--na-ink); }

/* The "slide sideways" hint js/ldrc.js puts above a table that is wider than the screen. */
.scroll-hint {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ldrc-muted);
    margin: 1rem 0 -.6rem;
}
.scroll-hint::before { content: "\2194\00a0"; content: "\2194\00a0" / ""; }

/* ===== Commands (build guide) =================================== */
/* js/ldrc.js wraps each pre.cmd in .cmd-wrap and adds a Copy tab on top. */
.cmd-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: .25rem 0 1.25rem;
}
pre.cmd {
    background: var(--ldrc-ink);
    color: var(--ldrc-cream);
    font-family: var(--ldrc-mono);
    font-size: .92rem;
    line-height: 1.5;
    padding: .9rem 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: .75rem 0 1.25rem;
    white-space: pre;
}
.cmd-wrap pre.cmd { margin: 0; width: 100%; border-top-right-radius: 0; }
pre.cmd code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
/* On a phone a long command was cut off mid-word ("git clone https://github.com/Mmessi").
   Wrap it inside the box instead, and indent the wrapped part so it reads as
   the same command, not a new one. Copy still copies each command as one line. */
@media (max-width: 600px) {
    pre.cmd { white-space: pre-wrap; overflow-wrap: anywhere; text-indent: 2ch hanging each-line; }
}
/* An option and its value never split ("--" at a line end, "flash_size" on the next). */
pre.cmd .nw { white-space: nowrap; }
/* A command written as one long line wraps at every width, so none of it hides off the edge. */
pre.cmd.wrap { white-space: pre-wrap; overflow-wrap: anywhere; text-indent: 2ch hanging each-line; }
.copy-btn {
    min-height: 36px;
    padding: .3rem .9rem;
    border-radius: 6px 6px 0 0;
    border: 0;
    background: #4E4332;
    color: var(--ldrc-cream);
    font: 600 .85rem/1.2 var(--font-body);
    cursor: pointer;
}
.copy-btn:hover { background: #665840; }
.copy-btn:focus-visible { outline: 3px solid var(--ldrc-gold); outline-offset: 2px; }

/* ===== Lightbox (built by js/ldrc.js) ===========================
   Solid dark bars top and bottom so the words are always readable:
   top = "3 of 12" and Close; bottom = caption, Previous, Next. */
html.lb-open, html.lb-open body { overflow: hidden; }
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: #0E0C09;
    color: var(--ldrc-cream);
    font-family: var(--font-body);
    animation: lb-fade .15s ease-out;
}
.lightbox[hidden] { display: none; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lightbox { animation: none; } }

.lb-top, .lb-bottom {
    background: var(--ldrc-ink);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
}
.lb-top {
    justify-content: space-between;
    padding-top: max(.5rem, env(safe-area-inset-top));
    border-bottom: 1px solid #3A3226;
}
.lb-bottom {
    padding-bottom: max(.6rem, env(safe-area-inset-bottom));
    border-top: 1px solid #3A3226;
}
.lb-count { font-weight: 700; color: #E9CF86; font-size: 1rem; }
.lb-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: .75rem;
    overflow: hidden;
}
.lb-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    background: #000;
    user-select: none;
    -webkit-user-drag: none;
}
.lb-caption {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: 1rem;
    line-height: 1.45;
    max-height: 7.5em;
    overflow-y: auto;
}
.lb-btn {
    flex: none;
    min-width: 48px;
    min-height: 48px;
    padding: .4rem .9rem;
    border-radius: 999px;
    border: 2px solid var(--ldrc-cream);
    background: #2C261D;
    color: var(--ldrc-cream);
    font: 600 1rem/1.2 var(--font-body);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}
.lb-btn:hover { background: #4E4332; }
.lb-btn:focus-visible { outline: 3px solid #E9CF86; outline-offset: 2px; }
.lb-btn[hidden] { display: none; }
.lb-btn .lb-ico { font-size: 1.35rem; line-height: 1; }
@media (max-width: 600px) {
    .lb-bottom { flex-wrap: wrap; justify-content: space-between; }
    .lb-caption { order: -1; flex: 1 1 100%; font-size: .95rem; max-height: 6em; }
    .lb-stage { padding: .4rem; }
}

/* ===== Printing (the build guide is meant to be printable) ===== */
@media print {
    nav, .ldrc-subnav, footer, .back-to-top, .lightbox, .copy-btn,
    .skip-link, .scroll-hint, .mobile-nav-toggle { display: none !important; }
    body.ldrc { font-size: 11pt; }
    body.ldrc header { padding: .5rem 0; border: 0; }
    .ldrc-hero, .feature-card, ol.steps > li, .box, .table-scroll { box-shadow: none; }
    /* Apple's PDF renderer (Preview, Quick Look, Chrome on a Mac) draws a shadow as a solid grey block. */
    body.ldrc *, body.ldrc *::before, body.ldrc *::after { box-shadow: none !important; text-shadow: none !important; }
    /* A long step may run on to the next page (keeping every step whole
       left half-pages empty); its pictures, checks, boxes and commands
       never split, and a step's title stays with its first lines. */
    figure, .box, .check, pre.cmd, tr, .feature-card { break-inside: avoid; }
    ol.steps > li { break-inside: auto; orphans: 3; widows: 3; }
    .cmd-wrap, :where(body.ldrc main) pre.cmd { break-before: avoid; }   /* the command stays with the line that asks for it */
    table.parts tr.group { break-after: avoid; }                          /* a group heading row is never left alone */
    h2, h3, ol.steps .time { break-after: avoid; }
    /* Paper is read close up: 12 pt text, tighter step cards, 10 pt tables. */
    :where(body.ldrc) main { font-size: 12pt; }
    ol.steps > li { padding: .7rem 1rem .75rem 3.6rem; margin-bottom: .7rem; }
    /* Background graphics are off by default when printing: a black ring and black digits, not cream on nothing. */
    ol.steps > li::before { left: .7rem; top: .7rem; width: 2.2rem; height: 2.2rem; font-size: 1.15rem; line-height: calc(2.2rem - 4px);
                            background: #fff; color: #000; border: 2px solid #000; box-sizing: border-box; }
    /* The same for the boxes' info / tick / warning icons: a white glyph on a shape that does not print. */
    body.ldrc .box .box-title::before { background: #fff !important; color: #000; border: 2px solid currentColor; box-sizing: border-box;
                                        clip-path: none; border-radius: 50%; padding-top: 0; }
    .table-scroll table { font-size: 10pt; }
    a.zoom::after { display: none; }
    .table-scroll { overflow: visible; border: 0; }
    .table-scroll table { min-width: 0 !important; }
    table.parts tr > :first-child, table.compare tr > :first-child, table.specs tr > :first-child { position: static; box-shadow: none; }
    pre.cmd { white-space: pre-wrap; overflow-wrap: anywhere; text-indent: 2ch hanging each-line; background: #fff; color: #000; border: 1px solid #999; }

    /* Pictures print smaller: at full column width the build guide came
       to 43 A4 pages. Single pictures: just over half the width, centred. */
    body.ldrc main figure { max-width: 55%; margin-left: auto; margin-right: auto; }
    body.ldrc main figure.phone-shot { max-width: 28%; }
    /* Wiring diagrams (SVG) stay full width so their labels can be read. */
    body.ldrc main figure:has(> a > img[src$=".svg"], > img[src$=".svg"]) { max-width: 100%; }
    /* Pictures inside a gallery, a card or the hero already share the
       width; galleries get more, smaller tiles. (A .split block is one
       column on A4, so its picture takes the 55 % rule above.) */
    body.ldrc main :is(.gallery, .feature-card, .ldrc-hero) figure { max-width: none; margin-left: 0; margin-right: 0; }
    body.ldrc .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.ldrc .gallery.phones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.ldrc main .gallery.gallery-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :where(body.ldrc main) a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; word-break: break-all; }
    :where(body.ldrc main) a.btn[href^="http"]::after { content: ""; }
}