/* ═══════════════════════════════════════════════════════════════════════
   MwPersonTicketCell — mw-ptc-*
   One person's ticket loadout as a single coupled unit: main-ticket tile
   (prominent, type-coloured, tail corner + bloom per the theme language) with
   add-on squares hanging off it via hairline links; repeats fold to a mono ×N
   badge. Hovering the unit swaps mini ⇄ full (ticket names) after ≈200 ms —
   the MwMembershipChips double-render mechanic (max-width/opacity, delayed).
   Reads only --mud-palette-* so it themes for free; per-instance type colour
   arrives via inline --c. Icons are <MudIcon> SVGs sized via font-size.
   ═══════════════════════════════════════════════════════════════════════ */

.mw-ptc {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    font-family: Roboto, Helvetica, Arial, sans-serif;
}

.mw-ptc-empty {
    color: var(--mud-palette-text-disabled);
}

/* ── Hover swap: mini + full rendered side by side, cell hover trades them ── */

.mw-ptc-layer {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}

.mw-ptc-mini {
    max-width: 340px;
    opacity: 1;
}

.mw-ptc-full {
    max-width: 0;
    opacity: 0;
}

.mw-ptc:hover .mw-ptc-mini {
    max-width: 0;
    opacity: 0;
    transition: max-width .2s ease .2s, opacity .15s ease .2s;
}

.mw-ptc:hover .mw-ptc-full {
    max-width: 620px;
    opacity: 1;
    transition: max-width .25s ease .2s, opacity .2s ease .25s;
}

/* ── Main-ticket tile (the one prominent element — tail corner + colour bloom) ── */

.mw-ptc-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    flex: none;
    border-radius: 8px;
    border-bottom-left-radius: 2px;
    background: color-mix(in srgb, var(--c) 15%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
    box-shadow: -3px 2px 9px -7px color-mix(in srgb, var(--c) 80%, transparent);
    color: var(--c);
}

.mw-ptc-main .mud-icon-root {
    font-size: 15px;
}

/* Ghost slot — add-ons exist but no live main ticket (data smell, amber) */
.mw-ptc-main--ghost {
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
    box-shadow: none;
    color: var(--mud-palette-warning);
}

.mw-ptc-main--ghost .mud-icon-root {
    font-size: 13px;
    opacity: .85;
}

/* ── Coupling link — the hairline that hangs add-ons off the main ticket ── */

.mw-ptc-link {
    width: 7px;
    height: 2px;
    flex: none;
    background: var(--mud-palette-lines-default);
}

.mw-ptc-link--short {
    width: 4px;
}

/* ── Add-on squares (smaller, flatter — visibly subordinate) ── */

.mw-ptc-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 6px;
    background: color-mix(in srgb, var(--c) 11%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
    color: var(--c);
}

.mw-ptc-addon .mud-icon-root {
    font-size: 13px;
}

/* Repeat badge — rides the add-on square's bottom-right corner (in-flow sibling,
   overlapped via negative margin so the layer's overflow:hidden never clips it) */
.mw-ptc-x {
    position: relative;
    z-index: 1;
    align-self: flex-end;
    margin-left: -8px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 4px;
    color: color-mix(in srgb, var(--c) 70%, var(--mud-palette-text-primary));
    background: var(--mud-palette-surface);
    border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}

/* ── Full layer: the same coupling, each segment grown to its ticket name ── */

.mw-ptc-mainf {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    flex: none;
    padding: 0 9px 0 6px;
    border-radius: 8px;
    border-bottom-left-radius: 2px;
    font-size: 11.5px;
    font-weight: 600;
    background: color-mix(in srgb, var(--c) 13%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
    color: color-mix(in srgb, var(--c) 62%, var(--mud-palette-text-primary));
}

.mw-ptc-mainf .mud-icon-root {
    font-size: 14px;
    color: var(--c);
}

.mw-ptc-mainf--ghost {
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
    color: var(--mud-palette-warning);
    font-weight: 500;
    font-style: italic;
}

.mw-ptc-mainf--ghost .mud-icon-root {
    color: var(--mud-palette-warning);
}

.mw-ptc-addonf {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 21px;
    flex: none;
    padding: 0 7px 0 5px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
    background: color-mix(in srgb, var(--c) 9%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
    color: color-mix(in srgb, var(--c) 65%, var(--mud-palette-text-primary));
}

.mw-ptc-addonf .mud-icon-root {
    font-size: 12px;
    color: var(--c);
}

.mw-ptc-xf {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 9.5px;
    font-weight: 700;
    opacity: .85;
}

.mw-ptc-name {
    white-space: nowrap;
}