/*! frb-identity.css — the field the generated avatar and cover art draw on,
 *  and the two pickers that choose them.
 *
 *  An account with no picture was two initials on a flat square; an account
 *  with no cover was a themed gradient. frb-identity.js draws both instead —
 *  ten patterns each, chosen from the person's own id so the same account gets
 *  the same art everywhere and two accounts never match.
 *
 *  The canvas goes BEHIND whatever the host already holds, never instead of it:
 *  the avatar keeps its monogram on top, because an avatar's job is to say
 *  which person this is and a beautiful square that says nothing is a worse
 *  avatar than two letters.
 */

.frb-id-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* under the monogram, over the host's own ground */
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
}
/* Anything the host already had stays above the art. */
.frb-id-drawn { position: relative; }
.frb-id-drawn > *:not(.frb-id-art) { position: relative; z-index: 1; }

/* A host that is drawing its own art has no use for the placeholder ground it
   was given for the empty state. */
.frb-id-drawn.is-empty { background-image: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE PICKERS
   Each swatch is a still of the pattern it selects, drawn by the same code
   that animates it — there is no preview artwork to keep in step. Avatars are
   square because an avatar is; covers are wide because a cover is, and a row
   of square chips would tell you nothing about how a pattern reads at 4:1.
   ═══════════════════════════════════════════════════════════════════════════ */
.frb-id-pick {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}
.frb-id-pick[data-kind="avatar"] { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
.frb-id-pick[data-kind="cover"] { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

.frb-id-swatch {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-solid, #0a0a0a);
    border: 1px solid var(--glass-border-color, rgba(127, 127, 127, .3));
    border-radius: var(--frb-btn-radius, 0px);
    transition: border-color .16s, transform .16s, box-shadow .16s;
}
.frb-id-pick[data-kind="avatar"] .frb-id-swatch { aspect-ratio: 1 / 1; }
.frb-id-pick[data-kind="cover"] .frb-id-swatch { aspect-ratio: 16 / 5; }
.frb-id-swatch:hover { transform: translateY(-2px); border-color: var(--accent-primary); }
.frb-id-swatch[aria-pressed="true"] {
    border-color: var(--accent-primary, #66ff66);
    box-shadow: 0 0 0 1px var(--accent-primary, #66ff66),
                0 0 18px var(--accent-glow, transparent);
}
.frb-id-swatch:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.frb-id-swatch canvas { display: block; width: 100%; height: 100%; }

/* "Let my id decide" is a choice like any other, so it gets a tile rather than
   a checkbox somewhere else. */
.frb-id-swatch.is-auto {
    display: grid;
    place-items: center;
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.frb-id-swatch.is-auto[aria-pressed="true"] { color: var(--accent-text, var(--accent-primary)); }

/* The monogram over the art. It needs its own weight and a little shadow:
   two letters at 30px sitting on a lit pattern is the one place in this file
   where legibility beats restraint. */
.frb-id-mono {
    position: relative;
    z-index: 1;
    /* THE GROUND CHANGED UNDER IT. The avatar's letters were coloured for a
       bright accent square; the art is a dark ground, so the same colour came
       out near-black on near-black. Taken from the text token instead, which
       is light on a dark theme and dark on a light one — the one value that is
       correct in both. */
    color: var(--text-primary, #f8fafc);
    font-weight: 800;
    letter-spacing: -.02em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .6);
}
.light-mode .frb-id-mono {
    text-shadow: 0 1px 10px rgba(255, 255, 255, .8), 0 0 2px rgba(255, 255, 255, .7);
}

.frb-id-label {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent-text, var(--accent-primary));
    margin: 16px 0 0;
}
.frb-id-note {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 6px 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .frb-id-swatch:hover { transform: none; }
}