/* =============================================================
   chips.css  ·  faces/home/mobile/  ·  standalone
   Chip component (R13: 4:1 aspect, 95% width) + variants + list scroll.
   Depends on: shared/tokens.css.
   ============================================================= */

/* ---------- chip base ---------- */
.chip {
    /* R13: aspect 4:1 — height comes from width, never from content */
    aspect-ratio: 4 / 1;
    width: 100%;

    /* no chip-level padding — grid columns line up with the chip's edges
       so the icon column genuinely is the leftmost 20% of the chip. */
    padding: 0;

    background: var(--card-bg);
    border: none;
    border-radius: 16px;
    color: var(--on-brand);                  /* primary text = white */

    /* default layout = chip-llogo (icon left, text right). */
    display: grid;
    grid-template-columns: 20% 80%;
    align-items: center;
    gap: 0;

    /* mono cyber tracking baseline */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 14px;

    overflow: hidden;

    /* R15: chip text is UI chrome, not user-quotable. Block iOS/Android
       long-press selection that would otherwise hijack the chip's tap. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.chip-text {
    display: grid;
    grid-template-rows: auto auto;
    overflow: hidden;
}

.chip-name {
    font-size: 12px;
    color: var(--on-brand);                  /* white */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    letter-spacing: 0.7px;                   /* tighter than chip default */
}

/* Container stays LTR — only the alignment flips for Arabic-script content
   (renderers add this class via list-helpers.isArabicScript). Bidi for
   individual letters is handled by the browser's default algorithm. */
.chip-name.is-rtl {
    text-align: right;
}

.chip-code {
    font-size: 11px;
    color: var(--on-brand-muted);
    letter-spacing: 1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* placeholder code line — keeps row height consistent across all chips
   when no real code is present; rendered fully transparent. */
.chip-code.is-empty {
    visibility: hidden;
}

/* selected state — inset cyan ring + faint cyan tint, so it's obvious
   even if the ring alone is subtle on small screens. */
.chip.is-selected {
    box-shadow: inset 0 0 0 1px var(--brand-active);
    background: color-mix(in srgb, var(--brand-active) 10%, var(--card-bg));
}

/* tappable account chips (active only) — touch-action: manipulation
   tells iOS Safari this element handles taps (no 300ms double-tap-zoom delay
   or scroll-as-tap ambiguity). The parent canvas-root has pan-x pan-y; this
   override is more specific and lets clicks fire immediately on touch. */
.chip-list .chip[data-state="active"] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.chip-list .chip[data-state="active"]:active {
    transform: scale(0.99);
}

/* .chip-avatar rules live in shared/components/chip-avatar.css */

.chip[data-state="inactive"] {
    opacity: 0.45;
}
.chip[data-state="inactive"] .chip-avatar {
    background: transparent;
    border-color: var(--on-brand-muted);
    color: var(--on-brand-muted);
}

.chip.chip-add {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.chip.chip-add:active { transform: scale(0.98); }

.chip.chip-header { background: var(--header-bg); }

/* =============================================================
   LAYOUT VARIANTS — composable on any chip
   chip-llogo : icon LEFT  + text right   (20/80) — DEFAULT
   chip-rlogo : text LEFT  + icon right   (80/20)
   chip-nologo: text only, fills chip     (single track)
   ============================================================= */

.chip.chip-llogo {
    grid-template-columns: 20% 80%;
}
.chip.chip-llogo > .chip-text {
    padding-left: 4%;
}

.chip.chip-rlogo {
    grid-template-columns: 80% 20%;
}
.chip.chip-rlogo > .chip-text {
    grid-column: 1;
    padding-left: 4%;
}
.chip.chip-rlogo > .chip-avatar,
.chip.chip-rlogo > .chip-close {
    grid-column: 2;
}

.chip.chip-nologo {
    grid-template-columns: 1fr;
}
.chip.chip-nologo > .chip-text {
    grid-column: 1;
    padding-left: 4%;
    padding-right: 4%;
}

/* twologo: circle / text / circle (20-60-20). Side columns auto-flow by
   document order — left slot can be .chip-check (toggle) or .chip-avatar
   (display-only badge); right slot is .chip-avatar (logo). */
.chip.chip-twologo { grid-template-columns: 20% 60% 20%; }
.chip.chip-twologo > .chip-text { grid-column: 2; padding: 0 4%; }

/* ---------- chip-list (scroll container) ---------- */
.chip-list {
    list-style: none;
    margin: 0;
    padding: 0 2.5% 16px 2.5%;

    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 0;             /* R14: clip the 1fr row correctly */

    scrollbar-width: none;
}
.chip-list::-webkit-scrollbar {
    display: none;
}

.chip-list .chip + .chip {
    margin-top: 8px;
}