/*---------------------------------------------------------------------------------------------------------------------
   records-min.css — World Records (V3)
   --------------------------------------------------------------------------------------------------------------------
   Full-width accordion "leaderboard", restyled to match the v3 shell (dark
   panels, magenta accents, rounded corners, clean type). Keeps the accordion
   DOM/JS contract intact — medias/scripts/records-min.js still measures
   .table / .table-container heights and toggles `.open` on `.item`.

   Per-category colour identity (the legacy purple/blue/green/orange/dark-purple)
   is preserved, exposed as the `--rec-accent` custom property on each `.item`
   so the header stripe, the leader's rank chip, the frequency and the caret all
   share one hue.

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

/* ── Per-category accent ─────────────────────────────────────────────────────── */
.records .color-purple      { --rec-accent: #d400bc; }
.records .color-blue        { --rec-accent: #3aa4f5; }
.records .color-green       { --rec-accent: #00b37a; }
.records .color-dark-purple { --rec-accent: #a06be0; }
.records .color-orange      { --rec-accent: #ff8c2e; }

/* ── Page panel + hero header ────────────────────────────────────────────────── */
.block_content.records{
    background: #262626;
    padding: 1.6em 1.6em 1.8em;
    border-radius: 12px;
    box-sizing: border-box;
}
.records .content-header{
    text-align: center;
    padding: .6em 0 1.6em;
    color: #8f8f8f;
}
#main__content .main-wrapper .records .content-header h1.title{
    color: #fff;
    font-size: 3.6em;
    margin: 0 0 .15em;
    padding: 0;
}
.records .content-header p{
    margin: 0;
    color: #be00a7;
    font-size: 1.8em;
    letter-spacing: .02em;
}

/* ── Category card (accordion item) ──────────────────────────────────────────── */
.records .item{
    margin-bottom: 1.1em;
    border-radius: 10px;
    overflow: hidden;
    background: #1d1d1d;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.records .item:last-child{ margin-bottom: 0; }

/* ── Accordion header ────────────────────────────────────────────────────────── */
/* The records board behaves like an app surface — clicking text should not
   drop a blinking caret or start a selection. user-select inherits, so one
   rule on the panel covers the heading, category labels and every row. */
.block_content.records{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.records .table-title{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.75em 3em 0.75em 1.1em;
    background: #2a2a2a;
    border: 0;
    border-left: 4px solid var(--rec-accent);
    box-shadow: none;
    color: #fff;
    font-size: 1.75em;
    font-weight: 400;
    letter-spacing: .025em;
    text-align: left;
    cursor: pointer;
    transition: background 160ms ease;
}
.records .title-content{ display: block; flex: 1 1 auto; min-width: 0; }

/* top (rank 1) frequency shown on the right of the category bar, with a bolt picto */
.records .title-top{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    margin-left: 1em;
    font-size: 1em;
    font-weight: 700;
    color: var(--rec-accent);
    white-space: nowrap;
}
.records .title-top:before{
    content: '';
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5q0 .807-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33 33 0 0 1 2.5.5m.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935m10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5q0 .807-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33 33 0 0 1 2.5.5m.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935m10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* caret — right side, rotates on open */
.records .table-title:before{
    content: '';
    position: absolute;
    top: 50%;
    right: 1.2em;
    left: auto;
    width: 0; height: 0;
    border-left: .42em solid rgba(255,255,255,.6);
    border-top: .3em solid transparent;
    border-bottom: .3em solid transparent;
    transform: translateY(-50%);
    transition: transform 200ms ease;
}
.records .open .table-title{ background: #333; }
.records .open .table-title:before{
    transform: translateY(-50%) rotate(90deg);
    border-left-color: var(--rec-accent);
}

/* ── Table / rows ────────────────────────────────────────────────────────────── */
.records .table-container{
    overflow: hidden;
    transition: height 250ms ease;
}
.records .table{
    display: block;
    width: 100%;
    background: transparent;
}
.records .table > a{
    display: block;
    color: inherit;
    text-decoration: none;
}

.records .row{
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1.1em 1.2em;
    border-top: 1px solid #2b2b2b;
    transition: background 120ms ease;
}
/* leader (rank 1) — accent left bar + faint lift */
.records .table > a:first-child .row{
    border-top: 0;
    background: rgba(255,255,255,.025);
    box-shadow: inset 4px 0 0 var(--rec-accent);
}

/* reset the legacy table-cell model */
.records .cell{
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    font-size: 1em;
    font-weight: 400;
    text-align: left;
    color: inherit;
}

/* rank chip */
.records .cell.linecount{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2em; height: 2.2em;
    margin-right: .4em;
    border-radius: 50%;
    background: #2c2c2c;
    color: #8a8a8a;
    font-size: 1.5em;
    font-weight: 700;
}
.records .table > a:first-child .row .cell.linecount{
    background: var(--rec-accent);
    color: #fff;
}

/* main info (frequency + cpu, then motherboard/ram) */
.records .cell.cpu-and-mb-infos{
    flex: 1 1 auto;
    min-width: 0;
}
.records .cpu-infos{
    display: block;
    color: #8f8f8f;
    font-size: 1.7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.records .cpu-infos b{
    color: var(--rec-accent);
    font-size: 1.10em;
    font-weight: 500;
}
.records .mb-infos{
    display: block;
    color: #fff;
    font-size: 1.3em;
    margin-top: .6em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* the <br> between the two block lines adds an empty line box — drop it so the
   spacing is controlled solely by .mb-infos margin-top */
.records .cpu-and-mb-infos br{ display: none; }

/* user + date */
.records .cell.username{
    flex: 0 0 14em;
    text-align: right;
    color: #d0d0d0;
    font-size: 1.4em;
    font-weight: 600;
    /* wrap onto a 2nd line instead of truncating mid-name */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.25;
}
.records .cell.date{
    flex: 0 0 12em;
    text-align: right;
    color: #777;
    font-size: 1.3em;
    white-space: nowrap;
}

/* engineering-sample badge */
.es-badge{
    display: inline-block;
    margin-left: .45em;
    padding: .05em .4em;
    border-radius: 4px;
    background: var(--rec-accent);
    color: #fff;
    font-size: .62em;
    font-weight: 700;
    letter-spacing: .06em;
    vertical-align: middle;
}