/* ============================================================
   Pipeline theme — shared by index.html (homepage DAG) and
   experience.html (career graph). Loaded only on those two pages.
   ============================================================ */
:root{
  --bg:#0b0f19; --panel:#131a2b; --panel-2:#0f1524; --line:#263252;
  --fg:#eef1fb; --muted:#7684a8; --cyan:#3ddbd9; --good:#4caf7d; --gold:#e8b84b;
}

/* minimal-mistakes.css sets html{background:#fff} globally; override it here so no white
   sliver can show through at the top/edges of these two dark pages. */
html{ background:var(--bg); }
.pipeline-page{ background:var(--bg); color:var(--fg); font-family:'Manrope',sans-serif; margin:0; }
.pipeline-page .initial-content{ max-width:1300px; margin:0 auto; padding:0 clamp(1rem,4vw,2.6rem) 1.4rem; }

.pl-header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.6rem 0 .35rem; flex-wrap:wrap; }
.pl-header-right{ display:flex; align-items:center; gap:.8rem; }
.pl-name{ font-family:'IBM Plex Mono',monospace; font-size:clamp(1.6rem,4vw,2.4rem); margin:0; color:var(--fg); }

/* ---- sandwich nav, dark variant (homepage / experience page) ---- */
.nav-sandwich{ position:relative; }
.nav-sandwich__btn{ background:none; border:none; cursor:pointer; padding:.4rem; display:flex; flex-direction:column; gap:4px; }
.nav-sandwich__btn span{ display:block; width:22px; height:2px; background:var(--fg); border-radius:1px; }
.nav-sandwich__menu{ display:none; position:absolute; top:100%; right:0; background:var(--panel); border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.4); padding:.5rem 0; min-width:150px; z-index:20; }
.nav-sandwich__menu.is-open{ display:block; }
.nav-sandwich__menu a{ display:block; padding:.55rem 1rem; color:var(--fg); text-decoration:none; font-size:.85rem; font-family:'IBM Plex Mono',monospace; }
.nav-sandwich__menu a:hover{ background:rgba(255,255,255,.06); color:var(--cyan); }
.pl-cursor{ display:inline-block; width:.5em; height:1em; background:var(--cyan); vertical-align:-2px; animation:pl-blink 1s steps(1) infinite; }
@keyframes pl-blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .pl-cursor{ animation:none; } }

.pl-sub{ color:var(--muted); font-size:.85rem; font-family:'IBM Plex Mono',monospace; margin-bottom:.9rem; max-width:70ch; line-height:1.5; }

/* ---- DAG canvas (shared by both pages) ----
   .dag-viewport is sized to the space actually available on screen (JS-computed);
   .dag-scale is the natural (unscaled) dagre-laid-out graph, shrunk with a CSS
   transform to fit inside the viewport — this is what removes scrolling. */
.dag-viewport{ position:relative; overflow:hidden; width:100%; margin:.8rem 0; cursor:grab; }
.dag-viewport.dragging{ cursor:grabbing; }
.dag-scale{ position:absolute; top:0; left:0; transform-origin:top left; }
.dag-scale svg.edges{ position:absolute; inset:0; overflow:visible; }

.edge{ fill:none; stroke:var(--line); stroke-width:2; stroke-dasharray:7 6; animation:pl-flow 1.2s linear infinite; transition:stroke .2s, opacity .2s, stroke-width .2s; }
.edge.lit{ stroke:var(--cyan); opacity:1; stroke-width:2.4; }
.edge.dim{ opacity:.14; animation:none; }
.edge.ach-edge{ stroke-dasharray:3 4; stroke-width:1.4; }
.edge.ach-edge.lit{ stroke:var(--gold); }
.edge.parallel-edge{ stroke-dasharray:2 3; stroke-width:1.4; }
@keyframes pl-flow{ to{ stroke-dashoffset:-26; } }
@media (prefers-reduced-motion: reduce){ .edge{ animation:none; } }

.node{
  position:absolute; transform:translate(-50%,-50%); background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:.5rem .65rem; font-family:'IBM Plex Mono',monospace; cursor:pointer;
  transition:border-color .18s, box-shadow .18s, opacity .18s; user-select:none;
  box-sizing:border-box; white-space:nowrap;
}
.node:hover, .node.lit{ border-color:var(--cyan); box-shadow:0 0 22px rgba(61,219,217,.25); }
.node.dim{ opacity:.25; }
.node.pinned{ border-color:var(--good); box-shadow:0 0 22px rgba(76,175,125,.35); }
.node .n-id{ font-size:.72rem; color:var(--fg); line-height:1.25; }
.node .n-kind{ font-size:.58rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.25rem; display:flex; align-items:center; gap:.35em; }
.node .n-kind i{ width:.4em; height:.4em; border-radius:50%; background:var(--good); display:inline-block; flex:none; }

.node.you-node{ text-align:center; }
.node.you-node .n-hint{ display:block; font-size:.56rem; color:var(--cyan); opacity:0; transition:opacity .15s; margin-top:.3rem; }
.node.you-node:hover .n-hint{ opacity:1; }

.node.small .n-id{ font-size:.64rem; }
.node.small .n-kind{ font-size:.54rem; }

/* Collapsible group (homepage). Dashed like .achievement to read as "not a project";
   its hint stays visible rather than appearing on hover, because a box you can expand
   has to advertise that it expands. */
.node.group-node{ background:var(--panel-2); border-style:dashed; text-align:center; }
.node.group-node:hover, .node.group-node.lit{ border-color:var(--gold); border-style:solid; box-shadow:0 0 18px rgba(232,184,74,.25); }
.node.group-node .n-kind{ justify-content:center; }
.node.group-node .n-kind i{ background:var(--gold); }
.node.group-node .n-hint{ display:block; font-size:.56rem; color:var(--gold); opacity:.8; transition:opacity .15s; margin-top:.3rem; }
.node.group-node:hover .n-hint{ opacity:1; }

.node.achievement{ background:var(--panel-2); border-style:dashed; }
.node.achievement:hover, .node.achievement.lit{ border-color:var(--gold); border-style:solid; box-shadow:0 0 18px rgba(232,184,74,.25); }
.node.achievement .n-kind i{ background:var(--gold); }

/* ---- pinned job/achievement detail card (experience page) — same panel language as
   the homepage's .summary card below, in a separate area below the graph rather than
   floating over it (a floating panel could end up sitting on top of the very node whose
   click opened it, since node positions are data-driven from dagre, not fixed). ---- */
.detail-card{
  margin-top:1.3rem; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:1.6rem; position:relative; animation:pl-pop .18s ease; scroll-margin-top:1rem;
  font-family:'IBM Plex Mono',monospace; font-size:.82rem;
}
.detail-card h3{ font-family:'IBM Plex Mono',monospace; font-size:1.15rem; margin:0 0 .4rem; color:var(--fg); padding-right:2rem; }
.detail-card p{ color:#c7cfe6; margin:.3rem 0 0; line-height:1.6; font-family:'Manrope',sans-serif; }
.detail-card ul{ margin:.5rem 0 0 1.1rem; padding:0; color:#c7cfe6; font-family:'Manrope',sans-serif; font-size:.85rem; line-height:1.6; }
.detail-card .meta{ color:var(--muted); font-size:.75rem; margin-top:.2rem; }
.detail-card .close-btn{ position:absolute; top:.85rem; right:1rem; background:none; border:none; color:var(--muted); font-size:1.2rem; line-height:1; cursor:pointer; font-family:monospace; padding:.2rem .4rem; }
.detail-card .close-btn:hover{ color:var(--fg); }

/* ---- pinned project summary panel (homepage) ---- */
.summary{
  margin-top:1.3rem; background:var(--panel); border:1px solid var(--good); border-radius:12px;
  padding:1.6rem; display:flex; gap:1.6rem; position:relative; animation:pl-pop .18s ease; scroll-margin-top:1rem;
}
@keyframes pl-pop{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.summary img{ width:280px; max-width:38%; height:auto; border-radius:8px; flex:none; }
.summary .close-btn{ position:absolute; top:.85rem; right:1rem; background:none; border:none; color:var(--muted); font-size:1.2rem; line-height:1; cursor:pointer; font-family:monospace; padding:.2rem .4rem; }
.summary .close-btn:hover{ color:var(--fg); }
.summary h3{ font-family:'IBM Plex Mono',monospace; font-size:1.15rem; margin-bottom:.5rem; color:var(--fg); padding-right:2rem; }
.summary .tags{ margin-bottom:.8rem; }
.summary .tags span{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--cyan); background:rgba(61,219,217,.1); padding:.15rem .55rem; border-radius:3px; margin-right:.4rem; display:inline-block; margin-bottom:.3rem; }
.summary p{ color:#c7cfe6; line-height:1.7; font-size:.92rem; margin-bottom:0; }
.summary .cta-row{ margin-top:1rem; display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; }
.summary .btn-live, .summary .btn-gh{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; text-decoration:none; padding:.5rem .9rem; border-radius:6px; }
.summary .btn-live{ background:var(--good); color:#08130f; font-weight:600; }
.summary .btn-gh{ border:1px solid var(--line); color:var(--fg); }
.summary .btn-gh:hover{ border-color:var(--cyan); color:var(--cyan); }
.summary .further{ color:var(--muted); font-size:.78rem; font-style:italic; }
@media (max-width:640px){ .summary{ flex-direction:column; } .summary img{ width:100%; max-width:100%; } }

/* ---- contact strip (homepage) ---- */
.contact-strip{ margin-top:1.4rem; border-top:1px solid var(--line); padding-top:1.1rem; display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; }
.cs-label{ font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.contact-links{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.contact-links a{ color:var(--fg); text-decoration:none; font-family:'IBM Plex Mono',monospace; font-size:.85rem; border-bottom:1px solid transparent; transition:color .15s, border-color .15s; }
.contact-links a::before{ content:'› '; color:var(--cyan); }
.contact-links a:hover{ color:var(--cyan); border-color:var(--cyan); }

/* ---- legend (experience page) ---- */
.pl-legend{ display:flex; gap:1.3rem; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--muted); margin-bottom:.5rem; }
.pl-legend span{ display:flex; align-items:center; gap:.45em; }
.pl-legend i{ width:.8em; height:.8em; border-radius:3px; display:inline-block; border:1px solid var(--line); background:var(--panel); }
.pl-legend i.ach{ background:var(--panel-2); border-style:dashed; border-color:var(--gold); }
.pl-legend i.parallel{ border-style:dashed; }

/* ---- generic footer used on both custom pages ---- */
.pl-footer{ margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; font-family:'IBM Plex Mono',monospace; }
.pl-footer a{ color:var(--muted); }
.pl-footer a:hover{ color:var(--cyan); }