/* 第 1 课专用：像素放大镜、管线地图。颜色一律走 site.css 的变量，深浅两套自动跟随。 */

/* ------------------------------------------------------------------ 像素放大镜 */
.loupe-stage { position: relative; margin: 0 0 4px; }
.loupe-canvas { display: block; width: 100%; border-radius: 3px; background: var(--paper-2); outline-offset: 3px; }
.loupe-readout { min-height: 4.2em; }
.loupe-readout .big { font-size: 20px; }
.loupe-swatch { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.28em; margin: 0 8px 0 6px; border: 1px solid var(--line-2); border-radius: 2px; }
.loupe-rgb { display: inline-flex; flex-wrap: wrap; gap: 0 12px; font-family: var(--font-mono); font-size: 14.5px; letter-spacing: 0; }
.loupe-rgb b { font-weight: 700; }
.loupe-rgb .c-r b { color: #b3261e; } .loupe-rgb .c-g b { color: #1d7a3e; } .loupe-rgb .c-b b { color: #1f4fb3; }
:root[data-theme="dark"] .loupe-rgb .c-r b { color: #ff8a80; }
:root[data-theme="dark"] .loupe-rgb .c-g b { color: #7fd89a; }
:root[data-theme="dark"] .loupe-rgb .c-b b { color: #8fb4ff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .loupe-rgb .c-r b { color: #ff8a80; }
  :root:not([data-theme="light"]) .loupe-rgb .c-g b { color: #7fd89a; }
  :root:not([data-theme="light"]) .loupe-rgb .c-b b { color: #8fb4ff; }
}
/* 屏幕上这一格的三个小灯：条的高度 = 数 / 255 */
.loupe-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.3em; width: 30px; margin-left: 10px; vertical-align: -0.3em; padding: 2px 3px; background: #0b0c0e; border-radius: 2px; }
.loupe-bars i { flex: 1; height: calc(var(--v) * 100%); min-height: 1px; }
.loupe-bars .b-r { background: #ff2a1a; } .loupe-bars .b-g { background: #22e05a; } .loupe-bars .b-b { background: #2f6bff; }

/* 小色板（揭晓里用） */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 8px 0 20px; padding: 0; list-style: none; }
.swatches li { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); letter-spacing: 0; }
.swatches .chip { display: block; height: 38px; border: 1px solid var(--line-2); border-radius: 3px; margin-bottom: 5px; }
.swatches .nm { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); }

/* ------------------------------------------------------------------ 管线地图 */
.pl-map { margin: 4px 0 6px; }
.pl-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.pl-svg text { fill: var(--ink); }
.pl-svg .pl-rail { stroke: var(--line-2); stroke-width: 2; }
.pl-svg .pl-arrow { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-linejoin: round; }
.pl-svg .pl-node { fill: var(--card); stroke: var(--line); stroke-width: 1; }
.pl-svg .pl-name { font-family: var(--font-serif); font-weight: 600; font-size: 15px; }
.pl-svg .pl-q { font-size: 12.5px; fill: var(--muted) !important; }
.pl-svg .pl-engine { fill: none; stroke: var(--st-7); stroke-width: 2; }
.pl-svg .pl-engine-t { font-size: 12.5px; fill: var(--ink-2) !important; }
.pl-svg .pl-pin rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.pl-svg .pl-pin text { font-size: 11.5px; font-family: var(--font-mono); letter-spacing: 0; }
.pl-svg .pl-pin.ok rect { fill: var(--lk-ok-soft); stroke: var(--lk-ok); }
.pl-svg .pl-pin.bad rect { fill: var(--lk-bad-soft); stroke: var(--lk-bad); stroke-dasharray: 3 2; }
.pl-intro { font-size: 15px; color: var(--ink-2); margin: 16px 0 10px; }
.pl-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); }
.pl-card { border: 1px solid var(--line); border-radius: 5px; padding: 10px 12px 10px; background: var(--paper); display: flex; flex-direction: column; min-width: 0; }
.pl-card[data-state="ok"] { border-color: var(--lk-ok); }
.pl-card[data-state="bad"] { border-color: var(--lk-bad); }
.pl-head { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--muted); }
.pl-text { font-size: 14.5px; line-height: 1.6; margin: 4px 0 8px; flex: 1; }
.pl-pick { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.pl-select { flex: 1; min-width: 0; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--card); color: var(--ink); font: inherit; font-size: 15px; }
.pl-res { font-size: 13.5px; line-height: 1.6; margin: 8px 0 0; color: var(--ink-2); }
.pl-res b { font-weight: 600; }
.pl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; }
.pl-score { margin: 0; font-size: 14.5px; color: var(--ink-2); }

.loupe-lock { display: inline-block; margin-top: 4px; color: var(--safelight); }