/* ── shared/real-figures.css ── */
/* Shared by every guide that shows captures of the real tool (a guide opts in with sharedCss: ['real-figures']).
   Both themes are served by the picture pair real() writes (img.is-dark / img.is-light, hidden by guide.css); this file only
   frames the picture, and the frame follows the theme through tokens. */

/* A capture of the real tool. The frame is the tool's own page colour in each theme, so the capture's edge never reads as a
   box inside a box: near-black behind the dark capture, white behind the light one. */
:root { --real-frame: #0A0A0A; }
:root[data-theme="light"] { --real-frame: #FFFFFF; }
.ocv-real { margin: 28px 0; padding: 0; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--real-frame); overflow: hidden; }
.ocv-real__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); background: rgba(var(--ink-rgb), 0.03); }
.ocv-real__tag { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sahi-cyan, #5ACFE0); }
.ocv-real__label { font-size: 0.9rem; font-weight: 600; color: var(--text-1); }
.ocv-real__shot { display: flex; justify-content: center; padding: 18px 16px; overflow-x: auto; }
.ocv-real__shot img { display: block; width: var(--real-w); max-width: 100%; height: auto; border-radius: 6px; }
.ocv-real__cap { padding: 0 18px 16px; font-size: 0.88rem; line-height: 1.5; color: var(--text-3); text-align: center; }
.ocv-real__cap strong { color: var(--text-2); }

/* Two or more captures side by side (a cell in Simple against Advanced, Call against Put) */
.ocv-real-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 28px 0; }
.ocv-real-row > .ocv-real { margin: 0; }

/* ── 10-guide.css ── */
/* Insight guide furniture: tokens only, both themes follow. */
.ai-points { margin: 16px 0; padding-left: 20px; color: var(--text-2); }
.ai-points li { margin: 8px 0; }
.ai-points strong { color: var(--text-1); }
.ai-steps { list-style: none; counter-reset: aistep; margin: 22px 0; padding: 0; display: grid; gap: 14px; }
.ai-steps > li { counter-increment: aistep; position: relative; padding: 16px 18px 16px 62px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface); }
.ai-steps > li::before { content: counter(aistep); position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--on-accent); background: var(--sahi-accent); }
.ai-steps h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--text-1); }
.ai-steps p { margin: 0; color: var(--text-2); }
.ai-strips { grid-template-columns: minmax(0, 1fr); display: grid; gap: 12px; margin: 20px 0; }
.ai-strips .ocv-real { margin: 0; }
.ai-strips .ocv-real__bar { display: none; }
.ai-strips .ocv-real__shot { overflow-x: auto; }
.ai-nv { font-size: 0.875rem; }
.ai-strips .ocv-real__shot img { max-width: none; }
.ai-strips .ocv-real__shot { max-width: 100%; }