/* EmberWell Energy — diagram and infographic styles.
   Linked by index.html, operators.html, mining.html. */

/* ---------- horizontal process flow (reflows to vertical on mobile) ---------- */
.flowdiag{margin:40px 0 8px;border:1px solid var(--line);background:var(--ink-2);padding:34px 26px 30px}
.flowdiag-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--teal-soft);text-transform:uppercase;margin-bottom:26px;text-align:center}
.flowdiag-track{display:flex;align-items:stretch;justify-content:center;gap:0;flex-wrap:nowrap}
.fnode{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px}
.fnode-icon{width:74px;height:74px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ink);margin-bottom:16px;flex:0 0 auto}
.fnode-icon svg{width:40px;height:40px}
.fnode .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ember);text-transform:uppercase;margin-bottom:7px}
.fnode h4{font-family:var(--display);font-weight:700;font-size:14.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--cream);line-height:1.25;margin-bottom:7px}
.fnode p{font-size:13px;line-height:1.5;color:var(--cream-dim);margin:0}
.farrow{flex:0 0 40px;display:flex;align-items:center;justify-content:center;padding-top:26px}
.farrow svg{width:34px;height:16px}
@media(max-width:760px){
  .flowdiag-track{flex-direction:column;align-items:stretch;gap:0}
  .fnode{flex-direction:row;text-align:left;align-items:flex-start;gap:16px;padding:0}
  .fnode-icon{width:58px;height:58px;margin-bottom:0}
  .fnode-icon svg{width:30px;height:30px}
  .fnode-body{flex:1}
  .farrow{flex:0 0 auto;padding:10px 0 10px 28px;justify-content:flex-start;transform:rotate(90deg);transform-origin:left center;height:22px}
}

/* ---------- generic SVG figure wrapper ---------- */
.figure{margin:40px 0 8px;border:1px solid var(--line);background:var(--ink-2);padding:30px 26px 24px}
.figure-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--teal-soft);text-transform:uppercase;margin-bottom:22px;text-align:center}
.figure svg{width:100%;height:auto;display:block}
.figure-cap{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--cream-dim);text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.figure-cap strong{color:var(--cream);font-weight:500}

/* SVG text classes used inside figures */
.svg-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.svg-title{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase}
.svg-note{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.04em}

/* Wide technical figures stay legible on phones by scrolling rather than
   shrinking. Without this, 10px SVG text renders at ~4px on a 380px screen. */
@media(max-width:700px){
  .figure{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-left:18px;padding-right:18px}
  .figure svg{min-width:640px}
  .figure-title::after{content:" — swipe to see all";color:var(--cream-dim);letter-spacing:.04em}
  .figure-cap{position:sticky;left:0}
}