/* Dunning-Kruger effect lesson. All rules scoped under .dk-* */

.dk-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* the bat and the ball */
.dk-shop { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.dk-shop img { height: 130px; max-width: 100%; object-fit: contain; display: block; }
.dk-tags { display: flex; gap: 12px; }
.dk-tag { padding: 6px 14px; border-radius: 10px; background: var(--raised); border: 2px solid var(--gold); font: 800 17px var(--sans); }
.dk-sum { display: flex; align-items: baseline; gap: 12px; padding: 8px 18px; border-radius: 999px; background: var(--surface); border: 2px solid var(--line-strong); transition: border-color .3s; }
.dk-sum span { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.dk-sum b { font: 800 22px var(--mono); }
.dk-sum.dk-bad { border-color: var(--red); }
.dk-sum.dk-bad b { color: #F07A7E; }
.dk-sum.dk-good { border-color: var(--mint); }
.dk-sum.dk-good b { color: var(--mint); }
.choices.dk-row3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.choices.dk-row3 .choice { justify-content: center; font-size: 20px; font-weight: 800; }

/* two jobs */
.dk-two { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 340px; }
.dk-job { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line-strong); text-align: center; }
.dk-job small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.dk-job b { font-size: 18px; line-height: 1.25; }
.dk-job.dk-yes { border-color: var(--mint); }
.dk-link { font-size: 13px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; padding: 4px 12px; border-left: 2px dashed var(--gold); border-right: 2px dashed var(--gold); }

/* the ruler */
.dk-ruler { width: 100%; max-width: 340px; padding: 64px 12px 8px; }
.dk-track { position: relative; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--raised), var(--line-strong)); }
.dk-track i { position: absolute; top: -56px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-style: normal; }
.dk-track i::after { content: ''; width: 3px; height: 24px; margin-top: 2px; border-radius: 2px; background: currentColor; }
.dk-track b { font: 800 22px var(--mono); line-height: 1; }
.dk-track span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dk-real { color: #F07A7E; }
.dk-guess { color: var(--gold); opacity: 0; transition: opacity .5s, left 1s cubic-bezier(.2, .8, .2, 1); }
.dk-shown .dk-guess { opacity: 1; }
.dk-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--dim); font-weight: 700; }

/* the top quarter */
.dk-top { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 2px solid var(--mint); text-align: center; }
.dk-top small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.dk-top b { font: 700 22px var(--serif); }
.dk-arrow { font-size: 16px; font-weight: 800; color: var(--dim); }
.dk-low .dk-arrow { color: var(--gold); }

/* the training */
.dk-train { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; }
.dk-step { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.dk-step small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.dk-step b { font-size: 16px; text-align: right; }
.dk-mid { border-color: var(--violet-bright); }
.dk-after { border: 2px dashed var(--line-strong); }
.dk-done .dk-after { border: 2px solid var(--gold); }
.dk-done .dk-q { color: var(--gold); }

/* Ana */
.dk-pic { width: 100%; display: flex; justify-content: center; }
.dk-pic img { height: 180px; max-width: 100%; object-fit: contain; display: block; }
@media (max-height: 700px) { .dk-pic img { height: 130px; } .dk-shop img { height: 104px; } }

/* how sure */
.dk-you, .dk-sure { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line-strong); text-align: center; }
.dk-you small, .dk-sure small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.dk-you b { font-size: 20px; }
.dk-sure { border-color: var(--gold); }
.dk-sure b { font-size: 18px; color: var(--gold); }
.dk-dots { display: flex; gap: 10px; }
.dk-dots i { width: 28px; height: 28px; border-radius: 50%; background: var(--raised); border: 2px solid var(--line-strong); }
.dk-dots i.dk-on { background: var(--gold); border-color: var(--gold); }
.dk-cap { margin-top: 14px; text-align: center; font-size: 13px; font-weight: 700; color: var(--dim); }