/* =========================================================
   Two ways to get to day one (index.html #paths)
   Lines draw in and labels pop when the section fades in.
   ========================================================= */
.paths-legend { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: var(--s3); font-size: 15px; }
.lg { display: inline-flex; align-items: center; gap: 10px; }
.lg i { width: 28px; height: 3px; border-radius: 3px; }
.lg.bad i { background: #E08A7A; }
.lg.good i { background: var(--bronze-hi); }

.pc-card { border-radius: var(--radius); background: var(--charcoal); border: 1px solid var(--joint); padding: clamp(18px, 2.4vw, 32px); margin-bottom: var(--s3); }
.pc-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.pc-head h3 { font-size: clamp(20px, 2vw, 26px); }
.pc-scroll { overflow-x: auto; }
.pchart { display: block; width: 100%; min-width: 560px; height: auto; font-family: var(--body); }

.pchart .grid { stroke: #3d3833; stroke-width: 1; }
.pchart .axis { stroke: #5a5249; stroke-width: 1.2; }
.pchart .tick, .pchart .xlab { fill: var(--stone); font-size: 12px; }
.pchart .ylab { fill: var(--stone); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-family: var(--mono); }
.pchart .line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.pchart .line.bad { stroke: #E08A7A; }
.pchart .line.good { stroke: var(--bronze-hi); stroke-width: 4; }
.pchart .dayline-svg { stroke: var(--limestone); stroke-width: 1.4; stroke-dasharray: 6 6; opacity: .7; }
.pchart .daylab { fill: var(--limestone); font-size: 13px; font-weight: 500; }

.pchart .bub rect { stroke-width: 1; }
.pchart .bub text { font-size: 12.5px; font-weight: 500; }
.pchart .bub.bad rect { fill: #3a2a26; stroke: #E08A7A; }
.pchart .bub.bad text { fill: #F6C9BF; }
.pchart .bub.good rect { fill: var(--limestone); stroke: var(--limestone); }
.pchart .bub.good text { fill: #1a1816; }
.pchart .bub.mark circle { fill: var(--bronze-hi); stroke: var(--basalt); stroke-width: 3; }

/* draw-in, keyed to the section's fade (.reveal-sec.in) */
.js .reveal-sec .pchart .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .reveal-sec .pchart .bub { opacity: 0; transform: translateY(6px); transform-box: fill-box; }
.js .reveal-sec.in .pchart .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(.45, 0, .2, 1) .3s; }
.js .reveal-sec.in .pchart .line.good.draw { transition-duration: 1.6s; }
.js .reveal-sec.in .pchart .bub { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--d, 0s); }
/* already on screen when the page loaded: show finished */
.js .reveal-sec:not(.pre):not(.in) .pchart .draw { stroke-dashoffset: 0; }
.js .reveal-sec:not(.pre):not(.in) .pchart .bub { opacity: 1; transform: none; }

.pc-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s2); }
.pc-sum > div { border-radius: var(--radius); padding: 22px 24px; border: 1px solid var(--joint); display: grid; gap: 12px; }
.pc-sum .good { border-color: rgba(194, 156, 106, .55); background: rgba(194, 156, 106, .07); }
.pc-sum ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 16px; }
.pc-sum li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.pc-sum .bad li { color: var(--stone); }
.pc-sum .bad li::before { content: "×"; color: #E08A7A; font-weight: 600; }
.pc-sum .good li::before { content: "✓"; color: var(--bronze-hi); font-weight: 600; }

@media (max-width: 860px) { .pc-sum { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal-sec .pchart .draw { stroke-dashoffset: 0; }
  .js .reveal-sec .pchart .bub { opacity: 1; transform: none; }
}