/* ENOK — Design Engineer Commons wing.
   Pedagogy by being: motion below uses the Animation Pack tokens verbatim
   (durations, curves, distances, stagger) — the wing demonstrates what it teaches. */
:root{
  --motion-instant:80ms; --motion-fast:140ms; --motion-base:200ms; --motion-gentle:280ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in:cubic-bezier(0.7,0,0.84,0);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
}
@media (prefers-reduced-motion: reduce){
  :root{ --motion-instant:0ms; --motion-fast:0ms; --motion-base:0ms; --motion-gentle:0ms; }
}

/* ---------- universe grid ---------- */
.c-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.c-card{
  background:var(--panel2);border:1px solid var(--line-soft);border-radius:var(--r-card);
  padding:14px 14px 12px;cursor:pointer;position:relative;
  transition:border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.c-card:hover{border-color:var(--line);transform:translateY(-2px);}
.c-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.c-card:active{transform:translateY(0);}
/* entrance: fade + 12px rise (Animation Pack: distance.step), staggered by commons.js */
.c-card.pre{opacity:0;transform:translateY(12px);}
.c-card.in{opacity:1;transform:translateY(0);
  transition:opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);}
@media (prefers-reduced-motion: reduce){ .c-card.pre{transform:none;} }

.c-top{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.c-type{font-size:9.5px;text-transform:uppercase;letter-spacing:1.2px;border-radius:var(--r-pill);
  padding:2px 8px;border:1px solid var(--line);color:var(--ink2);background:var(--chipbg);}
.c-type.t-principle{color:var(--ink1);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
.c-type.t-pack{background:color-mix(in srgb,var(--accent) 14%,var(--chipbg));color:var(--ink1);}
.c-access{margin-left:auto;font-size:10px;color:var(--ink3);}
.c-name{font-size:15px;font-weight:700;line-height:1.25;margin-bottom:4px;}
.c-gist{font-size:12.5px;color:var(--ink2);line-height:1.5;}
.c-more{display:none;}
.c-card.open .c-more{display:block;}
.c-why{font-size:12px;color:var(--ink2);line-height:1.5;border-left:2px solid var(--accent);
  padding:2px 0 2px 10px;margin-top:10px;font-style:italic;}
.c-meta{font-size:11px;color:var(--ink3);margin-top:8px;line-height:1.5;}
.c-rels{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.c-rel{font-size:10.5px;color:var(--ink2);background:var(--chipbg);border:1px solid var(--line-soft);
  border-radius:var(--r-pill);padding:3px 9px;cursor:pointer;
  transition:background var(--motion-instant) var(--ease-out), color var(--motion-instant) var(--ease-out);}
.c-rel b{font-weight:500;color:var(--ink3);font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;margin-right:4px;}
.c-rel:hover{background:var(--hover);color:var(--ink1);}
.c-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.c-tagrow{margin-top:9px;font-size:10.5px;color:var(--ink3);letter-spacing:.2px;}

/* ---------- constellation (focus) banner ---------- */
.c-focus{display:none;align-items:center;gap:10px;margin:0 0 14px;font-size:12.5px;color:var(--ink2);
  background:var(--chipbg);border:1px solid var(--line);border-radius:var(--r-nav);padding:8px 12px;}
.c-focus.on{display:flex;}
.c-focus b{color:var(--ink1);}
.c-focus button{margin-left:auto;font-size:11px;color:var(--ink2);background:none;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:3px 10px;}
.c-focus button:hover{color:var(--ink1);background:var(--hover);}

/* ---------- paths ---------- */
.c-paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:12px;}
.c-path{background:var(--panel2);border:1px solid var(--line-soft);border-radius:var(--r-card);padding:16px;}
.c-path h3{font-size:16px;margin-bottom:4px;}
.c-path .c-gist{margin-bottom:10px;}
.c-path-meta{display:flex;gap:12px;font-size:10.5px;color:var(--ink3);margin-bottom:12px;flex-wrap:wrap;}
.c-steps{display:flex;flex-direction:column;gap:0;}
.c-step{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;position:relative;padding-bottom:12px;}
.c-step:last-child{padding-bottom:0;}
.c-step::before{content:"";position:absolute;left:10px;top:20px;bottom:-2px;width:1px;background:var(--line);}
.c-step:last-child::before{display:none;}
.c-step-dot{width:21px;height:21px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel);
  color:var(--ink3);font-size:10px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;}
.c-step-node{font-size:12.5px;font-weight:700;color:var(--ink1);cursor:pointer;}
.c-step-node:hover{text-decoration:underline;text-underline-offset:3px;}
.c-step-note{font-size:11.5px;color:var(--ink2);line-height:1.45;margin-top:2px;}
.c-outcome{font-size:11.5px;color:var(--ink2);line-height:1.5;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft);}
.c-outcome b{color:var(--ink1);font-size:10px;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:3px;}

/* ---------- seam (definition) ---------- */
.c-seam{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px;}
.c-seam .step{background:var(--panel2);border:1px solid var(--line-soft);border-radius:var(--r-card);padding:14px;}
.c-seam .k{font-size:9.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:1.2px;display:block;margin-bottom:6px;}
.c-seam b{font-size:14px;display:block;margin-bottom:5px;}
.c-seam p{font-size:12px;color:var(--ink2);line-height:1.5;}

/* ---------- agent panel ---------- */
.c-ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin-top:12px;}
.c-op{font-size:11.5px;line-height:1.5;background:var(--panel2);border:1px solid var(--line-soft);
  border-radius:var(--r-nav);padding:9px 11px;color:var(--ink2);}
.c-op code{color:var(--ink1);font-size:11px;}
.c-op .h{color:var(--ink3);font-size:9.5px;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:2px;}

@media (max-width:760px){
  .c-grid{grid-template-columns:1fr 1fr;}
  .c-paths{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .c-grid{grid-template-columns:1fr;}
}