/* ═══════════════════════════════════════════════════════════════════
   bm-anatomy.css — BasicMicro blog article anatomy (content contract
   components + render-layer chrome). v1.0 — July 9, 2026.

   SOURCE OF TRUTH for the anatomy styling (supersedes mockup Section A;
   the mockup remains the visual prototype). Spec: Infrastructure doc
   Item 2 (v4.3). Approved against solo-quick-start-anatomy-mockup.html.

   Deploy:   wp-content/themes/<active-theme>/assets/css/bm-anatomy.css
   Repo:     D:\blog-maintenance\bm_theme-main\assets\css\bm-anatomy.css
             (theme workspace; deploy = SFTP this one file)
   Enqueue:  wp_enqueue_style on is_singular('post'), version =
             filemtime() — see the Item 4.6 template prompt.
   Scope:    element-level rules (pre/code/toolbar) are scoped under
             .bm-content — the class the template adds to the article
             content wrapper. bm-* component classes are globally
             unique by namespace and need no scoping.

   All themeable colors live in the :root block below — change a value
   there, never in the rules.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Core palette (tune to theme) ─────────────────────────────── */
  --bm-accent:        #1a6bb5;   /* brand blue */
  --bm-ink:           #24292f;   /* body text — should match theme body color */
  --bm-ink-soft:      #57606a;   /* captions, secondary text, meta */
  --bm-line:          #d8dde3;   /* hairline borders */

  /* ── Instruction steps (bm-steps) ─────────────────────────────── */
  --bm-step-bg:       var(--bm-accent);  /* number circle fill */
  --bm-step-num:      #ffffff;           /* number digit color */
  --bm-step-thread:   var(--bm-line);    /* connecting line between steps */

  /* ── Callouts ─────────────────────────────────────────────────── */
  --bm-note-bg:       #fdf6e3;
  --bm-note-edge:     #e0b83a;
  --bm-warn-bg:       #fdf0ee;
  --bm-warn-edge:     #c9463d;

  /* ── Code panel ───────────────────────────────────────────────── */
  --bm-code-bg:       #f4f6f8;   /* pre background */
  --bm-code-band:     #e9edf1;   /* toolbar header band */
  --bm-code-linenum:  #9aa4ae;   /* line-number digits */

  /* toolbar buttons (Copy Code / Download File) */
  --bm-btn-bg:        #ffffff;
  --bm-btn-text:      var(--bm-accent);
  --bm-btn-border:    var(--bm-line);
  --bm-btn-border-hover: var(--bm-accent);

  /* syntax token colors (starting set tuned to the approved mockup) */
  --bm-tok-comment:   #6a737d;
  --bm-tok-number:    #c05600;
  --bm-tok-keyword:   #0550ae;
  --bm-tok-function:  #24292f;
  --bm-tok-string:    #0a7d4d;
  --bm-tok-constant:  #0550ae;

  /* ── Tables ───────────────────────────────────────────────────── */
  --bm-th-bg:         var(--bm-accent);  /* header row fill */
  --bm-th-text:       #ffffff;
  --bm-row-alt:       #f7f9fb;           /* zebra stripe */

  /* ── Product cards (Related Products / Products Used) ────────── */
  --bm-cta-bg:        var(--bm-accent);  /* View Product button fill */
  --bm-cta-text:      #ffffff;
  --bm-stock-in:      #0a7d4d;           /* "In Stock" */
  --bm-price:         var(--bm-ink);
}

/* ═══════════════ CONTENT-CONTRACT COMPONENTS ═══════════════ */

/* ── Answer capsule ───────────────────────────────────────────
   40–60 word direct answer at the top of the article (GEO).
   Styled quietly: a rule and slightly larger lede type.        */
.bm-capsule {
  font-size: 1.09em;
  line-height: 1.65;
  padding: 0 0 1.1em 0;
  margin: 0 0 1.6em 0;
  border-bottom: 1px solid var(--bm-line);
}

/* ── Figures ─────────────────────────────────────────────────
   <figure class="bm-figure"><img …>
     <figcaption><strong>Figure 1:</strong> …</figcaption>
   </figure>                                                    */
.bm-figure {
  margin: 1.8em 0;
  text-align: center;
}
.bm-figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--bm-line);
  border-radius: 4px;
}
.bm-figure figcaption {
  margin-top: 0.6em;
  font-size: 0.88em;
  line-height: 1.5;
  color: var(--bm-ink-soft);
  text-align: center;
}
.bm-figure figcaption strong {
  color: var(--bm-ink);
}

/* ── Instruction steps ───────────────────────────────────────
   <ol class="bm-steps"> — auto-numbered circles; figures,
   callouts, and code nest inside <li>; `start` continues
   numbering across H2 sections.                                */
.bm-steps {
  list-style: none;
  counter-reset: bm-step;
  margin: 1.4em 0;
  padding: 0;
}
.bm-steps > li {
  counter-increment: bm-step;
  position: relative;
  padding: 0 0 1.5em 3.1em;
  margin: 0;
}
.bm-steps > li::before {
  content: counter(bm-step);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--bm-step-bg);
  color: var(--bm-step-num);
  font-weight: 700;
  font-size: 0.95em;
  line-height: 2em;
  text-align: center;
}
/* thread line connecting steps */
.bm-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.95em;
  top: 2.4em;
  bottom: 0.2em;
  width: 2px;
  background: var(--bm-step-thread);
}
.bm-steps > li > p:first-child { margin-top: 0; }

/* honor the ol `start` attribute (native start is inert once
   list-style:none + custom counters take over) — explicit rules
   cover the realistic range; extend if an article exceeds 20.  */
.bm-steps[start="2"]  { counter-reset: bm-step 1; }
.bm-steps[start="3"]  { counter-reset: bm-step 2; }
.bm-steps[start="4"]  { counter-reset: bm-step 3; }
.bm-steps[start="5"]  { counter-reset: bm-step 4; }
.bm-steps[start="6"]  { counter-reset: bm-step 5; }
.bm-steps[start="7"]  { counter-reset: bm-step 6; }
.bm-steps[start="8"]  { counter-reset: bm-step 7; }
.bm-steps[start="9"]  { counter-reset: bm-step 8; }
.bm-steps[start="10"] { counter-reset: bm-step 9; }
.bm-steps[start="11"] { counter-reset: bm-step 10; }
.bm-steps[start="12"] { counter-reset: bm-step 11; }
.bm-steps[start="13"] { counter-reset: bm-step 12; }
.bm-steps[start="14"] { counter-reset: bm-step 13; }
.bm-steps[start="15"] { counter-reset: bm-step 14; }
.bm-steps[start="16"] { counter-reset: bm-step 15; }
.bm-steps[start="17"] { counter-reset: bm-step 16; }
.bm-steps[start="18"] { counter-reset: bm-step 17; }
.bm-steps[start="19"] { counter-reset: bm-step 18; }
.bm-steps[start="20"] { counter-reset: bm-step 19; }

/* ── Materials / parts list ──────────────────────────────────
   <ul class="bm-materials"> — BasicMicro items carry product
   links per Item 2.2; bm-qty highlights quantities.            */
.bm-materials {
  margin: 1.2em 0;
  padding: 0;
  list-style: none;
}
.bm-materials li {
  padding: 0.45em 0 0.45em 1.6em;
  position: relative;
  border-bottom: 1px dotted var(--bm-line);
}
.bm-materials li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.95em;
  width: 0.55em;
  height: 0.55em;
  border: 2px solid var(--bm-accent);
  border-radius: 2px;
}
.bm-materials .bm-qty {
  font-weight: 700;
  color: var(--bm-accent);
}

/* ── Callouts ────────────────────────────────────────────────
   bm-note = advisory; bm-warning = safety / irreversible
   damage. Label text is generated — never typed in content.    */
.bm-note,
.bm-warning {
  margin: 1.4em 0;
  padding: 0.9em 1.1em;
  border-radius: 4px;
  border-left: 4px solid;
}
.bm-note {
  background: var(--bm-note-bg);
  border-left-color: var(--bm-note-edge);
}
.bm-warning {
  background: var(--bm-warn-bg);
  border-left-color: var(--bm-warn-edge);
}
.bm-note > :first-child,
.bm-warning > :first-child { margin-top: 0; }
.bm-note > :last-child,
.bm-warning > :last-child { margin-bottom: 0; }
.bm-note::before,
.bm-warning::before {
  display: block;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.35em;
}
.bm-note::before    { content: "Note";    color: var(--bm-note-edge); }
.bm-warning::before { content: "Warning"; color: var(--bm-warn-edge); }

/* ── Tables ──────────────────────────────────────────────────
   <div class="bm-table-wrap"><table> with real thead/th.
   Wrapper = the mobile horizontal-scroll guarantee.            */
.bm-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.4em 0;
}
.bm-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-size: 0.95em;
}
.bm-table-wrap th {
  background: var(--bm-th-bg);
  color: var(--bm-th-text);
  font-weight: 700;
  text-align: left;
  padding: 0.55em 0.9em;
}
.bm-table-wrap td {
  padding: 0.55em 0.9em;
  border-bottom: 1px solid var(--bm-line);
}
.bm-table-wrap tbody tr:nth-child(even) td { background: var(--bm-row-alt); }

/* ── Video embeds ────────────────────────────────────────────
   <div class="bm-video"><iframe> — youtube-nocookie, ?rel=0,
   title, allowfullscreen, loading="lazy" (Item 2.3).           */
.bm-video {
  margin: 1.6em 0;
  aspect-ratio: 16 / 9;
}
.bm-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
}

/* ═══════════════ CODE PANEL (content: pre/code only;
                   chrome injected by Prism at render) ═════════ */

/* Plain pre — fragments, serial output, and the no-JS state */
.bm-content pre {
  background: var(--bm-code-bg);
  border: 1px solid var(--bm-line);
  border-radius: 6px;
  padding: 0.9em 1.1em;
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.6;
  margin: 1.3em 0;
}

/* Prism toolbar wrapper → framed panel with a header band */
.bm-content div.code-toolbar {
  position: relative;
  margin: 1.3em 0;
  border: 1px solid var(--bm-line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bm-code-bg);
}
.bm-content div.code-toolbar > pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  padding-top: 3.1em;          /* reserves the header band — zero CLS */
}
.bm-content div.code-toolbar > .toolbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* buttons right by default */
  gap: 0.5em;
  padding: 0 0.8em;
  background: var(--bm-code-band);
  border-bottom: 1px solid var(--bm-line);
  opacity: 1;                  /* override Prism's hover-fade — mobile has no hover */
}
.bm-content div.code-toolbar > .toolbar > .toolbar-item {
  display: flex;
  align-items: center;
}
/* the filename item pushes everything after it to the right */
.bm-content div.code-toolbar > .toolbar > .toolbar-item:has(.bm-code-filename) {
  margin-right: auto;
}
.bm-content .bm-code-filename {
  font-family: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;
  font-size: 0.8em;
  color: var(--bm-ink-soft);
}
.bm-content div.code-toolbar > .toolbar button,
.bm-content div.code-toolbar > .toolbar a {
  font: inherit;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--bm-btn-text);
  background: var(--bm-btn-bg);
  border: 1px solid var(--bm-btn-border);
  border-radius: 4px;
  padding: 0.35em 0.8em;
  cursor: pointer;
  text-decoration: none;
}
.bm-content div.code-toolbar > .toolbar button:hover,
.bm-content div.code-toolbar > .toolbar a:hover {
  border-color: var(--bm-btn-border-hover);
}
/* language-none (serial output, wiring lists): no chrome at all */
.bm-content div.code-toolbar:has(code.language-none) > .toolbar { display: none; }
.bm-content div.code-toolbar:has(code.language-none) > pre { padding-top: 0.9em; }

/* Line numbers (Prism line-numbers plugin structure) */
.bm-content pre.line-numbers {
  position: relative;
  padding-left: 3.4em;
  counter-reset: linenumber;
}
.bm-content pre.line-numbers > code { position: relative; }
.bm-content .line-numbers-rows {
  position: absolute;
  top: 0; left: -3.4em;
  width: 2.6em;
  text-align: right;
  pointer-events: none;
  user-select: none;
  border-right: 1px solid var(--bm-line);
  padding-right: 0.6em;
}
.bm-content .line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
}
.bm-content .line-numbers-rows > span::before {
  content: counter(linenumber);
  color: var(--bm-code-linenum);
  font-size: 0.9em;
}

/* Inline code in prose */
.bm-content :not(pre) > code {
  background: var(--bm-code-bg);
  border: 1px solid var(--bm-line);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}

/* Syntax token colors — replace/extend with a Prism theme if desired */
.token.comment  { color: var(--bm-tok-comment); }
.token.number   { color: var(--bm-tok-number); }
.token.keyword  { color: var(--bm-tok-keyword); }
.token.function { color: var(--bm-tok-function); font-weight: 600; }
.token.string   { color: var(--bm-tok-string); }
.token.constant { color: var(--bm-tok-constant); }

/* ═══════════════ RELATED PRODUCTS / PRODUCTS USED ═══════════
   RENDER LAYER — output of the Item 3 plugin from
   bm_products_used + the GMC catalog. Never stored in
   post_content; classes not in the content allowlist. Card
   format mirrors basicmicro.com related-items.                 */
.bm-related-section {
  margin-top: 2.5em;
  padding-top: 1.5em;
  border-top: 1px solid var(--bm-line);
}
.bm-related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2em;
  margin: 1.2em 0;
}
.bm-product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid var(--bm-line);
  border-radius: 6px;
  padding: 1.1em 1em 1.2em;
  background: #ffffff;
}
.bm-product-card > a:first-child {
  display: block;
  line-height: 0;
}
.bm-product-card img {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin-bottom: 0.8em;
}
.bm-product-name {
  font-weight: 600;
  line-height: 1.35;
  color: var(--bm-accent);
  text-decoration: none;
  margin-bottom: 0.45em;
}
.bm-product-name:hover { text-decoration: underline; }
.bm-product-meta {
  font-size: 0.82em;
  color: var(--bm-ink-soft);
  margin-bottom: 0.45em;
}
.bm-product-meta code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 1em;
}
.bm-stock-in {
  color: var(--bm-stock-in);
  font-weight: 600;
}
.bm-product-price {
  font-size: 1.18em;
  font-weight: 700;
  color: var(--bm-price);
  margin-bottom: 0.9em;
}
.bm-product-btn {
  margin-top: auto;
  display: inline-block;
  background: var(--bm-cta-bg);
  color: var(--bm-cta-text) !important;
  font-weight: 600;
  font-size: 0.9em;
  padding: 0.55em 1.4em;
  border-radius: 4px;
  text-decoration: none;
}
.bm-product-btn:hover { filter: brightness(1.12); }