/* ── Padelytics UI — shared component library (Midnight Terminal Glow) ──
   Loaded after components.css + app-frame.css, before page-specific CSS. */

/* ── Card ── carbon surface, translucent inset border, no drop shadow ── */
.card{
    background:var(--card);
    border-radius:var(--radius-lg);
    box-shadow:var(--card-inset);
    overflow:hidden;
    margin-bottom:var(--space-3);
}
.card-title{
    font-family:var(--font-display);
    font-size:15px;font-weight:600;color:var(--text);
    padding:14px 18px;
    display:flex;align-items:center;gap:8px;
    box-shadow:inset 0 -1px 0 0 var(--divider);
}
.card-title .count{
    margin-left:auto;
    font-family:var(--font-mono);font-size:11px;font-weight:400;
    color:var(--accent);background:var(--accent-dim);
    padding:3px 9px;border-radius:var(--radius-sm);
}

/* ── Section header ── standalone title + optional meta/action ── */
.section-header{
    display:flex;align-items:baseline;gap:12px;
    margin:0 0 var(--space-4);
}
.section-header h1,.section-header h2{
    font-family:var(--font-display);font-size:24px;font-weight:600;
    letter-spacing:-0.01em;color:var(--text);
}
.section-header .sub{color:var(--text-dim);font-weight:500;font-size:14px;}

/* ── List-row ── rank / flag / name+club / movement / badge ── */
.list-row{
    display:flex;align-items:center;gap:12px;
    padding:11px 18px;
    box-shadow:inset 0 -1px 0 0 var(--divider);
    text-decoration:none;color:var(--text);
    transition:background 0.15s ease;
}
.list-row:last-child{box-shadow:none;}
.list-row:hover{background:rgba(255,255,255,0.03);}
.list-row.lead{
    background:var(--accent-dim);
    box-shadow:inset 2px 0 0 0 var(--accent), inset 0 -1px 0 0 var(--divider);
}
.list-row .lr-flag{width:22px;height:auto;border-radius:3px;flex-shrink:0;}
.list-row .lr-main{min-width:0;flex:1;}
.list-row .lr-name{font-size:14px;font-weight:600;color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.list-row .lr-club{font-size:11px;color:var(--text-dim);margin-top:1px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.list-row .lr-move{
    font-family:var(--font-mono);font-size:11px;font-weight:500;
    margin-left:auto;white-space:nowrap;
}
.list-row .lr-move.up{color:var(--up);}
.list-row .lr-move.down{color:var(--down);}
.list-row .lr-badge{
    font-family:var(--font-mono);font-size:16px;font-weight:500;color:var(--text);
    min-width:38px;text-align:right;font-variant-numeric:tabular-nums;
}
.list-row .lr-badge .hash{color:var(--accent);opacity:0.7;font-size:12px;}

/* ── Signature moment ── oversized rank for #1 ── */
.signature{
    display:flex;align-items:center;gap:20px;
    padding:20px 18px;
    box-shadow:inset 0 -1px 0 0 var(--divider);
    text-decoration:none;
    transition:background 0.15s ease;
}
.signature:hover{background:rgba(255,255,255,0.02);}
.signature .sig-rank{
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(72px,12vw,128px);line-height:0.8;letter-spacing:-0.04em;
    color:var(--text);flex-shrink:0;
}
.signature .sig-main{min-width:0;flex:1;}
.signature .sig-name{
    font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.signature .sig-club{font-size:13px;color:var(--text-dim);margin-top:3px;}
.signature .sig-move{
    font-family:var(--font-mono);font-size:12px;font-weight:500;margin-top:6px;
}
.signature .sig-move.up{color:var(--up);}
.signature .sig-move.down{color:var(--down);}

/* ── Stat-tile ── labelled metric ──
   .st-* are unscoped tile-content primitives — reused by .stat-tile AND .glow-tile. */
.stat-tile{
    background:var(--bg-raised);
    border-radius:var(--radius-lg);
    box-shadow:inset 0 0 0 1px var(--card-border);
    padding:15px 16px;
}
.st-label{
    font-size:10px;letter-spacing:0.06em;text-transform:uppercase;
    color:var(--text-dim);margin-bottom:9px;
}
.st-num{
    font-family:var(--font-mono);font-size:26px;font-weight:500;color:var(--text);
}
.st-name{font-size:14px;font-weight:600;color:var(--text);}
.st-meta{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);margin-top:3px;}

/* ── Glow-tile ── the one "live" element per view ──
   NB: --accent-glow is a colour, not a shadow — write the bloom explicitly here.
   May be used as an <a>, so it is display:block + text-decoration:none. */
.glow-tile{
    display:block;
    background:var(--card);
    border-radius:var(--radius-lg);
    box-shadow:inset 0 0 0 1px var(--accent-border), 0 0 9px 2px rgba(82,225,254,0.10);
    padding:15px 16px;
    text-decoration:none;
}
.glow-tile .st-label,.glow-tile .st-meta{color:var(--accent);}
.glow-tile.pulse{animation:glowPulse 4s ease-in-out infinite;}

/* ── Pill / tag ── */
.tag{
    display:inline-flex;align-items:center;
    font-size:10px;font-weight:500;
    padding:3px 8px;border-radius:var(--radius-sm);
    background:rgba(255,255,255,0.05);color:var(--text-muted);
}
.tag.accent{background:var(--accent-dim);color:var(--accent);}

/* ── Buttons ── primary is WHITE; cyan is never a button ── */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    font-family:var(--font-body);font-size:13px;font-weight:600;
    padding:10px 16px;border-radius:var(--radius-md);
    background:var(--btn-bg);color:var(--btn-text);
    border:none;cursor:pointer;text-decoration:none;
    transition:opacity 0.15s ease;
}
.btn:hover{opacity:0.88;}
.btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    font-family:var(--font-body);font-size:13px;font-weight:500;
    padding:9px 14px;border-radius:var(--radius-md);
    background:transparent;color:var(--text-muted);
    border:none;cursor:pointer;text-decoration:none;
    transition:color 0.15s ease,background 0.15s ease;
}
.btn-ghost:hover{color:var(--text);background:rgba(255,255,255,0.04);}

/* ── Search field ── */
.search-field{
    display:flex;align-items:center;gap:8px;
    height:36px;padding:0 14px;
    background:var(--card);border-radius:var(--radius-md);
    box-shadow:inset 0 0 0 1px var(--card-border);
}
.search-field input{
    flex:1;background:none;border:none;outline:none;
    color:var(--text);font-family:var(--font-body);font-size:14px;
}
.search-field input::placeholder{color:var(--text-dim);}

/* ── Segmented control ── */
.segmented{
    display:inline-flex;gap:2px;padding:3px;
    background:var(--bg-raised);border-radius:var(--radius-md);
    box-shadow:inset 0 0 0 1px var(--card-border);
}
.segmented button{
    font-family:var(--font-body);font-size:12px;font-weight:600;
    padding:6px 14px;border-radius:9px;
    background:none;border:none;color:var(--text-dim);cursor:pointer;
    transition:color 0.15s ease,background 0.15s ease;
}
.segmented button.active{background:var(--accent-dim);color:var(--accent);}

/* ── Empty state ── */
.empty-state{
    padding:32px 20px;text-align:center;
    color:var(--text-dim);font-size:14px;
}

/* ── Expand / collapse (rankings "show more") ── */
.expand-btn{
    display:block;width:100%;padding:13px;
    background:none;border:none;
    box-shadow:inset 0 1px 0 0 var(--divider);
    color:var(--accent);font-family:var(--font-body);font-size:12px;font-weight:600;
    cursor:pointer;text-align:center;transition:background 0.15s ease;
}
.expand-btn:hover{background:var(--accent-dim);}
.expand-btn.open{box-shadow:inset 0 1px 0 0 var(--divider), inset 0 -1px 0 0 var(--divider);}
.extra-players{display:none;}
.extra-players.open{display:block;}

/* ── Keyboard focus ── visible focus ring on every interactive component ── */
.btn:focus-visible,
.btn-ghost:focus-visible,
.expand-btn:focus-visible,
.segmented button:focus-visible,
.list-row:focus-visible,
.signature:focus-visible,
.glow-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.search-field:focus-within{box-shadow:inset 0 0 0 1px var(--accent);}

/* ── Master-detail (Phase 2) ── selected-row state + detail-pane chrome ── */

/* Selected row/signature in the list pane — echoes the rail's active sub-item. */
.list-row.selected,
.signature.selected{
    background:var(--accent-dim);
    box-shadow:inset 2px 0 0 0 var(--accent), inset 0 -1px 0 0 var(--divider);
}
.list-row.selected .lr-name,
.signature.selected .sig-name{color:var(--accent);}

/* The meta row at the top of the player detail partial. */
.player-detail-meta{
    display:flex;align-items:center;gap:12px;
    margin-bottom:14px;
}
.player-detail-meta #dateInfo{
    flex:1;min-width:0;
    font-family:var(--font-mono);font-size:11px;color:var(--text-dim);line-height:1.7;
}
/* Detail-pane overview ("nothing selected") leader hero card. */
.overview-lead{
    display:flex;align-items:center;gap:20px;
    background:var(--card);border-radius:var(--radius-lg);
    box-shadow:var(--card-inset);
    padding:22px 20px;margin-bottom:var(--space-3);
    text-decoration:none;
}
.overview-lead .ol-rank{
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(64px,7vw,104px);line-height:0.8;letter-spacing:-0.04em;
    color:var(--text);flex-shrink:0;
}
.overview-lead .ol-main{min-width:0;flex:1;}
.overview-lead .ol-name{
    font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--text);
}
.overview-lead .ol-club{font-size:13px;color:var(--text-dim);margin-top:3px;}
.overview-lead .ol-tag{
    font-family:var(--font-mono);font-size:12px;color:var(--accent);margin-top:8px;
}