/* Section: Plaiq worked example (#plaiq-data). One scored pass on a full pitch, two compact scored decisions, and one
   player's decision timeline. All drawn in code from content/plaiq-sample.json by scripts/plaiq-sample-render.py (the
   markup is generated; edit the script, not index.html). Neutrals come from tokens, so the white-page override in
   light-body.css flips them with no extra rules. Blue is the site accent (--accent). Rating bands use traffic-light
   colours (red, amber, lime, green), each with a dark ink shade for text. Independent of the other sections. Needs
   section-base.css. */

#plaiq-data {
  --band-poor: #EF4444;  --band-poor-ink: #991B1B;  --band-poor-tint: rgba(239, 68, 68, 0.11);  --band-poor-line: rgba(239, 68, 68, 0.38);
  --band-sub:  #F59E0B;  --band-sub-ink:  #92400E;  --band-sub-tint:  rgba(245, 158, 11, 0.13); --band-sub-line:  rgba(245, 158, 11, 0.45);
  --band-good: #84CC16;  --band-good-ink: #3F6212;  --band-good-tint: rgba(132, 204, 22, 0.15); --band-good-line: rgba(132, 204, 22, 0.5);
  --band-opt:  #16A34A;  --band-opt-ink:  #166534;  --band-opt-tint:  rgba(22, 163, 74, 0.11);  --band-opt-line:  rgba(22, 163, 74, 0.4);
}

/* ---- Cards: one header row (kicker + band chip), the number, the scale, one line of description ---- */
.pld__decision, .pld__mini, .pld__timeline { box-shadow: 0 1px 0 rgba(10, 10, 10, 0.02), 0 12px 32px -18px rgba(10, 10, 10, 0.22); }
.pld__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.pld__kicker { margin: 0; font: 400 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-4); }
.pld__big { display: grid; gap: var(--s-2); margin: var(--s-5) 0 0; font-weight: 500; }
.pld__num { font-size: clamp(52px, 7vw, 76px); line-height: 0.95; letter-spacing: -0.04em; color: var(--t-head); font-variant-numeric: tabular-nums; }
.pld__mini .pld__num { font-size: 52px; }
.pld__label { color: var(--t-3); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; }
.pld__note { margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--border); color: var(--t-3); font-size: var(--fs-small); line-height: 1.55; }

/* ---- Decision card ---- */
.pld__decision { display: grid; gap: var(--s-6); padding: var(--s-6); align-items: center; }
@media (min-width: 960px) {
  .pld__decision { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s-8); padding: var(--s-7); }
}
.pld__fig { min-width: 0; }
.pld__pitchwrap { border: 1px solid var(--border); border-radius: 12px; background: var(--recessed); padding: 6px; }
.pld__pitch { display: block; width: 100%; height: auto; }

.pld__turf rect { fill: rgba(10, 10, 10, 0.028); }
.pld__lines { fill: none; stroke: var(--t-4); opacity: 0.55; }
.pld__lines * { vector-effect: non-scaling-stroke; stroke-width: 1.2px; }
.pld__lines .pld__dot { fill: var(--t-4); stroke: none; }
.pld__opp circle { fill: var(--bg); stroke: var(--t-3); vector-effect: non-scaling-stroke; stroke-width: 1.4px; opacity: 0.9; }

.pld__pass-line { stroke: var(--t-head); vector-effect: non-scaling-stroke; stroke-width: 2.6px; stroke-linecap: round; }
.pld__best-line { stroke: var(--accent); vector-effect: non-scaling-stroke; stroke-width: 2.4px; stroke-dasharray: 7 5; stroke-linecap: round; }
.pld__arrow { fill: var(--t-head); }
.pld__arrow--best { fill: var(--accent); }

.pld__mate { fill: var(--bg); stroke: var(--t-3); vector-effect: non-scaling-stroke; stroke-width: 1.3px; opacity: 0.85; }

.pld__kp text { font-family: var(--font-mono); font-weight: 600; fill: var(--t-head); pointer-events: none; }
.pld__kp path { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pld__kp--passer path { fill: var(--t-head); stroke: var(--bg); stroke-width: 2px; }
.pld__kp--passer text { fill: var(--bg); }
.pld__kp--rec path { fill: var(--bg); stroke: var(--t-head); stroke-width: 3px; }
.pld__kp--best path { fill: color-mix(in srgb, var(--accent) 16%, var(--bg)); stroke: var(--accent); stroke-width: 3px; }

.pld__tag rect { fill: var(--bg); stroke: var(--t-head); vector-effect: non-scaling-stroke; stroke-width: 1.2px; }
.pld__tag text { font-family: var(--font-sans, inherit); font-weight: 500; fill: var(--t-head); }
.pld__tag--best rect { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 10%, var(--bg)); }

/* ---- Keys: pill row with small drawn swatches ---- */
.pld__key { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.pld__key li {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--t-2); font-size: var(--fs-small); line-height: 1;
}
.pld__sw { width: 20px; height: 20px; flex: none; }
.pld__sw .sw-fill { fill: var(--t-head); }
.pld__sw .sw-ring { fill: var(--bg); stroke: var(--t-head); stroke-width: 2.4; stroke-linejoin: round; }
.pld__sw .sw-ring--best { fill: color-mix(in srgb, var(--accent) 16%, var(--bg)); stroke: var(--accent); }
.pld__sw .sw-mate { fill: var(--bg); stroke: var(--t-3); stroke-width: 1.5; }
.pld__sw .sw-opp { fill: var(--bg); stroke: var(--t-3); stroke-width: 1.6; }
.k { display: inline-block; flex: none; width: 8px; height: 16px; box-sizing: border-box; border-radius: 2px; }
.k--bar-pass { background: var(--t-2); }
.k--bar-carry { background: rgba(10, 10, 10, 0.26); }
.k--bar-failed { background: var(--bg); border: 1.5px solid var(--t-2); }
.k--trend { width: 20px; height: 0; border-top: 3px solid var(--accent); border-radius: 2px; }
.pld__key--tl li { padding-left: 12px; }

/* ---- Band chip: tinted, with a colour dot ---- */
.pld__band {
  --c: var(--t-3); --ink: var(--t-2); --tint: transparent; --ln: var(--border);
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px;
  background: var(--tint); border: 1px solid var(--ln); color: var(--ink);
  font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.04em; white-space: nowrap;
}
.pld__band::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.pld__band--poor { --c: var(--band-poor); --ink: var(--band-poor-ink); --tint: var(--band-poor-tint); --ln: var(--band-poor-line); }
.pld__band--sub  { --c: var(--band-sub);  --ink: var(--band-sub-ink);  --tint: var(--band-sub-tint);  --ln: var(--band-sub-line); }
.pld__band--good { --c: var(--band-good); --ink: var(--band-good-ink); --tint: var(--band-good-tint); --ln: var(--band-good-line); }
.pld__band--opt  { --c: var(--band-opt);  --ink: var(--band-opt-ink);  --tint: var(--band-opt-tint);  --ln: var(--band-opt-line); }

/* ---- Rating-band scale under each score ---- */
.pld__meter { margin-top: var(--s-5); }
.pld__track { position: relative; display: flex; gap: 3px; height: 10px; }
.pld__seg { display: block; border-radius: 999px; opacity: 0.28; }
.pld__seg.is-lit { opacity: 1; }
.pld__seg--poor { background: var(--band-poor); }
.pld__seg--sub  { background: var(--band-sub); }
.pld__seg--good { background: var(--band-good); }
.pld__seg--opt  { background: var(--band-opt); }
.pld__marker {
  position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--t-head); border: 3px solid var(--bg); box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.18), 0 2px 6px rgba(10, 10, 10, 0.25);
}
.pld__scale { display: flex; gap: 3px; margin-top: var(--s-2); }
.pld__scale span { min-width: 0; overflow: visible; white-space: nowrap; font-size: 11px; line-height: 1.2; color: var(--t-4); }
.pld__scale span.is-lit { color: var(--t-head); font-weight: 500; }

/* ---- Two compact decisions ---- */
.pld__pair { display: grid; gap: var(--s-4); margin-top: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .pld__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pld__mini { padding: var(--s-6); display: flex; flex-direction: column; }
.pld__mini .pld__note { margin-top: auto; }
.pld__mini .pld__meter { margin-bottom: var(--s-5); }

/* ---- Timeline ---- */
.pld__timeline { margin-top: var(--s-4); padding: var(--s-6); }
@media (min-width: 960px) { .pld__timeline { padding: var(--s-7); } }
.pld__tlhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
.pld__tlhead .card__title { margin: var(--s-3) 0 0; }
.pld__strip { display: flex; flex-wrap: wrap; gap: var(--s-6); margin: 0; }
.pld__strip div { display: grid; gap: var(--s-2); }
.pld__strip dt { font: 400 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-4); }
.pld__strip dd { margin: 0; min-height: 30px; display: flex; align-items: center; font-size: 28px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: var(--t-head); font-variant-numeric: tabular-nums; }
.pld__strip dd .pld__band { font-size: 12px; }
.pld__tlfig { margin-top: var(--s-5); overflow-x: auto; }
.pld__tl { display: block; width: 100%; min-width: 600px; height: auto; }
.pld__tl text { font-family: var(--font-mono); font-size: 10.5px; fill: var(--t-3); }
.pld__zone--poor { fill: var(--band-poor-tint); }
.pld__zone--sub  { fill: var(--band-sub-tint); }
.pld__zone--good { fill: var(--band-good-tint); }
.pld__zone--opt  { fill: var(--band-opt-tint); }
.pld__tl .pld__zonename { font-family: var(--font-sans, inherit); font-size: 11px; font-weight: 500; }
.pld__tl .pld__zonename--poor { fill: var(--band-poor-ink); }
.pld__tl .pld__zonename--sub  { fill: var(--band-sub-ink); }
.pld__tl .pld__zonename--good { fill: var(--band-good-ink); }
.pld__tl .pld__zonename--opt  { fill: var(--band-opt-ink); }
.pld__tl .pld__grid line { stroke: var(--t-4); opacity: 0.4; stroke-dasharray: 3 4; stroke-width: 1px; }
.pld__tl .pld__grid .pld__axis { stroke: var(--t-3); opacity: 0.8; stroke-dasharray: none; }
.pld__half { stroke: var(--t-4); stroke-width: 1px; opacity: 0.7; }
.pld__halftxt, .pld__axtitle { fill: var(--t-4); }
.pld__tl .pld__halftxt { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.pld__bar--pass { fill: var(--t-2); }
.pld__bar--carry { fill: rgba(10, 10, 10, 0.26); }
.pld__bar--failed { fill: var(--bg); stroke: var(--t-2); stroke-width: 1px; }
.pld__trend { fill: none; stroke: var(--accent); stroke-width: 2.6px; stroke-linejoin: round; stroke-linecap: round; }
.pld__key--tl { margin-top: var(--s-4); }
.pld__timeline .pld__note { margin-top: var(--s-4); }

/* ---- Closing lines ---- */
.pld__says { display: grid; gap: var(--s-3); margin: var(--s-6) auto 0; max-width: 68ch; }
.pld__says p { margin: 0; color: var(--t-2); font-size: var(--fs-small); line-height: 1.6; }
.pld__says strong { color: var(--t-head); font-weight: 500; }
.pld__credit { margin: var(--s-5) 0 0; text-align: center; color: var(--t-4); font: 400 var(--fs-mono)/1.5 var(--font-mono); letter-spacing: 0.02em; }

@media (max-width: 719.98px) {
  .pld__decision, .pld__mini, .pld__timeline { padding: var(--s-5); }
  .pld__key li { padding: 5px 10px 5px 6px; }
}