/* ChatFPV rich answer blocks (blocks.js): wiring diagrams, pinout tables and
 * product cards. A same-origin stylesheet so it loads under the page CSP
 * (style-src 'self', no 'unsafe-inline'). Reuses style.css's theme tokens, so
 * it follows the light/dark toggle. Checked in a real browser with the CSP
 * enforced by scripts/browser/blocks_csp.py.
 */
.od-block{margin-top:14px;border:1px solid var(--border);border-radius:var(--r-md,12px);background:var(--panel);overflow:hidden}
.od-block-head{padding:8px 12px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--border);letter-spacing:0;font-size:13px}
.od-block-diagram{padding:10px 8px 4px;overflow-x:auto}
/* width/height attributes (set in blocks.js to match the viewBox) define the
   SVG's intrinsic aspect ratio; CSS width scales it up from there so a wide
   desktop answer column renders bigger, more legible pin labels instead of
   pinning at the tiny intrinsic size (iter-1's fix for the opposite problem,
   width:100% with no cap, oversized labels ~3x). max-width is a deliberate
   ceiling per diagram kind, chosen so scaled text stays <=28px even on a
   wide column, and width:100% still shrinks it to fit a narrow phone. */
.od-block-diagram svg{display:block;height:auto;width:100%}
.od-block-diagram svg.od-diagram-wiring{max-width:480px}
.od-block-diagram svg.od-diagram-pinout{max-width:340px}
/* Two-column pinout (blocks.js, desktop with >=3 pins): both boxes together
   should fill the answer column instead of sitting near their own
   intrinsic size (gui/PLAN-4.md item 2c -- the fixed-540ish px cap it used
   to share with the single-column box left it at ~70% of the card width).
   The viewBox width is a fixed 544 user units (two 260-unit boxes + a
   24-unit gap) regardless of pin count, so 1080px is a hard sanity ceiling
   chosen from that: it is well above .thread's own 768px column cap (so in
   practice this box always renders at the column's real width, "capped" by
   the layout rather than by this rule), while still keeping the 13-unit
   main label under 26px even if the column ever grows past 768px --
   comfortably inside the 12-28px legibility guard. */
.od-block-diagram svg.od-diagram-pinout-wide{max-width:1080px}
.od-box-fill{fill:var(--elev);stroke:var(--border)}
.od-box-title{fill:var(--text);font-weight:600}
.od-row-text{fill:var(--text)}
.od-row-sub{fill:var(--muted)}
.od-wire{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.85}
.od-pin-dot{fill:var(--gold)}
.od-block-cols{display:flex;gap:8px;padding:8px 12px 0;font-size:12px;font-weight:600;color:var(--text)}
.od-block-cols>div{flex:1 1 45%;min-width:0;word-break:break-word}
.od-block-table-wrap{overflow-x:auto;padding:2px 0 6px}
.od-block-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:280px}
.od-block-table th{text-align:left;color:var(--muted);font-weight:600;padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.od-block-table td{padding:6px 10px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top}
.od-block-table tr:last-child td{border-bottom:none}
.od-block-note{padding:4px 12px 10px;font-size:12px;color:var(--muted)}
/* Per-row pinout citation chips (blocks.js pinoutNode, gui/PLAN-5.md item 1):
   one .cite-ref (style.css) per diagram row, in row order, replacing the
   in-card Pin/Function/Source table that used to repeat the diagram's own
   data underneath it. .cite-ref's own margin (style.css) is redundant next
   to this row's own gap, so it is zeroed here. */
.od-pinout-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 12px 10px}
.od-pinout-chips-label{font-size:12px;color:var(--muted)}
/* .cite-ref (style.css) sizes an inline [n] marker, which WCAG 2.2 target-
   size (2.5.8) exempts as running text; these chips stand alone in their own
   row, not inline with text, so they get an explicit >=24x24 target instead. */
.od-pinout-chip{margin:0;min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}
.od-cite{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 3px;border-radius:4px;background:var(--gold);color:var(--on-gold);font-size:10px;font-weight:700;text-decoration:none;line-height:16px;margin-left:2px;vertical-align:middle}
.od-product{display:flex;gap:10px;padding:10px 12px}
/* od-product-no-media (blocks.js: no block.image at all) has no media slot
   in the DOM, so the flex row collapses to the body alone -- no blank 64px
   placeholder next to short text (gui/PLAN-4.md item 2b). */
.od-product-body{flex:1;min-width:0}
/* od-product-media is the 64x64 image slot for a product that DOES have a
   photo: no background of its own (so a slow/broken load never shows a
   bare grey box); only the runtime fallback (the photo failed to load)
   gets the muted background plus a small OD mark (BRAND.md: mark is for
   avatars/small spaces). */
.od-product-media{width:64px;height:64px;border-radius:8px;flex:0 0 auto;overflow:hidden;display:flex;align-items:center;justify-content:center}
.od-product-media img{width:100%;height:100%;object-fit:contain}
.od-product-media-fallback{background:var(--elev)}
.od-product-media-fallback img{width:24px;height:24px;object-fit:contain;opacity:.75}
.od-product-title{font-weight:600;color:var(--text)}
.od-product-status{font-size:12px;color:var(--muted);margin-top:2px}
.od-product-variants{font-size:12px;color:var(--muted);margin-top:4px}
/* --accent is gold in the dark theme (fine as text there) and ink in the
   light theme: gold text on the light theme's panel/elev backgrounds was
   the one axe "serious" color-contrast failure (ratio 1.5). Stays
   underline:none, same opt-out as the citation chip and skip-link. */
.od-product-link{font-size:12px;color:var(--accent);text-decoration:none;font-weight:600}
@media (max-width:420px){
  .od-block-table{font-size:11.5px}
  .od-block-table th,.od-block-table td{padding:5px 6px}
  .od-block-cols{flex-direction:column;gap:2px}
}