/* Work-life balance lesson. All rules scoped under .wlb-* */
.wlb-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wlb-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 320px; }

/* the phone */
.wlb-phone { position: relative; width: 200px; height: 270px; border-radius: 30px; border: 3px solid #3A3F55; overflow: hidden; background: #0B1020; box-shadow: 0 20px 40px rgba(0, 0, 0, .45); }
.wlb-wall { position: absolute; inset: 0; background: linear-gradient(180deg, #1B1440 0%, #3B2464 55%, #8A4B5E 100%); transition: filter 2.4s; }
.wlb-moon { position: absolute; right: 30px; top: 120px; width: 34px; height: 34px; border-radius: 50%; background: #F6E7B8; box-shadow: 0 0 30px 8px rgba(246, 231, 184, .35); }
.wlb-calm .wlb-wall { filter: brightness(1.15) saturate(1.2); }
.wlb-time { position: absolute; left: 0; right: 0; top: 34px; text-align: center; font: 600 46px/1 var(--sans); color: #fff; letter-spacing: -1px; }
.wlb-date { position: absolute; left: 0; right: 0; top: 86px; text-align: center; font: 600 13px var(--sans); color: rgba(255, 255, 255, .8); }
.wlb-small { width: 170px; height: 200px; }
.wlb-small .wlb-moon { top: 120px; }

/* the ring */
.wlb-ringw { position: relative; width: 100%; max-width: 320px; touch-action: none; }
.wlb-ring { width: 100%; display: block; overflow: visible; cursor: pointer; }
.wlb-base { fill: none; stroke: var(--raised); stroke-width: 22; }
.wlb-a { fill: none; stroke-width: 22; }
.wlb-work { stroke: rgba(252, 192, 80, .55); }
.wlb-sleep { stroke: rgba(91, 69, 200, .7); }
.wlb-eve { stroke: rgba(63, 214, 154, .22); }
.wlb-done { stroke: var(--mint); }
.wlb-away { stroke: var(--gold); stroke-dasharray: 5 4; }
.wlb-hl { font: 600 16px var(--sans); fill: var(--faint); text-anchor: middle; }
.wlb-hr { text-anchor: end; }
.wlb-hll { text-anchor: start; }
.wlb-al { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; dominant-baseline: middle; }
.wlb-bo { fill: #0B1020; stroke: var(--line-strong); stroke-width: 3; }
.wlb-bt { fill: var(--line-strong); }
.wlb-bf { fill: var(--mint); }
.wlb-bl { font: 700 16px var(--sans); fill: var(--text); text-anchor: middle; }
.wlb-hit { fill: transparent; }
.wlb-knob { fill: var(--gold); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(252, 192, 80, .8)); }
.wlb-mail rect, .wlb-mail path { fill: #F3EEE4; stroke: #8A3A1E; stroke-width: 2; stroke-linejoin: round; }
.wlb-mail path { fill: none; }
.wlb-clock { font: 700 16px var(--mono); fill: var(--gold); text-anchor: middle; }
.wlb-leg { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--dim); }
.wlb-leg i { display: inline-block; width: 14px; height: 8px; border-radius: 3px; margin-right: 5px; vertical-align: 1px; }
.wlb-lw { background: rgba(252, 192, 80, .55); } .wlb-ls { background: rgba(91, 69, 200, .7); } .wlb-lo { background: var(--mint); }
.wlb-la { background: repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 7px); }

/* a year */
.wlb-yr { width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wlb-yc { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); }
.wlb-yc b { font: 700 16px var(--serif); }
.wlb-yc span { font-size: 13px; color: var(--dim); }
.wlb-yb { height: 14px; border-radius: 7px; background: var(--raised); overflow: hidden; }
.wlb-yb i { display: block; height: 100%; width: 0; border-radius: 7px; background: var(--mint); }
.wlb-y2 .wlb-yb i { background: #FF8A6B; }

/* Sam and Priya */
.wlb-two { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.wlb-pp { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px; align-items: baseline; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); transition: border-color .3s; }
.wlb-pp b { font: 700 17px var(--serif); }
.wlb-pp span { font-size: 13px; color: var(--dim); }
.wlb-strip { grid-column: 1 / span 2; display: flex; height: 22px; border-radius: 8px; overflow: hidden; }
.wlb-w { background: var(--gold); }
.wlb-h { background: var(--mint); }
.wlb-pp.wlb-hit { border-color: #FF8A8A; }
.wlb-key { display: flex; justify-content: center; gap: 16px; font-size: 13px; color: var(--dim); }
.wlb-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

@media (max-height: 700px) {
  .wlb-ringw { max-width: 250px; }
  .wlb-leg { gap: 2px 8px; }
  .wlb-phone { height: 230px; width: 180px; }
  .wlb-moon { top: 104px; }
}