/* Pinch: structure chapters (water, starch, protein). */

.defs-only { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- water: jars ---------- */
.jars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
@media (min-width: 720px) { .jars { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } }
.jar { margin: 0; text-align: center; }
.jar svg { width: 100%; max-width: 128px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.jar .wfill { transition: transform .9s cubic-bezier(.3, 1.15, .5, 1); }
.jar figcaption { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 14px; }
.jar figcaption b { font-weight: 650; }
.jar .pct { font-family: var(--f-display); font-weight: 760; font-size: 30px; line-height: 1.1; color: var(--water); letter-spacing: -0.02em; font-variation-settings: "SOFT" 100; }

/* ---------- water: reduce lab ---------- */
.pan-wrap svg, .gran-wrap svg, .egg-wrap svg { width: 100%; height: auto; display: block; }
.pan-wrap svg { max-width: 420px; margin: 0 auto; }
#pan .wisp { animation: steam 3.2s ease-in-out infinite; transform-origin: center bottom; }
#pan .w2 { animation-delay: -1.1s; }
#pan .w3 { animation-delay: -2.2s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
#pan .bub { animation: bub 2.4s ease-in infinite; }
#pan .b2 { animation-delay: -.7s; }
#pan .b3 { animation-delay: -1.3s; }
#pan .b4 { animation-delay: -1.9s; }
@keyframes bub { 0% { transform: translateY(14px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-90px); opacity: 0; } }

.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.salt-word { font-family: var(--f-display); font-weight: 720; font-size: 22px; line-height: 1.1; }
.salt-word[data-z="0"] { color: var(--bitter); }
.salt-word[data-z="1"] { color: var(--fat); }
.salt-word[data-z="2"] { color: var(--sweet); }
.salt-word[data-z="3"] { color: var(--heat); }
.saltmeter { position: relative; margin: 24px 0 6px; }
.saltmeter .zones { display: grid; grid-template-columns: repeat(4, 1fr); height: 14px; border-radius: 7px; overflow: hidden; border: 1.5px solid var(--line-2); }
.saltmeter .zones i:nth-child(1) { background: color-mix(in srgb, var(--bitter) 60%, var(--card)); }
.saltmeter .zones i:nth-child(2) { background: color-mix(in srgb, var(--fat) 65%, var(--card)); }
.saltmeter .zones i:nth-child(3) { background: color-mix(in srgb, var(--sweet) 70%, var(--card)); }
.saltmeter .zones i:nth-child(4) { background: color-mix(in srgb, var(--heat) 75%, var(--card)); }
.saltmeter .tick { position: absolute; top: -19px; transform: translateX(-50%); font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.saltmeter .tick:first-child { transform: none; }
.saltmeter .tick:nth-child(5) { transform: translateX(-100%); }
.saltmeter .pin { position: absolute; top: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 3px solid var(--ink); transform: translate(-50%, -50%); transition: left .25s ease-out; }
.zone-names { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: 12px; line-height: 1.2; color: var(--ink-2); text-align: center; }
.zone-names span:first-child { text-align: left; }
.zone-names span:last-child { text-align: right; }
.result .why { margin: 16px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.5; min-height: 4.5em; }
.result .why b { color: var(--ink); }

/* ---------- starch ---------- */
.gran-grid { align-items: center; }
.gran-wrap svg { max-width: 340px; margin: 0 auto; }
.gran-status, .egg-status { display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; min-height: 108px; margin-bottom: 14px; font-size: 15.5px; line-height: 1.45; }
.stage-name { font-family: var(--f-display); font-weight: 720; font-size: 22px; line-height: 1.15; color: var(--ink); }
.curve-wrap svg { width: 100%; height: auto; display: block; max-width: 360px; }

.th-count { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); margin: 14px 0 12px; min-height: 1.4em; }
.th-cards { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .th-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .th-cards { grid-template-columns: repeat(3, 1fr); } }
.th-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 14px; transition: opacity .3s, filter .3s, transform .3s; }
.th-card[aria-disabled="true"] { opacity: .3; filter: grayscale(.85); transform: scale(.98); }
.th-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.th-top h4 { font-family: var(--f-display); font-size: 21px; font-weight: 700; margin: 0; }
.th-top .swatch { width: 56px; height: auto; flex: none; }
.th-card ul { list-style: none; margin: 0; padding: 0; }
.th-card li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-top: 1px dashed var(--line-2); font-size: 14.5px; line-height: 1.35; }
.th-card li:first-child { border-top: 0; }
.th-card li svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.th-card li.y svg { color: var(--bitter); }
.th-card li.x svg { color: var(--heat); }
.th-card .tip { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.45; }

/* ---------- protein: egg ---------- */
.egg-grid { align-items: center; }
.egg-wrap svg { max-width: 330px; margin: 0 auto; }
.egg-rungs { list-style: none; margin: 0; padding: 0; position: relative; }
.egg-rungs li { display: grid; grid-template-columns: 9.5em 1fr; gap: 8px; padding: 7px 10px; border-radius: var(--r-sm); font-size: 14.5px; line-height: 1.3; color: var(--ink-2); border: 1px solid transparent; transition: background .2s, color .2s; }
.egg-rungs li b { font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .02em; padding-top: 2px; }
.egg-rungs li.on { background: var(--el); color: var(--on-el); }
@media (max-width: 420px) { .egg-rungs li { grid-template-columns: 8.4em 1fr; } }

/* ---------- protein: meat quadrant ---------- */
.quad-wrap { max-width: 560px; margin: 0 auto; }
.quad-wrap svg { width: 100%; height: auto; display: block; }
#quad .cut { cursor: pointer; outline: none; }
#quad .cut .dot { transition: r .2s; }
#quad .cut:hover .dot { fill: color-mix(in srgb, var(--protein) 75%, var(--ink)); }
#quad .cut:focus-visible .halo { opacity: 1; }
.quad-note { max-width: 560px; margin: 14px auto 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; font-size: 15.5px; line-height: 1.5; min-height: 5.6em; color: var(--ink-2); }
.quad-note b { font-family: var(--f-display); font-size: 19px; color: var(--ink); margin-right: 4px; }
.quad-note .how { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; background: var(--el); color: var(--on-el); padding: 2px 8px; border-radius: 99px; margin-right: 6px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .jar .wfill, .th-card, .saltmeter .pin, .egg-rungs li { transition: none; }
  #pan .wisp, #pan .bub { animation: none; }
  #pan .wisp { opacity: .6; }
  #pan .bub { opacity: .8; }
}