/* Ghrelin lesson. All rules scoped under .ghr-* */
.ghr-hero { display: flex; justify-content: center; }
.ghr-hero img { width: 210px; filter: drop-shadow(0 10px 22px rgba(255,120,150,.25)); }

/* the day */
.ghr-day { width: min(100%, 330px); margin: 0 auto; }
.ghr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ghr-head img { width: 58px; height: 58px; object-fit: contain; }
.ghr-head span { display: block; font: 700 12px/1.2 var(--sans); color: var(--dim); }
.ghr-clock { display: block; font: 800 24px/1.1 var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.ghr-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ghr-base { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.ghr-tick { fill: var(--dim); font: 600 12px var(--sans); text-anchor: middle; }
.ghr-mark { stroke: rgba(252,192,80,.55); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ghr-mark.ghr-skip { stroke: rgba(216,85,85,.7); }
.ghr-mark.ghr-now { stroke: var(--violet-bright); stroke-dasharray: none; stroke-width: 2; }
.ghr-ml { fill: var(--gold); font: 700 12px var(--sans); text-anchor: middle; }
.ghr-ml.ghr-skip { fill: #ff8a8a; }
.ghr-area { fill: rgba(255,120,150,.16); }
.ghr-line { fill: none; stroke: #ff8fab; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255,120,150,.6)); }
.ghr-dot { fill: #fff; stroke: #ff8fab; stroke-width: 2; }
.ghr-mini .ghr-line { stroke-width: 2.5; }

/* Ana and Ben */
.ghr-two { width: min(100%, 330px); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.ghr-slots { display: flex; gap: 10px; }
.ghr-slots > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ghr-slots span { font: 700 12px/1.2 var(--sans); color: var(--dim); }
.ghr-slot { display: block; width: 100%; height: 72px; border-radius: 10px; background: rgba(255,255,255,.04); }
.ghr-slot .ghr-chart { width: 100%; height: 100%; }
.ghr-slot:empty::before { content: '?'; display: grid; place-items: center; height: 100%; font: 800 22px/1 var(--sans); color: rgba(255,143,171,.55); }
.choices.ghr-duo { flex-direction: row; gap: 10px; }
.ghr-duo .choice { flex: 1; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; text-align: center; }
.ghr-duo b { font: 800 17px/1.2 var(--sans); }
.ghr-duo small { font: 500 12px/1.3 var(--sans); color: var(--dim); }

/* the drip */
.ghr-plates { display: flex; justify-content: center; align-items: flex-end; gap: 14px; width: min(100%, 330px); margin: 0 auto; }
.ghr-plate { position: relative; width: 140px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ghr-plate img { width: 130px; transform-origin: 50% 80%; transition: transform .8s cubic-bezier(.3,.7,.2,1); }
.ghr-plate span { font: 700 13px/1.2 var(--sans); color: var(--text); }
.ghr-more { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 11px; white-space: nowrap;
  font: 800 14px/18px var(--sans); color: var(--text); background: var(--raised); border: 1.5px solid var(--line-strong); transition: background .3s, color .3s; }
.ghr-big .ghr-q img { transform: scale(1.13); }
.ghr-big .ghr-more { background: var(--gold); color: #2b1d02; border-color: var(--gold); }

/* the sleeve */
.ghr-cut { position: relative; width: 210px; height: 210px; margin: 0 auto; }
.ghr-cut img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ghr-ghost { transition: opacity .8s, filter .8s; }
.ghr-keep { clip-path: polygon(32% 0, 47% 0, 48% 10%, 53% 16%, 63% 30%, 66% 46%, 62% 62%, 53% 74%, 40% 81%, 28% 84%, 27% 100%, 10% 100%, 9% 76%, 22% 62%, 38% 57%, 46% 48%, 46% 38%, 36% 32%, 33% 16%); }
.ghr-done .ghr-ghost { opacity: .16; filter: grayscale(1); }
.ghr-cell { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e3dcff, var(--violet));
  box-shadow: 0 0 10px rgba(169,155,255,.95); transition: opacity .6s, transform .6s; }
.ghr-done .ghr-cell { opacity: 0; transform: scale(.4); }
.ghr-done .ghr-cell:nth-of-type(6) { opacity: 1; transform: none; }

@media (max-height: 700px) {
  .ghr-hero img { width: 160px; }
  .ghr-head img { width: 44px; height: 44px; }
  .ghr-clock { font-size: 20px; }
  .ghr-chart:not(.ghr-mini) { max-height: 150px; }
  .ghr-slot { height: 62px; }
  .ghr-plate img { width: 108px; }
  .ghr-cut { width: 180px; height: 180px; }
}

/* tap the clock; the sleeve's legend */
.ghr-head.ghr-tap { cursor: pointer; min-height: 44px; }
.ghr-legend { position: absolute; right: -6px; top: 4px; margin: 0; display: flex; align-items: center; gap: 6px; font: 700 12px/1 var(--sans); color: var(--violet-bright); white-space: nowrap; }
.ghr-legend i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e3dcff, var(--violet)); box-shadow: 0 0 8px rgba(169,155,255,.95); }