/* Locus of control lesson. All rules scoped under .loc-* */
.loc-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.loc-hero img { width: 300px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.loc-hero.loc-small img { width: 240px; }
.loc-note { font-size: 13px; color: var(--dim); text-align: center; line-height: 1.35; max-width: 330px; }

/* ---------- the seesaw ---------- */
.loc-see { width: 100%; max-width: 340px; }
.loc-see svg { width: 100%; display: block; overflow: visible; }
.loc-base { fill: #3A405C; }
.loc-pin { fill: var(--gold); }
.loc-plank rect { fill: #8A6A3A; }
.loc-wheel circle { fill: none; stroke: var(--gold); stroke-width: 5; }
.loc-wheel .loc-hub { fill: var(--gold); stroke: none; }
.loc-wheel path { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.loc-dice rect { fill: #EAE3D7; stroke: #B9B0A2; stroke-width: 1.5; }
.loc-dice circle { fill: #1A2136; }
.loc-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 2px; }
.loc-ends span { font-size: 13px; font-weight: 700; color: var(--dim); max-width: 45%; transition: color .3s; }
.loc-er { text-align: right; }
.loc-see.in .loc-el { color: var(--gold); }
.loc-see.ex .loc-er { color: var(--violet-bright); }
.loc-dots { display: flex; gap: 8px; }
.loc-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--raised); box-shadow: inset 0 0 0 2px var(--line-strong); }
.loc-dots i.in { background: var(--gold); box-shadow: none; }
.loc-dots i.ex { background: var(--violet-bright); box-shadow: none; }
.loc-pair .choice { font-size: 15px; line-height: 1.35; font-weight: 600; }

/* ---------- two ends ---------- */
.loc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.loc-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--raised); }
.loc-card b { font-size: 16px; }
.loc-card span { font-size: 14px; line-height: 1.35; color: var(--dim); }
.loc-cin { box-shadow: inset 0 0 0 2px var(--gold); } .loc-cin b { color: var(--gold); }
.loc-cex { box-shadow: inset 0 0 0 2px var(--violet-bright); } .loc-cex b { color: var(--violet-bright); }

/* ---------- skill or luck ---------- */
.loc-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.loc-strip i { height: 34px; border-radius: 10px; display: grid; place-items: center; font: 700 13px var(--sans); font-style: normal; background: var(--raised); box-shadow: inset 0 0 0 2px var(--line); }
.loc-strip i.miss { color: #FFD9D9; background: rgba(216,85,85,.3); box-shadow: none; }
.loc-strip i.hit { color: var(--mint-ink); background: var(--mint); box-shadow: none; }
.loc-hrows { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.loc-hrow { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--raised); }
.loc-hico svg { width: 44px; height: 44px; display: block; }
.loc-hs .loc-hico circle { fill: none; stroke: var(--gold); stroke-width: 3; }
.loc-hs .loc-hico .loc-bull { fill: var(--gold); stroke: none; }
.loc-hbody { display: flex; flex-direction: column; gap: 6px; }
.loc-hbody b { font-size: 15px; }
.loc-hbody span { font-size: 12px; color: var(--dim); }
.loc-hbar { height: 14px; border-radius: 7px; background: var(--surface); overflow: hidden; }
.loc-hbar i { display: block; height: 100%; border-radius: 7px; transition: width .5s cubic-bezier(.3,.7,.3,1); }
.loc-hs .loc-hbar i { background: var(--gold); }
.loc-hl .loc-hbar i { background: var(--violet-bright); }

/* ---------- sign-up sheet ---------- */
.loc-sheet { width: 100%; padding: 12px 14px; border-radius: 12px; background: #EDE6D6; color: #2A2418; display: flex; flex-direction: column; gap: 6px; transform: rotate(-1deg); }
.loc-shead { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--serif); font-size: 17px; font-weight: 700; border-bottom: 2px solid #2A2418; padding-bottom: 4px; }
.loc-shead em { font: 600 12px var(--sans); font-style: normal; color: #7A6F5C; }
.loc-srow { display: flex; justify-content: space-between; align-items: center; min-height: 32px; border-bottom: 1px dashed #B9AE98; font-size: 15px; font-weight: 600; }
.loc-sdots { display: flex; gap: 4px; }
.loc-sdots i { width: 14px; height: 14px; border-radius: 50%; }
.loc-sdots i.in { background: var(--gold-deep); }
.loc-sdots i.ex { background: var(--violet-deep); }


/* ---------- last puzzle ---------- */
.loc-sits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.loc-sit { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 14px; background: var(--raised); text-align: center; transition: box-shadow .25s; }
.loc-sit img { height: 64px; object-fit: contain; }
.loc-sit b { font-size: 14px; }
.loc-sit q { font-size: 13px; color: var(--dim); line-height: 1.3; min-height: 34px; }
.loc-sit q::before, .loc-sit q::after { content: none; }
.loc-sit em { font-style: normal; font-size: 14px; font-weight: 800; }
.loc-sit.ok { box-shadow: inset 0 0 0 2px var(--mint); } .loc-sit.ok em { color: var(--mint); }
.loc-sit.mid { box-shadow: inset 0 0 0 2px var(--gold); } .loc-sit.mid em { color: var(--gold); }
.loc-sit.bad { box-shadow: inset 0 0 0 2px var(--red); } .loc-sit.bad em { color: var(--red); }

@media (max-height: 700px) {
  .loc-hero img { max-height: 28vh; }
  .loc-see { max-width: 280px; }
  .loc-sit img { height: 40px; }
  .loc-sit q { min-height: 0; }
  .loc-sits .loc-sit { padding: 8px 6px; }
  .loc-srow { min-height: 28px; font-size: 14px; }
}