/* Shared content sections: share, related tools and FAQs.
   Loaded after page-specific CSS so these components stay consistent everywhere. */
.tool-share-section,
.related-tools,
.faq-section {
  width: min(1140px, calc(100% - 40px));
  margin: 30px auto;
  padding: clamp(22px, 3vw, 32px);
  border: 2px solid var(--line-onpaper);
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 16px 36px -28px rgba(0,0,0,.55);
}

.tool-share-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}

.tool-share-section .eyebrow,
.related-tools .eyebrow,
.faq-section .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
  color: var(--berry);
  font: 700 11px/1.2 'Space Mono', monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.tool-share-section h2,
.related-tools h2,
.faq-section h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: 'Baloo 2', sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.12;
}

.tool-share-section > div > p:last-child,
.related-tools .how-head > p:last-child,
.faq-section .how-head > p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}

.tool-share-section .share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* Deliberately scoped to avoid the circular share buttons used in name modals. */
.tool-share-section .share-btn {
  width: auto;
  height: auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  border: 2px solid var(--line-onpaper);
  border-radius: 999px;
  background: var(--paper-dim);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.tool-share-section .share-btn i { font-size: 14px; }
.tool-share-section .share-btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent-secondary);
  background: color-mix(in srgb, var(--accent-secondary) 16%, var(--paper));
  color: var(--ink);
}
.tool-share-section .native-share {
  border-color: var(--accent-secondary);
  background: var(--accent-secondary);
  color: #0c1f1d;
}
.tool-share-section .native-share:hover {
  background: color-mix(in srgb, var(--accent-secondary) 85%, white);
  color: #0c1f1d;
}

.related-tools .how-head,
.faq-section .how-head { margin: 0 0 22px; }

.related-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.related-tool-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 17px;
  border: 2px solid var(--line-onpaper);
  border-radius: 18px;
  background: var(--paper-dim);
  color: var(--ink);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.related-tool-card > i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-secondary) 18%, var(--paper));
  color: var(--accent-secondary);
  font-size: 18px;
}
.related-tool-card h3 {
  margin: 0 0 3px;
  color: var(--ink);
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.18rem;
  line-height: 1.2;
}
.related-tool-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}
.related-tool-card > span {
  color: var(--berry);
  font-size: 1.45rem;
  transition: transform .18s ease;
}
.related-tool-card:hover {
  transform: translateY(-3px);
  border-color: var(--berry);
  box-shadow: 0 14px 26px -22px rgba(0,0,0,.65);
}
.related-tool-card:hover > span { transform: translateX(4px); }

.faq-list { display: grid; gap: 11px; }
.faq-list details {
  overflow: hidden;
  border: 2px solid var(--line-onpaper);
  border-radius: 16px;
  background: var(--paper-dim);
}
.faq-list summary {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i {
  flex: 0 0 auto;
  color: var(--berry);
  transition: transform .2s ease;
}
.faq-list details[open] {
  border-color: color-mix(in srgb, var(--accent-secondary) 55%, var(--line-onpaper));
}
.faq-list details[open] summary i { transform: rotate(45deg); }
.faq-list details p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.75;
}

@media (max-width: 820px) {
  .tool-share-section { grid-template-columns: 1fr; align-items: start; }
  .tool-share-section .share-buttons { justify-content: flex-start; }
}

@media (max-width: 680px) {
  .tool-share-section,
  .related-tools,
  .faq-section {
    width: calc(100% - 28px);
    margin: 22px auto;
    padding: 21px 16px;
    border-radius: 20px;
  }
  .related-tools-grid { grid-template-columns: 1fr; }
  .tool-share-section .share-buttons { width: 100%; }
  .tool-share-section .share-btn { flex: 1 1 calc(50% - 10px); }
}

@media (max-width: 420px) {
  .tool-share-section .share-btn { flex-basis: 100%; }
  .related-tool-card { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 14px; }
  .related-tool-card > i { width: 42px; height: 42px; }
}
/* One shared floating Favorites component across the homepage and every tool. */
.floating-fav-btn{
  position:fixed!important;right:24px!important;bottom:24px!important;z-index:1200!important;
  width:58px!important;height:58px!important;display:grid!important;place-items:center!important;
  border:0!important;border-radius:50%!important;cursor:pointer!important;
  background:linear-gradient(135deg,var(--berry),var(--gold))!important;color:#fff!important;
  box-shadow:0 14px 35px rgba(20,21,31,.32)!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
.floating-fav-btn:hover{transform:translateY(-3px) scale(1.04)!important;box-shadow:0 18px 42px rgba(20,21,31,.38)!important;filter:saturate(1.05)}
.floating-fav-btn:active{transform:scale(.96)!important}
.floating-fav-btn>i{font-size:21px!important;line-height:1!important}
.floating-fav-btn .fav-badge,.floating-fav-btn>span{
  position:absolute!important;top:-4px!important;right:-4px!important;min-width:22px!important;height:22px!important;
  padding:0 6px!important;display:grid!important;place-items:center!important;border-radius:999px!important;
  border:2px solid var(--bg)!important;background:var(--teal)!important;color:#fff!important;
  font:800 10px/1 Inter,sans-serif!important;box-shadow:0 5px 14px rgba(0,0,0,.18)!important;
}
.floating-panel{
  position:fixed!important;right:24px!important;bottom:94px!important;z-index:1199!important;
  width:min(380px,calc(100vw - 32px))!important;max-height:min(560px,68vh)!important;overflow:auto!important;
  padding:18px!important;border:2px solid var(--line-onpaper)!important;border-radius:22px!important;
  background:var(--paper)!important;color:var(--ink)!important;box-shadow:0 24px 65px rgba(0,0,0,.34)!important;
}
.floating-panel.hidden{display:none!important}
.floating-panel h3,.floating-panel .fav-panel-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin:0 0 14px!important}
.floating-panel h3 span,.floating-panel .fav-panel-head strong{font:800 19px/1.2 'Baloo 2',sans-serif!important;color:var(--ink)!important}
.floating-panel .clear-all,.floating-panel .clear-favs{
  border:0!important;background:transparent!important;color:var(--berry)!important;cursor:pointer!important;
  font:800 10px/1 'Space Mono',monospace!important;text-transform:uppercase!important;letter-spacing:.04em!important;
}
.floating-panel .fav-item{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  padding:11px 12px!important;margin:0 0 8px!important;border:1px solid var(--line-onpaper)!important;border-radius:13px!important;
  background:var(--paper-dim)!important;
}
.floating-panel .fav-name{font-weight:800!important;color:var(--ink)!important;cursor:pointer!important}
.floating-panel .fav-item small{display:block!important;margin-top:2px!important;color:var(--ink-soft)!important;font-size:11px!important}
.floating-panel .remove-fav{width:32px!important;height:32px!important;display:grid!important;place-items:center!important;border:0!important;border-radius:50%!important;background:transparent!important;color:var(--ink-soft)!important;cursor:pointer!important}
.floating-panel .remove-fav:hover{background:rgba(255,111,89,.12)!important;color:var(--berry)!important}
.floating-panel .empty-msg{padding:24px 10px!important;text-align:center!important;color:var(--ink-soft)!important;line-height:1.6!important}
.floating-panel .export-btn{width:100%!important;justify-content:center!important;margin-top:12px!important}
@media(max-width:640px){
  .floating-fav-btn{right:16px!important;bottom:16px!important;width:54px!important;height:54px!important}
  .floating-panel{right:16px!important;bottom:82px!important;width:calc(100vw - 32px)!important;max-height:64vh!important}
}
/* Phase 1 production UI layer
   Loaded last so every page shares one stable layout, form, button and card system. */

:root,
html[data-theme="dark"]{
  --container:1180px;
  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:15px;
  --control-h:52px;
  --shadow-card:0 18px 42px -30px rgba(0,0,0,.72);
  --shadow-hover:0 22px 44px -25px rgba(0,0,0,.58);
}

body{min-width:320px;overflow-x:hidden}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}

/* Header */
header .header-inner{min-height:68px}
.header-controls{margin-left:auto}
.nav-dropdown-menu{max-height:min(72vh,620px);overflow:auto}
.nav-dropdown-menu a{min-height:42px}
@media(max-width:640px){
  .header-inner{flex-direction:row;align-items:center;padding:11px 16px}
  .header-controls{width:auto;justify-content:flex-end}
  .brand{font-size:19px}
  .brand small{font-size:8.5px}
}

/* Shared page rhythm */
.hero,.tool-hero{width:min(var(--container),100%);margin-inline:auto}
.tool-hero{padding:clamp(38px,7vw,70px) 20px 26px}
.tool-title{max-width:22ch;font-size:clamp(2.15rem,5vw,3.45rem);letter-spacing:-.025em}
.tool-sub{max-width:67ch;font-size:clamp(.95rem,1.5vw,1.04rem)}
main.results{width:min(var(--container),100%);padding:36px 20px 34px}
.results-head{min-height:38px}
.results-count:empty{display:none}

/* Shared form surfaces */
.search-card,.combiner-card,.match-card,.gen-card,.extra-tool-card,.filters-panel{
  width:100%;
  border:2px solid var(--line-onpaper);
  border-radius:var(--radius-xl);
  background:var(--paper);
  color:var(--ink);
  box-shadow:var(--shadow-card);
}
.combiner-card,.match-card,.gen-card,.extra-tool-card{padding:clamp(18px,3vw,28px)}
.extra-tool-card{max-width:980px}

.combiner-field input,.match-field,.extra-field input,.extra-field select,.extra-field textarea,
.filters-panel select,.filters-panel .text-wrap,.length-range{
  border:2px solid var(--line-onpaper);
  border-radius:var(--radius-md);
  background:var(--paper-dim);
  color:var(--ink);
}
.combiner-field input{
  min-height:var(--control-h);padding:11px 14px;border:2px solid var(--line-onpaper);font-size:18px
}
.combiner-field input:focus,.match-field:focus-within,.extra-field input:focus,.extra-field select:focus,
.extra-field textarea:focus,.filters-panel select:focus,.filters-panel .text-wrap:focus-within,.length-range:focus-within{
  border-color:var(--accent-secondary);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-secondary) 18%,transparent);
  outline:none;
}
.extra-field label,.combiner-field label,.filters-panel label{line-height:1.35}
select{color-scheme:dark}
html[data-theme="light"] select{color-scheme:light}

/* Buttons */
.combine-btn,.primary-btn,.tool-primary,.load-more-btn{
  min-height:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:16px;padding:13px 22px;
  background:linear-gradient(135deg,var(--gold),var(--berry) 62%);
  color:#241f1a;
  font-family:'Baloo 2',sans-serif;font-size:16px;font-weight:800;line-height:1;
  box-shadow:0 13px 26px -13px rgba(255,111,89,.72);
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,opacity .16s ease;
}
.combine-btn:hover,.primary-btn:hover,.tool-primary:hover,.load-more-btn:hover{
  transform:translateY(-2px);box-shadow:0 17px 31px -13px rgba(255,111,89,.8);filter:saturate(1.08)
}
.combine-btn:active,.primary-btn:active,.tool-primary:active,.load-more-btn:active{transform:translateY(0) scale(.985)}
.combine-btn:disabled,.primary-btn:disabled,.tool-primary:disabled,.load-more-btn:disabled{opacity:.67;cursor:wait;transform:none;filter:none;box-shadow:none}
.reset-btn,.text-action{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 10px}
.export-btn{min-height:42px;background:var(--paper);border-color:var(--line-onpaper);color:var(--ink)}
.export-btn:hover{border-color:var(--accent-secondary);background:var(--paper-dim)}
.circle-btn{flex:0 0 auto;border:1px solid transparent}
.circle-btn:hover{border-color:color-mix(in srgb,var(--accent-secondary) 45%,transparent)}

/* One canonical result grid and card appearance */
.grid,.combo-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px 18px;align-items:stretch}
.card,.combo-card,.gen-grid-card,.match-grid-card{
  min-width:0;height:100%;display:flex;flex-direction:column;
  position:relative;padding:25px 18px 18px;
  border:2px solid var(--line-onpaper);border-radius:var(--radius-lg);
  background:var(--paper);color:var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.04);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.card:hover,.combo-card:hover,.gen-grid-card:hover,.match-grid-card:hover{
  transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent-secondary) 42%,var(--line-onpaper));box-shadow:var(--shadow-hover)
}
.card::before,.combo-card::before,.gen-grid-card::before,.match-grid-card::before{
  content:attr(data-letter);position:absolute;top:-12px;left:18px;z-index:2;
  width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
  background:var(--gold);color:#241f1a;box-shadow:0 7px 15px -5px rgba(0,0,0,.42);
  font:800 17px/1 'Baloo 2',sans-serif;transform:rotate(-6deg);transition:transform .18s ease
}
.card:hover::before,.combo-card:hover::before,.gen-grid-card:hover::before,.match-grid-card:hover::before{transform:rotate(0) scale(1.06)}
.card[data-gender="Girl"]::before,.combo-card[data-gender="Girl"]::before,.gen-grid-card[data-gender="Girl"]::before,.match-grid-card[data-gender="Girl"]::before{background:var(--berry);color:#fff}
.card[data-gender="Boy"]::before,.combo-card[data-gender="Boy"]::before,.gen-grid-card[data-gender="Boy"]::before,.match-grid-card[data-gender="Boy"]::before{background:var(--sage);color:#0c1f1d}

.card-top{min-height:43px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:nowrap}
.card-name,.combo-name,.gen-name,.match-name{
  flex:1 1 auto;min-width:0;margin-top:5px;color:var(--ink);
  font:800 22px/1.15 'Baloo 2',sans-serif;overflow-wrap:anywhere
}
.card-actions,.combo-actions,.gen-actions-row,.match-actions-row{display:flex;flex:0 0 auto;gap:8px;margin-top:0;position:relative;z-index:3}
.card-meaning,.combo-source,.gen-meaning,.match-meaning{
  margin-top:9px;color:var(--ink-soft);font-size:13.5px;line-height:1.6;overflow-wrap:anywhere
}
.card-meaning,.gen-meaning,.match-meaning{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:43px}
.card-meta,.gen-meta{
  display:flex;flex-wrap:wrap;gap:7px 10px;margin-top:auto;
  color:var(--ink-soft);font:700 10.5px/1.4 'Space Mono',monospace;letter-spacing:.035em;text-transform:uppercase
}
.card-meta span:not(:last-child)::after,.gen-meta span:not(:last-child)::after{content:'·';margin-left:10px;color:var(--line-onpaper)}
.combo-actions,.gen-actions-row,.match-actions-row,.combo-extra-actions,.card-utility{padding-top:14px;margin-top:auto}
.match-reasons{margin-top:13px}

/* Generated pair and comparison blocks */
.pair-group,.name-compare-chart,.comparison-facts,.comparison-summary{
  border:2px solid var(--line-onpaper);background:var(--paper);border-radius:22px;box-shadow:var(--shadow-card)
}
.pair-group{padding:16px}
.pair-cards{gap:18px}
.comparison-summary{padding:18px 20px}
.facts-table{border-width:2px}
.score-bars i{height:8px}

/* Loading, empty and feedback states */
.tool-loading,.no-results,.empty-msg{
  width:100%;border:2px dashed var(--line-onpaper);border-radius:18px;background:var(--paper);color:var(--ink-soft)
}
.tool-loading{min-height:110px;margin:0;padding:24px}
.no-results{grid-column:1/-1;padding:38px 22px;text-transform:none;letter-spacing:0;font-family:'Inter',sans-serif}
.toast{max-width:min(390px,calc(100vw - 32px))}

/* Lower content sections and footer */
.tool-share-section,.related-tools,.faq-section,.how{scroll-margin-top:90px}
.related-tool-card{min-height:102px}
.footer-expanded{width:min(var(--container),100%);padding-inline:0}
footer{margin-top:24px}

/* Dark/light consistency */
html[data-theme="light"] .card,
html[data-theme="light"] .combo-card,
html[data-theme="light"] .gen-grid-card,
html[data-theme="light"] .match-grid-card,
html[data-theme="light"] .search-card,
html[data-theme="light"] .combiner-card,
html[data-theme="light"] .match-card,
html[data-theme="light"] .gen-card,
html[data-theme="light"] .extra-tool-card{box-shadow:0 18px 42px -32px rgba(70,42,18,.36)}

@media(max-width:760px){
  .tool-hero{padding-top:34px}
  main.results{padding-top:28px}
  .grid,.combo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .card,.combo-card,.gen-grid-card,.match-grid-card{padding:23px 14px 15px}
  .card-name,.combo-name,.gen-name,.match-name{font-size:20px}
  .circle-btn{width:36px;height:36px}
  .results-head{align-items:flex-start}
  .results-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .extra-actions,.gen-actions{align-items:stretch}
}

@media(max-width:480px){
  .tool-title{font-size:2.05rem}
  .grid,.combo-grid{grid-template-columns:1fr}
  .card,.combo-card,.gen-grid-card,.match-grid-card{min-height:0}
  .combiner-card,.match-card,.gen-card,.extra-tool-card{border-radius:21px;padding:17px 14px}
  .match-field{padding-left:13px}
  .combine-btn,.primary-btn,.tool-primary{width:100%}
  .tool-share-section,.related-tools,.faq-section{width:calc(100% - 24px)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.name-insights-wrap{margin-top:.8rem;border-top:1px solid var(--line);padding-top:.75rem}.name-insights-toggle{width:100%;display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.68rem .85rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font-weight:700;cursor:pointer}.name-insights-toggle .fa-chevron-down{margin-left:auto;transition:transform .2s}.name-insights-toggle[aria-expanded="true"] .fa-chevron-down{transform:rotate(180deg)}.name-insights-panel{padding:.85rem .1rem .1rem}.insight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}.insight-grid span{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.55rem .4rem;text-align:center;font-size:.75rem;color:var(--muted)}.insight-grid b{display:block;color:var(--text);font-size:1rem}.insight-lines{margin:.75rem 0}.insight-lines p{margin:.3rem 0;font-size:.82rem;color:var(--muted)}.insight-lines strong{color:var(--text)}.insight-lines small{opacity:.8}.compare-name-link{display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.62rem;border-radius:10px;background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);font-weight:800;text-decoration:none}.pair-analysis{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:.7rem;padding:.75rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.pair-analysis span{color:var(--muted);font-size:.86rem}@media(max-width:520px){.insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}