/* ==========================================================================
   KillarNation — Symbols (copy & paste). Tokens only, mobile-first.
   ========================================================================== */

.sym-glyph {
    font-family: "Noto Sans Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", "Apple Symbols", system-ui, sans-serif;
    line-height: 1.2;
    word-break: break-all;
}

/* Toolbar / search */
.sym-toolbar { margin-bottom: var(--kn-sp-4); }
.sym-search {
    width: 100%;
    max-width: 480px;
    padding: var(--kn-sp-3) var(--kn-sp-4);
    font-size: var(--kn-fs-base);
    color: var(--kn-text);
    background: var(--kn-surface-sunken);
    border: 1px solid var(--kn-border-light);
    border-radius: var(--kn-radius-pill);
}
.sym-search:focus { outline: none; border-color: var(--kn-primary); }
.sym-empty { color: var(--kn-text-muted); margin-top: var(--kn-sp-4); }

/* Card */
.sym-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sym-card { text-align: center; }
.sym-card__glyph {
    display: block;
    padding: var(--kn-sp-5) var(--kn-sp-2);
    font-size: var(--kn-fs-3xl);
    color: var(--kn-text);
    background: var(--kn-surface-sunken);
    text-decoration: none;
}
.sym-card__body { display: flex; flex-direction: column; align-items: center; gap: var(--kn-sp-2); }
.sym-card__title { font-size: var(--kn-fs-base); margin: 0; }
.sym-card__count { font-size: var(--kn-fs-xs); color: var(--kn-text-muted); }

/* Single hero */
.sym-hero { margin-bottom: var(--kn-sp-6); }
.sym-hero__title { margin: var(--kn-sp-3) 0; }
.sym-hero__lead { color: var(--kn-text-soft); max-width: var(--kn-measure); }
.sym-hero__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kn-sp-4);
    padding: var(--kn-sp-6);
    margin: var(--kn-sp-4) 0;
    background: var(--kn-surface-sunken);
    border: 1px solid var(--kn-border-light);
    border-radius: var(--kn-radius-lg);
}
.sym-hero__glyph { font-size: var(--kn-fs-5xl); text-align: center; }
.sym-meta { display: flex; flex-wrap: wrap; gap: var(--kn-sp-3) var(--kn-sp-6); margin: 0; }
.sym-meta dt { font-size: var(--kn-fs-xs); color: var(--kn-text-muted); text-transform: uppercase; }
.sym-meta dd { margin: 0; font-weight: var(--kn-fw-semibold); }

/* Variants */
.sym-variants { margin: var(--kn-sp-6) 0; }
.sym-variants__head { display: flex; align-items: center; justify-content: space-between; gap: var(--kn-sp-3); flex-wrap: wrap; margin-bottom: var(--kn-sp-4); }
.sym-variants__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--kn-sp-3); }
.sym-variant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kn-sp-2);
    padding: var(--kn-sp-4) var(--kn-sp-2);
    text-align: center;
    background: var(--kn-surface-card);
    border: 1px solid var(--kn-border-light);
    border-radius: var(--kn-radius);
}
.sym-variant__glyph { font-size: var(--kn-fs-2xl); }
.sym-variant__label { font-size: var(--kn-fs-xs); color: var(--kn-text-muted); }

/* How-to + FAQ */
.sym-howto { margin: var(--kn-sp-6) 0; }
.sym-howto ol { padding-left: var(--kn-sp-5); display: grid; gap: var(--kn-sp-2); }
.sym-faqs { margin: var(--kn-sp-6) 0; }
.sym-faq { border-bottom: 1px solid var(--kn-border-light); padding: var(--kn-sp-3) 0; }
.sym-faq summary { cursor: pointer; font-weight: var(--kn-fw-semibold); }
.sym-faq p { margin: var(--kn-sp-2) 0 0; color: var(--kn-text-soft); }

/* Copy feedback */
.sym-copy.is-copied { background: var(--kn-success); border-color: var(--kn-success); color: var(--kn-black); }

@media (min-width: 768px) {
    .sym-hero__box { flex-direction: row; justify-content: center; gap: var(--kn-sp-8); }
    .sym-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}