/* SVT exercises on the nutritive needs of animals. Loaded after clock-exercise.css, imparfait-exercise.css and phrases-exercise.css, whose choices,
   line and keyboard it reuses. */
.nutri-exercise .nutri-display{font-size:20px}
.nutri-exercise .nutri-display--long{font-size:17px;line-height:1.5}
/* The diagram of the digestive tube, drawn like the notebook. */
.nutri-schema{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}
.nutri-schema-wrap{margin:0 auto 14px;max-width:440px}
.nutri-organ{stroke:#101052;stroke-width:3}
.nutri-organ--mouth{fill:#ffb3c1}
.nutri-organ--tube{fill:#ffd2a8}
.nutri-organ--stomach{fill:#ffc58f}
.nutri-organ--bile{fill:#9fd36b}
.nutri-organ--pancreas{fill:#f2d16b}
.nutri-coil{fill:none;stroke:#e9897a;stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.nutri-colon{fill:none;stroke:#c97a5a;stroke-width:20}
.nutri-anus{fill:#101052}
.nutri-schema-lead{stroke:#101052;stroke-width:1.6}
.nutri-schema-box{fill:#fff;stroke:#4f61ff;stroke-width:2}
.nutri-schema-label.is-lit .nutri-schema-box{fill:#ffd640;stroke:#034cff;stroke-width:3}
.nutri-schema-num{font:800 15px Inter,sans-serif;fill:#034cff}
.nutri-schema-text{font:700 12px Inter,sans-serif;fill:#101052}
/* Labels to place: the boxes of the diagram become drop zones. */
.nutri-place{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.nutri-board{position:relative;width:100%;max-width:440px;margin:0 auto}
.nutri-zone{position:absolute;width:24%;height:5.8%;display:flex;align-items:center;gap:3px;padding:0 4px;border:2px dashed #4f61ff;border-radius:9px;background:#fff;color:#101052;font:700 12px/1.05 Inter,sans-serif;text-align:left;cursor:pointer}
.nutri-zone.is-waiting:not(.is-filled){background:#eef2ff}
.nutri-zone.is-filled{border-style:solid;background:#e9f7ee}
.nutri-zone.is-correct{border-color:#1a9a4b;background:#d9f5e3}
.nutri-zone.is-wrong{border-color:#d93a3a;background:#fde2e2}
.nutri-zone-num{flex:0 0 auto;font:800 14px Inter,sans-serif;color:#034cff}
.nutri-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.nutri-chip{width:auto;padding:8px 14px;font-size:16px;touch-action:none;user-select:none}
.nutri-chip[aria-pressed="true"]{background:#034cff;color:#fff}
.nutri-ghost{position:fixed;z-index:50;transform:translate(-50%,-120%);padding:8px 14px;border-radius:12px;background:#034cff;color:#fff;font:700 16px Inter,sans-serif;pointer-events:none;box-shadow:0 6px 18px rgba(3,76,255,.35)}
.nutri-place-help{text-align:center;margin:0}
/* Tick every right answer. */
.nutri-multi-list{grid-template-columns:1fr}
.nutri-multi{display:flex;align-items:center;gap:12px;text-align:left}
.nutri-tick{flex:0 0 26px;width:26px;height:26px;border:2px solid #4f61ff;border-radius:7px;background:#fff}
.nutri-multi[aria-pressed="true"] .nutri-tick{background:#034cff;box-shadow:inset 0 0 0 4px #fff}
.nutri-multi.is-missed{outline:3px dashed #1a9a4b}
/* A decimal number on the pad of the page. */
.nutri-pad-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:16px}
.nutri-pad-line{display:flex;align-items:baseline;gap:8px;min-width:200px;padding:10px 16px;border:2px solid #4f61ff;border-radius:14px;background:#fff;font:800 28px Inter,sans-serif;color:#101052}
.nutri-pad-line.is-correct{border-color:#1a9a4b;background:#d9f5e3}
.nutri-pad-line.is-wrong{border-color:#d93a3a;background:#fde2e2}
.nutri-pad-unit{font-size:18px;color:#4a4a7a}
.nutri-pad{display:grid;grid-template-columns:repeat(3,64px);gap:8px}
.nutri-pad-key{height:52px;font-size:22px}
/* Steps to touch in order. */
.nutri-order{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.nutri-order-list{grid-template-columns:1fr}
.nutri-order-item{display:flex;align-items:center;gap:12px;text-align:left}
.nutri-order-rank{flex:0 0 34px;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:2px solid #4f61ff;border-radius:50%;background:#fff;color:#034cff;font:800 18px Inter,sans-serif}
.nutri-order-item[aria-pressed="true"] .nutri-order-rank{background:#034cff;color:#fff}
.nutri-order-reset{align-self:flex-start}
/* The diagram drawn on paper, then checked. */
.nutri-self{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.nutri-self-hidden{padding:16px;border:2px dashed #4f61ff;border-radius:16px;background:#f2f5ff;text-align:center}
@media(max-width:700px){
 .nutri-exercise .nutri-display{font-size:18px}
 .nutri-zone{font-size:10px;padding:0 2px}
 .nutri-zone-num{font-size:12px}
 .nutri-chip{font-size:15px}
}
/* The four arrows of the functional diagram: ingestion, digestion, absorption, défécation. */
.nutri-schema-arrow{stroke:#d93a3a;stroke-width:2.5}
.nutri-arrow-head{fill:#d93a3a}
.nutri-schema-stepbox{fill:#fff4f4;stroke:#d93a3a;stroke-width:2;stroke-dasharray:4 3}
.nutri-schema-steptext{font:800 12px Inter,sans-serif;fill:#b0202a}
.nutri-zone--step{height:5%;border-color:#d93a3a;border-radius:13px;justify-content:center;text-align:center}
.nutri-zone--step.is-filled{background:#fff4f4}