/* Dietary fiber lesson. All rules scoped under .dfb-* */

/* the bench: bread over the T-shirt */
.dfb-bench { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.dfb-blood { align-self: center; padding: 6px 16px; border-radius: 999px; border: 2px dashed var(--line-strong); font: 700 12.5px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; transition: border-color .4s, color .4s, box-shadow .4s; }
.dfb-bench.dfb-fed .dfb-blood { border-style: solid; border-color: var(--gold); color: var(--gold); box-shadow: 0 0 18px rgba(252,192,80,.35); }
.dfb-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 84px; padding: 6px 8px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); font-family: var(--sans); color: var(--text); cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.dfb-row:not(:disabled) { border-color: var(--violet-bright); box-shadow: 0 0 16px rgba(123,92,253,.3); }
.dfb-row:disabled { cursor: default; color: var(--text); opacity: 1; }
.dfb-pic { flex: 0 0 74px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dfb-pic img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.dfb-pic span { font: 700 12px/1.15 var(--sans); color: var(--dim); text-align: center; }
.dfb-chw { flex: 1 1 auto; min-width: 0; }
.dfb-ch { display: block; width: 100%; height: auto; overflow: visible; }
.dfb-bd polygon { fill: var(--gold); stroke: #b9822a; stroke-width: 2; }
.dfb-flag { fill: var(--mint); transition: fill .4s, r .4s; }
.dfb-ch .dfb-enz { opacity: .9; }
.dfb-bd, .dfb-ln { opacity: 0; transition: opacity .25s; }
.dfb-bd.dfb-on, .dfb-ln.dfb-on { opacity: 1; }
.dfb-bd.dfb-gone { opacity: 0; transition: opacity .5s; }
.dfb-ln path { fill: none; stroke: var(--line-strong); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.dfb-ln circle { fill: var(--text); }
.dfb-ln.dfb-cut { opacity: 0; transition: opacity .15s; }
.dfb-enz path { fill: var(--violet-bright); stroke: var(--violet); stroke-width: 1.5; }
.dfb-row.dfb-ghost .dfb-ch { opacity: .45; }
.dfb-row.dfb-flip .dfb-flag { fill: var(--violet-bright); r: 7; }
.dfb-key { display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 12.5px var(--sans); color: var(--faint); }
.dfb-key svg { width: 18px; height: 18px; }
.dfb-key polygon { fill: var(--gold); }

/* the gel */
.dfb-gel { width: 100%; max-width: 380px; display: flex; gap: 12px; justify-content: center; }
.dfb-tube { flex: 1 1 0; max-width: 170px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.dfb-tl { font: 800 13px/1.2 var(--sans); color: var(--text); text-align: center; min-height: 32px; display: flex; align-items: flex-end; justify-content: center; }
.dfb-liq { position: relative; height: 150px; border-radius: 6px 6px 0 0; border: 2px solid var(--line-strong); border-bottom: 0; background: linear-gradient(180deg, rgba(110,170,255,.10), rgba(110,170,255,.22)); overflow: hidden; transition: background .8s; }
.dfb-strands { position: absolute; inset: 0; opacity: 0; transition: opacity .9s; background: repeating-linear-gradient(115deg, transparent 0 9px, rgba(252,220,150,.35) 9px 11px), repeating-linear-gradient(65deg, transparent 0 13px, rgba(252,220,150,.28) 13px 15px); }
.dfb-tube.dfb-gelled .dfb-liq { background: linear-gradient(180deg, rgba(232,200,140,.22), rgba(232,200,140,.38)); }
.dfb-tube.dfb-gelled .dfb-strands { opacity: 1; }
.dfb-sug { position: absolute; top: 4px; width: 8px; height: 8px; border-radius: 2px; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.7); }
.dfb-wall { height: 22px; display: flex; align-items: center; justify-content: center; margin-top: -6px; border-radius: 0 0 8px 8px; background: repeating-linear-gradient(90deg, #c4707a 0 10px, #a85a64 10px 20px); }
.dfb-wall span { font: 700 12px var(--sans); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.dfb-blood2 { display: flex; flex-direction: column; gap: 4px; }
.dfb-blood2 span { font: 700 12px var(--sans); color: var(--dim); text-align: center; }
.dfb-blood2 i { display: block; height: 10px; width: 0; border-radius: 5px; background: var(--gold); box-shadow: 0 0 10px rgba(252,192,80,.5); }

/* oatmeal */
.dfb-bowl img { display: block; width: 210px; max-width: 70vw; height: auto; filter: drop-shadow(0 12px 20px rgba(0,0,0,.4)); animation: dfbIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dfbIn { from { opacity: 0; translate: 0 10px; } }

/* Burkitt's two places */
.dfb-places { width: 100%; max-width: 380px; display: flex; gap: 10px; }
.dfb-pl { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); animation: dfbIn .5s cubic-bezier(.2,.8,.2,1) both; }
.dfb-pl.dfb-en { animation-delay: .15s; }
.dfb-pl b { font: 800 15px var(--sans); color: var(--text); }
.dfb-food { font: 600 13px/1.3 var(--sans); color: var(--dim); }
.dfb-ill { font: 800 13px/1.3 var(--sans); }
.dfb-pl.dfb-ug { border-color: rgba(63,214,154,.5); }
.dfb-pl.dfb-ug .dfb-ill { color: var(--mint); }
.dfb-pl.dfb-en { border-color: rgba(216,85,85,.5); }
.dfb-pl.dfb-en .dfb-ill { color: var(--red); }

@media (max-height: 700px) {
  .dfb-row { min-height: 72px; padding: 4px 8px; }
  .dfb-pic img { width: 46px; height: 46px; }
  .dfb-bench { gap: 6px; }
  .dfb-liq { height: 112px; }
  .dfb-bowl img { width: 160px; }
}