/* /connections/shells/ (deep dive "Shells: vaults, viruses and spheres"): prefix sh-. Layout: layouts/connections/shells.html.
   Builds on connections/cx.css: the hub's variables are defined here for .sh (the hub defines them on .cx), plus the few
   .cx-scoped rules this page needs. Light and dark themes. */
main.main:has(.sh){max-width:1000px}
.sh{--cx-g:#00562f;--cx-g2:#004225;--cx-gold:#b8963e;--cx-gold-t:#8a6a1f;--cx-card:var(--entry,#fff);--cx-bd:var(--border,#d8e0db);
  --cx-tx:var(--primary,#1d2a22);--cx-dim:var(--secondary,#5b6b61);--cx-soft:#f4f7f5;--cx-stage:#ffffff;
  color:var(--cx-tx);max-width:100%;margin:0 auto}
[data-theme="dark"] .sh{--cx-g:#6cc79a;--cx-g2:#6cc79a;--cx-gold-t:#e2c072;--cx-soft:#1b2520;--cx-stage:#151d18}
.sh *{box-sizing:border-box}
.sh [hidden]{display:none!important}
.sh a{color:var(--cx-g)}
.sh .cx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sh input:focus-visible,.sh select:focus-visible,.sh canvas:focus-visible,.sh .cx-stage svg:focus-visible{outline:3px solid var(--cx-gold);outline-offset:2px}
.sh-crumbs{font-size:.86rem;color:var(--cx-dim);margin:0 0 .6rem}
.sh-head h1{font-size:clamp(1.55rem,4.6vw,2.3rem);line-height:1.18;margin:.2rem 0 .6rem}
.sh-body{font-size:1.02rem}
.sh-body>h3{font-size:1.3rem;margin:1.8rem 0 .5rem}
.sh-body>p{margin:.7rem 0}
.sh-body table{border-collapse:collapse;margin:1rem 0;font-size:.92rem;display:block;max-width:100%;overflow-x:auto}
.sh-body th,.sh-body td{border:1px solid var(--cx-bd);padding:.35rem .6rem;text-align:left;vertical-align:top}
.sh-body th{background:var(--cx-soft)}
.sh-body td:nth-child(-n+3){white-space:nowrap;font-variant-numeric:tabular-nums}
.sh .cx-deeper h2{font-size:1rem;margin:0 0 .3rem}
.sh-back{margin:1.2rem 0 0;font-size:.95rem}
.sh .cx-viz{max-width:46rem}
.sh .cx-cv{touch-action:none}
.sh .sh-out{font-size:.92rem;line-height:1.5;margin:.45rem .2rem 0;color:var(--cx-tx)}
.sh .sh-out b{color:var(--cx-g)}
.sh .sh-ts{display:flex;flex-wrap:wrap;gap:3px;margin:.4rem .1rem 0}
.sh .sh-ts button{min-width:2.4rem;min-height:36px;border-radius:7px;border:1.5px solid var(--cx-bd);background:var(--cx-card);color:var(--cx-tx);font:600 .82rem/1 system-ui,sans-serif;cursor:pointer;padding:0 .3rem}
.sh .sh-ts button[aria-pressed="true"]{border-color:var(--cx-gold);background:var(--cx-gold);color:#1d2320}
.sh .sh-ts button:focus-visible{outline:3px solid var(--cx-gold);outline-offset:1px}
.sh .sh-ts .sh-no{display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;min-height:36px;border-radius:7px;border:1.5px dashed var(--cx-bd);color:var(--cx-dim);font:.8rem/1 system-ui,sans-serif;opacity:.6}
@media print{.sh .cx-bar,.sh .sh-ts{display:none}}