/* Company chrome: the cover-and-identity card and the icon nav beneath it.
   Loaded by app/Views/vtc/header.php, so it is present on every VTC sub-page.

   Deliberately a sibling of css/pages/profile/chrome.css rather than a shared
   file: the two heroes carry different things (a company has an owner and a
   member count, a driver has a level and a country) and sharing one sheet
   would mean every rule growing a selector for the half it does not apply to.
   The palette and the card geometry are kept identical on purpose. */

.vc-chrome {
    --bg:        #0d0d0e;
    --card:      #151516;
    --hover:     #1b1b1d;
    --line:      rgba(99, 99, 99, 0.25);
    --line-soft: rgba(99, 99, 99, 0.12);
    --ink:       #e0e0e0;
    --ink-dim:   rgba(224, 224, 224, 0.8);
    --ink-faint: rgba(224, 224, 224, 0.65);
    --accent:    #ff9900;
    background: var(--bg);
    color: var(--ink);
    padding-top: 1.25rem;
}

/* ── The manifest ───────────────────────────────────────────────────────
   Three bands stacked: the cover, then identity on the card below it, then a
   readout of everything the company is. The old version put the same facts in
   three columns of label/value rows, which read as a form. Here the name is
   the only large thing, and the numbers line up as a strip the eye can scan
   in one pass.

   Nothing is written on the picture. A cover is the one thing a company
   uploads to be looked at, and text laid over it costs both: the photo gets
   dimmed to keep the name readable, and the name is read against whatever
   the photo happens to be doing behind it. Only the logo crosses the seam,
   by exactly half of itself. */
.vc-chrome .vc-card {
    position: relative;
    margin: 0 1.25rem;
    background: var(--card);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.vc-chrome .vc-cover { position: relative; line-height: 0; }
.vc-chrome .vc-cover img {
    display: block;
    width: 100% !important;
    height: auto !important;
    /* Markup::vtc_cover writes max-height:300px inline, which no stylesheet
       beats without !important. Past the ceiling, crop rather than let a
       mis-sized upload push the whole page off screen. */
    max-height: 340px !important;
    object-fit: cover !important;
}
/* Nothing is written on the cover any more, so this is no longer a wash for
   legibility - it is just the last few pixels settling into the card so the
   seam is not a hard cut under the logo. Short, and only at the bottom. */
.vc-chrome .vc-cover-scrim {
    position: absolute;
    inset: auto 0 0;
    height: 44px;
    background: linear-gradient(to top, var(--card) 0, rgba(21, 21, 22, 0.42) 38%, transparent 100%);
    pointer-events: none;
}

/* ── Plate: logo, name, status, actions - on the card, under the cover ─── */
.vc-chrome .vc-plate {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* end, not center: the centre column is pulled up over the cover, and
       centring the side columns against it is what left them floating high. */
    align-items: end;
    gap: 1.5rem;
    padding: 1.1rem 1.6rem 1.25rem;
}

.vc-chrome .vc-plate-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    /* start, not the row's end: the grid bottom-aligns everything else, and a
       bottom-pinned box treats a negative top margin as a height reduction
       rather than a lift - which is why the logo was barely over the seam. */
    align-self: start;
    /* the plate's own top padding (to reach the seam) plus half the mount
       (to hang over it), as a calc so the two cannot drift apart */
    margin-top: calc(-1.1rem - 61px);
}

/* The mount. This rule went missing in an earlier edit, which is why the logo
   had no plate behind it at all - a 132 box around a 112 logo gives 10px of
   card on every side. */
.vc-chrome .vc-plate-logo {
    /* Round, 5px of card around the logo. The mount needs an edge of its own:
       a card-coloured disc dropped on a photograph reads as a smudge, and the
       shadow alone does not draw a boundary - it only implies one. A hairline
       plus a wider dark ring separates it from whatever the cover happens to
       be behind it, light or dark. */
    width: 122px;
    height: 122px;
    padding: 5px;
    /* The 4px outer ring reads as part of the mount, so the gap the eye sees
       is smaller than the number - this is set against the ring, not the box. */
    margin-bottom: 1.25rem;
    line-height: 0;
    border-radius: 50%;
    background: var(--card);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 0 0 4px rgba(14, 14, 14, 0.55),
        0 10px 26px rgba(0, 0, 0, 0.5);
}
/* The plate drives the box, so the span and img fill it whatever size the
   markup asked Markup::company_avatar for. */
.vc-chrome .vc-plate-logo > span,
.vc-chrome .vc-plate-logo img { width: 100%; height: 100%; }

/* The actions take the cover's top-right corner - the one part of the image
   nothing else uses. This rule went missing in an earlier edit, which left the
   buttons flowing statically at the very start of the card, top left. */
.vc-chrome .vc-plate-actions {
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Wide enough that a long name does NOT wrap when the card has room for it.
   560 was forcing "BROTHERS LOCO TRANSPORT" onto two lines on a desktop with
   several hundred pixels to spare either side. The grid's 1fr side tracks
   still keep the centre from crowding the flanks. */
.vc-chrome .vc-plate-id { min-width: 0; max-width: 860px; }
.vc-chrome .vc-plate-name {
    margin: 0;
    /* Room under a name that wrapped, so nothing below it starts on the same
       optical line as its last row of letters. */
    padding-bottom: 0.15rem;
    font-family: 'Saira Stencil One', 'Aldrich', 'Quantico', sans-serif;
    font-weight: 400;
    /* Sized for the long names, not the short ones. "BROTHERS LOCO TRANSPORT"
       at 3rem wraps to two lines and takes the card over; the ceiling comes
       down so a two-line name still reads as a heading rather than a banner. */
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    /* NOT tighter than this. Saira Stencil One carries tall ascent and descent
       metrics, so a wrapped name at 1.02 - which looked safe because uppercase
       has no descenders to clear - had its two lines physically overlapping.
       1.16 stopped the collision; 1.25 gives the two lines daylight. */
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    /* Splits a wrapped name evenly instead of leaving one word stranded on the
       second line. Ignored by browsers that do not know it, which is fine. */
    text-wrap: balance;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
    word-break: break-word;
}
/* The colour classes pin font-size on the span they wrap - right for the 14px
   table row they were written for, wrong for a headline. */
.vc-chrome .vc-plate-name .companyname-span,
.vc-chrome .vc-plate-name .companyname-span *,
.vc-chrome .vc-plate-name .username-span,
.vc-chrome .vc-plate-name .username-span * { font-size: inherit !important; }
.vc-chrome .vc-plate-name a { text-decoration: none; }
.vc-chrome .vc-plate-name .badge { display: none; }

.vc-chrome .vc-plate-slogan {
    margin: 0;
    font-size: 0.98rem;
    font-style: italic;
    color: var(--ink-dim);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* An accent rule between the name and the slogan. Hung off the slogan so a
   company without one does not get a line floating under its name, and faded
   at both ends because a hard bar reads as a border the card does not have. */
.vc-chrome .vc-plate-slogan::before {
    content: "";
    display: block;
    width: min(340px, 80%);
    height: 2px;
    /* Was 0.6rem, which is nothing once the name's line-height closed up to
       1.02 - the rule sat on the last line's baseline and read as a strike
       through it. This is measured from tight lines, not from loose ones. */
    margin: 1.15rem auto 0.7rem;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, var(--accent, #ff9900) 22%, var(--accent, #ff9900) 78%, transparent);
}

.vc-chrome .vc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--line-soft);
    color: var(--ink-dim);
    backdrop-filter: blur(3px);
}
.vc-chrome .vc-chip i { font-size: 0.56rem; }
.vc-chrome .vc-chip.is-accent { border-color: rgba(255, 153, 0, 0.45); color: var(--accent); }
.vc-chrome .vc-chip.is-green  { border-color: rgba(28, 187, 140, 0.45); color: #1cbb8c; }
.vc-chrome .vc-chip.is-red    { border-color: rgba(255, 59, 48, 0.45);  color: #ff3b30; }

/* The flanks: live on the left, stated facts on the right. Both sit partly
   over the cover, so both carry the shadow the name does. */
.vc-chrome .vc-plate-flank { min-width: 0; }
.vc-chrome .vc-plate-flank.is-social { justify-self: start; }
.vc-chrome .vc-plate-flank.is-facts { justify-self: end; }

/* Socials --------------------------------------------------------------
   An icon row, sitting on the cover rather than in a box - the same reasoning
   as the name: a bordered card here reads as a widget bolted on. */
.vc-chrome .vc-social-title {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
/* Wide enough for six across before wrapping, so the common case is one row. */
.vc-chrome .vc-socials { display: flex; flex-wrap: wrap; gap: 0.35rem; max-width: 250px; }
/* Colour, in the site's own language. Solid brand tiles were seven saturated
   blocks against a muted dark card and read as pasted on. This is the same
   glass chip the status pills use - dark, blurred, hairline border - with the
   brand colour carried by the GLYPH and echoed in the border, so a platform is
   still recognised at a glance without the row shouting. Filling in happens on
   hover, where a strong colour is a response rather than a permanent state. */
.vc-chrome .vc-social {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid color-mix(in srgb, var(--brand, #8fa3b8) 38%, transparent);
    backdrop-filter: blur(3px);
    color: var(--brand, #cfd6de);
    font-size: 0.88rem;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.vc-chrome .vc-social:hover {
    background: color-mix(in srgb, var(--brand, #8fa3b8) 18%, rgba(0, 0, 0, 0.42));
    border-color: color-mix(in srgb, var(--brand, #8fa3b8) 75%, transparent);
    color: var(--brand, #cfd6de);
    transform: translateY(-2px);
}
.vc-chrome .vc-social svg { display: block; }
.vc-chrome .vc-social svg path { fill: currentColor; }

.vc-chrome .vc-social.is-discord   { --brand: #7d88f7; }
.vc-chrome .vc-social.is-twitch    { --brand: #a970ff; }
.vc-chrome .vc-social.is-youtube   { --brand: #ff4d4d; }
.vc-chrome .vc-social.is-facebook  { --brand: #4a9bff; }
.vc-chrome .vc-social.is-tiktok    { --brand: #ff5c7a; }
/* Instagram is a gradient, which a glyph cannot be, so it takes the pink the
   gradient is read by. */
.vc-chrome .vc-social.is-instagram { --brand: #f0559b; }
/* X's own colour is black and vanishes here; the pre-rebrand blue reads. */
.vc-chrome .vc-social.is-twitter   { --brand: #55b6f5; }
/* TruckersMP has no brand colour to borrow. */
.vc-chrome .vc-social.is-tmp       { --brand: #5b9bd8; }
.vc-chrome .vc-social.is-website   { --brand: #ff9900; }
.vc-chrome .vc-social svg { display: block; }

/* Facts ---------------------------------------------------------------- */
.vc-chrome .vc-plate-flank.is-facts { display: flex; flex-direction: column; gap: 0.45rem; text-align: right; }
.vc-chrome .vc-fact {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.6rem;
    min-width: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.vc-chrome .vc-fact-lbl {
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
}
.vc-chrome .vc-fact-val {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vc-chrome .vc-fact-val .username-span,
.vc-chrome .vc-fact-val .username-span * { font-size: inherit !important; }
.vc-chrome .vc-fact-val .rk-flag { border-radius: 0; }
.vc-chrome .vc-lang { font-weight: 600; }
.vc-chrome .vc-game {
    padding: 2px 7px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line-soft);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* XP bar: the card's foot ---------------------------------------------- */
.vc-chrome .vc-xp {
    border-top: 1px solid var(--line-soft);
    background: rgba(0, 0, 0, 0.16);
    padding: 0.55rem 1.6rem 0.6rem;
}
.vc-chrome .vc-xp-track {
    position: relative;
    height: 22px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.vc-chrome .vc-xp-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(255, 153, 0, 0.45), rgba(255, 153, 0, 0.75));
    transform-origin: left;
    animation: vc-xp-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both 0.2s;
}
@keyframes vc-xp-grow { from { transform: scaleX(0); } to { transform: none; } }
/* Centred over the whole track, not over the fill, so the text does not shift
   as a company levels up - and above the fill so it stays legible whichever
   side of the boundary it lands on. */
.vc-chrome .vc-xp-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vc-chrome .vc-xp-text strong { color: var(--accent); }
.vc-chrome .vc-xp-text .sep { color: var(--ink-faint); }

/* One orchestrated reveal on entry, staggered across the band. nth-child
   rather than an inline --i, so the view stays free of style attributes. */
@keyframes vc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vc-chrome .vc-plate-logo,
.vc-chrome .vc-plate-id,
.vc-chrome .vc-plate-flank { animation: vc-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
.vc-chrome .vc-plate-flank.is-live  { animation-delay: 0.12s; }
.vc-chrome .vc-plate-flank.is-facts { animation-delay: 0.16s; }
.vc-chrome .vc-plate-id { animation-delay: 0.05s; }
@media (prefers-reduced-motion: reduce) {
    .vc-chrome .vc-plate-logo,
    .vc-chrome .vc-plate-id,
    .vc-chrome .vc-plate-flank,
    .vc-chrome .vc-xp-fill { animation: none; }
}

/* ── Narrow ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .vc-chrome .vc-plate {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 1rem;
        padding: 1rem 1.1rem 1.1rem;
    }
    .vc-chrome .vc-plate-core { order: -1; margin-top: calc(-1rem - 49px); }
    .vc-chrome .vc-plate-logo { width: 98px; height: 98px; padding: 4px; }
    .vc-chrome .vc-plate-flank.is-social,
    .vc-chrome .vc-plate-flank.is-facts { justify-self: center; }
    .vc-chrome .vc-socials { justify-content: center; max-width: 100%; }
    .vc-chrome .vc-social-title { text-align: center; }
    .vc-chrome .vc-plate-flank.is-facts { align-items: center; text-align: center; }
    .vc-chrome .vc-fact { justify-content: center; }
    .vc-chrome .vc-xp { padding-left: 1.1rem; padding-right: 1.1rem; }
}

@media (max-width: 700px) {
    .vc-chrome { padding-top: 0.75rem; }
    .vc-chrome .vc-card { margin: 0 0.75rem; }
    /* A 28:5 cover is about 65px tall at phone width - shorter than the half
       logo hanging on it - so the strip needs a floor to overlap. */
    .vc-chrome .vc-cover img { min-height: 168px; object-fit: cover !important; }
    .vc-chrome .vc-plate { padding: 0.9rem 0.85rem 1rem; }
    .vc-chrome .vc-plate-core { margin-top: calc(-0.9rem - 42px); }
    .vc-chrome .vc-plate-logo { width: 84px; height: 84px; padding: 4px; margin-bottom: 0.95rem; }
    .vc-chrome .vc-plate-actions { top: 0.7rem; right: 0.7rem; }
    .vc-chrome .vc-plate-name { font-size: 1.55rem; }
    .vc-chrome .vc-xp { padding: 0.5rem 0.85rem 0.55rem; }
}

/* ── Company timeline ───────────────────────────────────────────────────
   Lives here rather than in a feed sheet of its own because vtc/about.php
   already loads this file through the header, and the timeline is the only
   place these rules are used. */
.vc-feed { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.5rem 0.75rem 0.75rem; }

.vc-fd-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    background: var(--bg, #0d0d0e);
    border: 1px solid var(--line-soft, rgba(99, 99, 99, 0.12));
    border-radius: 0;
    font-size: 0.78rem;
    transition: border-color 0.15s, background 0.1s;
}
.vc-fd-row.is-clickable { cursor: pointer; }
.vc-fd-row.is-clickable:hover { background: var(--hover, #1b1b1d); border-color: var(--line, rgba(99, 99, 99, 0.25)); }

.vc-fd-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-faint, rgba(224, 224, 224, 0.65));
    font-size: 0.8rem;
}
/* One accent per event class, so the column reads as a legend down the side. */
.vc-fd-icon.is-delivery     { color: var(--accent, #ff9900); background: rgba(255, 153, 0, 0.1); }
.vc-fd-icon.is-member_join  { color: #1cbb8c; background: rgba(28, 187, 140, 0.1); }
.vc-fd-icon.is-member_leave { color: #ff3b30; background: rgba(255, 59, 48, 0.1); }
.vc-fd-icon.is-member_rank  { color: #b47dff; background: rgba(180, 125, 255, 0.1); }
.vc-fd-icon.is-photo        { color: #4cb1ff; background: rgba(76, 177, 255, 0.1); }
.vc-fd-icon.is-truck        { color: #ffd166; background: rgba(255, 209, 102, 0.1); }

.vc-fd-main { min-width: 0; }
.vc-fd-title {
    color: var(--ink, #e0e0e0);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vc-fd-route { color: var(--ink-faint, rgba(224, 224, 224, 0.65)); font-weight: 500; }
.vc-fd-meta {
    margin-top: 1px;
    font-size: 0.7rem;
    color: var(--ink-faint, rgba(224, 224, 224, 0.65));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vc-fd-side { display: flex; align-items: center; gap: 0.6rem; justify-self: end; }
.vc-fd-profit { font-weight: 600; white-space: nowrap; }
.vc-fd-profit.is-pos { color: #1cbb8c; }
.vc-fd-profit.is-neg { color: #ff6b74; } /* was #ff3b30: 4.43:1 on #232323, AA needs 4.5 */
.vc-fd-shot { width: 40px; height: 26px; object-fit: cover; border-radius: 0; display: block; }
.vc-fd-ago { font-size: 0.68rem; color: var(--ink-faint, rgba(224, 224, 224, 0.65)); white-space: nowrap; }

@media (max-width: 700px) {
    .vc-fd-row { grid-template-columns: 26px minmax(0, 1fr); }
    .vc-fd-side { grid-column: 2; justify-self: start; }
}

/* ── Company gallery widget ─────────────────────────────────────────────
   Newest photo large, the next three beside it, same shape as the driver
   profile's card. */
.vc-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem;
    padding: 0.5rem 0.75rem 0.75rem;
}
.vc-gal-tile {
    display: block;
    border-radius: 0;
    overflow: hidden;
    line-height: 0;
    border: 1px solid var(--line-soft, rgba(99, 99, 99, 0.12));
    transition: border-color 0.15s, transform 0.15s;
}
.vc-gal-tile.is-lead { grid-column: span 3; }
.vc-gal-tile:hover { border-color: var(--accent, #ff9900); transform: translateY(-1px); }
.vc-gal-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-gal-tile.is-lead img { aspect-ratio: 16 / 9; }
.vc-gal-tile:not(.is-lead) img { aspect-ratio: 1 / 1; }

/* ── Top drivers this month ─────────────────────────────────────────────
   Replaces the Level card, which the chrome's XP bar now says better. */
.vc-top { padding: 0.5rem 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.vc-top-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0;
    background: var(--bg, #0d0d0e);
    border: 1px solid var(--line-soft, rgba(99, 99, 99, 0.12));
    font-size: 0.76rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.1s;
}
.vc-top-row:hover { background: var(--hover, #1b1b1d); border-color: var(--line, rgba(99, 99, 99, 0.25)); }
.vc-top-rank {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--ink-faint, rgba(224, 224, 224, 0.65));
    font-variant-numeric: tabular-nums;
}
/* The leader is the only one marked; a podium of three colours in a card this
   small reads as decoration rather than ranking. */
.vc-top-row:first-child .vc-top-rank { color: var(--accent, #ff9900); }
.vc-top-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.vc-top-val { font-size: 0.7rem; color: var(--ink-faint, rgba(224, 224, 224, 0.65)); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Live widget (About page rail) ──────────────────────────────────────
   The counts, then who they are. The header carries none of this now, so the
   card is the only place it appears and can afford the room. */
.vc-livew { padding: 0.6rem 0.75rem 0.5rem; }
.vc-livew-head { display: flex; gap: 1.1rem; padding-bottom: 0.6rem; }
.vc-livew-stat { display: flex; flex-direction: column; gap: 2px; }
.vc-livew-stat b {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ink, #e0e0e0);
}
.vc-livew-stat.is-driving b { color: #1cbb8c; }
.vc-livew-stat span {
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint, rgba(224, 224, 224, 0.65));
}

.vc-livew-list { display: flex; flex-direction: column; gap: 0.25rem; }
.vc-livew-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0;
    background: var(--bg, #0d0d0e);
    border: 1px solid var(--line-soft, rgba(99, 99, 99, 0.12));
    font-size: 0.74rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.1s;
}
.vc-livew-row:hover { background: var(--hover, #1b1b1d); border-color: var(--line, rgba(99, 99, 99, 0.25)); }
.vc-livew-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block; }
.vc-livew-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.vc-livew-state {
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint, rgba(224, 224, 224, 0.65));
}
/* Only someone actually moving is marked; idle is present, not active. */
.vc-livew-row.is-driving .vc-livew-state { color: #1cbb8c; }
.vc-livew-empty { padding: 0.2rem 0 0.5rem; font-size: 0.72rem; color: var(--ink-faint, rgba(224, 224, 224, 0.65)); }