/* 首页 (the parents' home): tool grid cards (spec §10). Hero/avatar/banner styles live in views.css. */

/* The shared hero highlight circle sits right under the fruit art here; Chromium loses its round clip
   where the two overlap and paints a pale rectangle, and the art covers that corner anyway. */
.page--home .hero::before { content: none; }

/* Accent families for tool cards; a tool picks one via data-accent (tools.js ACCENTS). */
.tcard {
  --tool-1: #FF9A57;
  --tool-2: #FF5E62;
  --tool-shadow: rgba(255, 94, 98, 0.34);
  --tool-glow: rgba(255, 122, 90, 0.16);
  --tool-ink: #B5332B; /* ≈ 5:1 on coral-soft (was #D63F3A ≈ 3.7:1) */
  --tool-soft: var(--coral-soft);
}
.tcard[data-accent="pineapple"] {
  --tool-1: #FFD45C;
  --tool-2: #FFA51F;
  --tool-shadow: rgba(255, 165, 31, 0.38);
  --tool-glow: rgba(255, 194, 51, 0.20);
  --tool-ink: #A86400;
  --tool-soft: var(--pineapple-soft);
}
.tcard[data-accent="mangosteen"] {
  --tool-1: #A563CC;
  --tool-2: #5E2580;
  --tool-shadow: rgba(107, 47, 138, 0.34);
  --tool-glow: rgba(140, 70, 180, 0.14);
  --tool-ink: var(--mangosteen);
  --tool-soft: var(--mangosteen-soft);
}
.tcard[data-accent="leaf"] {
  --tool-1: #62CF90;
  --tool-2: #2B9A5C;
  --tool-shadow: rgba(46, 154, 94, 0.34);
  --tool-glow: rgba(59, 170, 110, 0.15);
  --tool-ink: #1E8A4F;
  --tool-soft: var(--leaf-soft);
}
.tcard[data-accent="sky"] {
  --tool-1: #7AA7FF;
  --tool-2: #2D6CF0;
  --tool-shadow: rgba(45, 108, 240, 0.32);
  --tool-glow: rgba(45, 108, 240, 0.13);
  --tool-ink: #2457C5;
  --tool-soft: rgba(45, 108, 240, 0.12);
}
.tcard[data-accent="mint"] {
  --tool-1: #4FD9C6;
  --tool-2: #12A594;
  --tool-shadow: rgba(18, 165, 148, 0.34);
  --tool-glow: rgba(18, 165, 148, 0.14);
  --tool-ink: var(--mint-ink);
  --tool-soft: var(--mint-soft);
}

@media (prefers-color-scheme: dark) {
  .tcard { --tool-ink: #FF8E7E; --tool-glow: rgba(255, 110, 90, 0.16); --tool-shadow: rgba(255, 80, 80, 0.22); }
  .tcard[data-accent="pineapple"] { --tool-ink: #FFC233; --tool-glow: rgba(255, 194, 51, 0.13); --tool-shadow: rgba(255, 165, 31, 0.22); }
  .tcard[data-accent="mangosteen"] { --tool-ink: #C99AE6; --tool-glow: rgba(170, 110, 210, 0.16); --tool-shadow: rgba(120, 50, 170, 0.30); }
  .tcard[data-accent="leaf"] { --tool-ink: #4CD38A; --tool-glow: rgba(59, 170, 110, 0.14); --tool-shadow: rgba(46, 154, 94, 0.22); }
  .tcard[data-accent="sky"] { --tool-ink: #8FB3FF; --tool-glow: rgba(45, 108, 240, 0.18); --tool-soft: rgba(127, 168, 255, 0.16); --tool-shadow: rgba(45, 108, 240, 0.24); }
  .tcard[data-accent="mint"] { --tool-glow: rgba(63, 214, 195, 0.14); --tool-shadow: rgba(18, 165, 148, 0.24); }
}

/* ---------- Grid ---------- */

.tgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--gap);
}
@media (min-width: 640px) { .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .tgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Card ---------- */

/* Every card reserves room for the fullest live summary (icon, name, 1-line next draw, 2-line money, pill),
   so cards are the same height before and after the async summary arrives (spec §12). */
.tcard {
  --tcard-pad: var(--card-pad);
  --tcard-icon: 52px;
  --tcard-name-fs: 18px;
  --tcard-line-fs: 12.5px;
  --tcard-line-h: calc(var(--tcard-line-fs) * 1.45);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  height: 100%;
  min-height: calc(2 * var(--tcard-pad) + var(--tcard-icon) + 14px + var(--tcard-name-fs) * 1.25 + 6px + 3 * var(--tcard-line-h) + 2 * 3px + 5px + 24px);
  padding: var(--tcard-pad);
  border-radius: var(--r-l);
  overflow: hidden;
  overflow: clip;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  animation: tcard-in 560ms var(--ease-spring) backwards; /* not 'both': a held end frame would override :active */
}
@media (min-width: 420px) { .tcard { --tcard-name-fs: 19px; --tcard-line-fs: 13px; } }
.tcard:nth-child(2) { animation-delay: 60ms; }
.tcard:nth-child(3) { animation-delay: 120ms; }
.tcard:nth-child(4) { animation-delay: 180ms; }
.tcard:nth-child(n + 5) { animation-delay: 240ms; }
@keyframes tcard-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* Soft accent wash in the corner + a faint ring of the same colour. */
.tcard::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(90% 70% at 100% 0%, var(--tool-glow) 0%, transparent 70%),
    radial-gradient(60% 50% at 0% 100%, var(--tool-glow) 0%, transparent 75%);
  pointer-events: none;
}
.tcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}

a.tcard:active {
  transform: scale(0.96);
  box-shadow: var(--shadow-1);
  transition-duration: 90ms;
}
@media (hover: hover) {
  a.tcard:hover { box-shadow: var(--shadow-3); }
}

/* Icon tile: glossy gradient square in the tool's accent. */
.tcard-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tcard-icon); height: var(--tcard-icon);
  flex-shrink: 0;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, var(--tool-1) 0%, var(--tool-2) 100%);
  box-shadow: 0 8px 18px -4px var(--tool-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}
.tcard-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(70% 55% at 28% 18%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.tcard-icon svg { position: relative; z-index: 1; width: 29px; height: 29px; stroke-width: 2.1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)); }

.tcard-name {
  max-width: 100%;
  margin-top: 14px;
  font-size: var(--tcard-name-fs);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tcard-desc { margin-top: 4px; } /* on ready cards it is also a .tcard-line */

/* Live summary lines */
.tcard-live {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  margin-top: 6px;
}
.tcard-live.is-entering > * { animation: tcard-line-in 380ms var(--ease-out) backwards; }
.tcard-live.is-entering > :nth-child(2) { animation-delay: 50ms; }
.tcard-live.is-entering > :nth-child(3) { animation-delay: 100ms; }
@keyframes tcard-line-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.tcard-line {
  display: block;
  align-self: stretch;
  max-height: var(--tcard-line-h); /* one line; line 2 may use two (below) */
  overflow: hidden; /* clips the separator of a part that wrapped to a new line */
  font-size: var(--tcard-line-fs);
  line-height: 1.45;
  color: var(--text-2);
}
.tcard-line--2 { max-height: calc(2 * var(--tcard-line-h)); }
.tcard-segs { display: flex; flex-wrap: wrap; margin-left: -11px; }
.tcard-seg { position: relative; max-width: 100%; padding-left: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard-seg::before {
  content: "·";
  position: absolute;
  left: 3px;
  color: var(--text-3);
  font-weight: 400;
}
.tcard-line--2 { color: var(--text); font-weight: 600; }
/* Two lines of the same kind (one child each, spec §25.2): same look, one line each. */
.tcard-line--row { color: var(--text); font-weight: 600; }

.tcard-pill {
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin-top: 5px;
  padding: 0 10px 0 8px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--tool-ink);
  background: var(--tool-soft);
}
.tcard-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: tcard-blink 1.8s ease-in-out infinite;
}
@keyframes tcard-blink { 50% { opacity: 0.3; } }

/* "中奖啦" corner badge */
.tcard-badge {
  position: absolute;
  top: 14px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 10px 0 7px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--cta-text);
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(135deg, var(--cta-1) 0%, var(--cta-2) 60%, var(--cta-3) 100%);
  box-shadow: 0 4px 12px rgba(255, 120, 40, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.tcard-badge svg { width: 15px; height: 15px; stroke-width: 2.2; }
.tcard-badge::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--cta-2);
  opacity: 0;
  animation: tcard-ring 2.4s var(--ease-out) 600ms infinite;
  pointer-events: none;
}
.tcard-badge.is-entering { animation: tcard-badge-in 520ms var(--ease-spring) backwards; }
@keyframes tcard-badge-in { from { opacity: 0; transform: scale(0.4) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes tcard-ring {
  0% { opacity: 0.7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.35, 1.6); }
}
@media (max-width: 374px) {
  .tcard-badge { right: 10px; padding: 0 8px 0 6px; font-size: 12px; }
}

/* ---------- 'soon' placeholder ---------- */

.tcard--soon {
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-2);
  background: var(--bg);
  box-shadow: none;
  cursor: default;
}
.tcard--soon::before { content: none; }
.tcard--soon::after {
  box-shadow: none;
  border: 2px dashed var(--line-strong);
}
.tcard--soon .tcard-icon {
  width: 48px; height: 48px;
  border-radius: 16px;
  color: var(--text-3);
  background: var(--surface-3);
  box-shadow: none;
}
.tcard--soon .tcard-icon::after { content: none; }
.tcard--soon .tcard-icon svg { width: 24px; height: 24px; filter: none; stroke-width: 2; }
.tcard--soon .tcard-name { margin-top: 12px; font-size: 16px; font-weight: 700; color: var(--text-2); letter-spacing: 0.04em; }
.tcard--soon .tcard-desc { margin-top: 2px; font-size: 13px; color: var(--text-3); }

.page--home .home-foot { margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
  .tcard, .tcard-live.is-entering > *, .tcard-badge.is-entering { animation: none; }
  .tcard-pill-dot, .tcard-badge::after { animation: none; }
}