/* foundry.css -- Name-demo output: result, tokens, country notes, naming conventions
   Part of the site stylesheet, split out of the former single
   site.css. Load order is significant and is fixed in
   src/view/layout.php -- theme first (tokens), then base, then
   layout, then components. Rules were moved verbatim, in their
   original order, so the cascade is unchanged. */

.result {
    border-top: 1px dashed var(--border-neutral-default);
    padding-top: var(--spacing-5);
    margin-top: var(--spacing-5);
}

.result-name {
    font-size: var(--heading-size-h5);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--spacing-3);
}

/* gender-result-table: the minimal result view on /foundry/name-
   intelligence/gender (_tool.php's $minimal mode) -- plain label/value
   rows, no token breakdown, no country chips, no did-you-mean. */

.gender-result-table {
    border-collapse: collapse;
}

.gender-result-table th,
.gender-result-table td {
    text-align: left;
    padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) 0;
    border-bottom: 1px solid var(--border-neutral-subtle);
}

.gender-result-table th {
    font-weight: var(--weight-semibold);
    color: var(--fg-neutral-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-size-small);
}

.gender-result-table td {
    font-weight: var(--weight-semibold);
    color: var(--fg-neutral-accent);
}

.tokens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.token {
    position: relative;
    display: inline-block;
    font: inherit;
    font-size: var(--badge-font-size);
    font-family: var(--font-mono);
    padding: var(--badge-padding);
    border: none;
    border-radius: var(--badge-border-radius);
    background: var(--bg-neutral-section);
    color: var(--fg-neutral-body);
    cursor: pointer;
}

.token-title, .token-honorific, .token-salutation {
    background: var(--bg-info-section);
    color: var(--fg-info-body);
}

.token-given_name, .token-initial {
    background: var(--bg-positive-section);
    color: var(--fg-positive-body);
}

.token-family_name, .token-patronymic {
    background: var(--bg-primary-section);
    color: var(--fg-primary-body);
}

.token-nobility_title, .token-associated_name {
    background: var(--bg-notice-section);
    color: var(--fg-notice-body);
}

.token-info {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--rounded-sm);
    background: var(--bg-inverse-base);
    color: var(--fg-inverse-body);
    font-family: var(--font-body);
    font-size: var(--text-size-small);
    font-weight: var(--weight-regular);
    white-space: nowrap;
    z-index: 100;
}

.token:hover .token-info,
.token:focus .token-info,
.token:focus-visible .token-info {
    display: block;
}

.confidence {
    font-weight: var(--weight-medium);
    margin-bottom: var(--spacing-3);
}

.confidence-high { color: var(--fg-positive-body); }
.confidence-medium { color: var(--fg-notice-body); }
.confidence-low { color: var(--fg-negative-body); }

.warnings {
    color: var(--fg-notice-body);
    font-size: var(--text-size-label);
}

@media (prefers-color-scheme: dark) {
    /* --fg-positive-body/--fg-notice-body deliberately don't flip
       globally (see .token-given_name etc. above -- they're paired with
       a same-family background that also never flips, e.g.
       --bg-positive-section, so both stay dark-on-light regardless of
       page theme). But .confidence-high/.confidence-medium/.warnings
       use these as plain text directly on the page background, with no
       background of their own -- dark green/amber text on an otherwise
       dark page is nearly unreadable. Override just these standalone
       usages instead of the shared custom properties. */
    :root:not([data-theme="light"]) .confidence-high { color: var(--green-a0); }
    :root:not([data-theme="light"]) .confidence-medium,
    :root:not([data-theme="light"]) .warnings,
    :root:not([data-theme="light"]) .warning { color: var(--yellow-a0); }
}

:root[data-theme="dark"] .confidence-high { color: var(--green-a0); }
:root[data-theme="dark"] .confidence-medium,
:root[data-theme="dark"] .warnings,
:root[data-theme="dark"] .warning { color: var(--yellow-a0); }

.detail {
    font-size: var(--text-size-label);
    color: var(--fg-neutral-body);
}

/* country-note: a curated naming-convention fact on a country landing
   page (src/data/countries.php's 'note' field) -- deliberately its own
   labeled box, not a second hero paragraph, so it reads as a distinct
   fact rather than blending into the hero copy. */

.country-note {
    border: 1px solid var(--border-neutral-subtle);
    border-radius: var(--rounded-xl);
    background: var(--bg-neutral-section);
    padding: var(--spacing-5) var(--spacing-6);
    margin: var(--spacing-6) 0;
}

.country-note-label {
    font-size: var(--text-size-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-neutral-muted);
    margin-bottom: var(--spacing-2);
}

.country-note p:last-child {
    margin-bottom: 0;
}

/* naming-conventions: the richer showcase-country write-up
   (src/data/country_deep_dives.php) -- language/script intro, one
   block per suffix/prefix pattern, a closing note tying it back to
   how Foundry actually handles it. */

.naming-conventions {
    border: 1px solid var(--border-neutral-subtle);
    border-radius: var(--rounded-xl);
    background: var(--bg-raised);
    padding: var(--spacing-6);
    margin: var(--spacing-6) 0;
}

.naming-conventions-intro {
    color: var(--fg-neutral-body);
}

.naming-pattern {
    padding: var(--spacing-4) 0;
    border-top: 1px solid var(--border-neutral-subtle);
}

.naming-pattern:first-of-type {
    border-top: none;
    padding-top: var(--spacing-2);
}

.naming-pattern-label {
    font-family: var(--font-mono);
    font-weight: var(--weight-semibold);
    color: var(--fg-neutral-accent);
    margin-bottom: var(--spacing-1);
}

.naming-pattern-meaning {
    color: var(--fg-neutral-body);
}

.naming-pattern-examples {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    max-width: none;
    margin-bottom: 0;
}

.naming-example {
    font-family: var(--font-mono);
    font-size: var(--text-size-small);
    background: var(--bg-neutral-section);
    padding: var(--badge-padding);
    border-radius: var(--badge-border-radius);
}

.naming-conventions-footnote {
    margin: var(--spacing-4) 0 0;
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--border-neutral-subtle);
    font-size: var(--text-size-label);
    color: var(--fg-neutral-muted);
}

/* naming-conventions-rich: the richer SEO-content schema (snippet/
   pillars/affixes/genderNote/stat/faq in country_deep_dives.php) --
   3 rule pillars, an affix table, a gender note, a highlighted
   "data journalism" stat pulled from Foundry's own corpus data
   (src/data/popular_names.php), and a short FAQ. */

.naming-conventions-rich h3 {
    margin-top: var(--spacing-6);
}

.naming-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-6);
}

.naming-pillar {
    border: 1px solid var(--border-neutral-subtle);
    border-radius: var(--rounded-lg);
    background: var(--bg-neutral-section);
    padding: var(--spacing-4) var(--spacing-5);
}

.naming-pillar h3 {
    margin-top: 0;
    font-size: var(--text-size-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-neutral-accent);
    margin-bottom: var(--spacing-1);
}

.naming-pillar p {
    color: var(--fg-neutral-body);
    margin-bottom: 0;
}

.naming-affixes-table-wrap {
    overflow-x: auto;
    margin: var(--spacing-3) 0 var(--spacing-6);
}

.naming-affixes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-size-label);
}

.naming-affixes-table th,
.naming-affixes-table td {
    text-align: left;
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 1px solid var(--border-neutral-subtle);
    vertical-align: top;
}

.naming-affixes-table th {
    font-weight: var(--weight-semibold);
    color: var(--fg-neutral-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-size-small);
}

.naming-affixes-table td:first-child {
    font-family: var(--font-mono);
    color: var(--fg-neutral-accent);
    white-space: nowrap;
}


/* closing-cta: a full-width colored block for the page's one closing
   action (imperavi-style) -- deliberately no social-proof caption
   ("join thousands of developers...") since there's no real customer
   base yet to point to; the honest substitute is a plain
   early-stage note instead. */

.closing-cta {
    /* --yellow-a4, not --bg-notice-section (= --yellow-a9) -- a9 is
       the palest tint in the scale, meant for subtle notice boxes, and
       reads as near-white (#FFFCF1) rather than an actual yellow. This
       block wants the imperavi-style punchy pastel instead. Fixed
       dark-on-light colors throughout too, not the theme-flipping
       --fg-neutral-* tokens -- this yellow doesn't have (or want) a
       dark-mode override, so text here must not flip light either or
       it loses contrast against this box's always-yellow background
       when the rest of the page is in dark mode. */
    background: var(--yellow-a4);
    color: var(--black);
    border-radius: var(--rounded-xl);
    padding: var(--spacing-12) var(--spacing-10);
    margin: var(--spacing-12) 0;
}

.closing-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--black-a5);
    border-radius: var(--rounded-lg);
    font-size: var(--text-size-large);
    color: var(--black);
    margin-bottom: var(--spacing-8);
}

.closing-cta h2 {
    color: var(--black);
    margin: 0 0 var(--spacing-5);
}

.closing-cta .lead {
    color: var(--black-b1);
    margin-bottom: var(--spacing-15);
}

.closing-cta-caption {
    margin: var(--spacing-6) 0 0;
    font-size: var(--text-size-label);
    color: var(--black-a1);
}

/* .button itself flips to a light background in dark mode (so it
   still contrasts against an otherwise-dark page elsewhere) -- but
   this box's background never flips, it's always light yellow, so a
   light-gray dark-mode button on it barely reads as a button at all.
   Pin it back to its light-mode look (dark bg, light text) here,
   regardless of page theme. */
.closing-cta .button {
    background: var(--black);
    color: var(--white);
}

.closing-cta .button:hover {
    background: var(--black-b7);
    color: var(--white);
}

@media (prefers-color-scheme: dark) {
    /* A one-off custom color, not one of the --yellow-* scale tokens --
       none of them are this yellow-green/chartreuse. Matches the exact
       reference color supplied for dark mode (Linear's testimonial
       card), not just "a more saturated yellow" in general. */
    :root:not([data-theme="light"]) .closing-cta {
        background: #D2D957;
    }
}

:root[data-theme="dark"] .closing-cta {
    background: #D2D957;
}

/* stat-callout: a highlighted, colored box for a real, checkable
   number (never a fabricated testimonial/social-proof stand-in) --
   used both for the per-country "data journalism" stat
   (country_deep_dives.php) and for standalone product stats like the
   false-confidence-rate figure on the Name Intelligence hub page. */

.stat-callout {
    border-left: 3px solid var(--border-primary-accent);
    background: var(--bg-primary-section);
    border-radius: 0 var(--rounded-xl) var(--rounded-xl) 0;
    padding: var(--spacing-5) var(--spacing-6);
    margin: var(--spacing-6) 0;
}

.stat-callout-figure {
    font-weight: var(--weight-semibold);
    color: var(--fg-primary-accent);
    margin-bottom: var(--spacing-2);
}

.stat-callout-interpretation {
    color: var(--fg-neutral-body);
    margin-bottom: 0;
}

.naming-faq-item {
    padding: var(--spacing-4) 0;
    border-top: 1px solid var(--border-neutral-subtle);
}

.naming-faq-item:first-of-type {
    border-top: none;
    padding-top: var(--spacing-2);
}

.naming-faq-question {
    font-weight: var(--weight-semibold);
    margin-bottom: var(--spacing-1);
}

.naming-faq-answer {
    color: var(--fg-neutral-body);
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .naming-pillars {
        grid-template-columns: 1fr;
    }

    .closing-cta {
        padding: var(--spacing-8) var(--spacing-6);
        margin: var(--spacing-8) 0;
    }

    .closing-cta .lead {
        margin-bottom: var(--spacing-8);
    }
}

/* country-origin: name_validation.countries, dressed up as flag chips
   -- the first (most likely) country gets an accent chip, the rest
   stay neutral. No probability number shown: the parser doesn't
   return a per-country score, only an ordered list. */

.country-origin {
    margin: 0 0 var(--spacing-4);
}

.country-origin-label {
    font-size: var(--text-size-label);
    color: var(--fg-neutral-body);
    margin-bottom: var(--spacing-2);
}

.country-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.country-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--badge-font-size);
    font-family: var(--font-mono);
    padding: var(--badge-padding);
    border-radius: var(--badge-border-radius);
    background: var(--bg-neutral-section);
    color: var(--fg-neutral-body);
}

.country-chip-primary {
    background: var(--bg-info-section);
    color: var(--fg-info-body);
    font-weight: var(--weight-semibold);
}

/* popular-names: two ranked lists (given/family) side by side on a
   country landing page -- src/data/popular_names.php. Each row paints
   a background bar (.popular-name-bar, width set inline per item,
   relative to the #1 entry) behind the text for an at-a-glance sense
   of relative frequency, without a separate charting element. */

.popular-names {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-6);
    margin: var(--spacing-6) 0;
}

.popular-names-column {
    flex: 1;
    min-width: 260px;
    border: 1px solid var(--border-neutral-subtle);
    border-radius: var(--rounded-xl);
    padding: var(--spacing-6);
    background: var(--bg-raised);
}

.popular-names-label {
    font-size: var(--text-size-label);
    font-weight: var(--weight-semibold);
    color: var(--fg-neutral-body);
    margin-bottom: var(--spacing-3);
}

ol.popular-names-list {
    list-style: none;
    counter-reset: popular-name;
    padding-left: 0;
    margin: 0;
    max-width: none;
}

ol.popular-names-list li {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--rounded-sm);
}

ol.popular-names-list li::before {
    counter-increment: popular-name;
    content: counter(popular-name);
    flex-shrink: 0;
    width: 1.5em;
    font-family: var(--font-mono);
    font-size: var(--text-size-small);
    color: var(--fg-neutral-muted);
    text-align: right;
}

.popular-name-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    border-radius: var(--rounded-sm);
    background: var(--bg-info-section);
}

.popular-name-value {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popular-name-pct {
    position: relative;
    z-index: 1;
    color: var(--fg-neutral-muted);
    font-family: var(--font-mono);
    font-size: var(--text-size-small);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .popular-names {
        flex-direction: column;
    }

    .popular-names-column {
        min-width: 0;
    }
}

/* card grid, e.g. a features or roadmap list */