/* Extras for the Woodward-Fieser PYQ post: structure cards, build-up bars, calculated-vs-observed plot. Uses site tokens. */
:root{--wf-s1:#FFCB45;--wf-s2:#7FD3A8;--wf-s3:#F4A27F;--wf-segink:#0E2350}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--wf-s1:#E3B53A;--wf-s2:#58C18D;--wf-s3:#EE8F66;--wf-segink:#0A1430}}
:root[data-theme="dark"]{--wf-s1:#E3B53A;--wf-s2:#58C18D;--wf-s3:#EE8F66;--wf-segink:#0A1430}
.pyq .stgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:640px){.pyq .stgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pyq .stcell{position:relative;background:var(--sheet);border:1px solid var(--line-2);border-radius:8px;padding:4px;color:var(--ink)}
.pyq .stcell .stname{position:absolute;left:8px;top:4px;font:800 1rem var(--display);color:var(--ink)}
.pyq .sheet .stcell{color:var(--ans-ink);background:transparent;border:1px dashed var(--ans-ink)}
.pyq .qcard .stcell{background:transparent}
.pyq svg .gk{fill:var(--margin);font:700 15px var(--body)}
.pyq svg .s1{fill:var(--wf-s1)}.pyq svg .s2{fill:var(--wf-s2)}.pyq svg .s3{fill:var(--wf-s3)}
.pyq svg .segt{fill:var(--wf-segink);font:700 11.5px var(--body)}
.pyq svg .basel{stroke:var(--ink);stroke-width:1.5}
.pyq svg .clab{fill:var(--margin);font:600 11.5px var(--body)}
.pyq svg .band{fill:var(--pen-wash)}
.pyq svg .diag{stroke:var(--ink-2);stroke-width:1.2;stroke-dasharray:5 4}
.pyq svg .pt{fill:var(--pen);stroke:var(--card);stroke-width:1.5}
.pyq svg .pt.out{fill:none;stroke:var(--margin);stroke-width:2.4}
.pyq .stcell svg path[style*="fill:var(--plot-shade)"]{fill-opacity:.6}
.pyq .eqc{justify-content:flex-start}
.pyq .eqc>*{margin-inline:auto}
.pyq .sheet .rules td:first-child{text-align:left}
.pyq .sheet .rules td,.pyq .sheet .rules th{padding:0 10px}
@media (max-width:520px){.pyq .sheet .eqc math{font-size:.78em}.pyq .sheet{font-size:.95rem}}