/*
 * Skin: the app's personality (decision 56: direction B). Layers on layout.css + stage-b.css and adds:
 * bold mint moments, emoji as the content's own language, friendly microcopy, gentle motion,
 * playful empty/loading states. Memorial leads switch the fun off (.calm): no chili, no motion, neutral copy.
 */

/* ---- greeting + mint summary ---- */
.hi { display: grid; gap: 14px; padding-block: 8px 18px; }
.hi h1 { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.hi h1 .wave { display: inline-block; transform-origin: 70% 70%; animation: wave 1.6s ease-in-out .4s 2; }
@keyframes wave { 0%, 60%, 100% { transform: none; } 15%, 45% { transform: rotate(14deg); } 30% { transform: rotate(-8deg); } }
.pepper { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--mint); color: var(--mint-ink); text-decoration: none;
  box-shadow: 0 10px 30px rgba(100, 247, 203, .18); }
.pepper .big { font-size: 34px; line-height: 1; }
.pepper b { display: block; font-size: var(--t-lg); font-weight: 800; }
.pepper span { font-size: var(--t-sm); opacity: .78; font-weight: 600; }
.pepper .go { margin-inline-start: auto; font-weight: 800; font-size: 20px; }

/* ---- filters: friendly pills ---- */
.pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 5px; margin-bottom: 8px; }
.pills::-webkit-scrollbar { display: none; }
.pills button { flex: none; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-ctl); font-size: var(--t-sm); font-weight: 700; color: var(--fg-2); position: relative; }
.pills button::after { content: ""; position: absolute; inset: -4px 0; }   /* 36 px padding box (border inside) + 8 = 44 */
.pills button[aria-pressed="true"] { background: var(--mint-soft); border-color: var(--mint); color: var(--mint); }

/* ---- rows become soft cards, with a stagger entrance ---- */
.lrows.fun { display: grid; gap: 12px; }
.lrows.fun .lrow { border: 0; padding: 16px; border-radius: 20px; background: var(--surface); grid-template-columns: 52px minmax(0, 1fr);
  animation: rise .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); transition: transform var(--dur-1), background var(--dur-1); }
.lrows.fun .lrow:hover { background: var(--surface-2); }
.lrows.fun .lrow:hover .rl-title { color: inherit; }
.lrows.fun .lrow:active { transform: scale(.98); }
.lrows.fun .lrow.seen-not { background: linear-gradient(135deg, rgba(100, 247, 203, .16), var(--surface) 55%); box-shadow: inset 0 0 0 1px var(--mint-line); }
.lrows.fun .lrow.seen-not::before { display: none; }
.lrows.fun .lrow.sel { box-shadow: inset 0 0 0 2px var(--mint); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.cat-e { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--fg-2); }
.sticker { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; background: var(--mint); color: var(--mint-ink); font-size: 11px; font-weight: 800; transform: rotate(-3deg); }

/* chili score: number in a pill, chili from 8 */
.pep { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; align-content: center; gap: 0; background: var(--surface-2); color: var(--fg-2);
  font-weight: 900; font-size: 20px; font-variant-numeric: tabular-nums; direction: ltr; line-height: 1; }
.pep small { font-size: 13px; line-height: 1; margin-top: 2px; }
.pep.hot { background: var(--mint); color: var(--mint-ink); }
.pep.warm { background: var(--warn-soft); color: var(--warn); }
.pep.pend { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-ctl); color: var(--muted); }

/* ---- card hero: score ring that fills, mint angle card ---- */
.ring-score { --p: .9; position: relative; width: 76px; height: 76px; flex: none; }
.ring-score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-score .trk { fill: none; stroke: var(--surface-3); stroke-width: 7; }
.ring-score .val { fill: none; stroke: var(--mint); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: calc(201 * (1 - var(--p)));
  animation: fill 1s var(--ease-out) .15s both; }
@keyframes fill { from { stroke-dashoffset: 201; } }
.ring-score b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-weight: 900; direction: ltr; }
.ring-score b small { font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 18px; position: absolute; }
.cb-top { display: flex; align-items: center; gap: 14px; }
.cb-meta { display: grid; gap: 6px; font-size: var(--t-sm); color: var(--muted); }
.chips-e { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-e { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--surface-2); color: var(--fg-2); font-size: 12.5px; font-weight: 700; }
.chip-e.hot { background: var(--warn-soft); color: var(--warn); }
.angle-card { margin: 0; padding: 16px 18px; border-radius: 18px; background: var(--mint-soft); box-shadow: inset 0 0 0 1px var(--mint-line); }
.angle-card span { display: block; font-size: 12.5px; font-weight: 800; color: var(--mint); margin-bottom: 4px; }
.angle-card p { margin: 0; font-size: var(--t-lg); font-weight: 700; line-height: 1.55; color: var(--fg); }
.bot-line { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); color: var(--fg-2); }

/* accordions as soft cards */
.acc.fun { border: 0; border-radius: 18px; background: var(--surface); padding-inline: 16px; }
.acc.fun + .acc.fun { margin-top: 10px; }
.acc.fun:last-of-type { border: 0; }
.acc.fun > summary { min-height: 60px; }
.acc.fun > summary .e { font-size: 20px; margin-inline-end: 4px; }

/* press feedback on primary actions */
.btn.primary.pop:active, .pepper:active { transform: scale(.97); }
.btn.primary.pop { transition: transform var(--dur-1), background var(--dur-1); }

/* ---- empty + loading states ---- */
.state { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 48px 20px; }
.radar { position: relative; width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle, var(--mint-soft) 0 34%, transparent 35%), var(--surface);
  box-shadow: inset 0 0 0 1px var(--mint-line), 0 0 0 14px rgba(100, 247, 203, .05), 0 0 0 28px rgba(100, 247, 203, .03); overflow: hidden; }
.radar::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(100, 247, 203, .55), transparent 70deg); animation: sweep 2.4s linear infinite; }
.radar img { position: absolute; inset: 31px; width: 70px; height: 70px; border-radius: 50%; box-shadow: 0 0 0 3px var(--mint); }
@keyframes sweep { to { transform: rotate(360deg); } }
.state h2 { margin: 6px 0 0; font-size: var(--t-xl); font-weight: 800; }
.state p { margin: 0; color: var(--muted); font-size: var(--t-sm); width: min(30ch, 100%); line-height: 1.6; overflow-wrap: anywhere; }   /* definite width: Safari won't wrap a centred item */
.dig { display: grid; gap: 12px; }
.dig-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: 20px; background: var(--surface); }
.dig-card .pep { animation: bob 1.2s ease-in-out infinite; }
.dig-card .skel i { height: 12px; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.dig-note { text-align: center; color: var(--fg-2); font-size: var(--t-sm); padding-block: 6px 2px; }

/* memorial: fun off */
.calm .pep.hot { background: var(--surface-3); color: var(--fg); }
.calm .wave, .calm .ring-score .val, .calm.lrow { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .lrows.fun .lrow, .ring-score .val, .hi h1 .wave, .radar::before, .dig-card .pep { animation: none !important; }
}

/* ---- stage B: personality for the new components ---- */
.jcard, .pthumb, .op, .ck, .addbox, .slist, .budget { border-radius: 20px; }
.jcard { animation: rise .45s var(--ease-out) both; }
.jcard:nth-child(2) { animation-delay: 60ms; } .jcard:nth-child(3) { animation-delay: 120ms; }
.jcard.run .meter i { background: linear-gradient(90deg, var(--mint), #A8FFE4, var(--mint)); background-size: 200% 100%; animation: flow 1.6s linear infinite; }
@keyframes flow { to { background-position: -200% 0; } }
.pcard { transition: transform var(--dur-1); }
.pcard:hover .pthumb { transform: translateY(-2px); }
.pthumb { transition: transform var(--dur-2) var(--ease-out); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.pv-state h2 { font-size: 24px; }
.topt { border-radius: 16px; }
.topt[aria-pressed="true"] { background: var(--mint-soft); }
.srow.pending { background: linear-gradient(135deg, rgba(201, 174, 255, .2), var(--surface) 70%); }
.type.wide { background: linear-gradient(135deg, rgba(100, 247, 203, .14), var(--surface-2) 60%); }
.login-av { animation: rise .5s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .jcard, .jcard.run .meter i, .login-av { animation: none !important; } }