/* Post visuals (WRK-237): the shared figure kit for guide and compare pages.
   Grammar and rules: DESIGN.md §7. Built from the homepage's window vocabulary
   (hairline displays, title-barred windows, one Glacier window) so a post's
   figures read as the same product the homepage demonstrates.
   Every animated figure has a static resting state, shown as-is under
   prefers-reduced-motion and before the figure scrolls into view. */

:root{
  --pv-ink-rgb:27,28,31;
  --pv-glacier-rgb:64,115,143;
  --pv-stage:linear-gradient(180deg,#FFFFFF 0%,#F7F6F1 100%);
  --pv-screen:#FBFAF7;
}
:root[data-theme="dark"]{
  --pv-ink-rgb:236,234,228;
  --pv-glacier-rgb:143,182,203;
  --pv-stage:linear-gradient(180deg,#101216 0%,#0D0F13 100%);
  --pv-screen:#15171B;
}

/* ---- Figure shell ------------------------------------------------------ */
.pv-fig{margin:30px 0 12px}
.pv-fig figcaption{display:flex;gap:10px;align-items:baseline;font-size:12.5px;line-height:1.45;color:var(--faint);margin-top:10px;max-width:62ch}
.pv-fig figcaption .pv-n{flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---- Stage: the desk a scene plays on ---------------------------------- */
.pv-stage{position:relative;aspect-ratio:16/8.2;border:1px solid var(--line);border-radius:12px;background:var(--pv-stage);overflow:hidden}
@media(max-width:560px){.pv-stage{aspect-ratio:16/10}}

/* Devices. Positioned by inline left/top/width/height percentages. */
.pv-dev{position:absolute;box-sizing:border-box}
.pv-screen{position:absolute;inset:0;border:1px solid rgba(var(--pv-ink-rgb),.22);border-radius:6px;background:var(--pv-screen);transition:opacity .4s ease}
.pv-screen::before{content:"";position:absolute;inset:0 0 auto;height:6%;min-height:5px;border-bottom:1px solid var(--line-soft)}
.pv-dev.monitor::after{content:"";position:absolute;left:44%;right:44%;top:100%;height:9%;border:1px solid rgba(var(--pv-ink-rgb),.18);border-top:0;border-radius:0 0 3px 3px}
.pv-dev.laptop::after{content:"";position:absolute;left:-7%;right:-7%;top:100%;height:5%;min-height:4px;border:1px solid rgba(var(--pv-ink-rgb),.2);border-radius:0 0 6px 6px;background:var(--pv-screen)}
.pv-dev .pv-tag{position:absolute;left:0;right:0;top:calc(100% + 14%);text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.pv-dev.laptop .pv-tag{top:calc(100% + 12%)}
.pv-dev.off .pv-screen{opacity:.28;border-style:dashed}

/* Windows. Positioned on the stage, not inside a device, so they can cross screens. */
.pv-win{position:absolute;box-sizing:border-box;border-radius:4px;border:1px solid rgba(var(--pv-ink-rgb),.24);background:linear-gradient(180deg,rgba(var(--pv-ink-rgb),.10),rgba(var(--pv-ink-rgb),.05));will-change:transform}
.pv-win::before{content:"";position:absolute;inset:0 0 auto;height:14%;min-height:4px;border-bottom:1px solid rgba(var(--pv-ink-rgb),.14)}
.pv-win.hi{background:var(--glacier-soft);border-color:rgba(var(--pv-glacier-rgb),.55)}
.pv-win.hi::before{border-bottom-color:rgba(var(--pv-glacier-rgb),.3)}

/* Status pill: the one line of text a scene may carry. */
.pv-pill{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.pv-pill b{font-weight:400;color:var(--glacier)}

/* ---- Pane: a mock macOS settings window -------------------------------- */
.pv-pane{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);overflow:hidden}
.pv-pane-bar{display:flex;align-items:center;gap:5px;height:28px;padding:0 12px;border-bottom:1px solid var(--line-soft);background:var(--panel)}
.pv-pane-bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.pv-pane-bar span{margin-left:10px;font-size:12px;font-weight:600;color:var(--ink)}
.pv-pane-body{padding:18px clamp(14px,3vw,24px) 20px}
.pv-row{display:grid;grid-template-columns:minmax(96px,150px) 1fr;gap:16px;align-items:center}
.pv-row + .pv-row{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.pv-row-label{font-size:12.5px;color:var(--mist)}
.pv-arr{display:flex;gap:8px;align-items:flex-end}
.pv-mon{position:relative;flex:0 0 auto;width:clamp(70px,16vw,120px);aspect-ratio:16/10;border:1px solid rgba(var(--pv-ink-rgb),.24);border-radius:5px;background:var(--pv-stage);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--ink)}
.pv-mon.small{width:clamp(48px,10vw,76px)}
.pv-mon.hi{border-color:rgba(var(--pv-glacier-rgb),.6);background:var(--glacier-soft);color:var(--glacier)}
.pv-mon.menu::before{content:"";position:absolute;inset:0 0 auto;height:4px;border-radius:4px 4px 0 0;background:rgba(var(--pv-ink-rgb),.2)}
.pv-note{margin-top:8px;font-size:12px;color:var(--faint)}
@media(max-width:560px){.pv-row{grid-template-columns:1fr;gap:8px}}

/* ---- Diagrams and charts (inline SVG) ---------------------------------- */
.pv-svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.pv-svg .ax{stroke:var(--line);stroke-width:1}
.pv-svg .grid{stroke:var(--line-soft);stroke-width:1}
.pv-svg .ink{fill:var(--ink)}
.pv-svg .mist{fill:var(--mist)}
.pv-svg .faint{fill:var(--faint)}
.pv-svg .gl{fill:var(--glacier)}
.pv-svg .gl-soft{fill:var(--glacier-soft)}
.pv-svg .bar{fill:rgba(var(--pv-ink-rgb),.14)}
.pv-svg .stroke-ink{stroke:var(--mist);stroke-width:1.5;fill:none}
.pv-svg .stroke-gl{stroke:var(--glacier);stroke-width:1.5;fill:none}
.pv-svg text{font-family:var(--sans);font-size:12px}
.pv-svg text.m{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.pv-svg text.b{font-weight:600}
.pv-svg-scroll{overflow-x:auto}
.pv-svg-scroll .pv-svg{min-width:560px}

/* ---- Motion ------------------------------------------------------------- */
/* Scenes start when they scroll into view (post-visuals.js adds .play),
   loop with a long hold on the outcome, and stop entirely for reduced motion. */
@media (prefers-reduced-motion: reduce){
  .pv-fig *,.pv-fig *::before,.pv-fig *::after{animation:none !important;transition:none !important}
}