/* Cabernet Sauvignon lesson. Everything scoped under .cbs-*. */
.cbs-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cbs-lb { fill: var(--text); font: 700 14px var(--sans); text-anchor: middle; }
.cbs-lb.dim { fill: var(--dim); font-weight: 600; font-size: 13px; }
.cbs-bunch { width: 30px; height: 34px; flex: none; display: block; }

/* the rule */
.cbs-rule { width: 100%; max-width: 330px; display: grid; grid-template-columns: 1fr 1fr; row-gap: 0; justify-items: center; }
.cbs-rp { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cbs-rp > span { font: 700 13px var(--sans); color: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
.cbs-rp.kid { grid-column: 1 / 3; }
.cbs-pair { display: flex; gap: 8px; }
.cbs-pair b { min-width: 48px; padding: 8px 0; text-align: center; border-radius: 10px; background: var(--raised); border: 1.5px solid var(--line-strong); font: 700 20px var(--mono); color: var(--text); }
.cbs-arrows { grid-column: 1 / 3; width: 100%; height: 50px; }
.cbs-arrows path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 4 4; opacity: 0; transition: opacity .4s; }
.cbs-rule.go .cbs-arrows path { opacity: 1; }
.cbs-rule .p1 { transition: background .5s, border-color .5s; }
.cbs-rule.go .p1 { background: rgba(123,92,253,.25); border-color: var(--violet-bright); }
.cbs-rule.go .p2 { background: rgba(252,192,80,.2); border-color: var(--gold); }
.cbs-rule .kid .cbs-pair b { opacity: .2; transition: opacity .4s .2s, background .5s, border-color .5s; }
.cbs-rule.go .kid .cbs-pair b { opacity: 1; }

/* the puzzle */
.cbs-kid { width: 100%; max-width: 340px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 14px; padding: 8px 10px 10px; }
.cbs-kh { display: flex; align-items: center; gap: 8px; font: 700 15px var(--sans); color: var(--text); }
.cbs-kh .cbs-bunch { width: 24px; height: 28px; }
.cbs-heads, .cbs-dna { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cbs-heads span { font: 700 12px var(--sans); color: var(--dim); text-align: center; margin-top: 4px; }
.cbs-m { display: flex; justify-content: center; gap: 4px; border-radius: 8px; padding: 2px; transition: background .3s; }
.cbs-m b { min-width: 26px; text-align: center; font: 700 13px var(--mono); color: var(--text); border-radius: 6px; padding: 2px 0; transition: background .3s, color .3s; }
.cbs-dna.big .cbs-m b { min-width: 40px; font-size: 18px; padding: 5px 0; background: var(--raised); border: 1.5px solid var(--line); }
.cbs-dna.big b.fromA { background: rgba(123,92,253,.3); border-color: var(--violet-bright); }
.cbs-dna.big b.fromC { background: rgba(185,211,106,.28); border-color: #b9d36a; }
.cbs-note { font-size: 13px; color: var(--dim); text-align: center; }
.cbs-note b { color: var(--text); }
.cbs-sus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cbs-sus .cbs-card { flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 6px 8px; min-height: 0; min-width: 0; width: auto; }
.cbs-card .cbs-dna { gap: 3px; }
.cbs-card .cbs-m { background: rgba(234,227,215,.07); gap: 1px; padding: 2px 1px; }
.cbs-card .cbs-m b { min-width: 0; flex: 1; }
.cbs-ch { display: flex; align-items: center; gap: 6px; font: 700 14px var(--sans); }
.cbs-ch .cbs-bunch { width: 20px; height: 24px; }
.cbs-ch i { margin-left: auto; font: 600 12px var(--sans); font-style: normal; color: var(--dim); }
.cbs-card .cbs-m b.hit { background: var(--mint); color: var(--mint-ink); }
.cbs-card .cbs-m.miss { background: rgba(216,85,85,.3); }
.cbs-card.wrong .cbs-m.miss b { color: #ffd0d0; }

/* the family */
.cbs-tree { width: 100%; max-width: 320px; display: grid; grid-template-columns: 1fr 1fr; justify-items: center; }
.cbs-par { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cbs-par .cbs-bunch { width: 64px; height: 72px; }
.cbs-par b { font: 700 13px var(--sans); color: var(--dim); }
.cbs-par span { font: 700 15px var(--sans); color: var(--text); }
.cbs-par.kid { grid-column: 1 / 3; }
.cbs-join { grid-column: 1 / 3; width: 100%; height: 40px; }
.cbs-join path { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; }

/* the green pepper */
.cbs-pep { font: 700 12.5px var(--sans); font-style: normal; color: #1a2410; background: #9fcf6a; border-radius: 999px; padding: 2px 9px; margin-top: 2px; }
.cbs-pep.q { color: var(--faint); background: var(--raised); }

@media (max-height: 700px) {
  .cbs-dna.big .cbs-m b { font-size: 15px; padding: 3px 0; min-width: 34px; }
  .cbs-par .cbs-bunch { width: 48px; height: 54px; }
}