/* THE CODEX - MycoWorld lineage library. Loaded only by /codex/ pages.
   Uses storm.css tokens throughout so the paper theme (html[data-theme=light]) comes free. */

/* ---------- head band ---------- */
.cx-head{position:relative;overflow:hidden;background:
  radial-gradient(120% 140% at 12% 0%,rgba(185,139,255,.20),transparent 60%),
  radial-gradient(90% 120% at 92% 10%,rgba(34,224,200,.16),transparent 62%),
  linear-gradient(160deg,var(--cosmic-3),var(--cosmic));
  border-bottom:1px solid var(--line-2);padding:clamp(48px,7vw,86px) 0 clamp(30px,4vw,44px)}
.cx-head::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--ticks);opacity:.5}
.cx-head .in{max-width:var(--wrap);margin:0 auto;padding:0 20px;position:relative;z-index:2}
.cx-eyebrow{font:600 .74rem/1 var(--mono);letter-spacing:.20em;text-transform:uppercase;color:var(--teal);
  display:flex;align-items:center;gap:10px}
.cx-eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-3),transparent);max-width:220px}
.cx-head h1{font:900 clamp(2.1rem,5.4vw,3.9rem)/1.02 var(--display);letter-spacing:-.025em;margin:.34em 0 .3em;color:var(--ink)}
.cx-head h1 .g{background:var(--grad-2);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-head .sub{max-width:62ch;color:var(--ink-2);font-size:1.05rem;line-height:1.62;margin:0}

.cx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px;margin-top:26px}
.cx-stats div{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 15px}
.cx-stats b{display:block;font:900 1.52rem/1 var(--display);color:var(--ink)}
.cx-stats b.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-stats span{display:block;margin-top:5px;font:500 .73rem/1.35 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-mut)}

/* ---------- sticky controls ---------- */
.cx-bar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--base) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  padding:14px 0 12px;margin-bottom:8px}
html[data-theme=light] .cx-bar{background:color-mix(in srgb,var(--paper) 90%,transparent)}
.cx-bar .in{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.cx-search{display:flex;align-items:center;gap:11px;background:var(--field);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:0 14px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.cx-search:focus-within{border-color:var(--teal);box-shadow:var(--ring)}
.cx-search svg{flex:0 0 auto;opacity:.75}
.cx-search input{flex:1;background:none;border:0;outline:0;color:var(--ink);font:500 1rem/1 var(--sans);padding:15px 0}
.cx-search input::placeholder{color:var(--ph)}
.cx-clear{background:none;border:0;color:var(--ink-mut);cursor:pointer;font:600 .8rem var(--mono);
  padding:6px 8px;border-radius:var(--r-sm);visibility:hidden}
.cx-clear:hover{color:var(--ink)}
.cx-search.has .cx-clear{visibility:visible}

.cx-az{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px;align-items:center}
.cx-az a,.cx-az button{appearance:none;background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--ink-2);font:600 .82rem/1 var(--mono);letter-spacing:.04em;min-width:31px;height:31px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);cursor:pointer;
  text-decoration:none;transition:all .16s var(--ease)}
html[data-theme=light] .cx-az a,html[data-theme=light] .cx-az button{background:rgba(0,0,0,.035)}
.cx-az a:hover,.cx-az button:hover{border-color:var(--line-3);color:var(--ink);transform:translateY(-1px)}
.cx-az .on{background:var(--grad);border-color:transparent;color:var(--ink-on);font-weight:700}
.cx-az .off{opacity:.3;pointer-events:none}
.cx-az .all{min-width:auto;padding:0 12px;letter-spacing:.09em;text-transform:uppercase;font-size:.72rem}
.cx-count{margin-left:auto;font:500 .75rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mut)}

/* ---------- letter groups + cards ---------- */
.cx-wrap{max-width:var(--wrap);margin:0 auto;padding:26px 20px 70px}
.cx-group{margin:0 0 38px;scroll-margin-top:150px}
.cx-letter{display:flex;align-items:center;gap:14px;margin:0 0 15px}
.cx-letter b{font:900 1.68rem/1 var(--display);color:var(--ink);min-width:1.1em}
.cx-letter i{font:500 .73rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-style:normal}
.cx-letter span{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}

.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:12px}
.cx-card{position:relative;display:flex;flex-direction:column;gap:7px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 16px 14px;text-decoration:none;
  transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.cx-card:hover{transform:translateY(-2px);border-color:var(--line-3);box-shadow:var(--shadow)}
.cx-card h3{margin:0;font:700 1.02rem/1.28 var(--sans);color:var(--ink);letter-spacing:-.01em}
.cx-card .lin{margin:0;font-size:.855rem;line-height:1.5;color:var(--ink-mut);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cx-card .lin b{color:var(--ink-2);font-weight:600}
.cx-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.cx-tag{font:600 .69rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:5px 7px;
  border-radius:var(--r-sm);background:rgba(185,139,255,.13);color:var(--purple-2);border:1px solid rgba(185,139,255,.2)}
.cx-tag.t-land{background:rgba(245,184,46,.13);color:var(--gold);border-color:rgba(245,184,46,.22)}
.cx-tag.t-early{background:rgba(71,160,245,.13);color:var(--storm-lt);border-color:rgba(71,160,245,.22)}
.cx-tag.t-mut{background:rgba(226,63,168,.14);color:#F09ED2;border-color:rgba(226,63,168,.24)}
.cx-tag.kin{background:rgba(34,224,200,.12);color:var(--teal);border-color:rgba(34,224,200,.22)}
html[data-theme=light] .cx-tag{background:rgba(124,58,237,.10);color:#5B21B6;border-color:rgba(124,58,237,.18)}
html[data-theme=light] .cx-tag.t-land{background:rgba(180,120,10,.11);color:#8A5A00;border-color:rgba(180,120,10,.2)}
html[data-theme=light] .cx-tag.t-early{background:rgba(20,110,200,.10);color:#0B4F97;border-color:rgba(20,110,200,.18)}
html[data-theme=light] .cx-tag.t-mut{background:rgba(190,30,130,.10);color:#96166B;border-color:rgba(190,30,130,.18)}
html[data-theme=light] .cx-tag.kin{background:rgba(0,140,120,.11);color:#046B5C;border-color:rgba(0,140,120,.2)}
.cx-stock{position:absolute;top:13px;right:13px;font:700 .64rem/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ok);display:flex;align-items:center;gap:5px}
.cx-stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
html[data-theme=light] .cx-stock{color:#2F7D0B}
html[data-theme=light] .cx-stock::before{background:#2F7D0B;box-shadow:none}
.cx-card.has-stock h3{padding-right:74px}

.cx-empty{display:none;text-align:center;padding:60px 20px;color:var(--ink-mut)}
.cx-empty b{display:block;font:900 1.3rem var(--display);color:var(--ink);margin-bottom:8px}
.cx-empty.on{display:block}

/* ---------- stocked rail ---------- */
.cx-shop{border-top:1px solid var(--line);margin-top:18px;padding-top:30px}
.cx-shop h2{font:900 1.5rem/1.15 var(--display);margin:0 0 6px;color:var(--ink)}
.cx-shop p.k{margin:0 0 16px;color:var(--ink-mut);font-size:.94rem;max-width:66ch}
.cx-chips{display:flex;flex-wrap:wrap;gap:7px}
.cx-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:100px;padding:7px 13px;text-decoration:none;
  color:var(--ink-2);font-size:.86rem;font-weight:500;transition:all .16s var(--ease)}
html[data-theme=light] .cx-chip{background:rgba(0,0,0,.03)}
.cx-chip:hover{border-color:var(--teal);color:var(--ink);transform:translateY(-1px)}
.cx-chip.live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok);flex:0 0 auto}

/* ---------- strain page ---------- */
.cx-crumb{font:500 .77rem/1 var(--mono);letter-spacing:.05em;color:var(--ink-soft);margin-bottom:16px;
  display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.cx-crumb a{color:var(--ink-mut);text-decoration:none}
.cx-crumb a:hover{color:var(--teal)}
.cx-crumb i{font-style:normal;opacity:.5}

.cx-chipline{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}

.cx-body{max-width:var(--wrap);margin:0 auto;padding:34px 20px 70px;
  display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:34px;align-items:start}
@media(max-width:900px){.cx-body{grid-template-columns:1fr;gap:26px}}

.cx-sect{margin:0 0 30px}
.cx-sect > h2{font:900 1.22rem/1.2 var(--display);margin:0 0 12px;color:var(--ink);
  display:flex;align-items:center;gap:11px}
.cx-sect > h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.cx-sect p{color:var(--ink-2);line-height:1.68;margin:0 0 11px}

/* the cross statement */
.cx-cross{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:22px 22px 20px;
  position:relative;overflow:hidden}
.cx-cross::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad)}
.cx-cross .lbl{font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mut);margin-bottom:11px}
.cx-cross .st{font:700 1.24rem/1.5 var(--sans);color:var(--ink);letter-spacing:-.01em;margin:0}
.cx-cross .st a{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(34,224,200,.32)}
.cx-cross .st a:hover{border-bottom-color:var(--teal)}
.cx-cross .st .x{color:var(--ink-soft);font-weight:500;padding:0 5px}
.cx-cross .src{margin:13px 0 0;font-size:.82rem;color:var(--ink-soft);line-height:1.5}

/* pedigree */
.cx-ped{display:grid;gap:11px;margin-top:6px}
.cx-node{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:13px 15px;text-decoration:none;transition:all .16s var(--ease)}
.cx-node:hover{border-color:var(--line-3);transform:translateX(2px)}
.cx-node .rk{font:600 .66rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
  min-width:74px;flex:0 0 auto}
.cx-node .nm{font:600 .98rem/1.3 var(--sans);color:var(--ink);flex:1}
.cx-node .nm small{display:block;font:500 .78rem/1.4 var(--sans);color:var(--ink-mut);margin-top:2px}
.cx-node.self{border-color:var(--teal);background:linear-gradient(120deg,rgba(34,224,200,.08),rgba(71,160,245,.05))}
.cx-node.self .nm{color:var(--teal)}
.cx-node.plain{cursor:default}
.cx-node.plain:hover{transform:none;border-color:var(--line)}
.cx-arrow{display:flex;align-items:center;gap:9px;padding-left:36px;color:var(--ink-soft);font:500 .72rem var(--mono);
  letter-spacing:.1em;text-transform:uppercase}
.cx-arrow::before{content:"";width:1px;height:16px;background:var(--line-3)}

/* history */
.cx-hist{border-left:2px solid var(--line-2);padding-left:16px;margin-top:4px}
.cx-hist div{margin-bottom:13px}
.cx-hist time{display:block;font:600 .71rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:5px}
.cx-hist p{margin:0;color:var(--ink-2);font-size:.94rem;line-height:1.55}
.cx-note{background:rgba(245,184,46,.07);border:1px solid rgba(245,184,46,.22);border-radius:var(--r-lg);
  padding:13px 15px;font-size:.88rem;line-height:1.6;color:var(--ink-2);margin-top:12px}
.cx-note b{color:var(--gold)}

/* aside */
.cx-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
@media(max-width:900px){.cx-aside{position:static}}
.cx-buy{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-xl);overflow:hidden}
.cx-buy .hd{padding:15px 17px 0;font:600 .72rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mut)}
.cx-buy .bd{padding:11px 17px 17px}
.cx-buy .nm{font:700 1.04rem/1.35 var(--sans);color:var(--ink);margin:0 0 4px}
.cx-buy .pr{font:900 1.5rem/1 var(--display);color:var(--ink);margin:9px 0}
.cx-buy .pr small{font:500 .8rem var(--mono);color:var(--ink-mut);letter-spacing:.04em}
.cx-btn{display:block;text-align:center;background:var(--grad);color:var(--ink-on);font:700 .93rem/1 var(--sans);
  padding:13px;border-radius:var(--r);text-decoration:none;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.cx-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-brand)}
.cx-btn.ghost{background:none;border:1px solid var(--line-2);color:var(--ink-2)}
.cx-btn.ghost:hover{border-color:var(--teal);color:var(--ink);box-shadow:none}
.cx-oos{font:600 .74rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:7px;margin:4px 0 11px}
.cx-oos::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.cx-region{font-size:.79rem;color:var(--ink-soft);line-height:1.5;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.cx-region b{color:var(--ink-2);font-weight:600}

.cx-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:17px}
.cx-panel h3{font:600 .72rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mut);margin:0 0 12px}
.cx-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.cx-panel li a{color:var(--ink-2);text-decoration:none;font-size:.92rem;line-height:1.4;display:flex;gap:9px;align-items:baseline}
.cx-panel li a:hover{color:var(--teal)}
.cx-panel li a::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-3);flex:0 0 auto;
  position:relative;top:-3px}
.cx-panel .rd{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px}

.cx-foot{max-width:var(--wrap);margin:0 auto;padding:0 20px 56px}
.cx-foot p{font-size:.83rem;line-height:1.65;color:var(--ink-soft);max-width:86ch;margin:0 0 9px}
.cx-foot a{color:var(--ink-mut)}

.cx-pager{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.cx-pager a{flex:1;min-width:210px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:13px 15px;text-decoration:none;transition:all .16s var(--ease)}
.cx-pager a:hover{border-color:var(--line-3);transform:translateY(-1px)}
.cx-pager i{display:block;font:600 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);font-style:normal;margin-bottom:5px}
.cx-pager b{font:600 .96rem/1.3 var(--sans);color:var(--ink)}
.cx-pager .nx{text-align:right}

/* ---------- breeder crests (Mush Realm and friends) ---------- */
.cx-crest{display:inline-flex;align-items:center;gap:6px;font:600 .69rem/1 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;padding:4px 8px 4px 5px;border-radius:100px;
  background:rgba(34,224,200,.10);border:1px solid rgba(34,224,200,.24);color:var(--teal)}
.cx-crest img{border-radius:50%;object-fit:cover;display:block}
html[data-theme=light] .cx-crest{background:rgba(0,140,120,.10);border-color:rgba(0,140,120,.2);color:#046B5C}
.cx-az .brd{min-width:auto;padding:0 12px;gap:6px;text-transform:none;letter-spacing:.02em;font-size:.76rem}
.cx-az .brd img{width:15px;height:15px;border-radius:50%;margin-right:5px}