/* ============================================================
   BYC 2026 - content page shell (page-2026.php).
   Loads AFTER byc.css (tokens, fonts, nav atoms, grain) and
   byc-chrome.css (shared nav/footer). Themes existing page
   content (classic + Spectra/UAGB blocks) as dark prose without
   touching the database. The !important armor exists because
   UAGB prints per-block stylesheets (block-id selectors, old
   Orbitron typography) that would otherwise win.
   ============================================================ */

/* page header is now the shared .masthead (byc-chrome.css); the old
   .page-head26 / .page-title26 were retired in the 2026 masthead unification. */

/* ---------- prose container ----------
   Fills the same --maxw container as the landing/shop (left-aligned, not a
   centred narrow column). Running text keeps a readable measure (capped
   below); structural blocks - FAQ rows, headings, media, tables - use the
   full width. */
.prose{margin:0;padding-bottom:40px;color:var(--text-read);
  font-size:var(--fs-read);line-height:var(--leading-read);font-weight:var(--weight-read)}
/* ONE reading body on EVERY paragraph - forced past UAGB's per-block font CSS
   (which hard-codes its own paragraph size/weight) so classic content, UAGB
   blocks and FAQ answers are byte-identical to a guide paragraph. */
.prose p,.prose li,
.prose .wp-block-uagb-container p,
.prose .uagb-icon-list__label,
.prose .uagb-faq-content p{
  font-family:var(--sans) !important;font-size:var(--fs-read) !important;
  line-height:var(--leading-read) !important;font-weight:var(--weight-read) !important;
  color:var(--text-read) !important}
/* running text AND the FAQ accordion share the one readable measure */
.prose p,.prose ul,.prose ol,.prose blockquote,
.prose .wp-block-uagb-faq{max-width:var(--measure)}

/* spacing rhythm (byc.css zeroes p/heading margins for the landing) */
.prose p{margin:0 0 20px}
/* clear separation between the intro/lead copy and the accordion below it */
.prose .wp-block-uagb-faq{margin-top:44px}
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{
  font-family:var(--sans) !important;color:var(--text-heading) !important;font-weight:var(--weight-medium);
  letter-spacing:-.015em;line-height:var(--leading-heading);margin:40px 0 16px}
.prose h1{font-size:30px !important}            /* hidden - masthead prints the title */
.prose h2{font-size:var(--fs-h2) !important;margin:48px 0 16px}  /* 25 */
.prose h3{font-size:var(--fs-h3) !important;margin:32px 0 10px}  /* 20 */
.prose h4{font-size:var(--fs-h4) !important;font-weight:var(--weight-body) !important;letter-spacing:-.01em !important;margin:24px 0 8px}  /* 18=body; separated from body by brightness + a 450 weight nudge, not a slab */

/* the old design's hero clusters: every page repeated its title as a big
   solid h1 + a giant "ghost" h1 (110px red Orbitron) layered behind it via
   negative offsets. The shell already prints the real page title, so all
   in-content h1s are decorative duplicates - drop them entirely, along with
   the rotated watermark paragraphs that floated in the old page margins. */
.prose h1{display:none !important}
.prose .rotated-text{display:none !important}
.prose .uagb-heading-text{font-family:var(--sans) !important;
  color:var(--text-heading) !important;font-weight:var(--weight-medium) !important;text-shadow:none !important}

/* inline emphasis = a brightness lift, not a bold slab (old content rendered
   pure #fff/700): one weight nudge off the 300 body + the brightest tone, so
   stressed words glow within the light line rather than bolding out of it.
   Placed BEFORE .prose a * so emphasis inside a link still follows the link color. */
.prose strong,.prose b{font-weight:var(--weight-body) !important;color:var(--text) !important}

/* links - inner spans of old content often carry forced colors (white etc.);
   make everything inside a link follow the link color */
.prose a{color:var(--accent-read) !important;text-decoration:none;
  border-bottom:1px solid rgba(242,32,46,.3);transition:.14s}
.prose a *{color:inherit !important}
.prose a:hover{color:var(--text) !important;border-bottom-color:var(--line-strong)}

/* lists */
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:6px 0}
.prose ul li::marker{color:var(--accent)}

/* ORDERED lists = numbered STEPS: a mono accent numeral matching the
   landing / installation-guide step number (.bidx / .step .idx = mono
   16px / 700 / accent-dim). Replaces the plain red "1." decimal marker.
   Excludes the UAGB Table-of-Contents <ol>, which is a plain link list. */
.prose ol:not(.uagb-toc__list){list-style:none;counter-reset:bstep;padding-left:0}
.prose ol:not(.uagb-toc__list) > li{counter-increment:bstep;position:relative;
  padding-left:40px;margin:12px 0}
.prose ol:not(.uagb-toc__list) > li::before{content:counter(bstep);position:absolute;
  left:0;top:0;font-family:var(--mono);font-weight:700;font-size:var(--fs-md);
  color:var(--accent-dim);line-height:var(--leading-read)}
/* BLOG single posts only (body.post26): position the number exactly like the
   ORIGINAL/normal ordered list - the NATIVE list marker (decimal, with its
   period), placed + baseline-aligned by the browser. The absolute ::before
   counter above is undone here; the approved mono / accent-red / 700 / body-size
   styling is kept on ::marker. Content-page guides keep the install numeral. */
body.post26 .prose ol:not(.uagb-toc__list){list-style:decimal;counter-reset:none;padding-left:1.7em}
body.post26 .prose ol:not(.uagb-toc__list) > li{counter-increment:none;position:static;padding-left:0;margin:8px 0}
body.post26 .prose ol:not(.uagb-toc__list) > li::before{content:none}
body.post26 .prose ol:not(.uagb-toc__list) > li::marker{font-family:var(--mono);font-weight:700;
  color:var(--accent-dim);font-size:var(--fs-read)}

/* media: screenshots embedded in the reading body.
   Doctrine: sharp corners (radius:0), hairline box. They align to the SAME
   reading measure as the paragraphs so they sit INSIDE the text column and
   blend with the writing - the shared lightbox (byc-lightbox.js) now carries
   legibility (click any shot to zoom + step through), so inline shots no
   longer break out wider just to stay readable. A thin dark matte + hairline
   stops bright Windows / Sierra Chart UI hard-cutting against the near-black
   page, and reads as a deliberate mounted figure. */
.prose figure{margin:32px 0}
/* UAGB renders image figures as display:flex (column), and "full width"-aligned
   shots resolve the <img>'s width:auto to the whole column = the upscale. Take
   the figure out of flex so the <img> is a normal block replaced element again
   (width:auto = its own intrinsic size); fit-content then hugs the figure to the
   image, capped at the reading measure. Net: a 547px shot stays a crisp 547px. */
.prose .wp-block-uagb-image__figure,.prose .wp-block-image,.prose figure{
  display:block !important;width:fit-content !important;max-width:var(--measure) !important;
  margin-left:0 !important;margin-right:auto !important;text-align:left !important}
/* image links (UAGB "link to media file") must not get the red text underline */
.prose figure a{border-bottom:0 !important}
/* PIXEL-EXACT + NO UPSCALE: box-sizing:content-box makes the width="N" attribute
   size the IMAGE content box (= native pixels, rendered 1:1 like the lightbox),
   not the border box; max-width caps display at the reading measure so hi-res
   shots downscale (sharp) and low-res shots stay native. No border/matte here -
   the brand corner brackets below ARE the frame. */
.prose img{box-sizing:content-box;max-width:min(100%,var(--measure));
  height:auto !important;display:block;border-radius:0 !important}
/* BRAND "trademark frame": white corner brackets, not a full rectangle.
   The .byc-shot span (added around each <img> by wp_content_img_tag in
   functions.php) hugs the image, so the marks frame the IMAGE only and the
   <figcaption> sits OUTSIDE them. Reproduces the design-system .frame/.cb marks
   (byc.css) with ONE pseudo-element - same --bracket / --bsize / --bweight /
   --fgap tokens (fallbacks match the spec). Eight gradient bars = two arms per
   corner. The 8px overhang sits in the page container's slack outside the 700px
   measure, so it never overflows. (The single-post hero keeps its own real .cb
   spans; it lives outside .prose.) */
.prose .byc-shot{display:inline-block;position:relative;max-width:100%;line-height:0;vertical-align:top}
.prose .byc-shot::after{
  content:"";position:absolute;inset:calc(var(--fgap,8px)*-1);pointer-events:none;z-index:2;
  --bk:var(--bracket,rgba(255,255,255,.5));--bz:var(--bsize,18px);--bw:var(--bweight,1px);
  background:
    linear-gradient(var(--bk),var(--bk)) left top/var(--bz) var(--bw) no-repeat,
    linear-gradient(var(--bk),var(--bk)) left top/var(--bw) var(--bz) no-repeat,
    linear-gradient(var(--bk),var(--bk)) right top/var(--bz) var(--bw) no-repeat,
    linear-gradient(var(--bk),var(--bk)) right top/var(--bw) var(--bz) no-repeat,
    linear-gradient(var(--bk),var(--bk)) left bottom/var(--bz) var(--bw) no-repeat,
    linear-gradient(var(--bk),var(--bk)) left bottom/var(--bw) var(--bz) no-repeat,
    linear-gradient(var(--bk),var(--bk)) right bottom/var(--bz) var(--bw) no-repeat,
    linear-gradient(var(--bk),var(--bk)) right bottom/var(--bw) var(--bz) no-repeat;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.65))}
/* CAPTION: brand caption size = 12px (--fs-2xs, the documented "nothing renders
   below 12px" floor), forced past UAGB's 16px .uagb-image-caption rule. Mono,
   muted, left-aligned to the figure, sitting clear below the image's bottom
   corner marks (8px bracket overhang + breathing room). 12px holds across
   breakpoints by design - a caption shouldn't shrink under the legible floor, so
   no responsive downscale (best practice); it just wraps on narrow screens. */
.prose figcaption,.prose .uagb-image-caption,.prose figure figcaption{
  font-family:var(--mono) !important;font-size:var(--fs-2xs) !important;letter-spacing:.06em !important;
  line-height:1.5 !important;color:var(--text-muted) !important;text-align:left !important;
  margin:16px 0 0 !important;max-width:var(--measure)}

/* tables */
.prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:var(--fs-read-sm)}
.prose th,.prose td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.prose th{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);background:var(--surface)}
/* cells: dense secondary reading - 14px/400 (not the body's 300, which gets fragile at 14px) in the read tone */
.prose td{color:var(--text-read);font-weight:var(--weight-normal)}

/* quotes, rules, code */
.prose blockquote{margin:26px 0;padding:18px 22px;border-left:2px solid var(--accent);
  background:var(--surface);color:var(--text-read)}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}
/* inline code = red-framed chip: light readable text in a faint-red box with a red hairline (owner-chosen "Variant B") */
.prose code{font-family:var(--mono);font-size:var(--fs-base);color:var(--text-heading);background:rgba(242,32,46,.07);
  border:1px solid rgba(242,32,46,.40);padding:2px 6px}
/* code blocks: full-width (NOT measure-capped), horizontal scroll */
.prose pre{font-family:var(--mono);font-size:var(--fs-sm);line-height:1.55;color:var(--text-heading);
  background:var(--surface-2);border:1px solid var(--line);
  padding:16px 18px;overflow-x:auto;margin:0 0 18px}
.prose pre code{background:none;border:0;padding:0;font-size:inherit}

/* ---------- Spectra/UAGB armor ---------- */
/* containers lose their old backgrounds/padding cages; content flows as prose */
.prose .wp-block-uagb-container{background:none !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  padding-left:0 !important;padding-right:0 !important;
  max-width:100% !important;min-height:0 !important}
/* some old blocks set their inner flex-wrap to CENTER content, which reads as a
   confusing indented column in the prose shell - force normal left-aligned
   article flow (genuine 2-col/row blocks only get harmlessly top-aligned) */
.prose .uagb-container-inner-blocks-wrap{align-items:flex-start !important}
/* the old design layered titles via negative offsets - neutralize the pulls
   so nothing overlaps the element above it */
.prose .wp-block-uagb-container,
.prose .wp-block-uagb-advanced-heading{margin-top:0 !important}
.prose .uagb-is-root-container{margin:0 !important}
/* alignfull cannot break out: the shell owns the canvas */
.prose .alignfull,.prose .alignwide{max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important;width:100% !important}

/* old white/colored text forced onto tokens */
.prose .has-white-color{color:var(--text) !important}
.prose p.has-text-color,.prose li.has-text-color{color:var(--text-read) !important}

/* UAGB buttons -> interface layer (6px, 46px height) */
.prose .uagb-button__wrapper a,.prose .wp-block-button__link{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono) !important;
  font-size:var(--fs-sm) !important;letter-spacing:.04em;height:46px;padding:0 22px !important;
  border-radius:6px !important;background:#fff !important;color:#000 !important;
  border:1px solid #fff !important;font-weight:600;transition:.18s ease;
  text-decoration:none;line-height:1 !important}
.prose .uagb-button__wrapper a:hover,.prose .wp-block-button__link:hover{
  background:var(--accent) !important;border-color:var(--accent) !important;
  color:#fff !important;box-shadow:0 0 30px var(--accent-glow)}

/* UAGB icon-list / info-box text */
.prose .uagb-icon-list__label,.prose .uagb-infobox__content-wrap p{
  color:var(--text-read) !important;font-family:var(--sans) !important}

/* ---------- UAGB Table of Contents -> dark surface card ----------
   Blog posts open with a TOC block (content pages don't). Strip its
   light default chrome to a hairline dark card with a mono kicker title
   and read-tone links, capped to the reading measure. */
.prose .wp-block-uagb-table-of-contents{max-width:var(--measure)}
.prose .uagb-toc__wrap{background:var(--surface) !important;border:1px solid var(--line) !important;
  border-radius:6px !important;padding:20px 24px !important;box-shadow:none !important}
.prose .uagb-toc__title{font-family:var(--mono) !important;font-size:var(--fs-2xs) !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--text-muted) !important;
  font-weight:600 !important;margin:0 0 12px !important}
.prose .uagb-toc__list,.prose .uagb-toc__list-wrap{list-style:none !important;margin:0 !important;padding-left:0 !important}
.prose .uagb-toc__list ul,.prose .uagb-toc__list ol{padding-left:18px !important;margin:4px 0 0 !important}
.prose .uagb-toc__list li{margin:7px 0 !important}
.prose .uagb-toc__list li::marker{color:transparent !important}
.prose .wp-block-uagb-table-of-contents a{color:var(--text-read) !important;
  border-bottom:0 !important;font-size:var(--fs-read-sm) !important;line-height:1.4 !important}
.prose .wp-block-uagb-table-of-contents a:hover{color:var(--accent-dim) !important}

/* ---------- UAGB FAQ -> product-page accordion design ----------
   Visuals copied from .faq-item in byc-product.css (6px interface radius,
   surface row, right-hand "+" that rotates 45deg when open). The expand/
   collapse stays UAGB's smooth jQuery slideDown/slideUp, which toggles
   .uagb-faq-item-active on the item. */
.prose .uagb-faq-item{border:1px solid var(--line) !important;border-radius:6px !important;
  background:var(--surface) !important;margin:0 0 12px !important;overflow:hidden}
.prose .uagb-faq-questions-button{display:flex !important;align-items:center;
  justify-content:space-between;gap:16px;padding:16px 22px !important;
  cursor:pointer;background:none !important}
/* accordion title (FAQ + support): owner wants it sized + weighted like the
   reading body (18px / 400), distinguished only by a faint brightness lift -
   NOT a bold smaller heading. 16px read as "too small"; 500/600 as "too much". */
/* accordion question: size COUPLED to the body (--fs-read 17px) + weight 600 - a bold heading the same size as its answer (owner-chosen) */
.prose .uagb-question{font-family:var(--sans) !important;font-weight:var(--weight-semibold) !important;
  font-size:var(--fs-read) !important;line-height:1.45 !important;letter-spacing:-.01em !important;
  color:var(--text-heading) !important;flex:1}
/* UAGB's own left-side plus/minus svgs are replaced by our right-side "+" */
.prose .uagb-faq-icon-wrap{display:none !important}
.prose .uagb-faq-questions-button::after{content:"+";font-family:var(--mono);
  color:var(--text-faint);font-size:18px;line-height:1;transition:.2s;flex:none}
.prose .uagb-faq-item-active .uagb-faq-questions-button::after{
  transform:rotate(45deg);color:var(--accent-dim)}
/* NO !important on the box properties here: UAGB's smooth open/close is a
   jQuery slide that animates height/padding/margin via INLINE styles, and
   inline loses against !important - locking these makes the motion choppy.
   The extra .uagb-faq-item in the selector outranks UAGB's generated
   per-block rules instead. */
.prose .uagb-faq-item .uagb-faq-content{padding:0 24px 22px;margin:0}
/* FAQ answer = exactly the guide reading body (font from the unified rule above) */
.prose .uagb-faq-content p{margin:0 !important}
/* step-label lead-ins inside accordion answers: a red rail-marker + bold white label,
   kept INLINE so the "Label: instruction" reading flows naturally. (The labels live in
   UAGB block JSON with the colon baked in, separated by <br><br>; a block heading would
   orphan that colon onto the next line, and the colon can't be safely stripped - it's a
   200x site-wide "bold label:" convention.) The <br><br> already starts each step on its
   own line, so the marker + bold label read as a clear step heading. */
.prose .uagb-faq-content p strong{color:var(--text) !important;font-weight:700 !important}
.prose .uagb-faq-content p strong::before{content:"";display:inline-block;width:3px;height:.92em;
  background:var(--accent);border-radius:1px;margin-right:9px;vertical-align:-1px}

/* UAGB separators */
.prose .wp-block-uagb-separator,.prose .wp-block-separator{
  border-color:var(--line) !important;background:none !important}

/* pulse keyframes (standing rule: every 2026 stylesheet ships them) */
@keyframes bycPulse{0%,100%{box-shadow:0 0 0 4px var(--accent-glow)}
  50%{box-shadow:0 0 0 8px rgba(242,32,46,.07)}}

/* ---------- hide leftover old-design decorative headings ----------
   /faq/ and /support/ carry two old Spectra advanced-heading blocks each that
   render giant split-word background text ("Frequently"/"Asked", "Guide"/"Support").
   The 2026 masthead already supplies the real headline, so these just duplicate it.
   They read as faint background watermarks while tagged <h1>; the single-H1 SEO fix
   retagged them <span>, which dropped the Spectra per-block styling and left them as
   prominent stray words. Hide the specific blocks - not deleted, so removing this
   rule restores them. */
.uagb-block-75dd9ce1,.uagb-block-edb5e03b,
.uagb-block-948aa3cc,.uagb-block-d9ff129a{display:none !important}