/* Himalayan salt lesson. All rules scoped under .him-* */
.him-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.him-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }

/* 0. the rock and the jar */
.him-open { gap: 4px; }
.him-rockbox { height: 150px; display: flex; align-items: center; justify-content: center; }
.him-rock { width: 150px; height: 150px; padding: 0; border: 0; background: none; cursor: pointer; animation: himBob 2.4s ease-in-out 3; }
.him-rock img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(240,120,140,.35)); }
.him-rock.crack { animation: himBreak .6s ease-in forwards; cursor: default; }
@keyframes himBob { 50% { translate: 0 -6px; } }
@keyframes himBreak { 0% { rotate: 0; } 20% { rotate: -6deg; } 40% { rotate: 5deg; scale: 1.04; } 100% { scale: .2; opacity: 0; } }
.him-jar { position: relative; display: flex; flex-direction: column; align-items: center; }
.him-lid { width: 96px; height: 16px; border-radius: 6px 6px 3px 3px; background: linear-gradient(#e0b98d, #a87b52); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.him-glass { position: relative; width: 116px; height: 112px; margin-top: -2px; border-radius: 12px 12px 24px 24px; border: 3px solid rgba(255,255,255,.5); background: rgba(255,255,255,.07); overflow: hidden; box-shadow: inset 8px 0 0 rgba(255,255,255,.06); }
.him-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 6%; background: radial-gradient(circle at 30% 30%, #ffd2d6 0 2px, transparent 3px) 0 0 / 9px 9px, radial-gradient(circle at 60% 70%, #f2a3ae 0 2px, transparent 3px) 4px 4px / 10px 10px, #f6b8c0; transition: height 1.2s cubic-bezier(.3,.7,.3,1) .45s; }
.him-label { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 2; width: 128px; padding: 5px 6px; border-radius: 8px; background: #fff6f0; color: #5a2a33; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.him-label b { display: block; font: 800 12px/1.15 var(--sans); }
.him-label span { display: block; font: 700 12px var(--sans); color: #b2475a; }
.him-grain { position: absolute; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 2px; background: #f4a7b2; box-shadow: inset -1px -1px 0 rgba(160,60,80,.35); pointer-events: none; z-index: 3; }

/* 1. the mine */
.him-photo { margin: 0; width: 100%; max-width: 360px; }
.him-photo img { display: block; width: 100%; border-radius: 14px; }
.him-photo figcaption { margin-top: 6px; font-size: 12.5px; color: var(--faint); text-align: center; }
.him-old .him-photo img { filter: sepia(.35) saturate(1.2); transition: filter 1.2s; }

/* 2. the lab */
.him-scale { display: flex; flex-direction: column; align-items: center; transition: opacity .5s; }
.him-heap { width: 120px; height: 46px; border-radius: 60px 60px 6px 6px; background: radial-gradient(circle at 30% 30%, #ffd2d6 0 2px, transparent 3px) 0 0 / 9px 9px, #f2a9b4; }
.him-read { margin-top: 4px; padding: 3px 14px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line-strong); font: 800 16px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.him-bar { position: relative; width: 100%; max-width: 340px; height: 46px; display: flex; border-radius: 10px; overflow: hidden; background: #f2a9b4; }
.him-bar i { display: flex; flex-direction: column; justify-content: center; padding-left: 10px; font-style: normal; overflow: hidden; white-space: nowrap; transition: flex-basis 1.1s cubic-bezier(.3,.7,.3,1), opacity .4s; }
.him-nacl { flex: 0 0 0%; background: #f4f1ec; color: #2a2234; opacity: 0; }
.him-nacl span { font: 700 12px var(--sans); }
.him-nacl b { font: 800 16px var(--sans); }
.him-rest { flex: 1 1 auto; background: #e8707f; padding: 0 !important; }
.him-bar em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 14px var(--sans); font-style: normal; color: #5a2a33; transition: opacity .3s; }
.tested .him-nacl { flex-basis: 97%; opacity: 1; }
.tested .him-bar em { opacity: 0; }
.him-restbtn { align-self: flex-end; margin-right: max(0px, calc(50% - 170px)); display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 2px solid #e8707f; background: var(--surface); color: var(--text); opacity: 0; transition: opacity .4s .9s; cursor: pointer; }
.tested .him-restbtn { opacity: 1; }
.him-restbtn i { width: 12px; height: 12px; border-radius: 3px; background: #e8707f; }
.him-restbtn b { font: 800 15px var(--sans); }
.him-restbtn span { font: 600 13px var(--sans); color: var(--dim); }
.him-restbtn:disabled { cursor: default; color: var(--text); }
.him-restbtn.open { border-color: var(--violet-bright); }
.him-slot { position: relative; width: 100%; max-width: 340px; height: 160px; }
.him-slot > * { position: absolute; left: 0; right: 0; top: 0; }
.him-scale { padding-top: 30px; }
.zoomed .him-scale { opacity: 0; }
.him-zoom { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.him-piles { width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 2px; }
.him-pl { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 8px; min-height: 22px; animation: himPop .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes himPop { from { opacity: 0; translate: 0 8px; } }
.him-pc { display: flex; align-items: center; justify-content: center; }
.him-pc i { display: block; border-radius: 50%; background: #ece6dc; }
.him-pl b { font: 700 13.5px var(--sans); color: var(--text); }
.him-pl em { font: 800 13.5px var(--sans); font-style: normal; color: var(--dim); font-variant-numeric: tabular-nums; }
.him-fe { animation-delay: .6s; margin-top: 2px; padding: 3px 0; border-radius: 10px; background: rgba(232,112,127,.12); }
.him-fe .him-pc i { width: 3px; height: 3px; background: #d8434f; box-shadow: 0 0 0 6px rgba(0,0,0,0), 0 0 0 7.5px #e8707f; animation: himRing 1.2s ease-in-out 1s 3; }
.him-fe b, .him-fe em { color: #f29aa6; }
@keyframes himRing { 50% { scale: 1.6; } }

/* 4. the pour */
.him-mound { width: 220px; height: auto; }
.him-plate { fill: var(--raised); stroke: var(--line-strong); }
.him-salt { fill: #f2a9b4; transition: d .2s; }
.him-gauges { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 8px; }
.him-gi .gt i { background: #e8707f; }
.him-gs .gt i { background: var(--gold); }
.him-gs.bad .gt i { background: var(--red); }
.him-gs .gt { position: relative; overflow: visible; }
.him-tick { position: absolute; left: 4%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); }

/* 6. the lamp */
.him-lamp { padding: 12px 0; }
.him-lamp img { max-height: 220px; width: auto; border-radius: 14px; }

@media (max-height: 700px) {
  .him-rockbox, .him-rock { height: 120px; }
  .him-rock { width: 120px; }
  .him-glass { height: 98px; width: 104px; }
  .him-label { bottom: 14px; }
  .him-mound { width: 180px; }
  .him-lamp img { max-height: 170px; }
}