/*---------------------------------------------------------------------------------------------------------------------
   bench-min.css — CPU-Z Benchmark (V3)
   --------------------------------------------------------------------------------------------------------------------
   Animated horizontal-bar leaderboard, restyled to match the v3 shell (dark
   panels, rounded corners, clean type) used by the Statistics / World Records
   reworks. Each row carries a per-brand accent exposed as the --bench-accent
   custom property (Intel = blue, AMD = red); the bar, the leader's rank chip and
   the "YOU" highlight all share that hue.

   The bar reveal still rides the legacy contract: medias/scripts/bench-min.js
   finds `.score-bar` inside #bench-graph and strips `data-hide` to trigger the
   scaleX transition, staggered top-to-bottom.

   Shared base lives here (loads on every platform). Desktop-only hover lives in
   bench-desktop-min.css; mobile stacking in bench-mobile-min.css.
---------------------------------------------------------------------------------------------------------------------*/

/* ── Per-brand accent ────────────────────────────────────────────────────────── */
.bench .brand-intel { --bench-accent: #3aa4f5; }
.bench .brand-amd   { --bench-accent: #00af41; }

/* ── Page panel + hero header ────────────────────────────────────────────────── */
.block_content.bench{
    background: #262626;
    padding: 1.6em 1.6em 1.8em;
    border-radius: 12px;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.bench .content-header{
    text-align: center;
    padding: .6em 0 1.4em;
    color: #8f8f8f;
}
#main__content .main-wrapper .bench .content-header h1.title{
    color: #fff;
    font-size: 3.6em;
    margin: 0 0 .15em;
    padding: 0;
}
.bench .content-header p{
    margin: 0;
    color: #8f8f8f;
    font-size: 1.6em;
    letter-spacing: .01em;
}
#main__content .main-wrapper .bench .content-header h4.bench-subject{
    margin: .5em 0 0;
    color: #3aa4f5;
    font-size: 2.4em;
    font-weight: 600;
}
.bench .content-header h4.bench-subject span{
    display: inline-block;
    margin-left: .35em;
    padding: .1em .5em;
    border-radius: 6px;
    background: rgba(58,164,245,.16);
    color: #7cc4ff;
    font-size: .55em;
    font-weight: 700;
    vertical-align: middle;
}
.bench .bench-back{
    display: inline-block;
    margin-top: 1em;
    padding: .5em 1.2em;
    border-radius: 8px;
    background: #333;
    color: #d8d8d8;
    font-size: 1.3em;
    text-decoration: none;
    transition: background 160ms ease;
}

/* ── Single / Multi-thread toggle ────────────────────────────────────────────── */
.bench .bench-tabs{
    display: flex;
    gap: .8em;
    margin: .4em 0 1.4em;
}
.bench .bench-tab{
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15em;
    padding: .9em 1em;
    border-radius: 10px;
    background: #1d1d1d;
    border: 1px solid #333;
    color: #bdbdbd;
    font-family: 'raleway-regular', Arial, sans-serif;
    font-size: 1.6em;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.bench .bench-tab .tab-label{ font-weight: 600; }
.bench .bench-tab .tab-score{
    font-size: 1.35em;
    font-weight: 700;
    color: #fff;
}
.bench .bench-tab.active{
    background: #2f2f2f;
    border-color: #be00a7;
    color: #fff;
    box-shadow: inset 0 -3px 0 #be00a7;
}

/* ── Thread-count selector ───────────────────────────────────────────────────── */
.bench .bench-threads{
    margin: 0 0 1.6em;
    text-align: center;
}
.bench .bench-threads-label{
    display: block;
    margin-bottom: .6em;
    color: #8f8f8f;
    font-size: 1.4em;
}
.bench .bench-threads ul{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4em;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bench .bench-threads li{ display: inline-block; }
.bench .bench-threads li a{
    display: inline-block;
    min-width: 2.4em;
    padding: .45em .7em;
    border-radius: 7px;
    background: #1d1d1d;
    border: 1px solid #333;
    color: #cfcfcf;
    font-size: 1.4em;
    text-align: center;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease;
}
.bench .bench-threads li a.active{
    background: rgba(190,0,167,.22);
    border-color: #be00a7;
    color: #fff;
    font-weight: 700;
}

/* ── Leaderboard ─────────────────────────────────────────────────────────────── */
.bench .bench-board{ position: relative; }

.bench .bench-row{
    display: flex;
    align-items: center;
    gap: 1em;
    padding: .55em .8em;
    border-radius: 8px;
    border: 1px solid transparent;
}
.bench .bench-row + .bench-row{ margin-top: .35em; }
.bench .bench-row:nth-child(even){ background: rgba(255,255,255,.018); }

/* rank chip */
.bench .bench-rank{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em; height: 2em;
    border-radius: 50%;
    background: #2c2c2c;
    color: #8a8a8a;
    font-size: 1.5em;
    font-weight: 700;
}
.bench .bench-row:first-child .bench-rank{
    background: var(--bench-accent);
    color: #fff;
}

/* cpu name */
.bench .bench-name{
    flex: 0 0 15em;
    min-width: 0;
    color: #e2e2e2;
    font-family: 'raleway-regular', Arial, sans-serif;
    font-size: 1.55em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bench .bench-name b{
    margin-right: .15em;
    padding: .05em .45em;
    border-radius: 4px;
    background: var(--bench-accent);
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .04em;
}

/* bar + score */
.bench .bench-bar-wrap{
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 2.3em;
    background: rgba(255,255,255,.04);
    border-radius: 0 6px 6px 0;
}
.bench .score-bar{
    position: relative;
    height: 100%;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(90deg,
                color-mix(in srgb, var(--bench-accent) 70%, #000) 0%,
                var(--bench-accent) 100%);
    transition: width 600ms cubic-bezier(.22,.61,.36,1);
}
.bench .score-bar[data-hide="true"]{
    width: 0 !important;
}
/* score rides the right end of the coloured bar */
.bench .bench-score{
    position: absolute;
    right: .6em;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 1.5em;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,.7);
    white-space: nowrap;
    pointer-events: none;
}

/* the visitor's own row */
.bench .bench-row.you{
    background: rgba(190,0,167,.12);
    border-color: rgba(190,0,167,.55);
}
.bench .bench-row.you .bench-name{ color: #fff; }

.bench .bench-empty{
    padding: 2.5em 1em;
    color: #8a8a8a;
    font-size: 1.6em;
    text-align: center;
}

/* ── "Show all" toggle ───────────────────────────────────────────────────────── */
/* While capped, hide the overflow rows; the toggle flips .is-capped off. */
.bench .bench-board.is-capped .bench-row.is-extra{ display: none; }

.bench .bench-more{
    margin-top: 1.2em;
    text-align: center;
}
.bench .bench-more-btn{
    display: inline-block;
    padding: .6em 1.6em;
    border-radius: 8px;
    background: #1d1d1d;
    border: 1px solid #444;
    color: #d8d8d8;
    font-size: 1.4em;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.bench .bench-more-btn:hover{
    background: #2a2a2a;
    border-color: #be00a7;
    color: #fff;
}