/* Jeeva lab stylesheet (scoped to .jv-ins). Lab variables follow the page theme (assets/site.css). */
.jv-ins{ --l-bg:transparent; --l-surface:color-mix(in srgb, var(--bg) 82%, var(--chrome) 18%); --l-fg:var(--chrome); --l-muted:var(--chrome-2);
  --l-line:var(--edge-hi); --l-display:"Space Grotesk","Segoe UI",system-ui,sans-serif; --l-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --l-sp:#E0A100; --l-on-sp:#1B2219; --l-ring:#6C7A5F; --l-stage1:#F8FAF3; --l-stage2:#D3DBC6; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .jv-ins{ --l-ring:#7F9072; --l-stage1:#1E2920; --l-stage2:#0A0F0B; } }
:root[data-theme="dark"] .jv-ins{ --l-ring:#7F9072; --l-stage1:#1E2920; --l-stage2:#0A0F0B; }
:root[data-theme="light"] .jv-ins{ --l-ring:#6C7A5F; --l-stage1:#F8FAF3; --l-stage2:#D3DBC6; }
.jv-ins *{box-sizing:border-box}
.jv-ins{background:var(--l-bg); color:var(--l-fg); font-family:var(--l-display); font-size:15px; line-height:1.5;
  padding-inline:max(16px, env(safe-area-inset-left,0px)) max(16px, env(safe-area-inset-right,0px));
  padding-block:18px 28px;}
.jv-ins button{font:inherit;color:inherit}
.jv-ins :focus-visible{outline:2px solid var(--l-sp);outline-offset:2px}
.jv-ins .app{display:grid;grid-template-columns:190px minmax(0,1fr) minmax(320px,400px);gap:16px;align-items:start}
.jv-ins #picker{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.jv-ins #picker button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:8px;padding:9px 10px;}
.jv-ins #picker button:hover{background:var(--l-surface)}
.jv-ins #picker button[aria-pressed="true"]{background:var(--l-surface);border-color:var(--l-line)}
.jv-ins .sw{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px var(--l-bg),0 0 0 1.5px var(--l-line)}
.jv-ins #picker button[aria-pressed="true"] .sw{box-shadow:inset 0 0 0 2px var(--l-surface),0 0 0 2px var(--l-fg)}
.jv-ins .pn{display:block;font-weight:600;line-height:1.2}
.jv-ins .pl{display:block;font-family:var(--l-mono);font-size:11px;color:var(--l-muted);font-style:italic}
.jv-ins .stage{min-width:0}
.jv-ins #view{position:relative;height:min(68vh,620px);min-height:360px;border-radius:12px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 38%,var(--l-stage1),var(--l-stage2) 80%);
  border:1px solid var(--l-line);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;}
.jv-ins #view.drag{cursor:grabbing}
.jv-ins #view canvas{display:block;width:100%;height:100%}
.jv-ins #pins{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.jv-ins .lpin{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;white-space:nowrap;
  background:var(--l-surface);color:var(--l-fg);border:1px solid var(--l-fg);border-radius:4px;
  font-family:var(--l-mono);font-size:11px;padding:2px 7px;line-height:1.25}
.jv-ins .jv-leaders{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;color:var(--l-muted)}
.jv-ins .jv-leaders .ln{fill:none;stroke:currentColor;stroke-width:1;opacity:.7}
.jv-ins .jv-leaders .ar{fill:currentColor;opacity:.9}
.jv-ins .jv-leaders .on{color:var(--l-sp);opacity:1;stroke-width:1.6}
.jv-ins .lpin.on{background:var(--l-sp);color:var(--l-on-sp);border-color:var(--l-on-sp)}
.jv-ins .hud{position:absolute;left:12px;top:10px;font-family:var(--l-mono);font-size:11px;color:var(--l-muted);letter-spacing:.04em;text-transform:uppercase;pointer-events:none;line-height:1.6}
.jv-ins .hud b{color:var(--l-fg);font-weight:500;font-size:15px;letter-spacing:0}
.jv-ins .hint{position:absolute;right:12px;top:10px;font-family:var(--l-mono);font-size:11px;color:var(--l-muted);pointer-events:none;text-align:right}
.jv-ins .bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:10px}
.jv-ins .grp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.jv-ins .lbtn{background:var(--l-surface);border:1px solid var(--l-line);border-radius:6px;padding:6px 11px;cursor:pointer;
  font-family:var(--l-mono);font-size:12px;}
.jv-ins .lbtn:hover{border-color:var(--l-fg)}
.jv-ins .lbtn[aria-pressed="true"]{background:var(--l-sp);color:var(--l-on-sp);border-color:var(--l-sp)}
.jv-ins .lab{font-family:var(--l-mono);font-size:11px;color:var(--l-muted);text-transform:uppercase;letter-spacing:.06em}
.jv-ins input[type=range]{accent-color:var(--l-sp);width:130px}
.jv-ins .lcard{background:var(--l-surface);border:1px solid var(--l-line);border-radius:12px;min-width:0;overflow:hidden}
.jv-ins .ch{padding:16px 18px 12px;border-bottom:1px dashed var(--l-line)}
.jv-ins .ch h2{margin:0;font-size:28px;line-height:1.1;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.jv-ins .ch .sci{font-family:var(--l-mono);font-style:italic;color:var(--l-muted);font-size:13px;margin-top:4px}
.jv-ins .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.jv-ins .chip{font-family:var(--l-mono);font-size:11px;border:1px solid var(--l-line);border-radius:999px;padding:2px 9px;color:var(--l-muted)}
.jv-ins .chip.sp{background:var(--l-sp);color:var(--l-on-sp);border-color:var(--l-sp)}
.jv-ins .tabs{display:flex;border-bottom:1px solid var(--l-line);overflow-x:auto}
.jv-ins .tabs button{flex:1 0 auto;background:none;border:0;border-bottom:3px solid transparent;padding:10px 12px;cursor:pointer;
  font-family:var(--l-mono);font-size:12px;color:var(--l-muted);text-transform:uppercase;letter-spacing:.05em;}
.jv-ins .tabs button[aria-selected="true"]{color:var(--l-fg);border-bottom-color:var(--l-sp)}
.jv-ins .body{padding:16px 18px 20px}
.jv-ins .body p{margin:0 0 12px;max-width:62ch}
.jv-ins .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--l-line);border:1px solid var(--l-line);border-radius:8px;overflow:hidden;margin:14px 0}
.jv-ins .stat{background:var(--l-surface);padding:9px 11px;min-width:0}
.jv-ins .stat .k{font-family:var(--l-mono);font-size:10.5px;color:var(--l-muted);text-transform:uppercase;letter-spacing:.06em}
.jv-ins .stat .v{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.jv-ins h3{font-family:var(--l-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--l-muted);margin:18px 0 8px}
.jv-ins table.tax{width:100%;border-collapse:collapse;font-size:14px}
.jv-ins table.tax td{padding:5px 0;border-bottom:1px dotted var(--l-line);vertical-align:top}
.jv-ins table.tax td:first-child{font-family:var(--l-mono);font-size:11px;color:var(--l-muted);text-transform:uppercase;width:34%}
.jv-ins .parts{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.jv-ins .parts button{width:100%;text-align:left;background:transparent;border:1px solid var(--l-line);border-radius:8px;padding:9px 11px;cursor:pointer;}
.jv-ins .parts button:hover, .jv-ins .parts button.on{border-color:var(--l-fg)}
.jv-ins .parts button.on{background:color-mix(in srgb,var(--l-sp) 18%,var(--l-surface))}
.jv-ins .parts b{display:block;font-weight:600}
.jv-ins .parts span{display:block;color:var(--l-muted);font-size:13.5px;line-height:1.45;margin-top:2px}
.jv-ins .basics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;margin-bottom:6px}
.jv-ins .basics div{border:1px solid var(--l-line);border-radius:8px;padding:8px 4px}
.jv-ins .basics b{display:block;font-size:22px;font-weight:800;line-height:1}
.jv-ins .basics span{font-family:var(--l-mono);font-size:10.5px;color:var(--l-muted);text-transform:uppercase}
.jv-ins .cycle{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.jv-ins .cycle li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;position:relative;padding-bottom:14px}
.jv-ins .cycle li:not(:last-child)::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--l-line)}
.jv-ins .dot{width:28px;height:28px;border-radius:50%;background:var(--l-sp);color:var(--l-on-sp);display:grid;place-items:center;font-family:var(--l-mono);font-size:12px;font-weight:500}
.jv-ins .cycle b{display:block}
.jv-ins .cycle .dur{font-family:var(--l-mono);font-size:11.5px;color:var(--l-muted)}
.jv-ins .cycle p{margin:2px 0 0;font-size:14px}
.jv-ins .facts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.jv-ins .facts li{padding:10px 12px;border:1px solid var(--l-line);border-radius:8px}
.jv-ins .kv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 12px;font-size:14px;margin:0}
.jv-ins .kv dt{font-family:var(--l-mono);font-size:11px;color:var(--l-muted);text-transform:uppercase;padding-top:2px}
.jv-ins .kv dd{margin:0 0 8px}
.jv-ins .note{font-size:13px;color:var(--l-muted)}
@media (max-width:1100px){
  .jv-ins .app{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
  .jv-ins #picker{grid-column:1/-1;flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .jv-ins #picker button{width:auto;white-space:nowrap}
}
@media (max-width:820px){
  .jv-ins .app{grid-template-columns:minmax(0,1fr)}
  .jv-ins #view{height:min(58vh,440px);min-height:320px}
  .jv-ins .ch h2{font-size:24px}
  .jv-ins .hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .jv-ins *{scroll-behavior:auto!important}
}
.jv-ins .seg{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.jv-ins .steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.jv-ins .steps>li{border:1px solid var(--l-line);border-radius:8px;overflow:hidden}
.jv-ins .steps>li.on{border-color:var(--l-fg)}
.jv-ins .steps>li>button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;padding:9px 11px;cursor:pointer}
.jv-ins .steps>li>button b{font-weight:600}
.jv-ins .sc{padding:0 12px 12px 49px}
.jv-ins .sc p{margin:0 0 8px}
.jv-ins .sc ul{margin:0 0 10px;padding-left:18px;color:var(--l-muted);font-size:14px}
.jv-ins .nav{display:flex;gap:8px}
.jv-ins .lbtn[disabled]{opacity:.4;cursor:default}
.jv-ins .tag2{display:inline-block;font-family:var(--l-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--l-muted);margin-bottom:2px}
.jv-ins details.qa{border:1px solid var(--l-line);border-radius:8px;padding:9px 12px;margin-bottom:8px}
.jv-ins details.qa summary{cursor:pointer;font-weight:600}
.jv-ins details.qa p{margin:8px 0 0;color:var(--l-muted)}

.jv-ins{padding:0 !important}

/* the same layout as the other Jeeva labs: pills on top, the stage on the left, the explanations on the right and only after a click */
.jv-ins{ padding:0; }
.jv-ins .jv-pillrow{ margin:12px 0 14px; }
.jv-ins .app{ grid-template-columns:minmax(0,1fr) 380px; align-items:stretch; margin-bottom:10px; }
.jv-ins .stage-card{ padding:14px; }
.jv-ins .lcard{ background:var(--panel-2); }
.jv-ins .lcard:not(.opened) > :not(.st-empty){ display:none; }
.jv-ins .lcard.opened .st-empty{ display:none; }
.jv-ins .st-empty{ padding:26px 22px; color:var(--chrome-2); }
.jv-ins .st-empty h2{ font-size:1.3rem; margin:2px 0 10px; line-height:1.2; color:var(--chrome); }
.jv-ins .st-empty p{ margin:0 0 10px; line-height:1.6; }
.jv-ins .st-eyebrow{ margin:0 0 4px; font-size:var(--fs-label); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.jv-ins .bar .row{ display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
.jv-ins #picker{ flex-direction:row; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; display:flex; overflow:visible; }
.jv-ins #picker li{ flex:none; }
.jv-ins #picker button{ width:auto; padding:4px 11px 4px 8px; gap:7px; border:1px solid var(--edge-hi); border-radius:999px; background:var(--surface); color:var(--chrome); font-size:.78rem; white-space:nowrap; }
.jv-ins #picker button:hover{ border-color:var(--chrome-3); }
.jv-ins #picker button[aria-pressed="true"]{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,var(--surface)); }
.jv-ins #picker .pl{ display:none; }
.jv-ins #picker .pn{ font-weight:500; }
@media (max-width:700px){ .jv-ins #picker{ flex-wrap:nowrap; overflow-x:auto; max-width:100%; scrollbar-width:none; } .jv-ins #picker::-webkit-scrollbar{ display:none; } }
@media (max-width:1180px){ .jv-ins .app{ grid-template-columns:minmax(0,1fr) 340px; } }
@media (max-width:880px){ .jv-ins .app{ grid-template-columns:minmax(0,1fr); } }