/* ==========================================================================
   How Many of Me?
   Editorial dossier, first/last/sex inputs, estimate hero, workings steps,
   first-name curve, surname origin bar, Pro leaderboard / surname profile /
   born-in-your-year.
   ========================================================================== */

/* ---- Editorial ---------------------------------------------------------- */
.hmm-ed { display: grid; grid-template-columns: 104px 1fr; gap: 1.5rem; align-items: start; }
.hmm-ed-art { display: flex; flex-direction: column; align-items: center; color: var(--cluster-dark, #78118D); }
.hmm-ed-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 0.6rem; opacity: 0.65; border: 1px solid currentColor;
  padding: 0.15rem 0.45rem; border-radius: 2px;
}
.hmm-ed-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.hmm-ed-head h2 { font-weight: 600; letter-spacing: -0.01em; }
.hmm-ed-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.22rem 0.6rem; background: var(--cluster-dark, #78118D); color: var(--cluster-on-dark); border-radius: 2px;
}
.hmm-ed p { margin: 0 0 0.7rem 0; }
.hmm-ed-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.55rem 1.4rem; padding-top: 0.8rem; font-size: 0.78rem;
  border-top: 1px dashed color-mix(in srgb, var(--cluster-dark, #78118D) 35%, transparent);
}
.hmm-ed-meta span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.6; display: block; margin-bottom: 0.1rem;
}
@media (max-width: 575.98px) {
  .hmm-ed { grid-template-columns: 1fr; gap: 1rem; }
  .hmm-ed-art { flex-direction: row; gap: 0.8rem; align-items: center; }
  .hmm-ed-code { margin-top: 0; }
}

/* ---- Inputs ------------------------------------------------------------- */
.hmm-inbar { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 0.8rem; align-items: end; }
@media (max-width: 991.98px) { .hmm-inbar { grid-template-columns: 1fr 1fr; } .hmm-inbar .hmm-go { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .hmm-inbar { grid-template-columns: 1fr; } }
.hmm-name-in { font-size: 1.1rem; font-weight: 600; }
.hmm-go { margin: 0; }
.hmm-samples { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.75rem; }
.hmm-sample {
  border: 1px solid var(--evvy-border-color, #DEE2E6); background: transparent; color: inherit;
  border-radius: 999px; padding: 0.2rem 0.75rem; font-size: 0.8rem; cursor: pointer;
}
.hmm-sample:hover { border-color: var(--cluster-dark, #78118D); color: var(--cluster-dark, #78118D); }

/* ---- Results ------------------------------------------------------------ */
.hmm-results { display: none; }
.hmm-results.show { display: block; }
.hmm-loading { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--evvy-text-secondary, #6C757D); padding: 0.8rem 0; }
.hmm-spin {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--cluster-dark, #78118D) 25%, transparent);
  border-top-color: var(--cluster-dark, #78118D);
  animation: hmm-rot 0.8s linear infinite;
}
@keyframes hmm-rot { to { transform: rotate(360deg); } }
.hmm-hero-sub {
  font-size: 0.88rem; line-height: 1.6; margin-top: 0.5rem;
  color: var(--evvy-text-secondary, #6C757D); max-width: 64ch; margin-inline: auto;
}
.hmm-note { font-size: 0.74rem; line-height: 1.45; margin-top: 0.35rem; color: var(--evvy-text-secondary, #6C757D); }
.hmm-row-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767.98px) { .hmm-row-3 { grid-template-columns: 1fr; } }
.hmm-note-box {
  margin-top: 1rem; padding: 0.6rem 0.9rem; border-radius: 8px; font-size: 0.84rem;
  background: color-mix(in srgb, var(--cluster-dark, #78118D) 8%, transparent);
}
.hmm-panel {
  border: 1px solid var(--evvy-border-color, #DEE2E6); border-radius: var(--evvy-radius-lg, 12px);
  padding: 1.1rem 1.2rem; margin-top: 1.25rem; background: var(--bs-body-bg, #fff);
}
[data-bs-theme="dark"] .hmm-panel { background: var(--evvy-gray-100, #1E1E1E); }
.hmm-panel-title {
  font-weight: 700; font-size: 0.95rem; margin-bottom: 0.8rem;
  display: flex; align-items: center; gap: 0.45rem; color: var(--cluster-dark, #78118D);
}
[data-bs-theme="dark"] .hmm-panel-title,
[data-bs-theme="dark"] .hmm-ed-art { color: var(--cluster-hover, #B86BCB); }
.hmm-muted { font-size: 0.78rem; color: var(--evvy-text-secondary, #6C757D); line-height: 1.55; }

/* ---- Workings ----------------------------------------------------------- */
.hmm-steps { display: grid; gap: 0.55rem; }
.hmm-step { display: grid; grid-template-columns: 30px 1fr; gap: 0.7rem; align-items: start; }
.hmm-step-n {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; border: 1.5px solid var(--cluster-dark, #78118D); color: var(--cluster-dark, #78118D);
}
.hmm-step-final .hmm-step-n { background: var(--cluster-dark, #78118D); color: var(--cluster-on-dark); }
.hmm-step-h { font-size: 0.92rem; }
.hmm-step-h strong { font-variant-numeric: tabular-nums; margin-left: 0.3rem; }
.hmm-assume {
  margin-top: 0.9rem; padding: 0.75rem 0.9rem; border-radius: 8px; font-size: 0.82rem; line-height: 1.6;
  border-left: 3px solid var(--cluster-dark, #78118D);
  background: color-mix(in srgb, var(--cluster-dark, #78118D) 6%, transparent);
}

/* ---- Curve -------------------------------------------------------------- */
.hmm-chart { width: 100%; height: auto; display: block; }
.hmm-chart .grid { stroke: var(--evvy-border-color, #DEE2E6); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.7; }
.hmm-chart .area { fill: var(--cluster-dark, #78118D); opacity: 0.12; }
.hmm-chart .line { fill: none; stroke: var(--cluster-dark, #78118D); stroke-width: 2.2; }
.hmm-chart .mark { fill: var(--cluster-dark, #78118D); }
.hmm-chart .label { font-size: 11px; fill: var(--evvy-text-secondary, #6C757D); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hmm-chart .tag { font-size: 12px; font-weight: 700; fill: var(--cluster-dark, #78118D); }
.hmm-chart .hover { stroke: var(--evvy-text-secondary, #6C757D); stroke-width: 1; stroke-dasharray: 2 3; }
[data-bs-theme="dark"] .hmm-chart .line { stroke: var(--cluster-hover, #B86BCB); }
[data-bs-theme="dark"] .hmm-chart .area, [data-bs-theme="dark"] .hmm-chart .mark { fill: var(--cluster-hover, #B86BCB); }
[data-bs-theme="dark"] .hmm-chart .tag { fill: var(--cluster-hover, #B86BCB); }
.hmm-tip { font-size: 0.8rem; margin-top: 0.4rem; min-height: 1.4em; font-variant-numeric: tabular-nums; color: var(--evvy-text-secondary, #6C757D); }

/* ---- Origin mix --------------------------------------------------------- */
.hmm-mixbar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--evvy-border-color, #DEE2E6); }
.hmm-mixbar span { display: block; height: 100%; }
.hmm-mixlist, .hmm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.3rem 1.2rem; margin-top: 0.7rem; font-size: 0.85rem; }
.hmm-mixlist div, .hmm-groups div { display: flex; align-items: center; gap: 0.45rem; }
.hmm-mixlist i, .hmm-groups i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.hmm-mixlist strong, .hmm-groups strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.hmm-mixlist abbr { text-decoration: none; cursor: help; }

/* ---- Pro: leaderboard --------------------------------------------------- */
.hmm-board { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.4rem; }
@media (max-width: 575.98px) { .hmm-board { columns: 1; } }
.hmm-board li {
  display: flex; align-items: baseline; gap: 0.55rem; padding: 0.28rem 0.4rem; break-inside: avoid;
  border-bottom: 1px dashed var(--evvy-border-color, #DEE2E6); font-size: 0.87rem;
}
.hmm-board-r { width: 1.8em; text-align: right; color: var(--evvy-text-secondary, #6C757D); font-variant-numeric: tabular-nums; }
.hmm-board-n { font-weight: 600; }
.hmm-board-c { margin-left: auto; font-variant-numeric: tabular-nums; }
.hmm-board li.hmm-board-you { background: color-mix(in srgb, var(--cluster-dark, #78118D) 12%, transparent); border-radius: 6px; }
.hmm-you-rank { margin-top: 0.8rem; font-size: 0.88rem; }

/* ---- Pro: profile ------------------------------------------------------- */
.hmm-prof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
@media (max-width: 767.98px) { .hmm-prof-grid { grid-template-columns: repeat(2, 1fr); } }
.hmm-prof-grid div {
  padding: 0.6rem 0.7rem; border-radius: 8px;
  background: color-mix(in srgb, var(--cluster-dark, #78118D) 6%, transparent);
}
.hmm-prof-grid span {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--evvy-text-secondary, #6C757D);
}
.hmm-prof-grid strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.hmm-nbrs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hmm-nbr {
  display: inline-flex; align-items: baseline; gap: 0.35rem; border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.8rem;
  border: 1px solid var(--evvy-border-color, #DEE2E6);
}
.hmm-nbr small { color: var(--evvy-text-secondary, #6C757D); }
.hmm-nbr-you { background: var(--cluster-dark, #78118D); color: var(--cluster-on-dark); border-color: var(--cluster-dark, #78118D); }
.hmm-nbr-you small { color: inherit; opacity: 0.8; }

/* ---- Pro: born ---------------------------------------------------------- */
.hmm-year-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.hmm-year-row .form-control { width: 110px; text-align: center; font-variant-numeric: tabular-nums; }
.hmm-born-big { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--cluster-dark, #78118D); font-variant-numeric: tabular-nums; }
[data-bs-theme="dark"] .hmm-born-big { color: var(--cluster-hover, #B86BCB); }

/* ---- Misc --------------------------------------------------------------- */
.hmm-outline-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--cluster-dark, #78118D); background: transparent;
  color: var(--cluster-dark, #78118D); border-radius: 999px;
  padding: 0.35rem 0.95rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.hmm-outline-btn:hover { background: var(--cluster-dark, #78118D); color: var(--cluster-on-dark); }
[data-bs-theme="dark"] .hmm-outline-btn { color: var(--cluster-hover, #B86BCB); border-color: var(--cluster-hover, #B86BCB); }
.hmm-error {
  margin-top: 1rem; padding: 0.7rem 1rem; border-radius: 8px; font-size: 0.88rem;
  background: color-mix(in srgb, #C0392B 10%, transparent); color: #C0392B;
}
[data-bs-theme="dark"] .hmm-error { color: #E74C3C; }
.hmm-disclaimer {
  font-size: 0.78rem; line-height: 1.6; color: var(--evvy-text-secondary, #6C757D);
  padding: 0.8rem 1rem; border-radius: var(--evvy-radius-lg, 12px);
  background: color-mix(in srgb, var(--evvy-text-secondary, #6C757D) 8%, transparent);
}
/* Dark mode: the cluster colour is lightened, so text sitting on it goes dark. */
[data-bs-theme="dark"] .hmm-nbr-you,
[data-bs-theme="dark"] .hmm-step-final .hmm-step-n,
[data-bs-theme="dark"] .hmm-outline-btn:hover { color: #14121a; }