/* hub.css - landing page (enzyme list / pathway map) */

/* Undo the global style.css `html,body{overflow:hidden;height:100%}` lock that
   is meant for the simulator (full-app) pages: the hub must scroll as a normal
   DOCUMENT so window.scrollY / native history scroll-restoration / the hub
   scroll-save script all target the real scrolling element instead of a
   dead-end 100vh <body> (which silently kept every scroll value at 0 = "back
   always lands at the top"). */
html{overflow:auto;}
body{overflow:visible;height:auto;}

#hubTop{padding:34px 24px 10px;max-width:1180px;margin:0 auto;}
#hubTop h1{font-size:26px;color:#fff;font-weight:800;}
#hubTop h1 span{color:#7fa3d8;font-weight:500;font-size:18px;}
#hubTop .src{margin-top:8px;color:#7c92b8;font-size:12.5px;line-height:1.6;max-width:900px;}
#hubTop .crumb{font-size:12px;color:#7c92b8;margin:0 0 8px;}
#hubTop .crumb a{color:#6fc9ff;}

#hubMain{max-width:1180px;margin:0 auto;padding:10px 24px 60px;}

section h2{color:#dce7fb;font-size:16px;margin:30px 0 14px;border-left:4px solid #58c4ff;padding-left:10px;}
.featureBlock h2{border-color:#ffd479;}
.pathwayBlock h2{border-color:#ffab5e;}

/* ---------- enzyme cards ---------- */
.ecard{display:block;background:rgba(13,20,38,.85);border:1px solid #22345a;border-radius:14px;
  padding:16px 18px;text-decoration:none;color:inherit;position:relative;
  transition:transform .15s, border-color .15s, box-shadow .15s;}
.ecard:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.5);}
.ecard.avail{border-color:#2e7d5b;cursor:pointer;}
.ecard.avail:hover{border-color:#43c98f;}
.ecard.wip{opacity:.78;cursor:default;}
.ecard.wip:hover{transform:none;box-shadow:none;border-color:#22345a;}

.enum{font-size:10px;font-weight:800;letter-spacing:.14em;color:#5f79a3;margin-bottom:6px;}
.ecard h3{color:#fff;font-size:17px;margin-bottom:6px;}
.ecard h3 small{color:#8ea4ca;font-weight:500;font-size:12.5px;}
.erx{font-size:12.8px;color:#bcd0f2;margin-bottom:7px;font-family:'Consolas',monospace;}
.edesc{font-size:11.8px;line-height:1.55;color:#8ea4ca;margin-bottom:8px;}
.eec{font-size:10.5px;color:#5f79a3;margin-bottom:10px;}
.badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  padding:4px 10px;border-radius:999px;}
.badge.on{background:#123d2c;color:#5fe8ab;border:1px solid #2e7d5b;}
.badge.off{background:#1a2440;color:#6d84aa;border:1px solid #2a3a5f;}

.feature{max-width:720px;}
.feature h3{font-size:21px;}
.why{font-size:12px;color:#9db1d4;max-width:720px;margin-top:10px;line-height:1.6;
  border-left:3px solid #ffd479;padding-left:10px;}

.erx b.k{color:#58c4ff;} .erx b.p{color:#ffab5e;}

/* ---------- pathway flow grid ---------- */
.flow{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;}

/* pyruvate gate: Enolase (LEFT) → ▼PEP → PK directly below. From PK, PYRUVATE
   branches two ways: → right to PDH (aerobic, product Acetyl-CoA to its right) and
   ↗ up-right to LDH (fermentation END, product lactate to its right — no arrow onward).
   LDH sits directly above PDH. The ↗ LDH-branch arrow sits at PK's height (middle
   row) so it reads as coming from PK, not from Enolase. All branch arrows share
   one consistent style (20px #4a5f88 + identical .mol chip). */
.pkg{flex:1 1 100%;min-width:0;box-sizing:border-box;display:grid;
  grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr) auto;
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "eno  b1   ldh  lact"
    "pep  diag b2   ."
    "pk   hor  pdh  ac";
  gap:18px 16px;align-items:center;justify-items:center;}
.pkg-eno{grid-area:eno;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}
.pkg-pep{grid-area:pep;display:flex;justify-content:center;align-items:center;}
.pkg-pk{grid-area:pk;display:flex;flex-direction:column;align-items:center;width:100%;}
.pkg-gap.diag{grid-area:diag;display:flex;justify-content:center;align-items:center;}
.pkg-gap.hor{grid-area:hor;display:flex;justify-content:center;align-items:center;}
.pkg-ldh{grid-area:ldh;display:flex;flex-direction:column;align-items:center;gap:8px;}
.pkg-pdh{grid-area:pdh;display:flex;flex-direction:column;align-items:center;gap:8px;}
.pkg-lact{grid-area:lact;display:flex;align-items:center;}
.pkg-ac{grid-area:ac;display:flex;align-items:center;}
.pkg .ecard{flex:none;width:100%;max-width:330px;}
.pkg-end{font-size:11.5px;color:#8ea4ca;font-family:'Consolas',monospace;text-align:center;}
.pkg-end b{color:#ffb46e;}
/* one consistent arrow language for every pkg branch arrow */
.pkg-arrow,.pkg-prod{display:flex;flex-direction:row;align-items:center;gap:5px;
  color:#4a5f88;font-size:20px;line-height:1;white-space:nowrap;}
.pkg-arrow .mol,.pkg-prod .mol{font-size:10.5px;color:#8ea4ca;background:#141f3a;
  border:1px solid #26395f;border-radius:6px;padding:2px 7px;font-family:monospace;white-space:nowrap;}
.pkg-prod.ldarrow .mol{color:#ffb46e;border-color:#5b4a2e;}
/* PEP down arrow: linear arrow in the same colour as the chip text (consistent) */
.pkg-pep .arrow i.lin{color:#4a5f88;font-size:20px;line-height:1;}
@media(max-width:760px){
  .pkg{grid-template-columns:1fr;grid-template-areas:
    "eno" "pep" "diag" "ldh" "lact" "pk" "hor" "pdh" "ac";}
  .pkg .arrow{transform:none;min-height:24px;}
}
.flow .ecard{flex:1 1 250px;max-width:330px;display:flex;flex-direction:column;}
.arrow{align-self:center;color:#4a5f88;font-size:20px;text-align:center;min-width:36px;
  display:flex;flex-direction:column;align-items:center;gap:2px;}
.arrow i{font-style:normal;font-size:13px;color:#ffab5e;}
.arrow .mol,.arrow.split div.mol{font-size:10.5px;color:#8ea4ca;background:#141f3a;
  border:1px solid #26395f;border-radius:6px;padding:2px 7px;font-family:monospace;white-space:nowrap;}
.rowbreak{flex-basis:100%;height:6px;}

.metabolite.start{align-self:center;background:linear-gradient(135deg,#173a63,#12294a);
  color:#cfe2ff;font-size:12px;font-weight:800;letter-spacing:.08em;padding:12px 14px;
  border-radius:10px;border:1px solid #2c4a7c;}
.endpoint{margin-top:16px;color:#ffb46e;font-size:13px;font-weight:600;
  font-family:'Consolas',monospace;}

/* ---------- TCA cycle block ---------- */
.tcaBlock h2{border-color:#7fe08a;}
.tcaBlock .ecard{border-color:#2e7d5b;}
.tcaBlock .enum{color:#6fbc7f;}
.etcBlock h2{border-color:#58c4ff;}
.etcBlock .ecard{border-color:#23507a;}
.etcBlock .enum{color:#6fc9ff;}

/* ---------- gluconeogenesis / PPP ---------- */
.pathwayLead{font-size:12.2px;color:#9db1d4;line-height:1.65;max-width:920px;margin:-4px 0 16px;}
.pathwayLead b{color:#dce7fb;}
.gngBlock h2{border-color:#e8c07a;}
.gngBlock .ecard{border-color:#5b4a2e;}
.gngBlock .enum{color:#e8c07a;}
.pppBlock h2{border-color:#c08cff;}
.pppBlock .ecard{border-color:#4a2e7a;}
.pppBlock .enum{color:#c08cff;}
.glycoBlock h2{border-color:#ff8fa3;}
.glycoBlock .ecard{border-color:#5b2e3e;}
.glycoBlock .enum{color:#ff8fa3;}
.boxBlock h2{border-color:#5ec8c0;}
.boxBlock .ecard{border-color:#2e5b5b;}
.boxBlock .enum{color:#5ec8c0;}
.ketoBlock h2{border-color:#ffc14a;}
.ketoBlock .ecard{border-color:#5b4a1e;}
.ketoBlock .enum{color:#ffc14a;}
.fasBlock h2{border-color:#9ad17a;}
.fasBlock .ecard{border-color:#3a5b2e;}
.fasBlock .enum{color:#9ad17a;}
.ureaBlock h2{border-color:#8aa4ff;}
.ureaBlock .ecard{border-color:#2e3e7a;}
.ureaBlock .enum{color:#8aa4ff;}
.klyBlock h2{border-color:#ff8c6b;}
.klyBlock .ecard{border-color:#5b3228;}
.klyBlock .enum{color:#ff8c6b;}
.ecard.reuse{border-style:dashed;opacity:.92;}
.ecard.reuse:hover{opacity:1;}
.revbadge{position:absolute;top:12px;right:14px;font-size:9.5px;font-weight:800;letter-spacing:.08em;
  padding:3px 8px;border-radius:999px;background:#3a2410;color:#ffb46e;border:1px solid #5b3a2e;}
.bypassTable{margin-top:18px;border-collapse:collapse;max-width:920px;font-size:12px;color:#9db1d4;}
.bypassTable caption{caption-side:top;text-align:left;color:#dce7fb;font-size:12.5px;font-weight:700;margin-bottom:8px;}
.bypassTable th,.bypassTable td{border:1px solid #26395f;padding:8px 12px;text-align:left;}
.bypassTable th{background:#141f3a;color:#cfe2ff;font-weight:700;}
.bypassTable a{color:#6fc9ff;}
.etcDoors{margin-top:12px;}
.etcDoors .ecard{flex:1 1 150px;max-width:200px;padding:12px 14px;}
.etcDoors h3{font-size:14px;margin-bottom:4px;}
.etcDoors h3 small{font-size:11px;}
.etcDoors .erx{font-size:11.5px;margin-bottom:5px;}
.etcDoors .edesc{font-size:11px;margin-bottom:6px;}
.etcDoors .eec{font-size:10px;margin-bottom:8px;}
.tcaIn{align-self:center;background:linear-gradient(135deg,#144a2e,#0f2e1e);
  color:#b9f0cc;font-size:11.5px;font-weight:800;letter-spacing:.08em;padding:10px 14px;
  border-radius:10px;border:1px solid #2e7d5b;max-width:120px;text-align:center;}

/* ---------- method note ---------- */
.methodNote{margin-top:40px;background:rgba(11,17,33,.75);border:1px dashed #2a3a5f;
  border-radius:14px;padding:18px 22px;max-width:900px;}
.methodNote h3{color:#dce7fb;font-size:14px;margin-bottom:10px;}
.methodNote ol{margin-left:18px;display:flex;flex-direction:column;gap:7px;}
.methodNote li{font-size:12px;color:#9db1d4;line-height:1.6;}
.methodNote p{margin-top:10px;font-size:11.5px;color:#66809f;}

/* ---------- reader guide ("How to read these simulators") ---------- */
.readerGuide{margin-top:40px;max-width:920px;}
.readerGuide>h3{color:#dce7fb;font-size:14px;margin-bottom:4px;}
.readerGuide .lead{font-size:11.5px;color:#7c92b8;line-height:1.6;margin-bottom:12px;}
.guideGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px;}
.guideCard{background:rgba(13,20,38,.85);border:1px solid #22345a;border-radius:12px;padding:13px 15px;
  transition:border-color .15s, transform .15s;}
.guideCard:hover{border-color:#2e4a7c;transform:translateY(-2px);}
.guideCard h4{font-size:12px;color:#fff;margin-bottom:7px;display:flex;align-items:center;gap:8px;
  letter-spacing:.02em;}
.guideCard h4 .t{width:7px;height:7px;border-radius:50%;flex:none;}
.guideCard p{font-size:11.3px;color:#94a7cb;line-height:1.62;margin:0;}
.guideCard p b{color:#dce7fb;}
.guideCard .chip{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.08em;padding:1px 8px;
  border-radius:999px;margin:0 2px 1px 0;vertical-align:1px;}
.guideCard .chip.amber{background:#3a2f10;color:#ffd479;border:1px solid #5b4a2e;}
.guideCard .chip.blue{background:#0f2a44;color:#58c4ff;border:1px solid #23507a;}
.guideCard .chip.grey{background:#1a2440;color:#6d84aa;border:1px solid #2a3a5f;}
.guideCard .chip.orange{background:#3a2410;color:#ffab5e;border:1px solid #5b3a2e;}

.layerList{margin:0 0 8px 18px;display:flex;flex-direction:column;gap:6px;max-width:920px;}
.layerList li{font-size:12.5px;color:#9db1d4;line-height:1.55;}
.layerList b{color:#dce7fb;}
.fieldBlock h2 small{color:#7fa3d8;font-weight:500;font-size:13px;margin-left:8px;}
.energyField h2{border-color:#58c4ff;}
.cellField h2{border-color:#c08cff;}
.molField h2{border-color:#ffab5e;}
.epiField h2{border-color:#7fe08a;}
.mapGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;}
.mapCard{max-width:none;}
.connectBox{background:rgba(13,20,38,.85);border:1px solid #22345a;border-radius:14px;padding:16px 18px;max-width:920px;}
.connectBox p{font-size:12.5px;color:#9db1d4;line-height:1.7;margin:0 0 8px;}
.connectBox p:last-child{margin:0;}
.connectBox b{color:#dce7fb;}
.connectBox a{color:#6fc9ff;}
.metMap{display:flex;flex-direction:column;gap:16px;max-width:1100px;}
.metBand{background:rgba(13,20,38,.55);border:1px solid #22345a;border-radius:16px;padding:14px 16px 16px;}
.metBand>h3{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7fa3d8;margin:0 0 12px;border:0;padding:0;}
.metFlow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px;}
.metFlow+.metFlow{margin-top:12px;padding-top:12px;border-top:1px dashed #22345a;}
.mapNode{flex:0 1 200px;max-width:220px;padding:12px 14px;}
.mapNode h3{font-size:15px;margin-bottom:4px;}
.mapNode .erx{font-size:11.5px;margin-bottom:6px;}
.mapNode .eec{font-size:10px;margin-bottom:8px;}
.mapNode .badge{font-size:10px;}
.tcaNode{box-shadow:inset 0 0 0 1px #2e7d5b;}
.metHint{font-size:11.5px;color:#8ea4ca;margin:10px 0 0;line-height:1.55;}
.metHint a{color:#6fc9ff;}
.cycleNav{margin:28px 0 8px;font-size:13px;color:#9db1d4;}
.cycleNav a{color:#6fc9ff;}

footer{text-align:center;color:#4a5f88;font-size:11px;padding:20px;border-top:1px solid #16233f;}
footer a{color:#6fc9ff;}

@media(max-width:760px){
  .flow{flex-direction:column;}
  .arrow{transform:rotate(90deg);min-height:30px;}
  .mapNode{flex:1 1 100%;max-width:none;}
  .metFlow .arrow{transform:none;min-height:24px;}
}

/* cellcycleBlock - 3-across auto-fill grid for the 27 new gate-clean cards */
.cellcycleBlock .pkgGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:18px 0;}
.cellcycleBlock .ecard{min-height:150px;}
.cellcycleBlock .ecard .arrow{display:none;}

/* Field 2 process cards -> layer-3 simulator links */
.mapCard{position:relative;}
.cardStretch{position:absolute;inset:0;border-radius:14px;z-index:1;}
.elinks{margin:2px 0 10px;font-size:12px;line-height:1.9;position:relative;z-index:2;}
.elinks a{color:#6fc9ff;text-decoration:none;padding:2px 4px;border-radius:6px;}
.elinks a:hover{text-decoration:underline;background:rgba(111,201,255,.12);}