/* MBP Forge — Tools page + fade overlays */
.tools-page { padding-block: 9rem 4rem; }
.np-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 1.2rem + 3.4vw, 3.6rem);
  line-height: 1.05; color: var(--ink);
  margin-top: var(--s2);
}
/* ---------- MBP Core: the flagship project ---------- */
.tool-featured {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s4); align-items: center;
  width: 100%;
  text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  padding: var(--s5);
  margin-bottom: var(--s4);
  border-top: 2px solid var(--cyan-t);
}
.tool-featured .tf-copy { display: flex; flex-direction: column; gap: var(--s1); }
.tool-featured h2 {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  margin-top: var(--s2); color: var(--ink);
}
.tool-featured .mod-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%; }
.tool-featured .tf-copy > p { color: var(--soft); font-size: var(--fs-body); }
.tool-featured .mod-sub { font-size: 13px; }
.tf-visual { position: relative; min-width: 0; }
.tf-visual img {
  width: 100%; height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, #000 45%, transparent 88%);
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, #000 45%, transparent 88%);
}
.tool-featured .tool-open { margin-top: var(--s2); }
.dg-loop { fill: var(--ember-t); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-anchor: middle; }
@media (max-width: 767px) {
  .tool-featured { grid-template-columns: 1fr; padding: var(--s4); }
  .tf-visual { order: -1; max-width: 260px; }
}

.tools-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
}
.tool-card {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s4);
  text-align: left; cursor: pointer;
  font: inherit; color: inherit;
}
.tool-card h2 { font-size: 1.5rem; margin-top: var(--s2); color: var(--ink); }
.tool-card .mod-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%; }
.tool-card > p { color: var(--soft); font-size: var(--fs-body-s); }
.tool-open {
  margin-top: var(--s2);
  font-family: var(--f-mono); font-size: 12px; color: var(--cyan-t);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-quick) var(--e-settle), transform var(--t-quick) var(--e-settle);
}
.tool-card:hover .tool-open, .tool-card:focus-visible .tool-open { opacity: 1; transform: none; }
.tool-pending { cursor: default; opacity: 0.65; }
.tool-wide { grid-column: 1 / -1; border-top: 2px solid var(--ember); }
@media (max-width: 767px) { .tool-wide { grid-column: auto; } }
@media (max-width: 767px) { .tools-grid { grid-template-columns: 1fr; } .tool-open { opacity: 1; transform: none; } }

/* ---------- overlay: fade in / fade out ---------- */
.tool-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: var(--s3);
}
.tool-overlay[hidden] { display: none; }
.ov-backdrop {
  position: absolute; inset: 0;
  background: rgba(222, 226, 231, 0.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ov-panel {
  position: relative;
  width: min(46rem, 100%);
  max-height: 86svh; overflow-y: auto;
  padding: var(--s5);
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,255,255,0.92));
}
/* container-transform choreography (Material motion): backdrop fades,
   panel grows out of the receding card, content staggers in */
.tool-overlay { opacity: 0; transition: opacity var(--t-slow) var(--e-settle); }
.tool-overlay .ov-panel {
  opacity: 0; transform: translateY(16px) scale(0.965);
  transition: opacity var(--t-slow) var(--e-settle), transform var(--t-slow) var(--e-settle);
}
.tool-overlay.shown { opacity: 1; }
.tool-overlay.shown .ov-panel { opacity: 1; transform: none; }
/* content stagger: children power on in sequence once the panel lands */
.ov-content > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--t-base) var(--e-settle), transform var(--t-base) var(--e-settle);
}
.tool-overlay.shown .ov-content > * { opacity: 1; transform: none; }
.tool-overlay.shown .ov-content > *:nth-child(1) { transition-delay: 60ms; }
.tool-overlay.shown .ov-content > *:nth-child(2) { transition-delay: 120ms; }
.tool-overlay.shown .ov-content > *:nth-child(3) { transition-delay: 180ms; }
.tool-overlay.shown .ov-content > *:nth-child(4) { transition-delay: 240ms; }
.tool-overlay.shown .ov-content > *:nth-child(5) { transition-delay: 300ms; }
.tool-overlay.shown .ov-content > *:nth-child(n+6) { transition-delay: 360ms; }
/* the clicked card recedes while its detail is open */
[data-tool].away {
  opacity: 0.25; transform: scale(0.97);
  transition: opacity var(--t-slow) var(--e-settle), transform var(--t-slow) var(--e-settle);
}
@media (prefers-reduced-motion: reduce) {
  .ov-content > * { opacity: 1; transform: none; transition: none; }
  [data-tool].away { transition: none; transform: none; }
}
.ov-close {
  position: absolute; top: var(--s2); right: var(--s2);
  width: 2.4rem; height: 2.4rem;
  font-size: 1.5rem; line-height: 1; color: var(--soft);
  transition: color var(--t-quick) var(--e-settle);
}
.ov-close:hover { color: var(--ember-t); }
.ov-content h2 { margin-top: var(--s2); font-size: 2rem; }
.ov-lede { margin-top: var(--s2); color: var(--text); font-size: 1.05rem; }
.ov-diagram {
  width: 100%; height: auto; margin-top: var(--s4);
  border: 1px solid var(--line-2); background: rgba(233, 235, 238, 0.5);
  padding: 10px;
}
/* diagram choreography: boxes settle in sequence, connectors draw, a signal travels */
.ov-diagram .dg-box {
  opacity: 0;
  animation: dg-in var(--t-base) var(--e-settle) both;
  animation-delay: var(--dgd, 0ms);
}
@keyframes dg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.ov-diagram .dg-arrow line,
.ov-diagram .dg-arrow path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dg-draw 380ms var(--e-machine) both;
  animation-delay: var(--dgd, 0ms);
}
@keyframes dg-draw { to { stroke-dashoffset: 0; } }
.ov-diagram .dg-loop {
  opacity: 0;
  animation: dg-fade var(--t-slow) var(--e-settle) 1s both;
}
@keyframes dg-fade { to { opacity: 1; } }
.dg-dot { fill: var(--cyan-t); opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
  .ov-diagram .dg-box, .ov-diagram .dg-arrow line, .ov-diagram .dg-arrow path,
  .ov-diagram .dg-loop { animation: none; opacity: 1; stroke-dashoffset: 0; }
  .dg-dot { display: none; }
}

.dg-box rect { fill: rgba(255,255,255,0.85); stroke: var(--line); }
.dg-box text {
  fill: var(--ink); font-family: var(--f-mono); font-size: 12px;
  text-anchor: middle; letter-spacing: 0.06em;
}
.dg-box .dg-small { font-size: 9.5px; fill: var(--soft); }
.dg-hot rect { stroke: var(--cyan-t); }
.dg-gate rect { stroke: var(--ember); }
.dg-obj rect { stroke-dasharray: 4 3; }
.dg-arrow line { stroke: var(--cyan-t); stroke-width: 1.4; marker-end: url(#arr); }
.dg-arrow line { stroke: var(--cyan-t); }
.ov-diagram .dg-arrow line { stroke-linecap: round; }
.ov-grid { margin-top: var(--s4); display: grid; gap: var(--s3); }
.ov-grid dt {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--ember-t);
}
.ov-grid dd { margin-top: 4px; color: var(--soft); font-size: var(--fs-body-s); }
.ov-grid dd strong { color: var(--ink); font-weight: 600; }
.ov-ex {
  margin-top: var(--s4);
  border-left: 2px solid var(--line);
  padding-left: var(--s2);
  font-size: var(--fs-body-s); color: var(--soft);
}
.ov-ex span {
  display: block; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.12em; color: var(--cyan-t); margin-bottom: 2px;
}
/* ---------- KOVA, the guide inside the overlay ---------- */
.kova-guide {
  position: fixed; z-index: 95;
  width: 92px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(40px) scale(0.9);
  transition: opacity var(--t-slow) var(--e-settle),
              transform var(--t-slow) var(--e-settle),
              left 900ms cubic-bezier(0.16, 1, 0.3, 1),
              top 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kova-guide[hidden] { display: none; }
.kova-guide.in { opacity: 1; transform: none; }
.kova-guide.flying {
  opacity: 0;
  transform: translate(-40vw, -30vh) scale(0.5) rotate(-8deg);
  transition: opacity 620ms var(--e-machine), transform 620ms var(--e-machine);
}
.kg-body {
  display: block; width: 92px; height: 92px;
  position: relative;
  padding: 0; border: 0; background: none;
  pointer-events: auto; cursor: pointer;
}
/* the guide holds still beside the engineering copy — it moves only when it
   travels between sections or changes state, which is reactive, not ambient */
.kg-frames { position: absolute; inset: 0; display: block; }
.kg-f {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  opacity: 0; transform: scale(0.92);
  transition: opacity var(--t-base) var(--e-settle), transform var(--t-base) var(--e-settle);
  filter: drop-shadow(0 6px 18px rgba(180, 40, 120, 0.28));
}
.kova-guide[data-state="think"]   .kg-f[data-for="think"],
.kova-guide[data-state="excited"] .kg-f[data-for="excited"],
.kova-guide[data-state="proud"]   .kg-f[data-for="proud"],
.kova-guide[data-state="go"]      .kg-f[data-for="go"] { opacity: 1; transform: none; }
.kg-body:hover .kg-frames { animation-play-state: paused; }
.kg-body:hover .kg-f { transform: scale(1.06); }

/* what KOVA is saying — sits to its left, pointing back at the panel */
.kg-say {
  position: absolute; right: 104px; top: 26px;
  width: max-content; max-width: 220px;
  padding: 0.55em 0.85em;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.06em; line-height: 1.45; color: var(--ink);
  opacity: 0; transform: translateX(8px);
  transition: opacity var(--t-base) var(--e-settle), transform var(--t-base) var(--e-settle);
  pointer-events: none;
}
.kg-say::after {
  content: ""; position: absolute; right: -5px; top: 14px;
  width: 8px; height: 8px;
  background: rgba(255, 255, 255, 0.94);
  border-right: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.kova-guide.talking .kg-say { opacity: 1; transform: none; }

/* parked mode (narrow viewports): small, cornered, no travel commentary */
.kova-guide.is-parked { width: 64px; transition-duration: var(--t-slow), var(--t-slow), 0ms, 0ms; }
.kova-guide.is-parked .kg-body { width: 64px; height: 64px; }
.kova-guide.is-parked .kg-say { right: 74px; top: 12px; max-width: 150px; }

@media (prefers-reduced-motion: reduce) {
  .kova-guide { transition: opacity var(--t-base) linear; transform: none; }
  .kova-guide.in { transform: none; }
  .kg-frames { animation: none; }
  .kg-f, .kg-say { transition: none; }
  .kova-guide.flying { transform: none; }
}

body.ov-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .tool-overlay, .tool-overlay .ov-panel { transition: none; transform: none; }
}