/* ==========================================================================
   Poppycal — Kid Mode chore-completion demo
   Ported from the shipping app by the Poppycal session. Original sources:
     apps/web/src/components/tasks/TaskCardFront.jsx
     apps/web/src/components/celebrations/DayCelebrationOverlay.jsx
     apps/web/src/components/celebrations/CountUp.jsx
     apps/web/src/lib/celebrations/confetti.js        (fireEmojiRain)
     apps/web/src/lib/celebrations/rarity.js          (SHOWER_VARIANTS)
     apps/web/src/hooks/useTaskCardScale.js
     packages/shared/src/logic/celebrations/messages.js
     packages/ui-tokens/src/{colors,radius,typography}.ts

   Everything is scoped under .pc-kidmode. No IDs, no global element selectors,
   no network requests. @keyframes names are pc- prefixed, because keyframe
   names are global in CSS and cannot be scoped.

   CONTRAST CHANGES MADE ON INTEGRATION.
   The delivered file darkened one colour to #2C7C9E, measured against plain
   white. Every place it is actually used sits on a sky tint instead, and on
   those real backgrounds it lands at 3.92 to 4.29, under the 4.5 bar. Five
   more nodes failed outright. Composited against their true backgrounds:

     .pc-stars / .pc-reset / .pc-pill text  #2C7C9E -> #26708F  (4.63/4.97/5.06)
     .pc-hero-name                          #7EC8E3 -> #26708F  (1.87 -> 5.53)
     .pc-bubble / .pc-hero-bubble initial   #FFFFFF -> #1F2937  (1.87 -> 7.87)
     .pc-hint                               #6B7280 -> #1F2937  (2.74 -> 5.54,
                                            measured at its 70% end opacity)

   The bubble keeps the true family.sky background and flips the initial to
   ink, rather than darkening the circle, because the six avatar hues are a
   fixed palette in the design system and the text on them is not.

   THE COMPLETED-CARD FADE IS GONE, AND THAT ONE IS A JUDGEMENT CALL.
   The app fades a finished card to opacity 0.5, which drags every string on it
   to between 1.93 and 2.55. Nothing above 0.5 fixes it either: the state also
   mutes the title, so at 0.85 the star pill still only reaches 3.62 and at full
   opacity with the app's own muted grey the title lands on exactly 4.50. The
   fade is dropped and the completed title darkened one step to #4B5563, which
   puts the title at 7.04 and the pill at 4.64.

   Nothing is lost by it. "Done" is still carried by the line-through, the muted
   title, the filled check circle and aria-pressed, so four separate signals and
   not one of them colour alone. But it is a real divergence from the product,
   and the case study should not claim this widget is pixel-identical.
   ========================================================================== */

/* ---------------------------------------------------------------
   Tokens — lifted from packages/ui-tokens and apps/web/src/index.css
   --------------------------------------------------------------- */
.pc-kidmode {
  /* family.sky — the fixed avatar palette in packages/ui-tokens/src/colors.ts */
  --pc-profile: #7EC8E3;
  --pc-profile-rgb: 126, 200, 227;
  --pc-profile-ink: #26708F;     /* the sky that can carry small text */

  --pc-bg-primary: #FFFFFF;      /* --color-bg-primary */
  --pc-text-primary: #1F2937;    /* --color-text-primary */
  --pc-text-secondary: #333333;  /* --color-text-secondary */
  --pc-text-muted: #6B7280;      /* --color-text-muted */
  --pc-text-done: #4B5563;       /* the muted grey, one step darker, for a
                                    completed title that no longer has a fade
                                    helping to hide it */
  --pc-star: #FBBF24;            /* semantic.star */
  --pc-accent-orange: #F97316;   /* orange[500] — focus ring */

  --pc-r-lg: 12px;               /* radius.lg  — task cards */
  --pc-r-3xl: 24px;              /* radius.3xl — hero card */

  --pc-font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --pc-font-2: 'Nunito Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 460px;
  padding: 20px;
  border-radius: var(--pc-r-3xl);
  background: var(--pc-bg-primary);
  font-family: var(--pc-font);
  color: var(--pc-text-primary);
  -webkit-tap-highlight-color: transparent;
}
.pc-kidmode ::selection { background: rgba(var(--pc-profile-rgb), 0.3); }

/* The host page sets h3 { font-family: var(--serif) } and p { max-width: 62ch }.
   Those beat inheritance from .pc-kidmode, so the widget states its own. */
.pc-kidmode h3,
.pc-kidmode p { font-family: inherit; max-width: none; font-variation-settings: normal; }

/* The brand font carries no emoji glyphs, so every emoji needs an explicit
   emoji stack or it renders as a tofu box. The app sidesteps this with
   Twemoji SVGs; with no network that is not an option here. */
.pc-kidmode .pc-emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji',
               'Twemoji Mozilla', 'EmojiOne Color', sans-serif;
  font-weight: 400;
  line-height: 1;
}

/* ---------------------------------------------------------------
   Kid Mode header
   --------------------------------------------------------------- */
.pc-kidmode .pc-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.pc-kidmode .pc-bubble {
  width: 44px; height: 44px; border-radius: 9999px;
  background: var(--pc-profile);
  display: flex; align-items: center; justify-content: center;
  color: var(--pc-text-primary); font-weight: 800; font-size: 20px; flex: none;
}
.pc-kidmode .pc-head-text { min-width: 0; }
.pc-kidmode .pc-head-name {
  margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2;
  color: var(--pc-text-primary);
}
.pc-kidmode .pc-head-sub {
  margin: 2px 0 0; font-family: var(--pc-font-2);
  font-size: 13px; color: var(--pc-text-muted);
}

/* ---------------------------------------------------------------
   Task card — TaskCardFront.jsx, large variant
   --------------------------------------------------------------- */
.pc-kidmode .pc-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.pc-kidmode .pc-task {
  position: relative;
  display: block; width: 100%; text-align: left;
  border: 0; margin: 0; padding: 20px;              /* large: p-5 */
  border-radius: var(--pc-r-lg);                     /* rounded-xl */
  background: rgba(var(--pc-profile-rgb), 0.12);     /* hexToRgba(color, 0.12) */
  font-family: inherit; color: inherit; cursor: pointer;
  transition: transform 150ms ease, opacity 200ms ease;  /* .touch-press */
  opacity: 1;
}
.pc-kidmode .pc-task:active { transform: scale(0.97); }  /* .touch-press:active */
.pc-kidmode .pc-task:focus-visible {
  outline: 3px solid var(--pc-accent-orange);
  outline-offset: 3px;
}
/* The app sets opacity 0.5 here. See the contrast note at the top for why this
   does not. "Done" is carried by the four signals below instead. */
.pc-kidmode .pc-task[aria-pressed="true"] { opacity: 1; }
.pc-kidmode .pc-task.pc-bump { animation: pc-card-bump 450ms ease-out; }

.pc-kidmode .pc-tile {
  position: relative;
  height: 140px;                                     /* large ? 140 : 80 */
  margin-bottom: 8px; border-radius: var(--pc-r-lg);
  background: rgba(var(--pc-profile-rgb), 0.18);     /* hexToRgba(color, 0.18) */
  display: flex; align-items: center; justify-content: center;
}
/* Nate's own task illustrations. They come in different aspect ratios, so both
   axes are capped and each one scales to fit its tile rather than being forced
   to a square. 80% leaves the art the same optical weight the 120px emoji had. */
.pc-kidmode .pc-tile-icon {
  display: block;
  max-width: 80%; max-height: 80%;
  width: auto; height: auto;
}
.pc-kidmode .pc-task.pc-bump .pc-tile-icon { animation: pc-emoji-pop 500ms ease-out; }

.pc-kidmode .pc-title {
  display: block;
  margin: 0 0 8px; font-size: 20px; font-weight: 600;  /* large: text-xl font-semibold */
  color: var(--pc-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-kidmode .pc-task[aria-pressed="true"] .pc-title {
  text-decoration: line-through; color: var(--pc-text-done);
}

.pc-kidmode .pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-kidmode .pc-stars {
  padding: 4px 12px; border-radius: 9999px;          /* large: px-3 py-1 */
  font-size: 18px; font-weight: 700;                 /* large: text-lg */
  background: rgba(var(--pc-profile-rgb), 0.2);      /* hexToRgba(color, 0.2) */
  color: var(--pc-profile-ink); white-space: nowrap;
}

.pc-kidmode .pc-check {
  width: 56px; height: 56px; border-radius: 9999px;  /* large: w-14 h-14 */
  border: 2px solid var(--pc-profile); background: transparent;
  display: flex; align-items: center; justify-content: center; flex: none;
  transition: background-color 200ms ease;
}
.pc-kidmode .pc-task[aria-pressed="true"] .pc-check { background: var(--pc-profile); }
.pc-kidmode .pc-task.pc-bump .pc-check { animation: pc-check-bump 400ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.pc-kidmode .pc-tick { color: var(--pc-text-primary); font-size: 24px; font-weight: 700; opacity: 0; transform: scale(0); }
.pc-kidmode .pc-task[aria-pressed="true"] .pc-tick {
  opacity: 1; transform: scale(1);
  animation: pc-tick-in 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Completion flash + glow ring */
.pc-kidmode .pc-fx {
  position: absolute; inset: 0; border-radius: var(--pc-r-lg);
  pointer-events: none; opacity: 0;
}
.pc-kidmode .pc-task.pc-bump .pc-fx {
  background: var(--pc-profile);
  animation: pc-flash 150ms ease-out, pc-glow 700ms ease-out;
}

/* Effective touch target is the whole card, well over the 44px minimum.

   Below 480px, fall back to the app's compact card variant. Both variants are
   the shipping component; the large one stacked three deep on a phone would
   make this embed about 950px tall. */
@media (max-width: 480px) {
  .pc-kidmode .pc-grid { gap: 12px; grid-template-columns: 1fr; }
  .pc-kidmode .pc-task { padding: 12px; }
  .pc-kidmode .pc-tile { height: 80px; }
  .pc-kidmode .pc-tile-icon { max-width: 74%; max-height: 74%; }
  .pc-kidmode .pc-title { font-size: 14px; }
  .pc-kidmode .pc-stars { padding: 2px 8px; font-size: 14px; }
  .pc-kidmode .pc-check { width: 44px; height: 44px; }
  .pc-kidmode .pc-tick { font-size: 16px; }
  .pc-kidmode .pc-hero-emoji { font-size: 56px; }
  .pc-kidmode .pc-hero-bubble { width: 52px; height: 52px; font-size: 22px; }
  .pc-kidmode .pc-hero-name { font-size: 24px; }
  .pc-kidmode .pc-hero-msg { font-size: 17px; }
  .pc-kidmode .pc-pill { font-size: 16px; padding: 8px 16px; }
  .pc-kidmode .pc-hero { padding: 22px 18px; }
}

/* ---------------------------------------------------------------
   Footer / reset
   --------------------------------------------------------------- */
.pc-kidmode .pc-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 16px; flex-wrap: wrap;
}
.pc-kidmode .pc-total {
  font-family: var(--pc-font-2); font-size: 13px; color: var(--pc-text-muted);
}
.pc-kidmode .pc-reset {
  border: 0; border-radius: 9999px; padding: 10px 18px; min-height: 44px;
  background: rgba(var(--pc-profile-rgb), 0.18); color: var(--pc-profile-ink);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform 150ms ease;
}
.pc-kidmode .pc-reset:active { transform: scale(0.97); }
.pc-kidmode .pc-reset:focus-visible {
  outline: 3px solid var(--pc-accent-orange); outline-offset: 3px;
}

/* ---------------------------------------------------------------
   Day-complete overlay — DayCelebrationOverlay.jsx
   Contained to this box instead of position:fixed inset-0, so it cannot
   take over the reader's screen.
   --------------------------------------------------------------- */
.pc-kidmode .pc-overlay {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; cursor: pointer;
  animation: pc-fade-in 300ms ease both;
}
.pc-kidmode .pc-wash {
  position: absolute; inset: 0;
  background: rgba(var(--pc-profile-rgb), 0.85);     /* hexToRgba(color, 0.85) */
  animation: pc-fade-in 300ms ease both;
}
.pc-kidmode .pc-camera-flash {                        /* camera-flash effect */
  position: absolute; inset: 0; pointer-events: none;
  background: var(--pc-profile);
  animation: pc-camera-flash 250ms ease-out both;
}
.pc-kidmode .pc-hero {
  position: relative; z-index: 1;
  max-width: 420px; width: 100%; max-height: 100%; overflow: auto;
  padding: 28px 24px; text-align: center;
  background: var(--pc-bg-primary);
  border: 3px solid var(--pc-profile);
  border-radius: var(--pc-r-3xl);                     /* rounded-3xl */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);  /* shadow-2xl */
  animation: pc-hero-in 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 150ms both;
}
.pc-kidmode .pc-hero-emoji {
  font-size: 72px; margin-bottom: 12px; display: block;
  animation: pc-hero-emoji 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms both;
}
.pc-kidmode .pc-hero-bubble {
  width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 9999px;
  background: var(--pc-profile);
  display: flex; align-items: center; justify-content: center;
  color: var(--pc-text-primary); font-weight: 800; font-size: 26px;
  animation: pc-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 500ms both;
}
.pc-kidmode .pc-hero-name {
  margin: 0 0 8px; font-size: 30px; font-weight: 900; line-height: 1.15;
  color: var(--pc-profile-ink);
}
.pc-kidmode .pc-letter {
  display: inline-block;
  animation: pc-letter-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.pc-kidmode .pc-hero-msg {
  margin: 0 0 16px; font-size: 20px; font-weight: 700;
  color: var(--pc-text-primary);
  animation: pc-rise-in 400ms ease-out 1000ms both;
}
.pc-kidmode .pc-pill {
  display: inline-flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0 8px;
  padding: 10px 20px; border-radius: 9999px; max-width: 100%;
  font-size: 18px; font-weight: 700;
  background: rgba(var(--pc-profile-rgb), 0.15);      /* hexToRgba(color, 0.15) */
  color: var(--pc-profile-ink);
  animation: pc-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 1300ms both;
}
.pc-kidmode .pc-count { font-variant-numeric: tabular-nums; }
.pc-kidmode .pc-hint {
  margin: 24px 0 0; font-family: var(--pc-font-2);
  font-size: 14px; color: var(--pc-text-primary);
  animation: pc-fade-to-70 400ms ease 2500ms both;
}

/* ---------------------------------------------------------------
   Emoji rain — fireEmojiRain(), clipped to this box
   --------------------------------------------------------------- */
.pc-kidmode .pc-rain {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none; overflow: hidden;
}
.pc-kidmode .pc-drop {
  position: absolute; top: -60px; will-change: transform, opacity;
}

/* Screen-reader-only live region */
.pc-kidmode .pc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------
   Keyframes (pc- prefixed: @keyframes names are global)
   --------------------------------------------------------------- */
@keyframes pc-card-bump {            /* useTaskCardScale: [1, 0.96, 1.03, 1] */
  0% { transform: scale(1); } 20% { transform: scale(0.96); }
  60% { transform: scale(1.03); } 100% { transform: scale(1); }
}
@keyframes pc-emoji-pop {            /* scale [1,1.4,1] rotate [0,-8,8,0] */
  0% { transform: scale(1) rotate(0deg); }
  33% { transform: scale(1.4) rotate(-8deg); }
  66% { transform: scale(1.2) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes pc-check-bump { 0%,100% { transform: scale(1); } 45% { transform: scale(1.35); } }
@keyframes pc-tick-in { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pc-flash { 0% { opacity: 0.25; } 100% { opacity: 0; } }
@keyframes pc-glow {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--pc-profile-rgb), 0.6); background: transparent; }
  100% { opacity: 1; box-shadow: 0 0 30px 12px rgba(var(--pc-profile-rgb), 0); background: transparent; }
}
@keyframes pc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pc-camera-flash { from { opacity: 0.4; } to { opacity: 0; } }
@keyframes pc-hero-in {
  from { transform: scale(0.7) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes pc-hero-emoji {           /* scale [0,1.4,1] rotate [-20,10,0] */
  0% { transform: scale(0) rotate(-20deg); }
  55% { transform: scale(1.4) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes pc-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pc-letter-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pc-rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pc-fade-to-70 { from { opacity: 0; } to { opacity: 0.7; } }

/* ---------------------------------------------------------------
   Reduced motion — mirrors the reducedMotion branches in the app:
   the overlay still appears and still carries the message, but the
   springs, letter-pop and emoji rain are dropped.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pc-kidmode .pc-task,
  .pc-kidmode .pc-reset { transition: none; }
  .pc-kidmode .pc-task:active,
  .pc-kidmode .pc-reset:active { transform: none; }
  .pc-kidmode .pc-task.pc-bump,
  .pc-kidmode .pc-task.pc-bump .pc-tile-icon,
  .pc-kidmode .pc-task.pc-bump .pc-check,
  .pc-kidmode .pc-task.pc-bump .pc-fx,
  .pc-kidmode .pc-camera-flash { animation: none; }
  .pc-kidmode .pc-task[aria-pressed="true"] .pc-tick { animation: none; }
  .pc-kidmode .pc-hero { animation: pc-fade-in 300ms ease both; }
  .pc-kidmode .pc-hero-emoji,
  .pc-kidmode .pc-hero-bubble,
  .pc-kidmode .pc-letter { animation: none; opacity: 1; transform: none; }
  .pc-kidmode .pc-hero-msg { animation: pc-fade-in 300ms ease 200ms both; }
  .pc-kidmode .pc-pill { animation: pc-fade-in 200ms ease 400ms both; }
  .pc-kidmode .pc-hint { animation: pc-fade-to-70 300ms ease 1000ms both; }
}