/* Parkinson's law lesson. All rules scoped under .pkl-* */

.pkl-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pkl-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 300px; }
.pkl-hero img { display: block; width: 290px; max-width: 100%; max-height: 30vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123,92,253,.3)); }
.pkl-hero.art img { width: 300px; max-height: 36vh; }
.pkl-hero.small img { max-height: 15vh; }
@media (max-height: 700px) { .pkl-hero.lady { display: none; } .pkl-hero.small img { max-height: 12vh; } }

/* the postcard day */
.pkl-day { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 4px; }
.pkl-dbar { height: 12px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line); overflow: hidden; margin-bottom: 4px; }
.pkl-dbar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .35s ease-out; }
.pkl-step { display: flex; justify-content: space-between; gap: 10px; padding: 3px 10px; border-radius: 8px; font-size: 14px; color: var(--faint); opacity: .35; transition: opacity .3s; }
.pkl-step b { font: 800 14px var(--mono); }
.pkl-step.in { opacity: 1; color: var(--text); background: var(--surface); }
.pkl-step.in b { color: var(--gold); }

/* the quote */
.pkl-quote { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; border-radius: 20px; background: var(--surface); border: 2px solid var(--gold); text-align: center; max-width: 340px; }
.pkl-quote b { font: 700 22px var(--serif); line-height: 1.3; }
.pkl-quote small { font-size: 13px; font-weight: 700; color: var(--dim); }

/* the two groups */
.pkl-clocks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 340px; }
.pkl-ck { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 18px 10px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line-strong); text-align: center; }
.pkl-ck small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.pkl-ck b { font: 800 20px var(--mono); }
.pkl-clocks.long .pkl-ck:last-child { border-color: var(--gold); }
.pkl-clocks.long .pkl-ck:last-child::after { content: 'Took longer'; font-size: 13px; font-weight: 800; color: var(--gold); }

/* the office */
.pkl-office { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pkl-org { width: 100%; max-width: 330px; height: auto; overflow: visible; }
.pkl-links path { fill: none; stroke: var(--line-strong); stroke-width: 2; transition: opacity .4s; }
.pkl-links path.off { opacity: 0; }
.pkl-n { transition: opacity .4s; }
.pkl-n.off { opacity: 0; }
.pkl-n rect { fill: var(--raised); stroke: var(--violet-bright); stroke-width: 2; }
.pkl-n.a rect { stroke: var(--gold); }
.pkl-n text { text-anchor: middle; font: 800 18px var(--mono); fill: var(--text); }
.pkl-n text.pkl-lab { font: 700 13px var(--sans); fill: var(--gold); }
.pkl-n.hit rect { fill: color-mix(in srgb, var(--gold) 18%, var(--raised)); }
.pkl-letter { opacity: 0; }
.pkl-letter.on { opacity: 1; }
.pkl-letter rect { fill: #f4ecd8; stroke: #8a7a55; stroke-width: 1.5; }
.pkl-letter path { fill: none; stroke: #8a7a55; stroke-width: 1.5; }
.pkl-count { display: flex; gap: 8px; align-items: baseline; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.pkl-count b { font: 800 20px var(--mono); color: var(--text); }
@media (max-height: 700px) { .pkl-org { max-width: 290px; } }

/* the Navy */
.pkl-navy { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.pkl-nr { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; }
.pkl-nr > span { font-size: 14px; font-weight: 700; color: var(--dim); }
.pkl-nr > b { font: 700 14px var(--mono); color: var(--text); }
.pkl-nr > b em { font-style: normal; color: var(--faint); }
.pkl-nb { grid-column: 1 / -1; grid-row: 2; position: relative; height: 14px; }
.pkl-nb i { position: absolute; left: 0; top: 0; height: 6px; border-radius: 3px; }
.pkl-nb i.was { background: var(--line-strong); }
.pkl-nb i.now { top: 8px; width: var(--w); background: var(--violet-bright); }
.pkl-nr.q .pkl-nb i.now { width: 0; background: var(--gold); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.pkl-navy.on .pkl-nr.q .pkl-nb i.now { width: var(--w); }
.pkl-nr.q > b strong { color: var(--gold); }

/* the last puzzle */
.pkl-due { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 340px; }
.pkl-due div { display: flex; flex-direction: column; gap: 4px; padding: 16px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.pkl-due small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.pkl-due b { font-size: 20px; font-weight: 800; }