/* Every guide's server and platform pickers and their per-server and per-platform variants, the sticky bar,
   screenshots, fact tables, and the table of contents. Loaded after guides.css. Bump ?v= on every change. */
    .server-picker, .platform-picker {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
      margin: 0 0 2rem; font-size: 0.95rem; color: var(--cream-faint);
    }
    .server-picker button, .platform-picker button {
      font: inherit; font-weight: 600; color: var(--cream);
      background: var(--card-navy); border: 1px solid var(--border);
      border-radius: 999px; padding: 6px 16px; cursor: pointer;
    }
    .server-picker button[aria-pressed="true"], .platform-picker button[aria-pressed="true"] { border-color: var(--link); color: var(--link); }
    .server-picker + .platform-picker { margin-top: -1.25rem; }
    .guide-toc ol { list-style: none; padding: 0; margin: 0 0 0.5rem; columns: 2; column-gap: 24px; font-size: 0.98rem; line-height: 1.5; }
    .guide-toc li { break-inside: avoid; margin-bottom: 0.35rem; }
    @media (max-width: 575px) { .guide-toc ol { columns: 1; } }
    [data-theme="retro"] .guide-toc ol { font-size: 12px; }
    /* Retro's small links in the contents and the Next list sat under 24px apart (WCAG 2.5.8): give each
       one a target at least 24px tall. */
    [data-theme="retro"] .guide-toc a,
    [data-theme="retro"] .guide-band .prose #next + ul a { display: inline-block; padding: 4px 0; }
    html[data-server="plex"] .srv:not([data-server="plex"]),
    html[data-server="jellyfin"] .srv:not([data-server="jellyfin"]),
    html[data-server="emby"] .srv:not([data-server="emby"]) { display: none; }
    /* Platform variants: a block names its platforms in data-platform, a space-separated list, and shows
       only under them. With no platform chosen (All, or no JavaScript) every block shows, except inside a
       .plat-set: a sentence written once per platform keeps one version for All, tagged "all", and with no
       platform chosen only that version shows. */
    html[data-platform="tvos"] .plat:not([data-platform~="tvos"]),
    html[data-platform="macos"] .plat:not([data-platform~="macos"]),
    html[data-platform="ios"] .plat:not([data-platform~="ios"]),
    html[data-platform="visionos"] .plat:not([data-platform~="visionos"]),
    html:not([data-platform]) .plat-set > .plat:not([data-platform~="all"]) { display: none; }

    .guide-band .prose figure { margin: 1.75rem 0 2.25rem; }
    .guide-band .prose figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); }
    .guide-band .prose figure.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .guide-band .prose figure.pair figcaption { grid-column: 1 / -1; }
    /* Portrait iPad screenshots: no wider than 400px, centered, so they don't run down the column. */
    .guide-band .prose figure.portrait { max-width: 400px; margin-left: auto; margin-right: auto; }
    /* Three across (the themes) from 576px, one per row below it; each with its name under it. */
    .guide-band .prose figure.pair.three { grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 575px) { .guide-band .prose figure.pair.three { grid-template-columns: 1fr; } }
    .guide-band .prose figure .pair-label { display: block; margin-top: 8px; font-size: 0.92rem; font-weight: 600; color: var(--cream); }
    /* Click to enlarge (js/lightbox.js): the screenshot links, and the one dialog they open. The image fits
       90vw by 80vh with its caption under it, as wide as the image; no animation. */
    .guide-band .prose a.enlarge { display: block; cursor: zoom-in; }
    .guide-band .prose figure.is-missing a.enlarge { display: none; }
    .lightbox { margin: auto; padding: 0; border: 0; background: none; color: var(--cream); max-width: none; max-height: calc(100vh - 16px); overflow: auto; } /* margin: styles.css resets it, and auto centers a modal */
    /* Literal colors: ::backdrop doesn't reliably inherit the palette's custom properties. --bg-midnight at 90%. */
    .lightbox::backdrop { background: rgba(27, 24, 48, 0.9); }
    .lightbox-figure { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px; background: var(--card-navy); border: 1px solid var(--control-border); border-radius: var(--radius-sm); }
    .lightbox-close { align-self: flex-end; width: 36px; height: 36px; padding: 0; border-radius: 50%; font: inherit; font-size: 1.4rem; line-height: 1; color: var(--cream); background: var(--bg-navy); border: 1px solid var(--control-border); cursor: pointer; }
    .lightbox-close:hover { border-color: var(--control-border-strong); }
    .lightbox-image img { display: block; width: auto; height: auto; max-width: calc(90vw - 26px); max-height: 80vh; object-fit: contain; }
    .lightbox-figure figcaption { width: 0; min-width: 100%; font-size: 0.95rem; line-height: 1.45; color: var(--cream); }
    /* The sticky bar (js/guide-server.js): the homepage's .sticky-bar, holding a Server and a
       Platform select and Download Now, always on one line. The labels show from 576px; below that they're
       hidden but still name their selects. */
    .guide-bar .sticky-bar-inner > .guide-bar-controls { flex-wrap: nowrap; justify-content: flex-end; gap: 8px; min-width: 0; }
    .guide-bar-label { font-size: 0.85rem; color: var(--cream-faint); white-space: nowrap; }
    .guide-bar-select { -webkit-appearance: none; appearance: none; background: transparent; color: var(--cream); border: 1px solid var(--control-border); border-radius: 4px; padding: 4px 8px; font: inherit; font-size: 0.9rem; cursor: pointer; }
    .guide-bar-select option { color: #000; }
    .guide-bar .btn-primary { flex: 0 0 auto; max-width: none; white-space: nowrap; }
    @media (max-width: 575px) {
      .guide-bar-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    }
    /* Narrow phones, in Carter's order: compact the selects (and the spacing and the button's padding,
       never its text), then shrink the wordmark (fixed height, no max-width clamp, its link unshrinkable:
       the W1 rules that keep its 3.107 aspect), then below 360px drop it. */
    @media (max-width: 400px) {
      .guide-bar.sticky-bar { padding: 8px 10px; }
      .guide-bar .sticky-bar-inner { gap: 6px; }
      .guide-bar .sticky-bar-inner > .guide-bar-controls { gap: 6px; }
      .guide-bar-select { padding: 3px 5px; font-size: 0.75rem; }
      .guide-bar .btn-primary { padding: 7px 10px; font-size: 0.8rem; gap: 4px !important; }
      .guide-bar .sticky-bar-logo { height: 16px; width: auto; max-width: none; }
    }
    @media (max-width: 359px) {
      .guide-bar .sticky-bar-inner > a { display: none; }
    }
    .guide-band .prose figcaption { font-size: 0.92rem; color: var(--cream-faint); margin-top: 10px; }
    .guide-band .prose figure.is-missing picture { display: none; }
    .guide-band .prose figure.is-missing::before {
      content: "Screenshot " attr(data-id); display: block;
      border: 1px dashed var(--border); border-radius: var(--radius-sm);
      padding: 28px 20px; text-align: center; color: var(--cream-faint); font-size: 0.9rem;
    }
    .guide-band .prose figure.pair.is-missing::before { grid-column: 1 / -1; }

    /* Getting started: three numbered steps, then one video per platform (two across under All). */
    .guide-band .prose ol.guide-steps { list-style: none; counter-reset: step; padding-left: 0; margin: 0 0 1.75rem; }
    .guide-band .prose .guide-steps li { counter-increment: step; position: relative; padding-left: 3.1rem; margin-bottom: 1.1rem; }
    .guide-band .prose .guide-steps li::before {
      content: counter(step); position: absolute; left: 0; top: 0.05rem;
      width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--link);
      display: flex; align-items: center; justify-content: center; color: var(--link); font-weight: 700; font-size: 1rem;
    }
    .guide-band .prose .guide-steps .guide-step { display: block; color: var(--cream); font-size: 1.15rem; }
    /* A video on its own keeps its shape, from its width and height attributes, so nothing shifts as the
       poster loads; the iPad's portrait one is capped and centered. Two across (All, on a wide enough
       column), each sits in a 16:9 frame: the landscape videos line up at one height and the portrait one
       is pillarboxed instead of stretching its row. */
    .guide-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px 16px; margin: 0 0 2rem; container-type: inline-size; }
    .guide-band .prose .guide-videos figure { margin: 0; min-width: 0; }
    .guide-video video { display: block; width: 100%; height: auto; background: #000; border: 1px solid var(--border); border-radius: var(--radius-sm); }
    .guide-band .prose .guide-videos figure[data-platform="ios"] { justify-self: center; width: 100%; max-width: 400px; }
    @container (min-width: 616px) {
      html:not([data-platform]) .guide-band .prose .guide-videos figure[data-platform="ios"] { max-width: none; }
      html:not([data-platform]) .guide-video video { aspect-ratio: 16 / 9; object-fit: contain; }
    }

    .guide-band .prose table { width: 100%; font-size: 0.98rem; line-height: 1.5; color: var(--cream); margin-bottom: 1.6rem; border-collapse: collapse; }
    .guide-band .prose th { text-align: left; color: var(--subhead); font-weight: 600; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
    .guide-band .prose td { vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border); }
    .guide-band .prose td:first-child { white-space: nowrap; font-weight: 600; }
    @media (max-width: 575px) {
      .guide-band .prose td:first-child, .guide-band .prose th { white-space: normal; }
    }

    [data-theme="retro"] .server-picker, [data-theme="retro"] .platform-picker { font-family: Verdana, Arial, sans-serif; font-size: 12px; color: var(--r-faint); margin-bottom: 14px; }
    [data-theme="retro"] .server-picker button, [data-theme="retro"] .platform-picker button { font-size: 12px; color: var(--r-text); background: var(--r-shade); border: 1px solid var(--r-rule-soft); border-radius: 0; padding: 3px 10px; }
    [data-theme="retro"] .server-picker button[aria-pressed="true"], [data-theme="retro"] .platform-picker button[aria-pressed="true"] { border-color: var(--r-brand); color: var(--r-brand); }
    [data-theme="retro"] .server-picker + .platform-picker { margin-top: -8px; }
    [data-theme="retro"] .guide-band .prose figure img { border-radius: 0; border: 1px solid var(--r-rule-soft); }
    [data-theme="retro"] .guide-band .prose figcaption { font-family: Verdana, Arial, sans-serif; font-size: 11px; color: var(--r-faint); }
    [data-theme="retro"] .guide-band .prose figure .pair-label { font-family: Verdana, Arial, sans-serif; font-size: 11px; color: var(--r-text); margin-top: 4px; }
    [data-theme="retro"] .guide-bar-label { font-family: Verdana, Arial, sans-serif; font-size: 11px; color: var(--r-text); }
    [data-theme="retro"] .guide-bar-select { background: var(--r-paper); color: var(--r-text); border: 1px inset var(--r-gray); border-radius: 0; font-family: Verdana, Arial, sans-serif; font-size: 11px; padding: 2px 4px; }
    @media (max-width: 400px) {
      [data-theme="retro"] .guide-bar.sticky-bar { padding: 6px 10px; }
      [data-theme="retro"] .guide-bar .btn-primary { padding: 4px 8px; font-size: 11px; }
      [data-theme="retro"] .guide-bar .sticky-bar-logo { height: 16px; }
    }
    [data-theme="retro"] .lightbox { color: var(--r-text); }
    [data-theme="retro"] .lightbox::backdrop { background: rgba(0, 0, 0, 0.6); }
    [data-theme="retro"] .lightbox-figure { background: var(--r-paper); border: 1px solid var(--r-rule); border-radius: 0; }
    [data-theme="retro"] .lightbox-close { width: auto; height: auto; padding: 2px 10px; border-radius: 0; font-family: Verdana, Arial, sans-serif; font-size: 14px; color: var(--r-text); background: var(--r-shade); border: 1px outset var(--r-gray); }
    [data-theme="retro"] .lightbox-figure figcaption { font-family: Verdana, Arial, sans-serif; font-size: 12px; color: var(--r-text); }
    [data-theme="retro"] .guide-band .prose figure.is-missing::before { border-color: var(--r-rule); border-radius: 0; color: var(--r-faint); font-family: Verdana, Arial, sans-serif; font-size: 11px; }
    [data-theme="retro"] .guide-video video { border-color: var(--r-rule-soft); border-radius: 0; }
    [data-theme="retro"] .guide-band .prose .guide-steps li { padding-left: 30px; margin-bottom: 8px; }
    [data-theme="retro"] .guide-band .prose .guide-steps li::before { width: 20px; height: 20px; border-radius: 0; border-color: var(--r-brand); color: var(--r-brand); font-family: Verdana, Arial, sans-serif; font-size: 11px; top: 0; }
    [data-theme="retro"] .guide-band .prose .guide-steps .guide-step { color: var(--r-text); font-size: 13px; }
    [data-theme="retro"] .guide-band .prose table { font-size: 12px; color: var(--r-text); }
    [data-theme="retro"] .guide-band .prose th { color: var(--r-brand); border-bottom-color: var(--r-rule-soft); }
    [data-theme="retro"] .guide-band .prose td { border-bottom-color: var(--r-rule-soft); }

/* Addresses and paths in the tuner walkthrough. Bootstrap's default code colour is off-palette. */
.guide-band .prose code { font-size: 0.92em; color: var(--cream); background: var(--card-navy); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
[data-theme="retro"] .guide-band .prose code { font-family: "Courier New", Courier, monospace; font-size: 12px; color: var(--r-text); background: var(--r-shade); border: 1px solid var(--r-rule-soft); border-radius: 0; }