/* Habit widget embed (see embed.js). Loaded only on posts that use it. */
.hw { display: flex; justify-content: center; }
.hw-stage { position: relative; }

/* the card is the scaled footprint; the tilt layer inside is the widget at 1x */
.hw-card { position: relative; perspective: 900px; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.hw-tilt {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d;
  --s: 1; --press: 1; --sx: 0; --sy: 14; --shine: 0; --fxs: 1;
  transform: scale(calc(var(--s) * var(--press))) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .28s ease-out, box-shadow .28s ease-out;
  box-shadow: calc(var(--sx) * 1px) calc(var(--sy) * 1px) 34px rgba(0, 0, 0, .42);
}
.hw-tilt.hw-pressed { --press: .97; transition-duration: .12s; }
.hw-float .hw-tilt:not(.hw-tracking) { animation: hw-float 5.5s ease-in-out infinite; }
@keyframes hw-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

.hw-bg { position: absolute; inset: 0; }
.hw-bg2 { opacity: 0; transition: opacity calc(.7s * var(--fxs)) ease; }
.hw-bg2.hw-in { opacity: 1; }
.hw-board { position: absolute; inset: 0; }
.hw-tilt .hb-widget { position: absolute; inset: 0; }

/* the lights: a glare spot under the pointer, a rim that brightens toward it */
.hw-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: screen; z-index: 3;
  background: radial-gradient(150px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .20), rgba(255, 255, 255, .05) 45%, transparent 70%); }
.hw-rim { position: absolute; inset: 0; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 4;
  background: conic-gradient(from calc(var(--lt, 0deg) - 90deg), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .35) 55deg, rgba(255, 255, 255, .95) 90deg, rgba(255, 255, 255, .35) 125deg, rgba(255, 255, 255, 0) 180deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.hw-hover .hw-tilt.hw-tracking .hw-glare, .hw-hover .hw-tilt.hw-tracking .hw-rim { opacity: var(--shine); }
.hw-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.hw-sheen::before { content: ""; position: absolute; top: -30%; bottom: -30%; width: 26%; left: -40%; transform: skewX(-16deg); opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10) 35%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, .10) 65%, transparent); }
.hw-sheen.hw-go::before { animation: hw-sweep var(--dur, 900ms) linear forwards; }
@keyframes hw-sweep { 0% { left: -40%; opacity: 1; } 100% { left: 130%; opacity: 1; } }

.hw-card.hw-tappable { cursor: pointer; }
.hw-card.hw-tappable:focus-visible .hw-tilt { box-shadow: 0 0 0 3px rgba(34, 197, 94, .6), 0 14px 34px rgba(0, 0, 0, .42); }

/* the colour change, cell by cell */
.hw-board .hb-col { perspective: 140px; }
.hw-board .hb-cell { will-change: transform; }
.hw-board .hb-check, .hw-board .hb-pill, .hw-board .hb-streak { transition: color calc(.6s * var(--fxs)) ease, background-color calc(.6s * var(--fxs)) ease; }
[data-fx="ripple"]   .hb-cell.hw-an { animation: hw-flipx calc(.56s * var(--fxs)) cubic-bezier(.4, 0, .2, 1) both; }
[data-fx="cascade"]  .hb-cell.hw-an { animation: hw-pop calc(.6s * var(--fxs)) cubic-bezier(.34, 1.56, .64, 1) both; }
[data-fx="diagonal"] .hb-cell.hw-an { animation: hw-flipy calc(.6s * var(--fxs)) cubic-bezier(.4, 0, .2, 1) both; }
[data-fx="flutter"]  .hb-cell.hw-an { animation: hw-leaf calc(.7s * var(--fxs)) ease-in-out both; }
[data-fx="sweep"]    .hb-cell.hw-an { animation: hw-glint calc(.55s * var(--fxs)) ease-out both; }
[data-fx="wave"]     .hb-cell.hw-an { animation: hw-bob calc(.62s * var(--fxs)) cubic-bezier(.36, .07, .19, .97) both; }
@keyframes hw-flipx { 0% { transform: rotateX(0deg); } 50% { transform: rotateX(90deg) translateZ(4px); } 100% { transform: rotateX(0deg); } }
@keyframes hw-flipy { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(90deg) translateZ(4px); } 100% { transform: rotateY(0deg); } }
@keyframes hw-pop { 0% { transform: scale(1); } 45% { transform: scale(.12); } 100% { transform: scale(1); } }
@keyframes hw-leaf { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(.3) rotate(28deg) translateY(2px); } 100% { transform: scale(1) rotate(0deg); } }
@keyframes hw-glint { 0% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(1.18); filter: brightness(1.9); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes hw-bob { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.22); } 100% { transform: translateY(0) scale(1); } }

/* banner: rows of cards scrolling sideways without end */
.hw-banner { display: block; overflow: hidden; padding: 22px 0 40px;   /* room for the cards' shadows: nothing clips them */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
@media (min-width: 900px) { .hw-bleed { width: 100vw; margin-left: calc(50% - 50vw); } }
.hw-row { padding: 0; }
.hw-still .hw-tilt { box-shadow: 0 6px 22px rgba(0, 0, 0, .28); }
.hw-still { pointer-events: none; }
.hw-still .hw-card { user-select: none; }
.hw-row + .hw-row { margin-top: 22px; }
.hw-track { display: flex; width: max-content; will-change: transform; }
.hw-track .hw-card { flex: none; }
.hw-track.hw-scroll { animation: hw-marquee linear infinite; }
.hw-track.hw-scroll.hw-reverse { animation-direction: reverse; }
.hw-pause:hover .hw-track { animation-play-state: paused; }
@keyframes hw-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--hw-loop))); } }

@media (prefers-reduced-motion: reduce) {
  .hw-tilt, .hw-track.hw-scroll { animation: none !important; transition: none; }
  .hb-cell.hw-an { animation-duration: .01ms !important; }
  .hw-sheen.hw-go::before { animation: none; }
}

/* block card demo */
.hw-block { transform-origin: 0 0; }
.hw-blockwrap .hw-stage { position: relative; overflow: visible; }
.hw-block .bc-card { width: 353px; }
.hw-block .bc-cond { position: relative; }
/* the app's start capsule (PomodoroView): play 9pt bold + 12pt bold, 11 x 6 padding, white on the row's colour */
.hw-resume { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; color: #fff;
  font: 700 12px/1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .12s, background .3s; }
.hw-resume svg { width: 9px; height: 9px; }
.hw-resume:active { transform: scale(.96); }
.hw-resume.hw-running { cursor: default; }
.hw-resume.hw-done { width: 24px; height: 24px; padding: 0; margin-right: 5px; justify-content: center; background: transparent !important; cursor: default; }
.hw-resume.hw-done .hw-mask { display: block; }
.hw-resume.hw-done svg { display: block; }
/* the quick-add control is the app's: `circle` / `checkmark.circle.fill` at 24pt in the row's colour */
.bc-quick.hw-sym { width: 24px; height: 24px; margin: 0 5px 0 0; background: transparent; box-shadow: none; }
.bc-quick.hw-sym[role=button] { cursor: pointer; }
.bc-quick.hw-sym[role=button]:active { transform: scale(.94); }
.bc-quick.hw-sym .hw-mask { display: block; }
/* the hint: the app's pill (green on 13% green, a thin outline) with a chevron toward
   the thing to tap; beside the card on a wide screen */
.hw-hint { position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 9px; border-radius: 999px; background: rgba(34, 197, 94, .13); color: #22c55e; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .45);
  font: 700 12px/1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif; white-space: nowrap; pointer-events: none; z-index: 2;
  animation: hw-hint 1.8s ease-in-out infinite; }
.hw-hint::before { content: ""; width: 6px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 1px; }
.hw-hint.hw-hint-out { animation: none; opacity: 0; transition: opacity .25s; }
@keyframes hw-hint { 0%, 100% { translate: 0 0; } 50% { translate: -3px 0; } }
/* on a phone there is no room beside a card: the hint sits above the card's right
   corner, pointing down at it (embed.js moves a block's hint onto the card there) */
@media (max-width: 720px) {
  .hw-hint { left: auto; right: 0; top: -10px; transform: translateY(-100%); animation-name: hw-hint-m; }
  .hw-hint::before { transform: rotate(-45deg); margin: -3px 0 0; }
  @keyframes hw-hint-m { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
}

.hw-block .bc-quick:focus-visible, .hw-resume:focus-visible { outline: 2px solid var(--bc-green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hw-hint { animation: none; } }

.hw-mask { display: inline-block; vertical-align: middle; flex: none; }
.hb-glyph .hw-mask { display: block; }