/* Section: Plaiq (#plaiq). Three measure cards with hex-field illustrations, a "what comes out" row, and the "two ways in"
   diagram. The markup is generated by scripts/plaiq-render.py (edit the script, not index.html).
   Independent of the other sections. Needs section-base.css. Neutrals come from tokens, so the white-page override in
   light-body.css flips them; blue is the site accent (--accent). The four band colours repeat the ones in plaiq-data.css so
   the two sections stay independent.
   The diagram's curves use a fixed 240 x 140 viewBox that lines up with two 56px rows (28px gap). */

#plaiq {
  --band-poor: #EF4444; --band-sub: #F59E0B; --band-good: #84CC16; --band-opt: #16A34A;
  --band-poor-tint: rgba(239, 68, 68, 0.11); --band-sub-tint: rgba(245, 158, 11, 0.13);
  --band-good-tint: rgba(132, 204, 22, 0.15); --band-opt-tint: rgba(22, 163, 74, 0.11);
}

/* ---- Measure cards ---- */
.plq__metrics, .plq__outs { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; }
@media (min-width: 800px) { .plq__metrics, .plq__outs { grid-template-columns: repeat(3, 1fr); } }
.plq__metric, .plq__out { display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(10, 10, 10, 0.02), 0 12px 32px -20px rgba(10, 10, 10, 0.22); }
.plq__body { padding: var(--s-5) var(--s-6) var(--s-6); }
.plq__metric .card__title, .plq__out .card__title { font-size: 1.25rem; }
.plq__art { border-bottom: 1px solid var(--border); background: var(--bg); }
.plq__svg { display: block; width: 100%; height: auto; }

/* Hex-field art */
.plq__gl { fill: none; stroke: var(--t-4); stroke-opacity: 0.24; stroke-width: 1; }
.plq__v1 { fill: var(--accent); fill-opacity: 0.10; }
.plq__v2 { fill: var(--accent); fill-opacity: 0.20; }
.plq__v3 { fill: var(--accent); fill-opacity: 0.34; }
.plq__v4 { fill: var(--accent); fill-opacity: 0.52; }
.plq__n1 { fill: var(--t-head); fill-opacity: 0.05; }
.plq__n2 { fill: var(--t-head); fill-opacity: 0.11; }
.plq__op { fill: var(--bg); stroke: var(--t-3); stroke-width: 1.5; }
.plq__tm { fill: var(--bg); stroke: var(--t-head); stroke-width: 1.7; stroke-linejoin: round; }
.plq__pl { fill: var(--t-head); stroke: var(--bg); stroke-width: 1.5; stroke-linejoin: round; }
.plq__pdot { fill: var(--t-head); }
.plq__ln { fill: none; stroke: var(--t-head); stroke-width: 1.8; stroke-linecap: round; }
.plq__ln--dim { stroke: var(--t-3); stroke-opacity: 0.55; stroke-width: 1.2; stroke-dasharray: 3 3; }
.plq__ln--best { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }
.plq__ah { fill: var(--t-head); }
.plq__ah--best { fill: var(--accent); }
.plq__x { fill: none; stroke: var(--t-head); stroke-width: 1.8; stroke-linecap: round; }
.plq__keyg rect { fill: var(--bg); fill-opacity: 0.94; stroke: var(--border); stroke-width: 1; }
.plq__keyg text { font: 500 8.5px var(--font-mono); fill: var(--t-2); letter-spacing: 0.02em; }

.plq__grid-note { margin: var(--s-5) 0 var(--s-8); text-align: center; color: var(--t-3); font: 400 var(--fs-mono)/1.5 var(--font-mono); letter-spacing: 0.02em; }

/* ---- What comes out ---- */
.plq__outhead { display: flex; align-items: center; gap: var(--s-4); margin: 0 0 var(--s-5); color: var(--t-4); font: 400 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.plq__outhead::before, .plq__outhead::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.plq__outs { margin-bottom: var(--s-8); }
.plq__outart { display: grid; place-items: center; height: 112px; padding: 0 var(--s-6); border-bottom: 1px solid var(--border); background: var(--bg); }
.plq__outart--spark { padding: 0; overflow: hidden; }
.plq__dtypes { display: flex; justify-content: center; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.plq__dtypes li { display: grid; justify-items: center; gap: var(--s-2); }
.plq__dtypes svg { display: block; width: 80px; height: 45px; overflow: visible; }
.plq__dtypes span { color: var(--t-3); font: 400 11px/1.2 var(--font-mono); letter-spacing: 0.02em; text-align: center; max-width: 9ch; }

.plq__meter { width: 100%; }
.plq__track { display: flex; gap: 3px; height: 10px; }
.plq__seg { display: block; border-radius: 999px; }
.plq__seg--poor { background: var(--band-poor); }
.plq__seg--sub  { background: var(--band-sub); }
.plq__seg--good { background: var(--band-good); }
.plq__seg--opt  { background: var(--band-opt); }
.plq__scale { display: flex; gap: 3px; margin-top: var(--s-2); }
.plq__scale span { min-width: 0; white-space: nowrap; font-size: 11px; line-height: 1.2; color: var(--t-3); }
.plq__scale span:not(:first-child) { text-align: left; }

.plq__spark { display: block; width: 100%; height: 100%; }
.plq__zone--poor { fill: var(--band-poor-tint); }
.plq__zone--sub  { fill: var(--band-sub-tint); }
.plq__zone--good { fill: var(--band-good-tint); }
.plq__zone--opt  { fill: var(--band-opt-tint); }
.plq__sbar { fill: var(--t-2); fill-opacity: 0.5; }
.plq__strend { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---- Data flow: inputs -> Plaiq. Same construction as the "How Matrix works" diagram (two frames, rails with pulses, a hub).
   The rails' 360 x 272 viewBox lines up with three 56px rows (24px frame padding, 28px gap); keep row heights in step with the
   paths in scripts/plaiq-render.py. ---- */
.plq__diagram { display: grid; grid-template-columns: 1fr 360px 1fr; align-items: start; }
.plq__col {
  padding: 24px; display: grid; grid-auto-rows: 56px; gap: 28px;
  border: 1px solid rgba(10, 10, 10, 0.08); border-radius: 12px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.045), rgba(10, 10, 10, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.plq__node {
  position: relative; display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4);
  border: 1px solid var(--border); border-radius: 8px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.04), rgba(10, 10, 10, 0.015));
  color: var(--t-body); font-size: var(--fs-small); line-height: 1.3;
}
.plq__arrow { flex: none; width: 20px; text-align: center; font: 400 var(--fs-body)/1 var(--font-mono); color: var(--t-4); }
/* No connector dots where the rails meet the frames (founder instruction); only the moving pulses are blue. */
.plq__mid { position: relative; height: 272px; }
.plq__lines { position: absolute; inset: 0; width: 360px; height: 272px; }
.plq__rail { fill: none; stroke: rgba(10, 10, 10, 0.28); stroke-width: 1; }
.plq__hub {
  position: absolute; left: 50%; top: 136px; display: grid; place-items: center; width: 72px; height: 72px;
  margin: -36px 0 0 -36px; border: 1px solid rgba(30, 118, 250, 0.7); border-radius: 14px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.05), rgba(10, 10, 10, 0.015)), #FFFFFF;
}
.plq__hub img { display: block; width: 38px; height: auto; }
.plq__hubname {
  position: absolute; left: 0; right: 0; top: 184px; margin: 0; text-align: center;
  font: 400 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-3);
}
.plq__note { margin: var(--s-6) 0 0; text-align: center; color: var(--t-2); }
.plq__note strong { color: var(--t-body); font-weight: 500; }

@media (max-width: 959.98px) {
  .plq__diagram { grid-template-columns: 1fr; gap: var(--s-5); }
  .plq__mid { height: auto; display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
  .plq__lines { display: none; }
  .plq__hub { position: relative; left: auto; top: auto; margin: 0; order: 1; }
  .plq__hubname { position: static; order: 2; }
  .plq__mid::before, .plq__mid::after { content: ""; width: 1px; height: 28px; background: rgba(10, 10, 10, 0.28); }
  .plq__mid::after { order: 3; }
}
@media (max-width: 799.98px) {
  .plq__body { padding: var(--s-5); }
  .plq__grid-note { margin-bottom: var(--s-7); }
}