/* =======================================================================
   Round 85 — r85-technical-chars.css
   Glyph placeholders for technical / invisible characters that have NO
   Unicode Control Picture (C1 controls, Cf format chars, tags, surrogates,
   private-use). Companion to services/TechnicalCharService.php and
   assets/js/technical-chars.js.

   Round 84 already styled the PICTURE case:
     .card-glyph.glyph-with-badge bdi { font-size: 2rem; }
     .hero-glyph.hero-technical-glyph { font-size: 3.5rem; }
   This file adds the PLACEHOLDER case so every technical character on
   every surface shows a real, professional glyph instead of a blank tile:

     1. .glyph-placeholder        — block grid card glyph (2rem dashed box)
     2. .hero-placeholder-glyph   — character detail hero (3.5rem)
     3. .glyph-inline             — prev/next nav, related tiles, search
                                    result-char, autocomplete rows,
                                    favorites + recently-copied widgets

   Colors reuse the site's existing technical styling tokens (sky-600 rgb
   variable + --accent-color), so light/dark themes and future re-themes
   inherit automatically.
   ======================================================================= */

/* ── 1. Card grid glyph placeholder ─────────────────────────────────── */
.card-glyph .glyph-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6em;
    padding: 0.12em 0.45em;
    border: 2px dashed rgba(var(--sky-600-rgb, 2 132 199), 0.45);
    border-radius: 10px;
    background: rgba(var(--sky-600-rgb, 2 132 199), 0.06);
    color: var(--accent-color, #0284c7);
    font-family: ui-monospace, 'JetBrains Mono', 'Sarasa Mono SC', Consolas, monospace;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Longer labels (BEAM-B, SURROGATE) shrink one step so cards stay uniform */
.card-glyph .glyph-placeholder {
    font-size: clamp(0.95rem, 1.1vw + 0.4rem, 1.6rem);
}

/* ── 2. Character detail hero placeholder ───────────────────────────── */
.hero-placeholder-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4em;
    padding: 0.1em 0.5em;
    border: 3px dashed rgba(var(--sky-600-rgb, 2 132 199), 0.45);
    border-radius: 14px;
    background: rgba(var(--sky-600-rgb, 2 132 199), 0.06);
    color: var(--accent-color, #0284c7);
    font-family: ui-monospace, 'JetBrains Mono', 'Sarasa Mono SC', Consolas, monospace;
    font-size: clamp(1.4rem, 2.5vw + 0.6rem, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

/* ── 3. Compact inline variant (nav / related / search / widgets) ────── */
.glyph-placeholder.glyph-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9em;
    padding: 0.05em 0.32em;
    border: 1.5px dashed rgba(var(--sky-600-rgb, 2 132 199), 0.5);
    border-radius: 6px;
    background: rgba(var(--sky-600-rgb, 2 132 199), 0.07);
    color: var(--accent-color, #0284c7);
    font-family: ui-monospace, 'JetBrains Mono', 'Sarasa Mono SC', Consolas, monospace;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

/* Autocomplete dropdown tiles: match .autocomplete-char sizing */
.autocomplete-char .glyph-placeholder.glyph-inline {
    font-size: 0.8rem;
    min-width: 2.1em;
    padding: 0.1em 0.4em;
}

/* Search result cards: match .result-char sizing */
.result-char .glyph-placeholder.glyph-inline {
    font-size: 0.95rem;
    min-width: 2.2em;
    padding: 0.12em 0.42em;
}

/* Related-char tiles: rel-glyph is ~2rem */
.rel-glyph.glyph-placeholder,
.related-char-tile .glyph-placeholder.glyph-inline {
    font-size: 1.1rem;
}

/* Prev/next detail nav */
.nav-glyph.glyph-placeholder,
.char-footer-nav .glyph-placeholder.glyph-inline {
    font-size: 1.15rem;
}

/* Favorites / recently-copied widget tiles */
.recent-chars-grid .glyph-placeholder.glyph-inline,
.favorites-grid .glyph-placeholder.glyph-inline {
    font-size: 0.9rem;
    min-width: 2em;
}

/* ── Accessibility: motion & forced-colors safety ───────────────────── */
@media (forced-colors: active) {
    .glyph-placeholder,
    .hero-placeholder-glyph,
    .glyph-placeholder.glyph-inline {
        border-style: dashed;
        forced-color-adjust: none;
    }
}

/* Dark mode: soften the dashed border (sky-600 may be too dim on dark bg) */
@media (prefers-color-scheme: dark) {
    .card-glyph .glyph-placeholder,
    .hero-placeholder-glyph,
    .glyph-placeholder.glyph-inline {
        border-color: rgba(var(--sky-400-rgb, 38 162 255), 0.5);
        background: rgba(var(--sky-400-rgb, 38 162 255), 0.08);
    }
}

/* Reduce long-label overflow risk on very narrow phones */
@media (max-width: 380px) {
    .card-glyph .glyph-placeholder {
        font-size: 0.9rem;
        min-width: 2.2em;
        letter-spacing: 0;
    }
}