/* ============================================================
   DEEP LATTICE — feature page visuals.
   The "nerve centre" diagram: memory sources feed a central core,
   the core briefs every agent. Rendered in the metro/tube-line
   language (colour-coded lines, stations, iron-black ink).
   Loaded via $extra_css only on /features/deep-lattice/.
   ============================================================ */

/* ---------- centrepiece panel ---------- */
.dl-lattice {
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(680px 360px at 50% -10%, rgb(var(--brand-rgb) / .06), transparent 62%),
    var(--canvas);
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
}

.dl-lattice__viz { display: block; width: 100%; height: auto; }

/* line-art node boxes */
.dl-node {
  fill: var(--canvas);
  stroke: var(--hairline);
  stroke-width: 1.5;
}
.dl-node--strategy { stroke: var(--strategy); }
.dl-node--calendar { stroke: var(--calendar); }
.dl-node--write    { stroke: var(--write); }
.dl-node--publish  { stroke: var(--publish); }

.dl-node__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: middle;
}

/* the memory core — the one filled, indigo emblem */
.dl-core { fill: var(--brand); }
.dl-core__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: .01em;
  fill: #fff;
  text-anchor: middle;
}
.dl-core__sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  fill: rgb(255 255 255 / .72);
  text-anchor: middle;
}
.dl-core-halo {
  fill: rgb(var(--brand-rgb) / .10);
  animation: dl-pulse 3.4s var(--ease) infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* column captions */
.dl-colhead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  fill: var(--ink-soft);
  text-transform: uppercase;
  text-anchor: middle;
}

/* connector lines + stations */
.dl-line {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 5 9;
  animation: dl-flow 1.1s linear infinite;
}
.dl-line--feed     { stroke: rgb(var(--brand-rgb) / .55); }
.dl-line--strategy { stroke: var(--strategy); }
.dl-line--calendar { stroke: var(--calendar); }
.dl-line--write    { stroke: var(--write); }
.dl-line--publish  { stroke: var(--publish); }

.dl-station { fill: var(--canvas); stroke-width: 2.4; }
.dl-station--feed     { stroke: var(--brand); }
.dl-station--strategy { stroke: var(--strategy); }
.dl-station--calendar { stroke: var(--calendar); }
.dl-station--write    { stroke: var(--write); }
.dl-station--publish  { stroke: var(--publish); }

@keyframes dl-flow  { to { stroke-dashoffset: -14; } }
@keyframes dl-pulse {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50%      { opacity: 1;  transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .dl-line { animation: none; }
  .dl-core-halo { animation: none; }
}

/* ---------- secondary "how the memory stays live" cycle graphic ---------- */
.dl-cyclewrap {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--tint);
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.4rem, 4vw, 3rem);
  max-width: 940px;
  margin-inline: auto;
}
.dl-cycle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 4vw, 3rem);
}
/* dashed connecting line running behind the three stations */
.dl-cycle::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 16%;
  right: 16%;
  border-top: 2px dashed rgb(var(--brand-rgb) / .35);
  z-index: 0;
}
.dl-cycle__step { position: relative; z-index: 1; text-align: center; }
.dl-cycle__dot {
  width: 48px; height: 48px;
  margin: 0 auto 1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--canvas);
  border: 2px solid var(--brand);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}
.dl-cycle__step--1 .dl-cycle__dot { border-color: var(--strategy); }
.dl-cycle__step--2 .dl-cycle__dot { border-color: var(--write); }
.dl-cycle__step--3 .dl-cycle__dot { border-color: var(--publish); }
.dl-cycle__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 .4rem;
}
.dl-cycle__body { color: var(--ink-soft); font-size: .9rem; line-height: 1.5; margin: 0; }
@media (max-width: 640px) {
  .dl-cycle { grid-template-columns: 1fr; gap: 1.4rem; max-width: 320px; margin-inline: auto; }
  .dl-cycle::before { display: none; }
}

/* ---------- mobile stacked fallback ---------- */
.dl-stack { display: none; }

@media (max-width: 760px) {
  .dl-lattice__viz { display: none; }
  .dl-stack { display: grid; gap: 1rem; }
  /* soften the outer frame on mobile so the stack doesn't read as box-in-box */
  .dl-lattice { border-width: 1px; border-color: var(--hairline); padding: clamp(1.2rem, 5vw, 1.6rem); }
}

/* groups are borderless on mobile — just a label + a single-column list of chips */
.dl-stack__group { padding: 0; }
.dl-stack__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .75rem;
}
.dl-pills { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.dl-pill {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .9rem;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: .7rem .95rem;
}
.dl-pill::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--brand);
  background: var(--canvas);
  flex: none;
}
.dl-pill--strategy::before { border-color: var(--strategy); }
.dl-pill--calendar::before { border-color: var(--calendar); }
.dl-pill--write::before    { border-color: var(--write); }
.dl-pill--publish::before  { border-color: var(--publish); }

.dl-stack__core {
  background: var(--brand);
  border-radius: var(--radius);
  padding: 1.2rem;
  text-align: center;
}
.dl-stack__core-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  margin: 0;
}
.dl-stack__core-sub { color: rgb(255 255 255 / .74); font-size: .84rem; margin: .2rem 0 0; }

.dl-stack__arrow { justify-self: center; color: var(--ink-soft); }
.dl-stack__arrow svg { width: 22px; height: 22px; display: block; }