/* Guide figures (0.30.0): interactive illustrations inside eight guides. Loaded only on those pages.
   Every figure is complete without scripts: guidefig.js adds .rl-gf-on, which reveals the controls.
   Data is drawn in blue (the same blue as the size bars in the tables), because the theme's accent is the
   brand red and would read as "does not fit". Green, amber and red are kept for fit status only. */
.rl-gf { --gf-data: #2f6fb6; --gf-data2: #93bbe9; }
/* The theme always sets data-theme on <html>; without scripts it stays light, so there is no media-query fallback. */
[data-theme="dark"] .rl-gf { --gf-data: #8cc2ff; --gf-data2: #4d79ad; }
.rl-gf { margin: 24px 0; padding: 18px; border: 1px solid var(--rl-line); border-radius: 14px; background: var(--rl-surface); color: var(--rl-fg); max-width: 100%; overflow: hidden; }
.rl-gf, .rl-gf * { box-sizing: border-box; }
.rl-gf p { margin: 0; }
.rl-gf figcaption { margin-top: 14px; color: var(--rl-muted); font-size: 0.86rem; line-height: 1.5; }
.rl-gf .rl-gf-title { margin: 0 0 12px; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.rl-gf-ctl { display: none; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 14px; }
.rl-gf-on .rl-gf-ctl { display: flex; }
.rl-gf-nojs { color: var(--rl-muted); font-size: 0.86rem; margin-top: 10px; }
.rl-gf-on .rl-gf-nojs { display: none; }
.rl-gf [hidden] { display: none !important; }
.rl-gf-sub { margin-top: 12px !important; font-size: 0.8rem; color: var(--rl-muted); }
.rl-gf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rl-gf-list { width: min(100%, 380px); }
.rl-gf-v small { font-size: 0.74rem; font-weight: 400; color: var(--rl-muted); }

/* controls */
.rl-gf .rl-gf-btn { font: inherit; font-size: 0.86rem; font-weight: 600; line-height: 1.2; min-height: 36px; padding: 7px 13px; border: 1px solid var(--rl-line); border-radius: 99px; background: var(--rl-surface); color: var(--rl-fg); cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0; }
.rl-gf .rl-gf-btn:hover { border-color: var(--rl-accent); }
.rl-gf .rl-gf-btn[aria-pressed="true"], .rl-gf .rl-gf-btn[aria-selected="true"], .rl-gf .rl-gf-btn[aria-current="step"] { background: var(--rl-accent); border-color: var(--rl-accent); color: var(--rl-accent-fg); }
.rl-gf .rl-gf-btn:focus-visible, .rl-gf input:focus-visible { outline: 2px solid var(--rl-accent); outline-offset: 2px; }
.rl-gf .rl-gf-play { min-width: 76px; }
.rl-gf-field { display: block; flex: 1 1 220px; min-width: 0; }
.rl-gf-lab { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; font-weight: 600; margin-bottom: 4px; }
.rl-gf-lab output, .rl-gf-num { font-family: var(--rl-mono); font-weight: 600; color: var(--rl-accent); }
.rl-gf input[type="range"] { display: block; width: 100%; height: 28px; margin: 0; padding: 0; accent-color: var(--rl-accent); background: transparent; border: 0; }
.rl-gf-ticks { display: flex; justify-content: space-between; font-family: var(--rl-mono); font-size: 10px; color: var(--rl-muted); margin-top: 2px; }
.rl-gf-set { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }

/* numbers */
.rl-gf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 14px; }
.rl-gf-stat { padding: 10px 12px; border-radius: 10px; background: var(--rl-soft); min-width: 0; }
.rl-gf-k { display: block; font-size: 0.74rem; color: var(--rl-muted); line-height: 1.3; }
.rl-gf-v { display: block; font-size: 1.15rem; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rl-gf-status { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border-left: 4px solid var(--gf-st, var(--rl-muted)); background: var(--rl-soft); font-size: 0.92rem; line-height: 1.45; }
.rl-gf-status strong { color: var(--gf-st, inherit); }
.rl-gf-stat[data-st] .rl-gf-v { color: var(--gf-st); }
.rl-gf [data-st="fits"] { --gf-st: var(--rl-ok); }
.rl-gf [data-st="tight"] { --gf-st: var(--rl-warn); }
.rl-gf [data-st="offload"], .rl-gf [data-st="heavy_offload"], .rl-gf [data-st="no_fit"] { --gf-st: var(--rl-bad); }

/* bars */
.rl-gf-bar { position: relative; height: 22px; border-radius: 6px; background: var(--rl-soft); overflow: hidden; display: flex; }
.rl-gf-fill { height: 100%; width: var(--w, 0%); background: var(--gf-data); transition: width .25s ease; flex: none; }
.rl-gf-fill.is-kv { background: var(--gf-data2); }
.rl-gf-fill.is-over, .rl-gf-fill.is-ram { background: var(--rl-bad); }
.rl-gf-fill.is-soft { background: var(--rl-muted); opacity: .55; }
.rl-gf-barrow { margin-top: 10px; }
.rl-gf-barlab { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; color: var(--rl-muted); margin-bottom: 3px; }
.rl-gf-barlab b { color: var(--rl-fg); font-weight: 600; }
/* The value on the right stays on one line; the label on the left wraps instead. */
.rl-gf-barlab > :last-child:not(:first-child) { flex: none; white-space: nowrap; }
.rl-gf-mark { position: absolute; top: 0; bottom: 0; left: var(--x, 0%); width: 0; border-left: 2px dashed var(--rl-fg); opacity: .6; pointer-events: none; }
.rl-gf-scale { position: relative; height: 18px; font-family: var(--rl-mono); font-size: 10px; color: var(--rl-muted); }
.rl-gf-scale span { position: absolute; left: var(--x, 0%); transform: translateX(-50%); white-space: nowrap; top: 3px; }
.rl-gf-scale span:first-child { transform: none; }
.rl-gf-scale span:last-child { transform: translateX(-100%); }
.rl-gf-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 0.8rem; color: var(--rl-muted); }
.rl-gf-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; background: var(--gf-data); vertical-align: -1px; }
.rl-gf-legend i.is-kv { background: var(--gf-data2); }
.rl-gf-legend i.is-soft { background: var(--rl-muted); opacity: .55; }
.rl-gf-legend i.is-ram { background: var(--rl-bad); }

/* stepper (first run, document chat) */
.rl-gf-tabs { display: none; list-style: none; margin: 0 0 12px; padding: 0; gap: 6px; flex-wrap: wrap; }
.rl-gf-on .rl-gf-tabs { display: flex; }
.rl-gf-tabs li { margin: 0; padding: 0; flex: 1 1 auto; }
.rl-gf .rl-gf-tab { width: 100%; padding: 7px 10px; white-space: nowrap; }
.rl-gf-n { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--rl-soft); color: var(--rl-fg); font-size: 0.74rem; font-weight: 700; }
.rl-gf-panel { padding: 12px 0; border-top: 1px solid var(--rl-line); }
.rl-gf-panel:first-child { border-top: 0; padding-top: 0; }
.rl-gf-on .rl-gf-panels { display: grid; }
.rl-gf-on .rl-gf-panel { grid-area: 1 / 1; visibility: hidden; border-top: 0; padding: 0; min-width: 0; }
.rl-gf-on .rl-gf-panel.is-on { visibility: visible; }
.rl-gf .rl-gf-panel .rl-gf-h { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; }
.rl-gf-scene { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; min-height: 132px; padding: 14px; border-radius: 10px; background: var(--rl-soft); font-size: 0.86rem; }
.rl-gf-say { margin-top: 10px !important; font-size: 0.92rem; line-height: 1.5; }
.rl-gf-box { padding: 9px 12px; border: 1px solid var(--rl-line); border-radius: 9px; background: var(--rl-surface); line-height: 1.35; max-width: 100%; }
.rl-gf-box small { display: block; color: var(--rl-muted); font-size: 0.74rem; }
.rl-gf-box.is-acc { border-color: var(--gf-data); }
.rl-gf-tag { display: inline-block; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--rl-line); background: var(--rl-surface); font-size: 0.78rem; white-space: nowrap; }
.rl-gf-tag.is-hit { border-color: var(--gf-data); color: var(--gf-data); font-weight: 700; }
.rl-gf-tag[data-st] { border-color: var(--gf-st); color: var(--gf-st); font-weight: 600; }
.rl-gf-arrow { color: var(--rl-muted); font-size: 1.1rem; line-height: 1; }
.rl-gf-col { display: grid; gap: 6px; min-width: 0; }
.rl-gf-col.is-mid { justify-items: center; text-align: center; }
.rl-gf-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rl-gf-vec { font-family: var(--rl-mono); font-size: 0.74rem; color: var(--rl-muted); white-space: nowrap; }
.rl-gf-dots { display: grid; grid-template-columns: repeat(8, 10px); gap: 6px; }
.rl-gf-dots i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--rl-muted) 45%, transparent); }
.rl-gf-dots i.is-hit { background: var(--gf-data); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gf-data) 25%, transparent); }
.rl-gf-meter { width: min(100%, 220px); }
.rl-gf-meter .rl-gf-bar { height: 12px; border: 1px solid var(--rl-line); background: var(--rl-surface); }
.rl-gf-bubble { padding: 8px 12px; border-radius: 12px 12px 12px 3px; background: var(--rl-surface); border: 1px solid var(--rl-line); max-width: 260px; line-height: 1.4; }
.rl-gf-bubble.is-me { border-radius: 12px 12px 3px 12px; background: var(--rl-accent); border-color: var(--rl-accent); color: var(--rl-accent-fg); }
.rl-gf-on .rl-gf-panel.is-on .rl-gf-in { animation: rl-gf-in .45s ease both; animation-delay: calc(var(--d, 0) * 1s); }
.rl-gf-on .rl-gf-panel.is-on .rl-gf-grow { animation: rl-gf-grow 1.8s ease-out both; animation-delay: .3s; }
@keyframes rl-gf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rl-gf-grow { from { width: 0; } }

/* quantization */
.rl-gf-bits { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; margin-top: 12px; }
.rl-gf-bits i { height: 18px; border-radius: 3px; background: var(--rl-soft); border: 1px solid var(--rl-line); transition: background .2s; }
.rl-gf-bits i.is-on { background: var(--gf-data); border-color: var(--gf-data); }

/* memory pools */
.rl-gf-machs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 4px; }
.rl-gf-mach { padding: 12px; border: 1px solid var(--rl-line); border-radius: 10px; min-width: 0; }
.rl-gf .rl-gf-mach .rl-gf-h { margin: 0; font-size: 0.92rem; font-weight: 700; line-height: 1.35; }
.rl-gf-mach .rl-gf-status { font-size: 0.86rem; }

/* bandwidth */
.rl-gf-flowrow { display: flex; align-items: center; gap: 0; }
.rl-gf-flowrow .rl-gf-box { flex: 0 1 auto; text-align: center; font-weight: 600; font-size: 0.84rem; }
.rl-gf-flow { flex: 1 1 60px; min-width: 40px; height: var(--h, 12px); border-block: 2px solid var(--rl-fg); background-color: var(--rl-soft); background-image: repeating-linear-gradient(90deg, var(--gf-data) 0 8px, transparent 8px 24px); background-size: 24px 100%; transition: height .25s ease; }
/* Moves only once the script is running, so there is always a Pause button beside it. */
.rl-gf-on .rl-gf-flow { animation: rl-gf-flow var(--dur, 1s) linear infinite; }
@keyframes rl-gf-flow { to { background-position: 24px 0; } }
.rl-gf-on .rl-gf-flow.is-paused { animation-play-state: paused; }
.rl-gf-big { font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* offload gauge */
.rl-gf-zones { position: relative; display: flex; height: 26px; border-radius: 6px; overflow: hidden; margin-top: 4px; }
.rl-gf-zones span { flex: 0 0 var(--w); background: var(--z); opacity: .85; }
.rl-gf-zonewrap { position: relative; padding-top: 12px; }
.rl-gf-zones span[data-st="fits"] { --z: var(--rl-ok); }
.rl-gf-zones span[data-st="tight"] { --z: var(--rl-warn); }
.rl-gf-zones span[data-st="offload"] { --z: color-mix(in srgb, var(--rl-bad) 60%, var(--rl-warn)); }
.rl-gf-zones span[data-st="heavy_offload"] { --z: var(--rl-bad); }
.rl-gf-zones span[data-st="no_fit"] { --z: var(--rl-muted); }
.rl-gf-needle { position: absolute; top: 2px; bottom: -4px; left: var(--x, 0%); width: 4px; margin-left: -2px; border-radius: 2px; background: var(--rl-fg); box-shadow: 0 0 0 2px var(--rl-surface); transition: left .2s ease; }

/* cost */
.rl-gf-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; flex: 1 1 100%; }
.rl-gf-inputs label { display: block; font-size: 0.78rem; color: var(--rl-muted); min-width: 0; }
.rl-gf .rl-gf-inputs input { display: block; width: 100%; min-height: 38px; margin-top: 3px; padding: 6px 10px; font: inherit; font-size: 16px; color: var(--rl-fg); background: var(--rl-surface); border: 1px solid var(--rl-line); border-radius: 8px; }
/* The drawing is 640 by 240: at the full width of a desktop article it would be over 400px tall, so the plot is capped. */
.rl-gf-plot { max-width: 760px; margin: 14px auto 0; }
.rl-gf-chart { display: block; width: 100%; height: auto; margin-top: 4px; }
.rl-gf-chart .ax { stroke: var(--rl-line); stroke-width: 1; fill: none; }
.rl-gf-chart .l-local { stroke: var(--gf-data); stroke-width: 2.5; fill: none; }
.rl-gf-chart .l-host { stroke: var(--rl-warn); stroke-width: 2.5; fill: none; stroke-dasharray: 6 4; }
.rl-gf-chart .be { fill: var(--rl-surface); stroke: var(--rl-fg); stroke-width: 2; }
.rl-gf-chart .be-line { stroke: var(--rl-fg); stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; }
.rl-gf-chart line, .rl-gf-chart path, .rl-gf-chart circle { vector-effect: non-scaling-stroke; }
.rl-gf-legend i.is-host { background: var(--rl-warn); }

@media (max-width: 640px) {
	.rl-gf { padding: 14px; }
	.rl-gf .rl-gf-tab { padding: 7px 8px; font-size: 0.8rem; }
	.rl-gf-n { margin-right: 4px; }
	.rl-gf-flowrow .rl-gf-box { padding: 7px 8px; font-size: 0.76rem; }
	.rl-gf-big { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.rl-gf-fill, .rl-gf-needle, .rl-gf-bits i, .rl-gf-flow { transition: none; }
	.rl-gf-on .rl-gf-flow, .rl-gf-on .rl-gf-panel.is-on .rl-gf-in, .rl-gf-on .rl-gf-panel.is-on .rl-gf-grow { animation: none; }
}