/* ════════════════════════════════════════════════════════════════════════
   zTable_demo.css — a ONE-OFF themed table (opt in: zBrush [page, leaf, zTable_demo]).
   Proof of how far a zTable reskins purely through your own classes on the canonical
   surface — here a World Cup group-stage standings board. Everything is scoped to
   .wc-standings (table) + :has(.wc-standings) (the container chrome) so it touches
   NOTHING else on the page. Bifrost-only — the terminal prints plain ASCII regardless.
   ════════════════════════════════════════════════════════════════════════ */

/* the unit — reach the container via :has() so title + caption get the broadcast frame */
.zTable-container:has(.wc-standings) {
    background:    linear-gradient(160deg, #0a2a1e 0%, #06130d 100%);
    border:        1px solid rgba(250, 204, 21, 0.35);
    border-radius: 16px;
    padding:       1.6rem 1.6rem 1.2rem;
    box-shadow:    0 20px 60px rgba(5, 46, 22, 0.55), inset 0 0 0 1px rgba(34, 197, 94, 0.08);
}
.zTable-container:has(.wc-standings) h4 {
    font-size:      1.35rem;
    font-weight:    800;
    letter-spacing: 0.02em;
    color:          #facc15;
    text-transform: uppercase;
    margin:         0 0 0.15rem;
    text-align:     left;
}
.zTable-container:has(.wc-standings) h4::before { content: '🏆  '; }
.zTable-container:has(.wc-standings) .zTable-caption {
    color:     #86efac;
    font-size: 0.85rem;
    margin:    0 0 1.05rem;
}

/* the grid */
table.wc-standings {
    width:           100%;
    border-collapse: collapse;
    overflow:        hidden;
    border-radius:   10px;
    color:           #e7f6ee;
}
table.wc-standings thead th {
    background:      linear-gradient(180deg, #15803d 0%, #0b6e4f 100%);
    color:          #ecfdf5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size:      0.72rem;
    font-weight:    700;
    padding:        0.7rem 0.9rem;
    text-align:     center;
    border:         none;
}
table.wc-standings thead th:nth-child(2) { text-align: left; }   /* Team header */
table.wc-standings tbody td {
    padding:       0.62rem 0.9rem;
    text-align:    center;
    border-bottom: 1px solid rgba(134, 239, 172, 0.10);
    font-size:     0.92rem;
    font-variant-numeric: tabular-nums;
}
table.wc-standings tbody td:nth-child(2) {       /* Team name */
    text-align:  left;
    font-weight: 700;
    color:       #ffffff;
}
table.wc-standings tbody tr:hover td { background: rgba(34, 197, 94, 0.10); }
table.wc-standings tbody tr:last-child td { border-bottom: none; }

/* the gold Points column — _zColumn: { Pts: wc-pts } lands on its th + every td */
table.wc-standings .wc-pts      { color: #facc15; font-weight: 800; font-size: 1rem; }
table.wc-standings thead th.wc-pts { color: #fde68a; }

/* qualification markers — cell _zClass on the Pos column ({val, _zClass}) */
table.wc-standings .wc-q   { color: #4ade80; font-weight: 800; border-left: 3px solid #22c55e; }
table.wc-standings .wc-out { color: #f87171; border-left: 3px solid rgba(248, 113, 113, 0.5); }