/* Cold brew coffee lesson. All rules scoped under .cbr-* */
.cbr-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cbr-svg { display: block; width: 100%; max-width: 340px; overflow: visible; }
.cbr-two, .cbr-clk, .cbr-cups, .cbr-strips { max-height: 270px; }
.cbr-weak { max-height: 200px; }
.cbr-lab { font: 700 15px var(--sans); fill: var(--dim); }
.cbr-on { fill: var(--text); font-weight: 800; }
.cbr-ice { fill: #e6f3ff; opacity: .85; stroke: #fff; stroke-width: 1.5; }
.cbr-steam { fill: none; stroke: #e8e4dc; stroke-width: 3; stroke-linecap: round; opacity: .55; animation: cbrSteam 2s ease-in-out 3 alternate; }
@keyframes cbrSteam { to { opacity: .15; transform: translateY(-4px); } }
.cbr-timer { padding: 4px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); }
.cbr-timer b { font: 800 22px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }

.cbr-close { flex: 1; justify-content: center; }
.cbr-sim { max-height: 420px; }
.cbr-mol { fill: #8fc3f0; opacity: .85; }
.cbr-bit { fill: #c98a45; stroke: #fcc050; stroke-width: 1.5; }
.cbr-temp { display: flex; gap: 8px; align-items: baseline; padding: 4px 16px; border-radius: 12px; background: var(--surface); border: 1px solid #8fc3f0; }
.cbr-temp span { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.cbr-temp b { font: 800 20px var(--sans); color: #8fc3f0; }
.cbr-temp.hot { border-color: var(--gold); }
.cbr-temp.hot b { color: var(--gold); }

.cbr-drag { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }

.cbr-key { display: flex; gap: 16px; font: 700 13px var(--sans); color: var(--dim); }
.cbr-key span { display: flex; align-items: center; gap: 6px; }
.cbr-key i { display: inline-block; width: 12px; height: 12px; }
.cbr-k1 { border-radius: 50%; background: var(--gold); }
.cbr-k2 { background: #9be06b; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cbr-good { fill: var(--gold); }
.cbr-sharp { fill: #9be06b; }
.cbr-ph { font: 800 16px var(--sans); fill: var(--gold); }

.cbr-fix { display: flex; justify-content: center; gap: 10px; width: 100%; max-width: 340px; }
.cbr-tool { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 84px; padding: 8px 4px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line-strong); color: var(--text); font: 700 13.5px var(--sans); cursor: pointer; }
.cbr-tool svg { width: 40px; height: 40px; }
.cbr-tool.right { border-color: var(--mint); background: rgba(63,214,154,.12); }
.cbr-tool.wrong { border-color: var(--red); background: rgba(216,85,85,.12); }
.cbr-tool:disabled { cursor: default; color: var(--text); }

@media (max-height: 700px) {
  .cbr-two, .cbr-clk, .cbr-cups, .cbr-strips { max-height: 222px; }
  .cbr-weak { max-height: 150px; }
  .cbr-sim { max-height: 330px; }
  .cbr-tool { min-height: 72px; }
}

.cbr-pk { width: 100%; }
.cbr-pk .choices.cbr-two-pk { flex-direction: row; justify-content: center; gap: 12px; }
.cbr-pk .choice { flex: 1 1 0; max-width: 170px; padding: 8px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cbr-pk .choice span { font: 700 14px var(--sans); }
.cbr-pj { width: 116px; max-height: 170px; }
.cbr-st2 { min-height: 20px; font: 800 15px var(--sans); color: var(--gold); }
@media (max-height: 700px) { .cbr-pj { width: 96px; max-height: 140px; } }