*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,sans-serif;background:#141410;color:#e0d8c0;min-height:100vh;padding:0.4rem 0.8rem}
h1{font-size:15px;font-weight:500;color:#f0e8c0}
.copyright{font-size:9px;color:#444;margin-top:2px;margin-bottom:0.4rem}

/* Page header wrapper */
.page-header{max-width:700px;margin:0 auto}

/* Two-col layout */
.layout{display:grid;grid-template-columns:420px 260px;gap:0.6rem;max-width:700px;margin:0.3rem auto 0;align-items:start}
.left-col{display:flex;flex-direction:column;gap:0.6rem;width:420px}
.right-col{display:flex;flex-direction:column;gap:0.5rem}

.panel{background:#0e0e0a;border-radius:9px;border:0.5px solid rgba(255,255,255,0.07);padding:0.65rem}
.panel h3{font-size:10px;font-weight:500;color:#666;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.45rem}
.panel--legend{padding:0.5rem 0.65rem}
.panel--chart{min-width:0}
.panel--metrics{align-self:stretch;display:flex;flex-direction:column;justify-content:center}

/* Grid: square via aspect-ratio, no padding-bottom trick */
.grid-outer{position:relative;width:100%;max-width:420px;aspect-ratio:1}
.grid-inner{position:absolute;inset:6px;display:flex;align-items:center;justify-content:center}
#orange-grid{display:grid;gap:1px}
#orange-grid .patch{border-radius:2px;overflow:hidden;aspect-ratio:1}
#orange-grid .patch svg{display:block;width:100%;height:100%}
#arrow-canvas{position:absolute;inset:6px;pointer-events:none}

/* Legend grid (bottom of left col) */
.legend-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 10px;font-size:10px;color:#888;align-items:center}
.leg-item{display:flex;align-items:center;gap:4px}
.leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.leg-dot--l {background:#e8920d}
.leg-dot--ha{background:#d4b800}
.leg-dot--hb{background:#b89800}
.leg-dot--hc{background:#a08000}
.leg-dot--ga{background:#c86030}
.leg-dot--gb{background:#c03828}
.leg-dot--gc{background:#a82020}
.leg-dot--gd{background:#801010}
.leg-dot--x {background:#444;border:1px solid #666}
.leg-label{color:#ccc}
.leg-label--dim{color:#888}
.leg-arrow{font-size:12px;line-height:1}
.leg-arrow--prey{color:#f5e020}
.leg-arrow--pred{color:#e03030}

/* Chart legend */
.chart-legend{display:flex;gap:14px;font-size:10px;color:#666;margin-bottom:4px;align-items:center}
.chart-leg-item{display:flex;align-items:center;gap:4px}
.chart-leg-line{width:14px;height:2px;display:inline-block;border-radius:1px}
.chart-leg-line--h{background:#f5c020}
.chart-leg-line--g{background:#e03030}
.chart-leg-line--l{background:#555}
.chart-leg-time{font-size:9px;color:#444;margin-left:auto}

/* Chart */
.chart-wrap{position:relative;height:88px}
.chart-zoom{margin-top:4px}
.chart-zoom-label{font-size:9px;color:#555}

/* Metric value colours */
#m-h2{color:#f5c020}
#m-g2{color:#e03030}

/* Controls */
.ctrl-row{margin-bottom:0.38rem}
.ctrl-label{font-size:10px;color:#777;display:flex;justify-content:space-between;margin-bottom:1px}
.ctrl-label span{font-weight:500;color:#ccc}
input[type=range]{width:100%;height:3px;-webkit-appearance:none;appearance:none;border-radius:2px;outline:none;cursor:pointer;display:block;margin-top:4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;cursor:pointer;margin-top:-5px}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px}
.prey-range::-webkit-slider-runnable-track{background:#3a2805}
.prey-range::-webkit-slider-thumb{background:#f5c020;border:1px solid #a07010}
.pred-range::-webkit-slider-runnable-track{background:#280808}
.pred-range::-webkit-slider-thumb{background:#e03030;border:1px solid #801010}
.gen-range::-webkit-slider-runnable-track{background:#0a1e2a}
.gen-range::-webkit-slider-thumb{background:#50a0c0;border:1px solid #286080}

/* Metrics */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.metric{background:#141410;border-radius:5px;padding:0.35rem 0.5rem}
.m-label{font-size:9px;color:#555;margin-bottom:1px}
.m-value{font-size:15px;font-weight:500}

/* Buttons: grid layout, equal size */
.btn-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;margin-bottom:0.4rem}
.btn-grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}
button{cursor:pointer;background:transparent;border:0.5px solid rgba(255,255,255,0.18);border-radius:5px;padding:5px 4px;font-size:10px;color:#ccc;font-family:inherit;text-align:center;white-space:nowrap}
button:hover{background:rgba(255,255,255,0.07)}
button:active{background:rgba(255,255,255,0.12)}

.status{font-size:10px;padding:3px 6px;border-radius:4px;background:#141410;color:#666;margin-top:2px}
.status.ok{color:#50b870}
.status.warn{color:#d08020}
.status.dead{color:#e03030}

select{background:#141410;border:0.5px solid rgba(255,255,255,0.15);border-radius:5px;color:#ccc;font-size:10px;padding:2px 4px;width:100%;font-family:inherit;margin-top:3px}
.tip{font-size:9px;color:#484830;line-height:1.4;margin-top:3px}

/* Toggle */
.tog-row{display:flex;align-items:center;justify-content:space-between;margin-top:5px}
.tog-row span{font-size:10px;color:#777}
.tog{position:relative;display:inline-block;width:32px;height:18px;cursor:pointer;flex-shrink:0}
.tog input{opacity:0;width:0;height:0;position:absolute}
.tog-track{position:absolute;inset:0;background:#333;border-radius:9px;transition:background 0.2s}
.tog input:checked~.tog-track{background:#50a0c0}
.tog-thumb{position:absolute;width:14px;height:14px;background:#ccc;border-radius:50%;top:2px;left:2px;transition:left 0.2s}
.tog input:checked~.tog-track .tog-thumb{left:16px}

/* Collapsible group header colour variants */
.coll-hdr--orange{color:#e8920d}
.coll-hdr--prooi{color:#b08818}
.coll-hdr--pred{color:#a02828}

/* Species subtitle inside collapsible panels */
.species-note{font-size:9px;color:#555;margin-bottom:0.4rem;font-style:italic}

/* Bottom row */
.bottom-row{display:grid;grid-template-columns:420px 260px;gap:0.6rem;max-width:700px;margin:0.5rem auto 0}

/* Tabs */
.tabs{display:flex;gap:0;margin-bottom:0.6rem;border-bottom:0.5px solid rgba(255,255,255,0.1)}
.tab-btn{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;padding:5px 14px;font-size:11px;color:#666;cursor:pointer;font-family:inherit;margin-bottom:-1px}
.tab-btn:hover{color:#aaa;background:transparent}
.tab-btn.active{color:#e0d8c0;border-bottom-color:#50a0c0}
.tab-panel{display:none}.tab-panel.active{display:block}
.eli{line-height:1.65;font-size:11px;color:#aaa}
.eli h4{font-size:11px;font-weight:500;color:#c8b870;margin:0.7rem 0 0.2rem}
.eli h4:first-child{margin-top:0}
.eli p{margin-bottom:0.5rem}
.eli strong{color:#e0d8c0;font-weight:500}
.eli .state{display:inline-block;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:500;margin:0 2px}
.eli .sL{background:#2a2010;color:#e8920d}
.eli .sH{background:#2a2200;color:#f5c020}
.eli .sG{background:#2a0a0a;color:#e03030}
.eli .sX{background:#222;color:#aaa}

/* ELI section wrapper */
.eli-section{max-width:700px;margin:0.8rem auto 0}

/* Lifecycle intro paragraph */
.lifecycle-intro{font-size:11px;color:#b0a880;line-height:1.7;margin:0.3rem 0 0.5rem;font-style:italic}

/* Patch stepper */
#patch-stepper{margin:0.8rem 0}
.stepper-row{display:flex;align-items:center;gap:0.6rem}
.stepper-btn{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#1a1a14;border:0.5px solid rgba(255,255,255,0.2);color:#aaa;font-size:18px;padding:0;display:flex;align-items:center;justify-content:center}
.stepper-content{flex:1;display:flex;flex-direction:column;align-items:center;gap:0.5rem}
#ps-orange{width:160px;height:160px}
.stepper-caption{text-align:center}
#ps-title{font-size:12px;font-weight:500;color:#e0d8c0;margin-bottom:3px}
#ps-desc{font-size:10px;color:#888;line-height:1.5;max-width:320px}
#ps-dots{display:flex;gap:6px;margin-top:2px}

/* Cytoscape diagram heights */
#cy12{height:420px}
#cy49{height:280px}
#cy69{height:340px}

/* State diagram in eli69 */
.sdiag{display:flex;justify-content:center;margin:1rem 0 0.8rem;overflow-x:auto;gap:0.6rem}
.cy-diag{width:100%;background:transparent;border-radius:8px}
.sdiag svg{max-width:100%}

/* Transition / deviation tables */
.state-table,
.dev-table{width:100%;border-collapse:collapse;font-size:10px}
.state-table{margin-bottom:0.6rem}
.dev-table{margin-bottom:0.5rem}
.state-table col:first-child{width:34%}
.state-table col:last-child {width:66%}
.dev-table col:first-child{width:28%}
.dev-table col:last-child {width:72%}
.state-table tbody tr:not(.tr--last),
.dev-table tbody tr:not(.tr--last){border-bottom:0.5px solid rgba(255,255,255,0.07)}
.state-table td:first-child,
.dev-table td:first-child{padding:4px 8px 4px 0;font-weight:500;white-space:nowrap}
.state-table td:last-child,
.dev-table td:last-child{padding:4px 0 4px 8px;color:#888}
/* First-column state label colours */
.td-h       {color:#d4b800}
.td-g       {color:#c03030}
.td-neutral {color:#888}
.td-dim     {color:#777}
.td-reset   {color:#509050}
.td-pred-alt{color:#c86030}
.td-x-state {color:#666}
.td-dark    {color:#555}

/* Blockquote-style note */
.blockquote-note{font-size:10px;color:#666;border-left:2px solid #333;padding-left:8px}
.note-label{color:#888}

/* Mobile collapse */
/* Collapsible headers: hidden on desktop, shown on mobile */
.coll-hdr{display:none}
.coll-arrow{font-size:10px;color:#555;transition:transform 0.2s}
.coll-body{margin-top:0}
@media(max-width:700px){
  .layout{grid-template-columns:1fr;max-width:100%}
  .left-col{width:100%}
  .bottom-row{grid-template-columns:1fr;max-width:100%}
  .right-col{gap:0.4rem}
  .coll-hdr{display:flex;width:100%;text-align:left;background:transparent;border:none;font-size:11px;font-weight:500;color:#aaa;cursor:pointer;padding:0;margin-bottom:0;justify-content:space-between;align-items:center;font-family:inherit}
  .coll-hdr:hover{color:#ddd}
  .mob-collapsible .coll-body{display:none}
  .mob-collapsible.mob-open .coll-body{display:block}
  .mob-collapsible.mob-open .coll-arrow{transform:rotate(180deg)}
  .sdiag svg{width:100%;height:auto}
}