/* Black Names & Their Meanings tool — FunTimes brand.
   Fonts (Frank Ruhl Libre + DM Sans) and palette (red/black/white +
   pan-African tricolor) match funtimesmagazine.com. All scoped to #ftnames. */
#ftnames{
  --paper:#ffffff; --surface:#f4f2ec; --surface-2:#efece4; --card:#ffffff;
  --ink:#121212; --ink-2:#1b1b1b; --ink-soft:#44423e; --ink-mute:#817b71;
  --line:rgba(18,18,18,.09); --line-2:rgba(18,18,18,.16); --line-strong:rgba(18,18,18,.24);
  --red:#ec3237; --red-deep:#c81e23; --gold:#e7c003; --green:#1d6b41;
  /* pan-African region accents */
  --west:#c0262a; --west-bg:#f9e6e5;
  --east:#175a37; --east-bg:#dfeae3;
  --south:#8f7207; --south-bg:#f6efd2;
  --diaspora:#2a2a2a; --diaspora-bg:#e8e5df;

  /* type scale */
  --t-micro:10.5px; --t-cap:12px; --t-body:14.5px; --t-lead:16px;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --gutter:clamp(20px,4.4vw,64px);

  --radius:6px; --radius-lg:14px; --radius-xl:18px;
  --shadow-1:0 1px 2px rgba(18,18,18,.04);
  --shadow-2:0 2px 4px rgba(18,18,18,.04), 0 12px 28px -14px rgba(18,18,18,.22);
  --shadow-3:0 30px 70px -34px rgba(18,18,18,.62);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  background:var(--surface); color:var(--ink);
  font-family:"DM Sans",system-ui,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden; margin:0 0 2em; border:1px solid var(--line-2); border-radius:2px;
}
#ftnames *{box-sizing:border-box}
#ftnames button{font-family:inherit;cursor:pointer;letter-spacing:.01em}
#ftnames ::selection{background:var(--gold);color:var(--ink)}
#ftnames .tricolor{height:3px;background:linear-gradient(90deg,var(--green) 0 33.3%,var(--gold) 33.3% 66.6%,var(--red) 66.6% 100%)}

/* ---------- Header: editorial masthead ---------- */
#ftnames .site-header{
  background:var(--ink);color:#fff;
  padding:clamp(40px,6vw,76px) var(--gutter) clamp(34px,4.6vw,56px);
  position:relative;overflow:hidden;
}
#ftnames .site-header::before{
  content:"";position:absolute;inset:0;opacity:.42;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 12%,#000,transparent 72%);
          mask-image:radial-gradient(120% 90% at 78% 12%,#000,transparent 72%);
}
/* warm editorial wash — replaces flat black */
#ftnames .site-header::after{
  content:"";position:absolute;top:-30%;right:-10%;width:60%;height:150%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(231,192,3,.16),transparent 70%);
}
#ftnames .hd-inner{position:relative;z-index:1;max-width:74ch}
#ftnames .eyebrow{
  font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;font-weight:700;
  color:var(--gold);margin:0 0 var(--s5);display:flex;align-items:center;gap:12px;
}
#ftnames .eyebrow::before{content:"";width:34px;height:1.5px;background:var(--red);flex:none}
#ftnames .title{
  font-family:"Frank Ruhl Libre",Georgia,serif;font-weight:800;
  font-size:clamp(38px,6.6vw,72px);line-height:1.02;letter-spacing:-.022em;
  margin:0 0 var(--s5);max-width:14ch;color:#fff;text-wrap:balance;
}
#ftnames .title em{font-style:italic;font-weight:400;color:var(--gold)}
#ftnames .lede{
  color:rgba(255,255,255,.68);font-size:clamp(15px,1.5vw,18.5px);line-height:1.6;
  max-width:52ch;margin:0;text-wrap:pretty;
}

/* stat ticker strip */
#ftnames .ticker{
  margin-top:clamp(28px,3.4vw,42px);padding-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.13);
  display:flex;gap:clamp(20px,3vw,40px);flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.55);
}
#ftnames .ticker b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
#ftnames .ticker .tk{display:flex;align-items:center;gap:9px}
#ftnames .ticker .tk::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);flex:none}
#ftnames .ticker .tk:nth-child(2)::before{background:var(--gold)}
#ftnames .ticker .tk:nth-child(3)::before{background:var(--green)}

/* ---------- Controls ---------- */
#ftnames .controls{
  position:sticky;top:0;z-index:30;
  background:rgba(244,242,236,.86);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line-2);
  padding:var(--s4) var(--gutter) var(--s3);
}
#ftnames .search-wrap{position:relative;margin-bottom:var(--s4)}
#ftnames .search-wrap svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-mute);pointer-events:none;transition:color .18s}
#ftnames .search-wrap:focus-within svg{color:var(--red)}
#ftnames .ftn-search{
  width:100%;padding:14px 46px;border:1px solid var(--line-2);border-radius:999px;
  background:#fff;font-size:15.5px;color:var(--ink);font-family:inherit;
  box-shadow:var(--shadow-1);
  transition:border-color .18s,box-shadow .18s;
}
#ftnames .ftn-search::placeholder{color:var(--ink-mute)}
#ftnames .ftn-search:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(18,18,18,.07)}
#ftnames .clear-search{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--ink-mute);font-size:19px;line-height:1;padding:6px 9px;border-radius:999px;display:none;transition:color .14s,background .14s}
#ftnames .clear-search:hover{color:var(--ink);background:var(--surface-2)}

#ftnames .facet-scroll{display:flex;flex-direction:column;gap:var(--s2)}
#ftnames .facet-row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
#ftnames .facet-label{
  font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;font-weight:800;
  color:var(--ink-mute);margin-right:var(--s1);min-width:64px;
}

/* segmented gender control with sliding indicator */
#ftnames .segment{position:relative;display:inline-flex;background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:3px;box-shadow:var(--shadow-1)}
#ftnames .seg-indicator{position:absolute;top:3px;bottom:3px;left:3px;width:0;background:var(--ink);border-radius:999px;transition:transform .38s var(--ease),width .38s var(--ease);z-index:0}
#ftnames .seg-btn{position:relative;z-index:1;border:none;background:transparent;color:var(--ink-soft);font-size:13px;font-weight:600;padding:7px 16px;border-radius:999px;transition:color .22s}
#ftnames .seg-btn.active{color:#fff}
#ftnames .chip.surprise{border:1px dashed var(--line-strong);color:var(--ink-soft);background:transparent;font-weight:700;padding:7px 16px;border-radius:999px;font-size:13px;transition:color .16s,border-color .16s,background .16s}
#ftnames .chip.surprise:hover{background:var(--ink);color:#fff;border-color:var(--ink);border-style:solid;transform:none}
#ftnames .chip.surprise:active{transform:scale(.97)}

#ftnames .chip{
  border:1px solid var(--line-2);background:#fff;color:var(--ink-soft);
  padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;
  box-shadow:var(--shadow-1);
  transition:color .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease);
}
#ftnames .chip:hover{border-color:var(--ink);color:var(--ink)}
#ftnames .chip.active{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:var(--shadow-1)}

#ftnames .count-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
#ftnames .count{font-size:12.5px;color:var(--ink-mute);font-weight:500;letter-spacing:.01em}
#ftnames .count b{font-family:"Frank Ruhl Libre",serif;color:var(--ink);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;margin-right:2px}
#ftnames .reset{border:none;background:transparent;color:var(--ink-soft);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;padding:4px;display:none}
#ftnames .reset:hover{color:var(--red-deep)}

/* ---------- Layout ---------- */
#ftnames .layout{
  display:grid;grid-template-columns:minmax(0,1fr) 360px;
  gap:clamp(22px,3vw,44px);
  padding:clamp(26px,3.4vw,44px) var(--gutter) clamp(56px,6vw,88px);
  align-items:start;
}
#ftnames .results{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s3)}

/* cards with cursor-spotlight + staggered reveal */
#ftnames .name-card{
  --mx:50%;--my:50%;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px 20px 18px;text-align:left;position:relative;overflow:hidden;
  display:flex;flex-direction:column;min-height:100%;
  box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
  opacity:0;transform:translateY(6px);animation:ftn-in .45s var(--ease) forwards;
}
#ftnames .name-card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx) var(--my),rgba(231,192,3,.10),transparent 62%);
}
#ftnames .name-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--line-2)}
#ftnames .name-card:hover::before{opacity:1}
#ftnames .name-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .28s var(--ease)}
#ftnames .name-card:hover::after,#ftnames .name-card.selected::after{transform:scaleY(1)}
#ftnames .name-card.selected{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
#ftnames .name-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#ftnames .nc-name{font-family:"Frank Ruhl Libre",serif;font-weight:700;font-size:25px;line-height:1.1;letter-spacing:-.012em;color:var(--ink);margin:0 0 3px;padding-right:30px;text-wrap:balance}
#ftnames .nc-pron{font-size:11.5px;letter-spacing:.03em;color:var(--ink-mute);margin-bottom:var(--s3);font-style:italic}
#ftnames .nc-meaning{font-size:var(--t-body);color:var(--ink-soft);line-height:1.45;margin-bottom:var(--s4)}
#ftnames .nc-foot{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line)}
#ftnames .tag{font-size:9.5px;font-weight:800;padding:4px 9px;border-radius:999px;letter-spacing:.09em;text-transform:uppercase}
#ftnames .tag.west{color:var(--west);background:var(--west-bg)}
#ftnames .tag.east{color:var(--east);background:var(--east-bg)}
#ftnames .tag.south{color:var(--south);background:var(--south-bg)}
#ftnames .tag.diaspora{color:var(--diaspora);background:var(--diaspora-bg)}
#ftnames .gender-dot{font-size:10.5px;color:var(--ink-mute);font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-left:auto}
#ftnames .heart{position:absolute;top:14px;right:14px;width:30px;height:30px;border:none;background:transparent;color:var(--ink-mute);opacity:.55;padding:0;display:grid;place-items:center;border-radius:999px;transition:opacity .16s,color .16s,background .16s}
#ftnames .name-card:hover .heart{opacity:1}
#ftnames .heart:hover{background:var(--west-bg);color:var(--red);opacity:1}
#ftnames .heart.on{color:var(--red);opacity:1}
#ftnames .heart.pop{animation:ftn-pop .36s var(--ease)}
#ftnames .heart svg{width:16px;height:16px}
#ftnames .empty{grid-column:1/-1;text-align:center;padding:clamp(48px,7vw,80px) 20px;color:var(--ink-mute);border:1px dashed var(--line-2);border-radius:var(--radius-lg)}
#ftnames .empty h3{font-family:"Frank Ruhl Libre",serif;color:var(--ink);font-weight:700;font-size:25px;letter-spacing:-.01em;margin:0 0 var(--s2)}
#ftnames .empty p{max-width:42ch;margin:0 auto;font-size:var(--t-body);line-height:1.55}

/* ---------- Right rail ---------- */
#ftnames .rail{position:sticky;top:calc(var(--rail-top,104px));display:flex;flex-direction:column;gap:var(--s4);perspective:1200px;max-height:none}
/* 3D tilt + glare — reimplemented from 21st.dev "BeUI Tilt Card" */
#ftnames .detail,#ftnames .spotlight{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .4s var(--ease);will-change:transform}
#ftnames .detail.tilting,#ftnames .spotlight.tilting{transition:transform .08s linear}
#ftnames .detail::after,#ftnames .spotlight::after{content:"";position:absolute;inset:0;border-radius:var(--radius-xl);pointer-events:none;z-index:3;opacity:var(--glare,0);transition:opacity .3s;background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),rgba(231,192,3,.13),transparent 56%)}
#ftnames .detail{background:var(--ink);color:#fff;border-radius:var(--radius-xl);padding:0;position:relative;overflow:hidden;box-shadow:var(--shadow-3);animation:ftn-detail .4s var(--ease)}
#ftnames .detail-body{padding:clamp(22px,2.4vw,30px);position:relative;z-index:2}
#ftnames .detail::before{content:"";position:absolute;top:-70px;right:-70px;width:230px;height:230px;background:radial-gradient(circle,rgba(231,192,3,.20),transparent 66%);pointer-events:none}
#ftnames .detail-eyebrow,#ftnames .spotlight .detail-eyebrow{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--gold);margin-bottom:var(--s3)}
#ftnames .detail-name{font-family:"Frank Ruhl Libre",serif;font-weight:800;font-size:clamp(34px,5vw,46px);line-height:1.02;letter-spacing:-.022em;margin:0 0 var(--s1);color:#fff;text-wrap:balance}
#ftnames .detail-pron{font-style:italic;color:rgba(255,255,255,.55);font-size:13.5px;letter-spacing:.02em;margin-bottom:var(--s5)}
#ftnames .detail-meaning-label{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:rgba(255,255,255,.4);margin-bottom:var(--s2)}
#ftnames .detail-meaning{font-family:"Frank Ruhl Libre",serif;font-style:italic;font-weight:400;font-size:25px;line-height:1.26;letter-spacing:-.01em;color:var(--gold);margin-bottom:var(--s5);text-wrap:pretty}
#ftnames .detail-note{font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.72);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.12);margin-bottom:var(--s5)}
#ftnames .detail-actions{display:flex;gap:var(--s2);margin-bottom:var(--s4)}
#ftnames .btn-shortlist{flex:1;background:var(--red);color:#fff;border:none;font-weight:700;font-size:13.5px;letter-spacing:.02em;padding:13px;border-radius:999px;transition:background .16s,transform .1s;display:flex;align-items:center;justify-content:center;gap:8px}
#ftnames .btn-shortlist:hover{background:var(--red-deep)}
#ftnames .btn-shortlist:active{transform:scale(.98)}
#ftnames .btn-shortlist.on{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
#ftnames .btn-shortlist svg{width:15px;height:15px}
#ftnames .roots{background:rgba(231,192,3,.07);border:1px solid rgba(231,192,3,.26);border-radius:var(--radius-lg);padding:18px}
#ftnames .roots-label{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--gold);margin-bottom:var(--s2);display:flex;align-items:center;gap:7px}
#ftnames .roots-copy{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.72);margin-bottom:var(--s4)}
#ftnames .roots-cta{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink);background:var(--gold);padding:10px 16px;border-radius:999px;text-decoration:none;transition:transform .18s var(--ease),box-shadow .18s}
#ftnames .roots-cta:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(231,192,3,.8)}

/* featured spotlight (replaces the dull placeholder) */
#ftnames .spotlight{background:var(--ink);color:#fff;border-radius:var(--radius-xl);overflow:hidden;position:relative;box-shadow:var(--shadow-3)}
#ftnames .spotlight .detail-body{cursor:pointer}
#ftnames .spot-badge{display:inline-flex;align-items:center;gap:8px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--ink);background:var(--gold);padding:5px 12px;border-radius:999px;margin-bottom:var(--s5)}
#ftnames .spot-hint{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.45);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:8px;transition:color .18s}
#ftnames .spotlight:hover .spot-hint{color:rgba(255,255,255,.8)}

#ftnames .panel-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-1)}
#ftnames .panel-card h3{font-family:"Frank Ruhl Libre",serif;font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink);margin:0 0 var(--s1);position:relative;padding-bottom:var(--s3)}
#ftnames .panel-card h3::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--green) 0 33.3%,var(--gold) 33.3% 66.6%,var(--red) 66.6% 100%)}
#ftnames .panel-card .sub{font-size:12.5px;color:var(--ink-mute);margin:var(--s3) 0 var(--s4);line-height:1.55}
#ftnames .day-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1);margin-bottom:var(--s3)}
#ftnames .day-btn{border:1px solid var(--line-2);background:#fff;color:var(--ink-soft);padding:10px 2px;border-radius:var(--radius);font-size:11px;font-weight:700;letter-spacing:.04em;transition:color .14s,border-color .14s,background .14s}
#ftnames .day-btn:hover{border-color:var(--ink);color:var(--ink)}
#ftnames .day-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}
#ftnames .gender-toggle{display:flex;gap:var(--s1);margin-bottom:var(--s4);background:var(--surface);border-radius:999px;padding:3px}
#ftnames .gender-toggle button{flex:1;border:none;background:transparent;color:var(--ink-soft);padding:9px;border-radius:999px;font-size:12.5px;font-weight:700;transition:color .14s,background .14s}
#ftnames .gender-toggle button.active{background:var(--ink);color:#fff}
#ftnames .day-result{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:22px 18px;text-align:center;position:relative;overflow:hidden}
#ftnames .day-result::before{content:"";position:absolute;top:-60px;left:50%;width:180px;height:180px;transform:translateX(-50%);background:radial-gradient(circle,rgba(231,192,3,.18),transparent 68%);pointer-events:none}
#ftnames .day-result .dr-name{position:relative;font-family:"Frank Ruhl Libre",serif;font-style:italic;font-weight:700;font-size:31px;letter-spacing:-.015em;color:var(--gold);line-height:1.08;animation:ftn-detail .34s var(--ease)}
#ftnames .day-result .dr-cap{position:relative;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.6);margin-top:var(--s2)}
#ftnames .day-result.muted{background:#fff;border:1px dashed var(--line-2);padding:18px}
#ftnames .day-result.muted::before{display:none}
#ftnames .day-result.muted .dr-cap{color:var(--ink-mute);margin-top:0}

#ftnames .shortlist-items{display:flex;flex-direction:column;gap:var(--s1);margin-bottom:var(--s4);max-height:236px;overflow-y:auto;overscroll-behavior:contain}
#ftnames .sl-empty{font-size:12.5px;color:var(--ink-mute);line-height:1.55;padding:var(--s3) 0;border-top:1px dashed var(--line-2);border-bottom:1px dashed var(--line-2)}
#ftnames .sl-item{display:flex;align-items:center;gap:var(--s3);background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:11px 2px;animation:ftn-in .32s var(--ease);transition:background .14s}
#ftnames .sl-item:hover{background:var(--surface)}
#ftnames .sl-item .sl-name{font-family:"Frank Ruhl Libre",serif;font-weight:700;color:var(--ink);font-size:15.5px;letter-spacing:-.005em}
#ftnames .sl-item .sl-mean{font-size:11px;color:var(--ink-mute);margin-left:auto;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ftnames .sl-remove{border:none;background:transparent;color:var(--ink-mute);font-size:16px;line-height:1;padding:3px 6px;border-radius:999px;flex-shrink:0;opacity:0;transition:opacity .14s,color .14s,background .14s}
#ftnames .sl-item:hover .sl-remove,#ftnames .sl-remove:focus-visible{opacity:1}
#ftnames .sl-remove:hover{color:var(--red);background:var(--west-bg)}
#ftnames .email-row{display:flex;gap:var(--s2)}
#ftnames .ftn-email{flex:1;padding:12px 14px;border:1px solid var(--line-2);border-radius:999px;background:#fff;font-size:14px;color:var(--ink);font-family:inherit;min-width:0;transition:border-color .16s,box-shadow .16s}
#ftnames .ftn-email:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(18,18,18,.07)}
#ftnames .btn-email{background:var(--ink);color:#fff;border:none;font-weight:700;font-size:13px;padding:12px 18px;border-radius:999px;white-space:nowrap;transition:background .14s,transform .1s}
#ftnames .btn-email:hover{background:#000}
#ftnames .btn-email:active{transform:scale(.98)}
#ftnames .btn-email[disabled]{opacity:.55;cursor:wait}
#ftnames .email-note{font-size:11px;color:var(--ink-mute);margin-top:var(--s3);line-height:1.5}
#ftnames .email-success{background:var(--east-bg);color:var(--east);border:1px solid rgba(23,90,55,.3);border-radius:var(--radius);padding:14px 16px;font-size:13.5px;font-weight:700;display:none;animation:ftn-detail .3s var(--ease)}
#ftnames .email-error{color:var(--red-deep);font-size:12px;margin-top:var(--s2);display:none}

/* toast */
#ftnames .toast{position:sticky;bottom:18px;align-self:center;background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:11px 18px;border-radius:999px;box-shadow:var(--shadow-3);display:flex;align-items:center;gap:9px;opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;transition:opacity .24s var(--ease),transform .24s var(--ease);z-index:40}
#ftnames .toast.show{opacity:1;transform:translateY(0) scale(1)}
#ftnames .toast svg{width:14px;height:14px;color:var(--gold)}

@keyframes ftn-in{to{opacity:1;transform:none}}
@keyframes ftn-pop{0%{transform:scale(1)}40%{transform:scale(1.28)}70%{transform:scale(.93)}100%{transform:scale(1)}}
@keyframes ftn-detail{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  #ftnames .layout{grid-template-columns:minmax(0,1fr) 320px}
}
@media (max-width:920px){
  #ftnames .layout{grid-template-columns:1fr}
  #ftnames .rail{position:static;top:auto;perspective:none}
  #ftnames .facet-label{min-width:auto;width:100%;margin-bottom:-2px}
  /* horizontal facet scroller keeps the sticky bar shallow on phones */
  #ftnames .facet-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;scroll-padding-left:var(--gutter)}
  #ftnames .facet-row::-webkit-scrollbar{display:none}
  #ftnames .chip,#ftnames .segment{flex:none}
}
@media (max-width:620px){
  #ftnames .results{grid-template-columns:1fr 1fr;gap:var(--s2)}
  #ftnames .name-card{padding:16px 15px 14px;border-radius:10px}
  #ftnames .nc-name{font-size:21px}
  #ftnames .nc-meaning{font-size:13.5px}
  #ftnames .count-row{margin-top:var(--s2);padding-top:var(--s2)}
  #ftnames .site-header{padding-top:36px;padding-bottom:30px}
}
@media (max-width:400px){
  #ftnames .results{grid-template-columns:1fr}
  #ftnames .email-row{flex-direction:column}
  #ftnames .btn-email{width:100%}
}
/* narrow-height: don't let the sticky control bar eat the viewport */
@media (max-height:640px) and (min-width:921px){
  #ftnames .rail{position:static}
}
@media (max-height:560px){
  #ftnames .controls{position:static;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}
  #ftnames .site-header{padding-top:28px;padding-bottom:24px}
  #ftnames .title{font-size:clamp(28px,5vw,40px)}
  #ftnames .ticker{margin-top:var(--s4);padding-top:var(--s3)}
}
@media (prefers-reduced-motion:reduce){
  #ftnames *,#ftnames *::before,#ftnames *::after{animation:none!important;transition:none!important}
  #ftnames .name-card{opacity:1;transform:none}
  #ftnames .sl-remove{opacity:1}
  #ftnames .heart{opacity:1}
}
@media (prefers-contrast:more){
  #ftnames{--line:rgba(18,18,18,.3);--line-2:rgba(18,18,18,.45);--ink-mute:#5d584f}
}
#ftnames :focus-visible{outline:2px solid var(--ink);outline-offset:2px}