/* 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 postcard with less time */
.pkl-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; padding: 3px 10px; border-radius: 8px; background: var(--surface); font-size: 14px; }
.pkl-row i { display: block; height: 10px; border-radius: 5px; background: var(--raised); overflow: hidden; }
.pkl-row u { display: block; height: 100%; width: 100%; background: var(--gold); transition: width .35s ease-out; }
.pkl-sent { text-align: center; font-size: 13px; font-weight: 800; color: var(--gold); }