/* ============================================================
   AGE FINDER ONLINE — shared tool-page primitives
   (each tool page adds its OWN layout styles on top — no templating)
   ============================================================ */
.crumbs{font-size:.78rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding:1rem 0 0}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--pink)}
.crumbs b{color:var(--pink)}

/* console = the input zone of a tool page */
.console{background:var(--card);border:var(--bd);border-radius:22px;box-shadow:var(--hard);overflow:hidden}
.console .pad{padding:1.2rem 1.4rem 1.4rem}
.console .fine{padding:0 1.4rem 1.2rem;font-size:.8rem;font-weight:800;color:var(--ink-soft)}

/* pills / segmented selectors */
.pill{border:var(--bd);border-radius:14px;background:var(--vanilla);padding:.62rem .95rem;min-height:44px;font-weight:900;font-size:.82rem;cursor:pointer;box-shadow:var(--hard-sm);text-align:center;transition:transform .12s;display:inline-flex;flex-direction:column;align-items:center;justify-content:center}
.pill:hover{transform:translateY(-2px)}
.pill small{display:block;font-size:.7rem;color:var(--ink-soft);font-weight:800}
.pill.on{background:var(--yellow)}
.pill-row{display:flex;gap:.55rem;flex-wrap:wrap}

/* SEO prose */
.seo-prose h2{font-family:var(--font-display);font-weight:700;font-size:1.5rem;margin:2rem 0 .7rem;letter-spacing:.01em}
.seo-prose h3{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--pink);margin:1.5rem 0 .5rem}
.seo-prose p{font-weight:700;color:var(--ink-soft);margin-bottom:.9rem;max-width:52rem}
.seo-prose p b{color:var(--ink)}
.seo-prose ul,.seo-prose ol{margin:0 0 1rem 1.4rem;font-weight:700;color:var(--ink-soft)}
.seo-prose li{margin-bottom:.45rem;max-width:50rem}
.seo-prose li::marker{color:var(--pink)}
.seo-prose table{width:100%;border-collapse:collapse;font-size:.9rem;margin:1rem 0;max-width:52rem}
.seo-prose th{font-size:.64rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:.55rem .6rem;border-bottom:3px solid var(--ink);font-family:'Nunito'}
.seo-prose td{padding:.55rem .6rem;border-bottom:2px dashed rgba(69,38,51,.22);font-weight:800}

/* FAQ */
.faq-item{background:var(--card);border:var(--bd);border-radius:18px;box-shadow:var(--hard-sm);margin-bottom:.85rem;overflow:hidden}
.faq-q{font-weight:900;font-size:.98rem;padding:.95rem 1.15rem;display:flex;justify-content:space-between;gap:1rem;cursor:pointer;border-radius:14px}
.faq-q:focus-visible{outline:3px solid var(--blue);outline-offset:-5px}
.faq-q::after{content:'＋';color:var(--pink);font-size:1.25rem;flex:none}
.faq-item.open .faq-q::after{content:'−'}
.faq-a{display:none;padding:0 1.15rem 1rem;font-size:.9rem;font-weight:700;color:var(--ink-soft)}
.faq-item.open .faq-a{display:block}

/* YMYL disclaimer box */
.ymyl{background:#FFF3E0;border:var(--bd);border-radius:18px;box-shadow:var(--hard-sm);padding:1rem 1.3rem;font-weight:800;font-size:.9rem;display:flex;gap:.9rem;align-items:flex-start}
.ymyl .ico{font-size:1.5rem;flex:none}
.ymyl a{color:var(--pink);font-weight:900}

/* related tools strip (color set per page via --rel-bg) */
.related-strip{border-top:var(--bd);border-bottom:var(--bd);background:var(--rel-bg,var(--pink));padding:1.1rem 0;margin-top:2.6rem}
.rel-track{display:flex;gap:.8rem;align-items:center;justify-content:center;flex-wrap:wrap}
.rel-chip{background:var(--card);border:var(--bd);border-radius:14px;box-shadow:var(--hard-sm);padding:.55rem 1rem;min-height:44px;font-weight:900;font-size:.85rem;text-decoration:none;color:var(--ink);white-space:nowrap;transition:transform .12s;display:inline-flex;align-items:center}
.rel-chip:hover{transform:translateY(-3px) rotate(-1deg)}
.rel-chip small{display:inline;margin-left:.35rem;padding-left:.35rem;border-left:1px solid rgba(69,38,51,.28);font-size:.64rem;color:var(--ink-soft);font-weight:800}
.rel-cap{color:#fff;font-family:var(--font-display);font-weight:700;font-size:.85rem;letter-spacing:.03em;padding:0 .8rem}
.related-strip[style*="--rel-bg:var(--mint)"],
.related-strip[style*="--rel-bg: var(--mint)"],
.related-strip[style*="--rel-bg:var(--yellow)"],
.related-strip[style*="--rel-bg: var(--yellow)"]{--rel-fg:var(--ink)}
.related-strip[style*="--rel-bg:var(--strawb)"],
.related-strip[style*="--rel-bg: var(--strawb)"]{--rel-fg:var(--plum2)}
.related-strip .rel-cap{color:var(--rel-fg,#fff)}

/* Inline local themes use bright brand colors as surfaces. Pair each with a
   verified foreground instead of inheriting the surrounding card text. */
main [style*="background:var(--pink)"],main [style*="background: var(--pink)"],
main [style*="background:var(--blue)"],main [style*="background: var(--blue)"]{color:#fff}
main [style*="background:var(--mint)"],main [style*="background: var(--mint)"],
main [style*="background:var(--yellow)"],main [style*="background: var(--yellow)"]{color:var(--ink)}
main [style*="background:var(--strawb)"],main [style*="background: var(--strawb)"]{color:var(--plum2)}

/* Accent words sit on the pale page surface, so use the text-safe ramp. */
main h1 [style*="color:var(--mint)"],main h1 [style*="color: var(--mint)"]{color:var(--mint-text)!important;text-shadow:none!important}
main h1 [style*="color:var(--strawb)"],main h1 [style*="color: var(--strawb)"]{color:var(--strawb-text)!important;text-shadow:none!important}
main h1 [style*="color:var(--blue)"],main h1 [style*="color: var(--blue)"]{color:var(--blue-text)!important;text-shadow:none!important}
main h1 [style*="color:var(--yellow)"],main h1 [style*="color: var(--yellow)"]{color:var(--yellow-text)!important;text-shadow:none!important}

/* live dot */
.live-dot{display:inline-flex;align-items:center;gap:.45rem;font-size:.62rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#e0434f}

/* ============ 3D CELEBRATION STAGE ============ */
.stage3d{position:relative;height:230px;margin:0 0 1.3rem;border:var(--bd);border-radius:22px;box-shadow:var(--hard);
  overflow:hidden;background:radial-gradient(120% 100% at 50% 20%, var(--plum1) 0%, var(--plum2) 80%)}
.stage3d canvas{position:absolute;inset:0;width:100%!important;height:100%!important;touch-action:pan-y}
.stage3d .s3d-hint{position:absolute;bottom:8px;right:12px;font-size:.6rem;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,247,236,.5);pointer-events:none;z-index:2}
.stage3d.no3d{display:none}

/* result pop-in (celebrate feedback) */
.pop-in{animation:popin .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes popin{0%{transform:scale(.72);opacity:0}100%{transform:scale(1);opacity:1}}
.live-dot::before{content:'';width:9px;height:9px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 10px #ff4d4d;animation:blinkc 1.2s ease-in-out infinite}
@keyframes blinkc{50%{opacity:.3}}

/* result number styles */
.res-big{font-family:var(--font-display);font-weight:700;line-height:1}

/* how-to / features blocks (SEO upgrade pass) */
.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.1rem 0 1.4rem;max-width:52rem}
.howto .step{background:var(--vanilla);border:var(--bd);border-radius:16px;box-shadow:var(--hard-sm);padding:.9rem 1rem;font-size:.86rem;font-weight:800;color:var(--ink-soft)}
.howto .step b{display:block;font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:.95rem;margin-bottom:.3rem}
.howto .step .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pink);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.85rem;margin-right:.4rem}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.4rem;margin:1rem 0 1.4rem;max-width:52rem}
.feat-grid li{list-style:none;font-weight:800;font-size:.9rem;color:var(--ink-soft);padding-left:1.5rem;position:relative;margin:0}
.feat-grid li::before{content:'✔';position:absolute;left:0;color:var(--mint-text);font-weight:900}
@media(max-width:900px){.howto{grid-template-columns:1fr}.feat-grid{grid-template-columns:1fr}.seo-prose h2{font-size:1.25rem}}
@media(max-width:640px){
  .console{border-radius:18px;box-shadow:5px 5px 0 var(--ink)}
  .console .pad{padding:1rem}
  .console .fine{padding:0 1rem 1rem;font-size:.82rem}
  .pill-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .pill{width:100%;padding:.65rem .7rem}
  .related-strip{padding:1rem 0}
  .rel-track{justify-content:flex-start}
  .rel-cap{width:100%;padding:0 0 .2rem}
  .rel-chip{white-space:normal}
  .seo-prose table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ymyl{padding:1rem;gap:.7rem}
}