/* =====================================================================
   Drag Racing Top Lists — Public styles (self-contained modern theme)
   The .t30sc-theme wrapper sets its own colors so it never depends on
   the surrounding site background.
   ===================================================================== */

.t30sc-theme, .t30sc-theme * {
    box-sizing: border-box;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Stay within the theme's normal content width (no viewport breakout — that
   mis-centers on themes whose container is already offset). The table is sized
   to fit this width via compact fonts/padding below; if a narrow screen still
   can't fit it, the .t30sc-table-wrap allows a gentle scroll as a fallback. */
.t30sc-theme {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
}

.t30sc-theme {
    --bg:        #0f1419;
    --surface:   #1a2129;
    --surface-2: #232c37;
    --line:      #2e3a47;
    --text:      #e8edf2;
    --muted:     #9fb0c0;
    --accent:    #ff3b30;
    --accent-2:  #ffd23f;
    --ok:        #2ecc71;

    background: var(--bg) !important;
    color: var(--text) !important;
    border-radius: 14px;
    padding: 22px 22px 26px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
}

.t30sc-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .01em;
    margin: 0 0 16px;
    color: #fff !important;
    display: flex; align-items: center; gap: 10px;
}
.t30sc-listhead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.t30sc-listhead .t30sc-title { margin: 0; }
.t30sc-tabs { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 4px; gap: 2px; }
.t30sc-tab {
    display: inline-block; padding: 7px 18px; border-radius: 999px;
    font-size: 13px; font-weight: 700; text-decoration: none;
    color: var(--muted) !important; transition: background .12s, color .12s;
}
.t30sc-tab:hover { color: #fff !important; }
.t30sc-tab.is-active { background: var(--accent) !important; color: #fff !important; }

/* "Submit Your Time Slip" call-to-action (1.0.49). ID-free but !important-heavy
   because the site theme aggressively overrides link/button styles. */
.t30sc-wrap .t30sc-submit-cta {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 10px; padding: 10px 14px; margin: 0 0 16px;
}
.t30sc-wrap .t30sc-submit-cta-txt { color: var(--muted) !important; font-size: 14px; }
.t30sc-wrap a.t30sc-submit-btn {
    display: inline-block !important;
    background: var(--accent) !important; color: #fff !important;
    font-size: 14px !important; font-weight: 700 !important;
    text-decoration: none !important; border: 0 !important;
    border-radius: 999px !important; padding: 9px 20px !important;
    line-height: 1.2 !important; white-space: nowrap;
    transition: filter .12s;
}
.t30sc-wrap a.t30sc-submit-btn:hover { filter: brightness(1.12); color: #fff !important; }
.t30sc-title::before {
    content: ""; width: 6px; height: 26px; border-radius: 3px;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    display: inline-block;
}
.t30sc-empty { color: var(--muted); font-style: italic; padding: 10px 2px; }

/* ---- Table: content-sized columns, readable, theme-proof colors ---- */
.t30sc-table-wrap {
    width: 100%;
    overflow-x: auto;                 /* scroll ONLY if the viewport is too narrow */
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
}
.t30sc-table {
    width: 100%;
    table-layout: auto;               /* 1.0.47: columns size to their content (no fixed widths) */
    border-collapse: collapse;
    font-size: 12px;
    background: var(--surface) !important;
    border-radius: 10px;
    overflow: hidden;
}
.t30sc-table thead tr { background: var(--surface-2) !important; }
.t30sc-table thead th {
    padding: 8px 6px;
    text-align: left;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--muted) !important;
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.t30sc-table tbody td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--line);
    color: var(--text) !important;
    background: transparent !important;
    font-size: 12px;
    font-weight: 500 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.t30sc-table tbody tr { background: var(--surface) !important; }
.t30sc-table tbody tr:last-child td { border-bottom: none; }

/* Column sizing (1.0.47): table-layout is AUTO and there are NO hardcoded
   widths — every column sizes itself to the widest content it actually holds
   (cell value or header label), so short columns (Year, ET, MPH, Trans) stay
   tight and long ones (Driver, Model, Tires) get exactly the room they need.
   Cells never wrap or truncate (the global nowrap above applies to all
   columns); if the full content can't fit the theme's content area, the
   .t30sc-table-wrap scrolls horizontally instead of squeezing columns.
   Only alignment/emphasis is declared per column below.
   1.0.41: rules are keyed by class/data-key so admin reordering/hiding can't
   misalign them. 1.0.44: Settings -> List columns is the single source of
   truth for column visibility. */
.t30sc-table .c-rank  { text-align: center; }
.t30sc-table .c-model { font-weight: 600; }
.t30sc-table .c-et    { font-weight: 800; color: #fff !important; }
.t30sc-table .c-slip  { text-align: center; }
.t30sc-table .c-ver   { text-align: center; }

/* ---- DESKTOP TABLE SIZING HARDENING (1.0.59) ----
   Every LIST MUST RENDER IDENTICALLY on every page. Until 1.0.59 the table
   block protected only its COLOURS with !important (background / color /
   font-weight) and left every SIZING property bare: font-size, padding,
   line-height (never declared at all), border, text-transform, letter-spacing.
   The site theme styles `table`/`th`/`td` globally, so on a page whose template
   or section wrapper carries a different table rule the theme WINS on size and
   LOSES on colour — the board keeps its correct dark/amber palette but renders
   with a larger font and taller rows than the board next to it. That is exactly
   how two lists running identical markup came to look different.

   Scoped to min-width:769px ON PURPOSE — it is the exact complement of the
   `max-width: 768px` mobile block. Adding !important to the base rules instead
   would have out-ranked the mobile card rules (which set their own padding and
   font-size WITHOUT !important) and flattened the card layout. See the
   SPECIFICITY TRAP note in the mobile block below before editing this. */
@media (min-width: 769px) {
    .t30sc-wrap .t30sc-table-wrap { overflow-x: auto !important; }
    .t30sc-wrap table.t30sc-table {
        font-size: 12px !important;
        line-height: 1.35 !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
        width: 100% !important;
    }
    .t30sc-wrap table.t30sc-table thead th {
        font-size: 9.5px !important;
        line-height: 1.3 !important;
        padding: 8px 6px !important;
        text-transform: uppercase !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }
    .t30sc-wrap table.t30sc-table tbody td {
        font-size: 12px !important;
        line-height: 1.35 !important;
        padding: 8px 6px !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }
    /* The ET column is the one deliberate size exception. */
    .t30sc-wrap table.t30sc-table tbody td.c-et { font-size: 12px !important; }
    /* Theme rules that add row striping/height via tr padding. */
    .t30sc-wrap table.t30sc-table tbody tr,
    .t30sc-wrap table.t30sc-table thead tr { height: auto !important; }
}

.t30sc-gap-leader { color: var(--accent-2) !important; font-weight: 800; font-size: 10px; }
.t30sc-gap-val { color: var(--muted) !important; }

/* Clickable rows */
.t30sc-row { cursor: pointer; transition: background .12s; }
.t30sc-row:hover, .t30sc-row:hover td { background: var(--surface-2) !important; }
.t30sc-row:focus { outline: 2px solid var(--accent-2); outline-offset: -2px; }

/* Rank coloring */
/* Medal colors keyed to TRUE rank (PHP class), not row position — so the
   podium colors stay on ranks 1-3 even after visitor sorting (fixes a bug
   introduced with sortable columns in 1.0.38). */
.t30sc-row.t30sc-rank-1 .c-rank { color: var(--accent-2) !important; font-weight: 800; }
.t30sc-row.t30sc-rank-2 .c-rank { color: #c8d2dc !important; font-weight: 800; }
.t30sc-row.t30sc-rank-3 .c-rank { color: #d08a4a !important; font-weight: 800; }
.c-rank { color: var(--accent) !important; font-weight: 700; }

/* Movement arrows */
.t30sc-mv { font-size: 9px; margin-left: 3px; vertical-align: middle; }
.t30sc-mv-up   { color: var(--ok) !important; }
.t30sc-mv-down { color: var(--accent) !important; }
.t30sc-mv-same { color: var(--muted) !important; }
.t30sc-mv-newtag {
    font-size: 7.5px; font-weight: 800; letter-spacing: .04em;
    background: var(--accent-2); color: #1a2129; padding: 1px 4px; border-radius: 4px;
}

/* Run history table on detail page */
.t30sc-runs-table { width: 100%; max-width: 620px; border-collapse: collapse; margin-bottom: 8px; font-size: 13px; background: var(--surface) !important; }
.t30sc-runs-table th { text-align: left; padding: 9px 12px; background: var(--surface-2) !important; color: var(--muted) !important; font-weight: 700; font-size: 11px; text-transform: uppercase; border: 1px solid var(--line) !important; }
.t30sc-runs-table td { padding: 9px 12px; border: 1px solid var(--line) !important; color: var(--text) !important; background: var(--surface) !important; }
.t30sc-runs-table .t30sc-et { font-weight: 800; color: var(--accent-2) !important; }
.t30sc-run-best td { background: #1e2a22 !important; }
.t30sc-best-tag { font-size: 9px; font-weight: 800; background: var(--ok); color: #06281b; padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.t30sc-pending-tag { color: var(--muted) !important; font-style: italic; }
.t30sc-runs-note { font-size: 11.5px; color: var(--muted) !important; margin-top: 4px; max-width: 620px; }

/* =====================================================================
   Mobile (<=768px): the list table reflows into stacked, tappable cards.
   Redesigned in 1.0.52.

   HOW IT WORKS: there is no separate mobile template — the same <td>s are
   re-laid-out. The row becomes a FLEX container and every cell is placed by
   `order`, so the admin can reorder or hide columns (Settings -> List columns)
   without breaking the card. Labels come from each cell's data-label.

   CARD ANATOMY
     [ 3 ]  1997 Toyota Chaser                            [ ]  <- rank badge, title, compare box
            Johnathan Harsveld                                 <- driver
     ---------------------------------------------------------
     ET            MPH                                         <- stat strip
     09.31         146.31
     ---------------------------------------------------------
     v TAP FOR DETAILS                                         <- expands the rest

   BUGS THIS REPLACES (both visible in the 1.0.51 mobile screenshot):
   1. The rank badge had no background: the global
      `.t30sc-table tbody td { background: transparent !important }` beat the
      badge's un-!important background, and `.t30sc-row.t30sc-rank-1 .c-rank`
      (higher specificity) beat its text color. Every rule below that fights
      those two therefore carries !important AND enough specificity to win.
   2. MPH rendered BELOW the "Tap for details" hint, because the hint was
      injected straight after the ET cell and MPH is the next column. Ordering
      is now explicit and no longer depends on DOM position.

   CRITICAL CSS LESSON (kept from 1.0.13): the desktop
   `white-space:nowrap; overflow:hidden; text-overflow:ellipsis` leaks into
   mobile and clips values — it must be reset to normal/visible/clip.
   ===================================================================== */
@media (max-width: 768px) {
    /* The podium duplicates the top 3 cards — hide it on a small screen. */
    .t30sc-podium { display: none !important; }

    .t30sc-table-wrap { overflow-x: visible; }
    .t30sc-table { table-layout: auto; min-width: 0; background: transparent !important; width: 100%; }
    .t30sc-table thead { display: none; }
    .t30sc-table, .t30sc-table tbody, .t30sc-table tr { display: block; width: 100%; }
    .t30sc-table td {
        display: block;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: 100% !important;
    }

    /* ---------- The card ---------- */
    .t30sc-table tbody tr.t30sc-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        background: var(--surface) !important;
        border: 1px solid var(--line);
        border-left: 3px solid var(--line);
        border-radius: 14px;
        margin-bottom: 12px;
        padding: 14px 46px 13px 14px;   /* right gutter reserves room for the compare box */
        position: relative;
        box-sizing: border-box;
        cursor: pointer;
    }
    /* Medal accent down the left edge of the top 3. */
    .t30sc-table tbody tr.t30sc-row.t30sc-rank-1 { border-left-color: var(--accent-2); }
    .t30sc-table tbody tr.t30sc-row.t30sc-rank-2 { border-left-color: #c8d2dc; }
    .t30sc-table tbody tr.t30sc-row.t30sc-rank-3 { border-left-color: #d08a4a; }
    /* Touching a card shouldn't leave a permanent focus ring; keyboard still gets one. */
    .t30sc-table tbody tr.t30sc-row:focus { outline: none; }
    .t30sc-table tbody tr.t30sc-row:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

    .t30sc-table tbody tr.t30sc-row td {
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
        text-align: left !important;
        color: var(--text) !important;
        font-size: 13px;
        line-height: 1.35;
    }
    /* Default label (used by the expanded detail rows). */
    .t30sc-table tbody tr.t30sc-row td::before {
        content: attr(data-label);
        color: var(--muted) !important;
        font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
        white-space: nowrap;
        flex: 0 0 auto;
        min-width: 70px;
    }

    /* ---------- 1. Rank badge ---------- */
    .t30sc-table tbody tr.t30sc-row td.c-rank {
        order: 1;
        flex: 0 0 auto;
        display: inline-flex !important;
        align-items: center; justify-content: center; gap: 4px;
        min-width: 36px; height: 30px;
        padding: 0 9px !important;
        margin: 0 10px 0 0 !important;
        border-radius: 9px;
        background: var(--surface-2) !important;
        border: 1px solid var(--line);
        color: var(--text) !important;
        font-size: 14px; font-weight: 800;
    }
    .t30sc-table tbody tr.t30sc-row td.c-rank::before { display: none !important; }
    .t30sc-table tbody tr.t30sc-rank-1 td.c-rank { background: var(--accent-2) !important; border-color: var(--accent-2); color: #1a1205 !important; }
    .t30sc-table tbody tr.t30sc-rank-2 td.c-rank { background: #c8d2dc !important;        border-color: #c8d2dc;        color: #151b21 !important; }
    .t30sc-table tbody tr.t30sc-rank-3 td.c-rank { background: #d08a4a !important;        border-color: #d08a4a;        color: #1a1205 !important; }

    /* Movement arrow lives inside the badge — recolor it on the light medal
       badges, where the default green/red would be unreadable. */
    .t30sc-table tbody tr.t30sc-row td.c-rank .t30sc-mv { font-size: 10px; margin: 0; }
    .t30sc-table tbody tr.t30sc-rank-1 td.c-rank .t30sc-mv-up,
    .t30sc-table tbody tr.t30sc-rank-2 td.c-rank .t30sc-mv-up,
    .t30sc-table tbody tr.t30sc-rank-3 td.c-rank .t30sc-mv-up   { color: #0d5c33 !important; }
    .t30sc-table tbody tr.t30sc-rank-1 td.c-rank .t30sc-mv-down,
    .t30sc-table tbody tr.t30sc-rank-2 td.c-rank .t30sc-mv-down,
    .t30sc-table tbody tr.t30sc-rank-3 td.c-rank .t30sc-mv-down { color: #8c1d18 !important; }
    .t30sc-table tbody tr.t30sc-rank-1 td.c-rank .t30sc-mv-same,
    .t30sc-table tbody tr.t30sc-rank-2 td.c-rank .t30sc-mv-same,
    .t30sc-table tbody tr.t30sc-rank-3 td.c-rank .t30sc-mv-same { color: rgba(0,0,0,.45) !important; }
    /* The NEW tag is amber by default — invisible on a gold badge. */
    .t30sc-table tbody tr.t30sc-row td.c-rank .t30sc-mv-newtag {
        background: var(--accent); color: #fff !important; font-size: 7px; padding: 1px 3px;
    }

    /* ---------- 2-4. Headline: "1997 Toyota Chaser" ----------
       Three separate cells rendered as one sentence. c-model grows to fill the
       rest of the line, which is what pushes the stat strip onto its own row. */
    .t30sc-table tbody tr.t30sc-row td[data-key="year"],
    .t30sc-table tbody tr.t30sc-row td[data-key="make"],
    .t30sc-table tbody tr.t30sc-row td.c-model {
        display: inline-block !important;
        width: auto !important;
        flex: 0 0 auto;
        padding: 0 !important;
        font-size: 17px; line-height: 1.25; font-weight: 800;
        color: #fff !important;
    }
    .t30sc-table tbody tr.t30sc-row td[data-key="year"]::before,
    .t30sc-table tbody tr.t30sc-row td[data-key="make"]::before,
    .t30sc-table tbody tr.t30sc-row td.c-model::before { display: none !important; }
    .t30sc-table tbody tr.t30sc-row td[data-key="year"] { order: 2; margin-right: 6px !important; color: var(--muted) !important; font-weight: 700; }
    .t30sc-table tbody tr.t30sc-row td[data-key="make"] { order: 3; margin-right: 6px !important; }
    .t30sc-table tbody tr.t30sc-row td.c-model          { order: 4; flex: 1 1 auto; }

    /* ---------- 5. Driver ---------- */
    .t30sc-table tbody tr.t30sc-row td.c-driver {
        order: 5;
        flex: 0 0 100%;
        display: block !important;
        padding: 3px 0 0 !important;
        color: var(--muted) !important;
        font-size: 13px; font-weight: 600;
    }
    .t30sc-table tbody tr.t30sc-row td.c-driver::before { display: none !important; }
    .t30sc-table tbody tr.t30sc-row td.c-driver:empty { display: none !important; }

    /* ---------- 6-7. Stat strip: ET (hero) + MPH ---------- */
    .t30sc-table tbody tr.t30sc-row td.c-et,
    .t30sc-table tbody tr.t30sc-row td[data-key="mph"] {
        flex: 0 0 auto;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 0 0 !important;
    }
    .t30sc-table tbody tr.t30sc-row td.c-et::before,
    .t30sc-table tbody tr.t30sc-row td[data-key="mph"]::before {
        min-width: 0 !important;
        margin-bottom: 3px;
        font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
    }
    .t30sc-table tbody tr.t30sc-row td.c-et {
        order: 6;
        margin-right: 28px !important;
        font-size: 28px; font-weight: 800; line-height: 1;
        color: var(--accent-2) !important;
    }
    .t30sc-table tbody tr.t30sc-row td[data-key="mph"] {
        order: 7;
        font-size: 19px; font-weight: 800; line-height: 1;
        color: var(--text) !important;
    }

    /* ---------- 20+. Collapsible detail: hidden until the card is opened ---------- */
    .t30sc-table tbody tr.t30sc-row td[data-key="engine"],
    .t30sc-table tbody tr.t30sc-row td[data-key="adder1"],
    .t30sc-table tbody tr.t30sc-row td[data-key="adder2"],
    .t30sc-table tbody tr.t30sc-row td[data-key="trans"],
    .t30sc-table tbody tr.t30sc-row td[data-key="tires"],
    .t30sc-table tbody tr.t30sc-row td.c-gap,
    .t30sc-table tbody tr.t30sc-row td[data-key="run_date"],
    .t30sc-table tbody tr.t30sc-row td.c-slip,
    .t30sc-table tbody tr.t30sc-row td.c-ver {
        display: none !important;
    }
    .t30sc-table tbody tr.t30sc-row.is-open td[data-key="engine"],
    .t30sc-table tbody tr.t30sc-row.is-open td[data-key="adder1"],
    .t30sc-table tbody tr.t30sc-row.is-open td[data-key="adder2"],
    .t30sc-table tbody tr.t30sc-row.is-open td[data-key="trans"],
    .t30sc-table tbody tr.t30sc-row.is-open td[data-key="tires"],
    .t30sc-table tbody tr.t30sc-row.is-open td.c-gap,
    .t30sc-table tbody tr.t30sc-row.is-open td[data-key="run_date"],
    .t30sc-table tbody tr.t30sc-row.is-open td.c-slip,
    .t30sc-table tbody tr.t30sc-row.is-open td.c-ver {
        display: flex !important;
        flex: 0 0 100%;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        padding: 7px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.05) !important;
    }
    .t30sc-table tbody tr.t30sc-row.is-open td[data-key="engine"]   { order: 20; }
    .t30sc-table tbody tr.t30sc-row.is-open td[data-key="adder1"]   { order: 21; }
    .t30sc-table tbody tr.t30sc-row.is-open td[data-key="adder2"]   { order: 22; }
    .t30sc-table tbody tr.t30sc-row.is-open td[data-key="trans"]    { order: 23; }
    .t30sc-table tbody tr.t30sc-row.is-open td[data-key="tires"]    { order: 24; }
    .t30sc-table tbody tr.t30sc-row.is-open td.c-gap                { order: 25; }
    .t30sc-table tbody tr.t30sc-row.is-open td[data-key="run_date"] { order: 26; }
    .t30sc-table tbody tr.t30sc-row.is-open td.c-slip               { order: 27; }
    .t30sc-table tbody tr.t30sc-row.is-open td.c-ver                { order: 28; justify-content: space-between; }
    /* First detail row opens the block. */
    .t30sc-table tbody tr.t30sc-row.is-open td[data-key="engine"] {
        margin-top: 10px;
        border-top: 1px solid var(--line) !important;
        padding-top: 12px !important;
    }
    /* The detail cells right-align their VALUE against the label. */
    .t30sc-table tbody tr.t30sc-row.is-open td.c-slip,
    .t30sc-table tbody tr.t30sc-row.is-open td.c-ver { text-align: right !important; }

    /* ---------- 90. Tap hint (injected by public.js) ---------- */
    .t30sc-tap-hint {
        order: 90;
        flex: 0 0 100%;
        margin-top: 12px; padding-top: 10px;
        border-top: 1px solid var(--line);
        font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
        color: var(--muted);
    }
    .t30sc-row.is-open .t30sc-tap-hint .lbl-more { display: none; }
    .t30sc-row:not(.is-open) .t30sc-tap-hint .lbl-less { display: none; }

    /* ---------- 100. "View full details" — only when open ---------- */
    .t30sc-card-detail { display: none; }
    .t30sc-row.is-open .t30sc-card-detail {
        order: 100;
        flex: 0 0 100%;
        display: block;
        margin-top: 12px;
        padding: 10px 14px;
        border-radius: 9px;
        background: var(--surface-2);
        border: 1px solid var(--line);
        color: var(--accent-2) !important;
        font-weight: 800; font-size: 13px; text-align: center; text-decoration: none;
    }

    /* Breadcrumbs sit a little tighter on a phone. */
    .t30sc-crumbs { gap: 8px 10px; margin-bottom: 12px; }
    .t30sc-crumb { font-size: 12px; padding: 6px 11px; }
}

/* Very small phones: trim a touch. */
@media (max-width: 380px) {
    .t30sc-table tbody tr.t30sc-row { padding: 12px 42px 11px 12px; }
    .t30sc-table tbody tr.t30sc-row td[data-key="year"],
    .t30sc-table tbody tr.t30sc-row td[data-key="make"],
    .t30sc-table tbody tr.t30sc-row td.c-model { font-size: 15.5px; }
    .t30sc-table tbody tr.t30sc-row td.c-et { font-size: 24px; margin-right: 20px !important; }
    .t30sc-table tbody tr.t30sc-row td[data-key="mph"] { font-size: 17px; }
    .t30sc-table tbody tr.t30sc-row td::before { min-width: 62px; }
}

.t30sc-slip-link { color: var(--accent-2) !important; text-decoration: none; font-weight: 600; }
.t30sc-slip-link:hover { text-decoration: underline; }
.t30sc-slip-icon { font-size: 13px; }
.t30sc-dash { color: var(--muted) !important; }

.t30sc-verified, .t30sc-verified * { color: #2ecc71 !important; font-weight: 800; }
.t30sc-table .c-ver .t30sc-verified { color: #2ecc71 !important; }
.t30sc-legacy-tag {
    background: #4a3a14; color: var(--accent-2);
    font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: 8px; vertical-align: middle;
}

/* NOTE (1.0.52): the old "shrink further on small screens" blocks that used to
   live here (@media 768 / 540, setting .t30sc-table font-size 10.5px/9px and
   thead padding) are GONE. They were written for the pre-1.0.25 mobile TABLE.
   The table no longer exists on mobile — thead is display:none and every card
   cell now sets its own size — so those rules only fought the card layout. */

/* ---- Cards ---- */
.t30sc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 16px; }
.t30sc-card {
    display: block; text-decoration: none; color: var(--text);
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    overflow: hidden; position: relative; transition: transform .15s, border-color .15s;
}
.t30sc-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.t30sc-card-rank {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: var(--accent); color: #fff; font-weight: 800; font-size: 13px;
    padding: 3px 11px; border-radius: 14px;
}
.t30sc-card-img { width: 100%; aspect-ratio: 4/3; background-size: cover; background-position: center; }
.t30sc-card-noimg { display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.t30sc-card-body { padding: 12px 14px; }
.t30sc-card-name { font-weight: 700; font-size: 14px; margin-bottom: 3px; color: #fff; }
.t30sc-card-meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.t30sc-card-stats { display: flex; gap: 14px; font-size: 13px; }
.t30sc-card-et { font-weight: 800; color: var(--accent-2); }

/* ---- Breadcrumbs (1.0.52) ----
   Rendered on every public view that is NOT the landing page. Colors carry
   literal fallbacks because [drag_legacy_list] and the submission form are not
   always wrapped in .t30sc-theme (where the CSS variables are declared). */
.t30sc-crumbs {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px 16px; margin: 0 0 14px;
}
.t30sc-crumb {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--surface-2, #232c37) !important;
    border: 1px solid var(--line, #2e3a47);
    color: var(--accent-2, #ffd23f) !important;
    text-decoration: none !important;
    font-size: 12.5px; font-weight: 700; line-height: 1.2;
}
.t30sc-crumb:hover, .t30sc-crumb:focus {
    background: var(--line, #2e3a47) !important;
    color: #fff !important;
    text-decoration: none !important;
}
.t30sc-detail .t30sc-crumbs { margin-bottom: 16px; }

/* ---- Detail ---- */
.t30sc-detail { max-width: 780px; }
.t30sc-back { display: inline-block; margin-bottom: 14px; color: var(--accent-2) !important; text-decoration: none; font-size: 13px; }
.t30sc-back:hover { text-decoration: underline; }
/* Inside the crumb bar the back link IS a crumb — drop the standalone spacing. */
.t30sc-crumbs .t30sc-back { margin-bottom: 0; }
.t30sc-detail-title { font-size: 1.5rem; font-weight: 800; color: #fff !important; margin-bottom: 16px; }
.t30sc-detail-hero { width: 100%; max-width: 640px; border-radius: 12px; margin-bottom: 18px; display: block; }
.t30sc-detail-specs { width: 100%; max-width: 560px; border-collapse: collapse; margin-bottom: 18px; font-size: 14px; background: var(--surface) !important; }
.t30sc-detail-specs th {
    text-align: left; padding: 11px 14px;
    background: var(--surface-2) !important; color: var(--muted) !important;
    width: 170px; font-weight: 700; border: 1px solid var(--line) !important;
}
.t30sc-detail-specs td {
    padding: 11px 14px; border: 1px solid var(--line) !important;
    color: var(--text) !important; background: var(--surface) !important; font-weight: 500;
}
.t30sc-detail-specs .t30sc-et { font-weight: 800; color: var(--accent-2) !important; }
.t30sc-detail-sub { font-size: 1.05rem; font-weight: 700; color: #fff !important; margin: 18px 0 10px; }
.t30sc-detail-video { margin-bottom: 18px; }
.t30sc-gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.t30sc-gallery img { width: 150px; height: 112px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* ---- Submission form (polished, modern card) ---- */
.t30sc-submit-wrap {
    max-width: 1120px; margin: 0 auto;
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
    border: 1px solid #e6e8ec; border-radius: 16px;
    padding: 34px 40px; box-shadow: 0 10px 40px rgba(0,0,0,.08);
}
.t30sc-submit-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 4px; color: #14181d; display:flex; align-items:center; gap:10px; }
.t30sc-submit-title::before { content:"\1F3C1"; font-size: 1.4rem; }
.t30sc-submit-note { color: #6a7480; font-size: 13.5px; margin-bottom: 22px; }
.t30sc-submit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 28px; margin-bottom: 22px; }
@media (max-width: 900px){ .t30sc-submit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .t30sc-submit-grid { grid-template-columns: 1fr; } }
.t30sc-submit-grid label { display: flex; flex-direction: column; align-items: stretch; font-size: 12px; font-weight: 700; gap: 6px; color: #59636f; text-transform: uppercase; letter-spacing: .03em; }
/* Field name row: keeps the label text and its required asterisk on one line. */
.t30sc-submit-grid .t30sc-fname { display: block; line-height: 1.25; }
/* Hint sits directly under the field name, above the input. */
.t30sc-submit-grid .t30sc-hint { margin: -1px 0 3px; }
.t30sc-submit-grid > label { width: 100%; min-width: 0; box-sizing: border-box; }
.t30sc-submit-grid input, .t30sc-submit-grid select {
    padding: 13px 14px; min-height: 48px; border: 1.5px solid #dde1e6; border-radius: 10px; font-size: 15px;
    font-weight: 500; text-transform: none; letter-spacing: 0; color: #14181d;
    background: #fff; transition: border-color .15s, box-shadow .15s;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    box-sizing: border-box !important; display: block !important;
}
.t30sc-submit-form .t30sc-submit-grid input,
.t30sc-submit-form .t30sc-submit-grid select { width: 100% !important; }
/* Highest-specificity override (ID) to beat stubborn theme input rules. */
#t30sc-submit-form .t30sc-submit-grid label > input,
#t30sc-submit-form .t30sc-submit-grid label > select {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    box-sizing: border-box !important; display: block !important; flex: 1 1 auto !important;
}
.t30sc-submit-grid input:focus, .t30sc-submit-grid select:focus {
    outline: none; border-color: #ff3b30; box-shadow: 0 0 0 3px rgba(255,59,48,.12);
}
/* Field guide/help text shown under inputs and uploads. */
.t30sc-hint { font-size: 11px; font-weight: 500; line-height: 1.35; color: #8a939d; text-transform: none; letter-spacing: 0; }
/* Required-field asterisk. */
.t30sc-req { color: #c0392b; font-weight: 800; }
/* Power Adder 2 locked (greyed) while Power Adder 1 is "None". */
.t30sc-submit-grid select.t30sc-locked, select.t30sc-locked {
    background: #f1f2f4 !important; color: #9aa3ad !important; cursor: not-allowed; opacity: .75;
}
.t30sc-submit-uploads { display: flex; gap: 20px; flex-wrap: wrap; border-top: 1px solid #ececf0; padding-top: 20px; margin-bottom: 18px; }
.t30sc-submit-upload {
    flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px;
    font-size: 12px; font-weight: 700; color: #59636f; text-transform: uppercase; letter-spacing: .03em;
    background: #fff; border: 1.5px dashed #d4d8dd; border-radius: 12px; padding: 16px;
}
.t30sc-submit-preview img { width: 110px; height: 110px; object-fit: cover; border-radius: 9px; border: 1px solid #ccc; }
.t30sc-submit-file { font-size: 12px; }
.t30sc-clear-photo { background: none; border: none; color: #c0392b; cursor: pointer; font-size: 11px; text-align: left; padding: 0; text-transform: none; letter-spacing: 0; }
.t30sc-submit-btn {
    background: linear-gradient(180deg, #ff5a4d, #ff3b30); color: #fff; border: none; border-radius: 10px;
    padding: 13px 30px; font-size: 15px; font-weight: 800; cursor: pointer; letter-spacing: .02em;
    box-shadow: 0 6px 18px rgba(255,59,48,.32); transition: transform .12s, box-shadow .12s;
}
.t30sc-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,59,48,.4); }
.t30sc-submit-msg { margin-top: 12px; font-size: 13.5px; font-weight: 600; }
.t30sc-recaptcha-note { font-size: 11px; color: #9aa3ad; margin-top: 12px; }
.t30sc-recaptcha-note a { color: #9aa3ad; }

/* Honeypot: visually hidden but NOT display:none (some bots skip those) */
.t30sc-hp-wrap { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 0; overflow: hidden; }

/* ===== Podium ===== */
.t30sc-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; align-items: end; }
@media (max-width: 640px){ .t30sc-podium { grid-template-columns: 1fr; } }
.t30sc-pod { display: block; text-decoration: none; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; position: relative; transition: transform .15s, box-shadow .15s; }
.t30sc-pod:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.t30sc-pod-medal { position: absolute; top: 10px; left: 10px; z-index: 2; font-weight: 800; font-size: 15px; padding: 4px 12px; border-radius: 14px; color: #1a2129; }
.t30sc-pod-p1 { border-color: #ffd23f; }
.t30sc-pod-p1 .t30sc-pod-medal { background: linear-gradient(180deg,#ffe27a,#ffd23f); }
.t30sc-pod-p2 .t30sc-pod-medal { background: linear-gradient(180deg,#e3e9ef,#c8d2dc); }
.t30sc-pod-p3 .t30sc-pod-medal { background: linear-gradient(180deg,#e0a467,#d08a4a); }
.t30sc-pod-p1 { transform: scale(1.04); }   /* leader sits slightly taller */
.t30sc-pod-img { width: 100%; aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: #11161c; display: flex; align-items: center; justify-content: center; }
.t30sc-pod-noimg { color: var(--muted); font-size: 12px; }
/* When there's no photo, don't reserve a huge 16:10 box — especially on mobile.
   The .t30sc-card-noimg-box class (added in markup) is the reliable fallback;
   :has() refines it on modern browsers. */
.t30sc-pod-img.t30sc-pod-img-empty { aspect-ratio: auto !important; min-height: 64px; }
.t30sc-pod-img:has(.t30sc-pod-noimg) { aspect-ratio: auto; min-height: 64px; }
.t30sc-pod-body { padding: 12px 14px 14px; }
.t30sc-pod-name { font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 6px; }
.t30sc-pod-et { font-size: 26px; font-weight: 800; color: var(--accent-2); line-height: 1; }
.t30sc-pod-unit { font-size: 13px; color: var(--muted); margin-left: 2px; }
.t30sc-pod-mph { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ===== Stats row ===== */
.t30sc-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 640px){ .t30sc-stats { grid-template-columns: repeat(2, 1fr); } }
.t30sc-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; }
.t30sc-stat-v { display: block; font-size: 22px; font-weight: 800; color: #fff; line-height: 1.1; }
.t30sc-stat-v.t30sc-good { color: var(--ok); }
.t30sc-stat-l { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 5px; }

/* ===== ET progression chart ===== */
.t30sc-chart-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 18px; }
.t30sc-chart { width: 100%; height: auto; }
.t30sc-axis { stroke: var(--line); stroke-width: 1; }
.t30sc-chart-line { stroke: var(--accent-2); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.t30sc-chart-dot { fill: #5b6675; }
.t30sc-chart-dot.t30sc-dot-v { fill: var(--ok); }
.t30sc-chart-lbl { fill: var(--muted); font-size: 11px; }
.t30sc-chart-cap { font-size: 11.5px; color: var(--muted); margin-top: 8px; text-align: center; }

/* ===== Movers ticker ===== */
.t30sc-ticker { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 16px; overflow: hidden; }
.t30sc-ticker-label { flex: 0 0 auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); background: rgba(255,59,48,.12); padding: 4px 9px; border-radius: 6px; }
.t30sc-ticker-track { display: flex; gap: 22px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.t30sc-ticker-track::-webkit-scrollbar { display: none; }
.t30sc-ticker-item { font-size: 12.5px; color: var(--text); }
.t30sc-tick-new { font-size: 9px; font-weight: 800; background: var(--accent-2); color: #1a2129; padding: 1px 5px; border-radius: 4px; }
.t30sc-tick-up { color: var(--ok); font-weight: 800; }

/* ===== Class records banner ===== */
.t30sc-classrec { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.t30sc-classrec-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #fff; margin-bottom: 12px; }
.t30sc-classrec-h span { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; margin-left: 6px; font-size: 11px; }
.t30sc-classrec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
.t30sc-classrec-card { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; text-decoration: none; transition: border-color .12s; }
.t30sc-classrec-card:hover { border-color: var(--accent); }
.t30sc-classrec-eng { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.t30sc-classrec-et { font-size: 19px; font-weight: 800; color: var(--accent-2); }
.t30sc-classrec-car { font-size: 12px; color: var(--text); }

/* ===== Proof icons ===== */
.t30sc-proofs { font-size: 12px; }
.t30sc-proof { margin-left: 1px; }

/* ===== Share buttons ===== */
.t30sc-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.t30sc-share-label { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.t30sc-share-btn { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 8px; text-decoration: none; border: none; cursor: pointer; color: #fff !important; }
.t30sc-share-fb { background: #1877f2; }
.t30sc-share-wa { background: #25d366; }
.t30sc-share-copy { background: var(--surface-2); color: var(--text) !important; border: 1px solid var(--line); }
.t30sc-share-btn:hover { filter: brightness(1.08); }

/* ===== Mobile polish for detail page, header, run history ===== */
@media (max-width: 768px) {
    .t30sc-theme { padding: 16px 14px 20px; border-radius: 12px; }
    .t30sc-listhead { flex-direction: column; align-items: flex-start; gap: 10px; }
    .t30sc-tabs { width: 100%; }
    .t30sc-tab { flex: 1; text-align: center; }
    .t30sc-title { font-size: 1.25rem; }

    /* Submit CTA: stacked, full-width tap target */
    .t30sc-wrap .t30sc-submit-cta { flex-direction: column; align-items: stretch; text-align: center; }
    .t30sc-wrap a.t30sc-submit-btn { display: block !important; text-align: center; }

    /* Detail spec table -> stacked rows */
    .t30sc-detail-specs, .t30sc-detail-specs tbody, .t30sc-detail-specs tr, .t30sc-detail-specs th, .t30sc-detail-specs td { display: block; width: 100%; }
    .t30sc-detail-specs tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
    .t30sc-detail-specs th { border: none !important; background: transparent !important; padding: 2px 0; color: var(--muted) !important; font-size: 11px; text-transform: uppercase; }
    .t30sc-detail-specs td { border: none !important; padding: 2px 0 6px; font-size: 15px; }

    /* Run history table -> stacked */
    .t30sc-runs-table thead { display: none; }
    .t30sc-runs-table, .t30sc-runs-table tbody, .t30sc-runs-table tr, .t30sc-runs-table td { display: block; width: 100%; }
    .t30sc-runs-table tr { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; padding: 8px 12px; }
    .t30sc-runs-table td { border: none !important; display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
    .t30sc-runs-table td::before { content: attr(data-label); color: var(--muted) !important; font-size: 10.5px; font-weight: 700; text-transform: uppercase; }

    .t30sc-stats { grid-template-columns: repeat(2, 1fr); }
    .t30sc-detail-hero { max-width: 100%; }
    .t30sc-share { gap: 8px; }
    .t30sc-share-btn { flex: 1; text-align: center; }
}

/* "Not track verified" flag for GPS (Dragy) runs */
.t30sc-nottrack {
    display: inline-block; margin-left: 6px;
    font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    color: #ffb02e !important; background: rgba(255,176,46,.14);
    border: 1px solid rgba(255,176,46,.4); border-radius: 5px; padding: 1px 5px; white-space: nowrap;
}

/* Image lightbox/popup */
.t30sc-lightbox {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center;
    padding: 20px; box-sizing: border-box;
}
.t30sc-lightbox-inner { position: relative; max-width: 92vw; max-height: 90vh; }
.t30sc-lightbox-inner img { max-width: 92vw; max-height: 82vh; border-radius: 10px; display: block; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.t30sc-lightbox-cap { text-align: center; color: #fff; font-size: 13px; margin-top: 10px; font-weight: 600; }
.t30sc-lightbox-close {
    position: absolute; top: -14px; right: -14px; width: 38px; height: 38px;
    border-radius: 50%; border: none; background: #fff; color: #111; font-size: 22px; line-height: 1;
    cursor: pointer; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.t30sc-lightbox-close:hover { background: #f0f0f0; }
@media (max-width: 600px){ .t30sc-lightbox-close { top: -10px; right: -6px; } }

/* Legacy status badge on detail page */
.t30sc-legacy-status { display: inline-block; background: #4a3a14; color: var(--accent-2) !important; font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 8px; }

/* ===== Search + filter bar (client-side table filtering) ===== */
.t30sc-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
/* 1.0.45 layout: the search box takes the whole first row; the dropdown
   filters and Clear button share the row below it. */
.t30sc-filters .t30sc-filter-text { flex: 1 1 100%; min-width: 180px; }
.t30sc-filters .t30sc-filter-sel { flex: 1 1 200px; }
.t30sc-filter-text,
.t30sc-filter-sel {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 13px; font-weight: 600;
    font-family: inherit; line-height: 1.2;
    outline: none;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.t30sc-filter-text::placeholder { color: var(--muted); opacity: 1; }
.t30sc-filter-text:focus,
.t30sc-filter-sel:focus { border-color: var(--accent); }
/* Custom chevron so the native select matches the dark theme */
.t30sc-filter-sel {
    cursor: pointer; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239fb0c0' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}
.t30sc-filter-sel option { background: var(--surface-2); color: var(--text); }
.t30sc-filter-clear {
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--line); border-radius: 9px;
    padding: 9px 16px; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: border-color .12s, color .12s;
}
.t30sc-filter-clear:hover { border-color: var(--accent); color: #fff; }
.t30sc-filter-count { font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }

/* Hidden rows (filtered out). !important beats the mobile display:block/flex rules. */
.t30sc-hide { display: none !important; }

/* Empty-state row */
.t30sc-noresults td {
    text-align: center; color: var(--muted) !important;
    font-style: italic; padding: 18px 8px !important;
}

@media (max-width: 768px) {
    .t30sc-filters { gap: 8px; }
    .t30sc-filters .t30sc-filter-text,
    .t30sc-filters .t30sc-filter-sel,
    .t30sc-filters .t30sc-filter-clear { flex: 1 1 100%; width: 100%; }
    .t30sc-filter-count { margin-left: 0; width: 100%; }
    /* The empty-state row is reflowed by the mobile card rules; keep it readable. */
    .t30sc-table tbody tr.t30sc-noresults { border: 1px dashed var(--line); border-radius: 12px; padding: 14px; }
    .t30sc-table tbody tr.t30sc-noresults td { display: block !important; }
    .t30sc-table tbody tr.t30sc-noresults td::before { display: none; }
}

/* Public credit line: plugin version + developer copyright (added 1.0.34). */
.t30sc-wrap .t30sc-credit,
.t30sc-credit {
    margin: 14px 0 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.12);
    text-align: center;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .02em;
    color: #8a8f98;
    opacity: .85;
}

/* ===== 1.0.38: sortable column headers ===== */
.t30sc-table thead th.t30sc-sortable { cursor: pointer; user-select: none; }
.t30sc-table thead th.t30sc-sortable:hover { color: var(--accent-2) !important; }
.t30sc-table thead th.t30sc-sortable::after { content: "\2195"; opacity: .35; margin-left: 4px; font-size: 10px; }
.t30sc-table thead th.t30sc-sort-asc::after  { content: "\2191"; opacity: 1; }
.t30sc-table thead th.t30sc-sort-desc::after { content: "\2193"; opacity: 1; }

/* ===== 1.0.38: lightbox prev/next navigation ===== */
.t30sc-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%; width: 42px; height: 42px; font-size: 18px; line-height: 1;
    cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center;
}
.t30sc-lightbox-nav:hover { background: rgba(0,0,0,.8); }
.t30sc-lightbox-prev { left: -14px; }
.t30sc-lightbox-next { right: -14px; }
@media (max-width: 600px){
    .t30sc-lightbox-prev { left: 4px; }
    .t30sc-lightbox-next { right: 4px; }
}
.t30sc-lightbox-count { opacity: .7; font-weight: 400; margin-left: 8px; }

/* ===== 1.0.38: best-ever line on detail analysis ===== */
.t30sc-bestline { font-size: 14px; color: var(--text); margin: 0 0 12px; }
.t30sc-bestline strong { color: var(--accent-2); }
.t30sc-bestline-date { color: var(--muted); }

/* ===== 1.0.39: quick-filter chips ===== */
.t30sc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.t30sc-chip {
    background: var(--surface); color: var(--muted); border: 1px solid var(--line);
    border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.t30sc-chip:hover { color: var(--text); border-color: var(--accent-2); }
.t30sc-chip-on {
    background: var(--accent-2) !important; color: #1a1d23 !important;
    border-color: var(--accent-2) !important;
}

/* ===== 1.0.39: records & milestones banner ===== */
.t30sc-miles { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.t30sc-mile {
    flex: 1 1 200px; min-width: 180px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
    text-decoration: none !important; display: flex; flex-direction: column; gap: 2px;
}
.t30sc-mile:hover { border-color: var(--accent-2); }
.t30sc-mile-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-2); font-weight: 700; }
.t30sc-mile-car { font-size: 13.5px; font-weight: 700; color: var(--text); }
.t30sc-mile-v { font-size: 12px; color: var(--muted); }

/* ===== 1.0.39: latest verified runs feed ===== */
.t30sc-recent { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
.t30sc-recent-h { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .05em; }
.t30sc-recent-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.t30sc-recent-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.t30sc-recent-item:last-child { border-bottom: none; }
.t30sc-recent-car { font-weight: 700; color: var(--text) !important; text-decoration: none !important; }
.t30sc-recent-car:hover { color: var(--accent-2) !important; }
.t30sc-recent-et { color: var(--accent-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.t30sc-recent-mph { color: var(--muted); font-size: 12.5px; }
.t30sc-recent-meta { color: var(--muted); font-size: 11.5px; margin-left: auto; }
@media (max-width: 600px){ .t30sc-recent-meta { margin-left: 0; flex-basis: 100%; } }

/* ===== 1.0.39: public stats overview ===== */
.t30sc-pubstats { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
.t30sc-pubstats-table { width: 100%; border-collapse: collapse; margin: 4px 0 16px; font-size: 13px; }
.t30sc-pubstats-table th { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.t30sc-pubstats-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); color: var(--text); }
.t30sc-pubstats-table tr:last-child td { border-bottom: none; }
.t30sc-pubstats-chart-h { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.t30sc-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.t30sc-bar-lbl { flex: 0 0 130px; font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t30sc-bar-track { flex: 1 1 auto; background: var(--surface-2); border-radius: 6px; height: 14px; overflow: hidden; }
.t30sc-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 6px; }
.t30sc-bar-cnt { flex: 0 0 28px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 600px){ .t30sc-bar-lbl { flex-basis: 96px; font-size: 11px; } }


/* ===== 1.0.45: slip column icons ===== */
.t30sc-slip-ico {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent-2) !important; padding: 2px;
}
.t30sc-slip-ico:hover { filter: brightness(1.25); }
.t30sc-slip-ico.is-dragy { color: #ff9f43 !important; }
.t30sc-slip-none {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); opacity: .38; padding: 2px; cursor: default;
}
.t30sc-slip-none .t30sc-slip-slash { position: absolute; left: 2px; top: 2px; }

/* ===== Time slip upload (1.0.56) =====
   The "no slip" icon becomes an invitation when a [drag_slip_upload] page
   exists. It keeps the SAME dimmed look at rest so the column reads no
   differently than before — only hover/focus reveals that it is clickable. */
a.t30sc-slip-none.t30sc-slip-invite { cursor: pointer; text-decoration: none !important; transition: opacity .12s, color .12s; }
a.t30sc-slip-none.t30sc-slip-invite:hover,
a.t30sc-slip-none.t30sc-slip-invite:focus-visible { opacity: .95; color: var(--accent-2, #ffd23f) !important; }

/* Per-run "+ Add time slip" link in the detail page's Run History. */
.t30sc-slip-add {
    color: var(--accent-2, #ffd23f) !important; font-size: 12px; font-weight: 700;
    text-decoration: none !important; white-space: nowrap;
    border: 1px dashed var(--accent-2, #ffd23f); border-radius: 999px; padding: 2px 9px;
    display: inline-block; opacity: .8; transition: opacity .12s;
}
.t30sc-slip-add:hover, .t30sc-slip-add:focus-visible { opacity: 1; }

/* Second landing-page button. Amber outline so it reads as the secondary
   action next to the solid red "Submit Your Time Slip" CTA. */
.t30sc-wrap a.t30sc-submit-btn.t30sc-cta-alt {
    background: transparent !important;
    color: var(--accent-2, #ffd23f) !important;
    border: 2px solid var(--accent-2, #ffd23f) !important;
    box-shadow: none !important; margin-left: 10px;
}
.t30sc-wrap a.t30sc-submit-btn.t30sc-cta-alt:hover {
    background: rgba(255, 210, 63, .12) !important; color: var(--accent-2, #ffd23f) !important;
}
.t30sc-slip-empty { color: #9aa3ad; font-style: italic; padding: 12px 0; }

/* Mobile turns .t30sc-submit-btn into a full-width block, so the side margin
   that separates the two CTAs on desktop must become a top margin. */
@media (max-width: 768px) {
    .t30sc-wrap a.t30sc-submit-btn.t30sc-cta-alt { margin-left: 0; margin-top: 10px; }
}
/* ===== Landing / hub page — [drag_top_list_home] (1.0.50) =====
   One shareable driver hub: hero + staging tree + submit CTA + a tile per
   named list + optional latest-runs strip. Colors come from the .t30sc-theme
   tokens so it matches the lists exactly. */

.t30sc-home-hero {
    display: flex; align-items: center; gap: 26px;
    padding: 8px 4px 22px; margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}
.t30sc-home-intro { min-width: 0; }
.t30sc-home .t30sc-home-title { font-size: 1.7rem; margin: 0 0 8px; }
.t30sc-home-tagline { color: var(--muted) !important; font-size: 15px; margin: 0 0 16px; max-width: 60ch; }
.t30sc-wrap a.t30sc-submit-btn.t30sc-home-cta {
    font-size: 16px !important; padding: 13px 30px !important;
    box-shadow: 0 6px 18px rgba(255,59,48,.32);
}

/* --- Staging tree: 2 stage bulbs, 3 ambers, green. The ambers flash once
   in sequence on page load, then the green lights and stays on. --- */
.t30sc-tree {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    background: #10151b; border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 10px;
}
.t30sc-bulb { display: block; border-radius: 50%; background: #2a333e; }
.t30sc-bulb-stage { width: 11px; height: 11px; animation: t30sc-stage-on .3s ease forwards; }
.t30sc-bulb-stage:nth-child(1) { animation-delay: .2s; }
.t30sc-bulb-stage:nth-child(2) { animation-delay: .5s; }
.t30sc-bulb-amber { width: 20px; height: 20px; animation: t30sc-amber-flash .55s ease; }
.t30sc-a1 { animation-delay: 1.1s; }
.t30sc-a2 { animation-delay: 1.6s; }
.t30sc-a3 { animation-delay: 2.1s; }
.t30sc-bulb-green { width: 22px; height: 22px; animation: t30sc-green-on .3s ease forwards; animation-delay: 2.65s; }
@keyframes t30sc-stage-on  { to { background: #e8edf2; box-shadow: 0 0 8px rgba(232,237,242,.55); } }
@keyframes t30sc-amber-flash {
    0%, 100% { background: #2a333e; box-shadow: none; }
    25%, 75% { background: var(--accent-2); box-shadow: 0 0 12px rgba(255,210,63,.75); }
}
@keyframes t30sc-green-on  { to { background: var(--ok); box-shadow: 0 0 14px rgba(46,204,113,.8); } }
@media (prefers-reduced-motion: reduce) {
    .t30sc-bulb { animation: none !important; }
    .t30sc-bulb-stage { background: #e8edf2; }
    .t30sc-bulb-green { background: var(--ok); box-shadow: 0 0 14px rgba(46,204,113,.8); }
}

/* --- List tiles (restyled 1.0.53: the flat boxes read as "bland") --- */
.t30sc-home-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px; margin-bottom: 22px;
}
/* Depth comes from three stacked cues: a raised gradient surface, a red->amber
   accent bar welded to the top edge, and a lift + glow on hover.

   The accent bar is a LAYERED BACKGROUND GRADIENT, not a ::before (1.0.54).
   Layer 1 = the 5px bar pinned to the top; layer 2 = the raised panel. Backgrounds
   are clipped to the border-radius by the browser itself, so the bar cannot detach.

   1.0.55 — WHY THERE IS NO TOP BORDER AND NO INSET TOP HIGHLIGHT:
   both of those paint OVER the background, i.e. directly on top of the accent bar.
   A `border-top: 1px solid var(--line)` laid a dark hairline across the bar and
   `box-shadow: inset 0 1px 0 rgba(255,255,255,.05)` laid a pale line through it —
   together they OUTLINED the bar and made it read as a strip detached from the
   card. Keep `border-top-width: 0` and keep the inset highlight off. */
.t30sc-home-tile {
    position: relative;
    display: flex; flex-direction: column; gap: 9px;
    background-color: #232c37 !important;
    background-image:
        linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%),
        linear-gradient(160deg, #2b3543 0%, #1e2630 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: top left, top left !important;
    background-size: 100% 5px, 100% 100% !important;
    border: 1px solid var(--line);
    border-top-width: 0 !important;   /* 1.0.55: never draw a line across the bar */
    border-radius: 14px;
    padding: 22px 18px 16px; text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease,
                background-size .16s ease;
}
a.t30sc-home-tile:hover, a.t30sc-home-tile:focus-visible {
    transform: translateY(-4px); border-color: var(--accent-2);
    background-size: 100% 7px, 100% 100% !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(255,210,63,.28);
}
/* List name: amber, uppercase, tracked out — the strongest thing in the tile. */
.t30sc-home-tile-name {
    color: var(--accent-2) !important; font-size: 1.1rem; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase; line-height: 1.25;
    text-shadow: 0 1px 10px rgba(255,210,63,.18);
}
a.t30sc-home-tile:hover .t30sc-home-tile-name { color: #ffe07a !important; }
.t30sc-home-tile-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.t30sc-home-stat { color: var(--muted) !important; font-size: 13px; }
.t30sc-home-stat b { color: var(--text) !important; font-weight: 800; }
.t30sc-home-tile-go {
    color: var(--accent) !important; font-size: 13px; font-weight: 800;
    margin-top: auto; padding-top: 4px; letter-spacing: .02em;
}
a.t30sc-home-tile:hover .t30sc-home-tile-go { color: #ff6a61 !important; }
.t30sc-home-tile.is-static { opacity: .85; cursor: default; }

.t30sc-home-recent { margin-bottom: 8px; }

@media (max-width: 640px) {
    .t30sc-home-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
    .t30sc-tree { flex-direction: row; padding: 10px 12px; }
}

/* ===== Landing page: Current Leader cards (1.0.51 spotlight, made per-list
   in 1.0.53) + tile states ===== */

.t30sc-leaders { margin-bottom: 22px; }
/* auto-fit: ONE leader stretches to the full width (identical to the old single
   spotlight); two or more wrap into a responsive grid. */
.t30sc-leaders-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 16px;
}
.t30sc-champ {
    display: flex; align-items: stretch; gap: 0;
    background: linear-gradient(160deg, #2b3543 0%, #1e2630 100%) !important;
    border: 1px solid var(--line); border-radius: 14px;
    overflow: hidden; text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.t30sc-champ:hover, a.t30sc-champ:focus-visible {
    transform: translateY(-4px); border-color: var(--accent-2);
    box-shadow: 0 14px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(255,210,63,.28);
}
.t30sc-champ-img {
    flex: 0 0 42%; min-height: 190px;
    background-size: cover; background-position: center;
}
.t30sc-champ-img-empty { display: flex; align-items: center; justify-content: center; background: var(--surface); }
.t30sc-champ-body { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 20px 24px; min-width: 0; }
/* The eyebrow IS the board name (1.0.54): "🏆 STREET CARS LIST". The card used to
   repeat "Current Leader" here while the section heading above already said it —
   a visible stutter on the live page. The heading names the concept once; each
   card names its board. */
.t30sc-champ-eyebrow {
    color: var(--accent-2) !important; font-size: 13px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase; margin-bottom: 2px;
}
.t30sc-champ-name { color: #fff !important; font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.t30sc-champ-driver { color: var(--muted) !important; font-size: 14px; }
.t30sc-champ-stats { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.t30sc-champ-et { color: var(--accent) !important; font-size: 2rem; font-weight: 800; line-height: 1; }
.t30sc-champ-et i { font-style: normal; font-size: 1rem; color: var(--muted); margin-left: 2px; }
.t30sc-champ-mph { color: var(--text) !important; font-size: 15px; font-weight: 700; }

/* Tile states: empty-board invitation + open-spots / bump-spot line */
.t30sc-home-tile.is-empty { border-style: dashed; }
a.t30sc-home-tile.is-empty:hover { border-color: var(--ok); }
.t30sc-home-tile-invite { color: var(--muted) !important; font-size: 13px; }
.t30sc-home-tile.is-empty .t30sc-home-tile-go { color: var(--ok) !important; }
.t30sc-home-spot { flex-basis: 100%; }
.t30sc-home-spot b { color: var(--accent-2) !important; }

@media (max-width: 640px) {
    .t30sc-champ { flex-direction: column; }
    .t30sc-champ-img { flex-basis: auto; width: 100%; min-height: 170px; }
}