/* Depends on: tokens.css, nav.css -- linked as separate <link>
   tags by every template that uses this file, NOT @import-ed here.
   @import is a serialized waterfall: the browser cannot discover an
   imported file until it has downloaded and parsed the one importing
   it, so this site's deepest chain (tokens -> nav -> calendar ->
   event_detail) cost four sequential round trips before first paint.
   Separate links are all visible in the initial HTML and download in
   parallel. Templates list dependencies first, so the cascade is
   unchanged -- see core/tests/test_template_lint.py, which fails if
   an @import is reintroduced here. */
  .messages { display: flex; flex-direction: column; gap: 8px; }
  .msg { padding: 11px 15px; border-radius: 10px; font-size: 13px; }
  .msg.success { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); }
  .msg.error { background: rgba(255,84,112,0.1); border: 1px solid rgba(255,84,112,0.35); color: var(--critical); }
  .msg.warning { background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.35); color: var(--amber); }

  body {
    margin: 0; background: var(--ink);
    color: var(--text-primary); font-family: var(--font-display); -webkit-font-smoothing: antialiased;
    font-size: 15px; line-height: 1.5;
  }

  /* .topbar / .brand / .btn-ghost / .search live in nav.css now. */

  /* Shell -- one grid for every pilot screen (spec PT-002). The third
     track exists on all of them; a page with no rail simply spans the
     centre column across it, so the 280px sidebar starts at the same x
     whatever you navigate to. */
  .shell { display: grid; grid-template-columns: 280px minmax(0,1fr) 300px; gap: 22px; max-width: 1440px; margin: 0 auto; padding: 22px 22px 60px; align-items: start; }
  /* min-width: 0 is the other half of the minmax(0,1fr) rule above (spec
     PT-002): that fixes the *track*, but a grid item's own `auto` minimum
     width is still its min-content size unless the item itself overrides
     it, so a non-shrinking descendant re-opens the same hole from the
     inside. Proved by the recap page's season bar chart -- a flex row of
     fixed 44px, flex-shrink:0 columns -- which pushed .col-center to
     544px at a 390px viewport (11 races: 11*44 + 10*6px gaps) before this
     line existed. */
  .shell > .col-center { grid-column: 2; min-width: 0; }
  /* :where(), not :not() -- :not() carries the specificity of its own
     argument, so `.shell:not(.has-rail) > .col-center` (three classes)
     would permanently outrank the plain rule above and every future
     breakpoint's `.col-center` override (two classes each), no matter
     what order they're declared in. :where() contributes zero
     specificity, so this ties with the plain rule and ordinary source
     order decides everywhere -- once, structurally, instead of needing
     a same-specificity copy pasted into every breakpoint that touches
     .col-center's grid-column. */
  .shell:where(:not(.has-rail)) > .col-center { grid-column: 2 / -1; }

  .card { background: linear-gradient(175deg, var(--surface) 0%, var(--card-gradient-end) 100%); border: 1px solid var(--line); border-radius: 16px; }
  /* In-page jumps (#circuitos, #race-history, #fotos) land below the
     sticky topbar -- the same 78px the sidebar sticks at -- instead of
     tucking the card's own heading underneath it. */
  .card[id] { scroll-margin-top: 78px; }
  /* ...and outlined once there: "Circuitos recorridos" sits in the narrow
     rail, so without it the jump from the tile read as nothing happening. */
  .card:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 28px -8px var(--accent); }
  /* A headline tile (Mejor vuelta / resultado / parrilla) jumps to the race
     it happened in; the row lights up so the eye lands on it. */
  .race-row { scroll-margin-top: 96px; }
  .race-row:target { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); border-radius: 8px; padding-left: 12px; padding-right: 12px; }

  /* Sidebar */
  /* Sticks at exactly where it already sits (56px topbar + the shell's
     22px top padding). It used to stick at 86px, 8px below that: sticky
     only moves an element when its container has room to spare, so on a
     tall tab (Resumen, Temporada) the card sat at 86 and on a short one
     (Galería, Autos, Tienda) at 78 -- it jumped every time you switched. */
  .sidebar { position: sticky; top: 78px; padding: 26px 22px; text-align: center; overflow: hidden; }

  /* Switching tabs is a full page load (each tab is its own URL, with its
     own stylesheets and scripts). A cross-document view transition keeps
     the card and the tab bar still while only the page's content fades,
     so it no longer reads as the whole screen reloading. Only the pilot
     pages load this file, so only navigations between them opt in; a
     browser without support just navigates as before. The tab bar is not
     named: its width differs with and without the rail, and a named
     element morphs between the two sizes, stretching its text. Only the
     sticky (above 760px) card is -- below that it scrolls away with the
     page, and a named card would slide in from wherever it had been
     scrolled to. */
  @view-transition { navigation: auto; }
  @media (min-width: 761px) {
    .sidebar { view-transition-name: pilot-card; }
  }
  ::view-transition-group(root) { animation-duration: .18s; }
  /* The card is the same on every tab, so it does not crossfade at all:
     the outgoing snapshot (photos already painted) stays up for the whole
     transition, and the incoming one is never shown mid-load. A crossfade
     showed the new card's avatar and cover blinking in. */
  ::view-transition-old(pilot-card) { animation: none; }
  ::view-transition-new(pilot-card) { animation: none; opacity: 0; }
  @media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
  }
  .sidebar-cover {
    position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100px;
    object-fit: cover; border-radius: 16px 16px 0 0;
  }
  .sidebar.has-cover::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 100px;
    background: linear-gradient(180deg, rgba(10, 13, 16, 0) 40%, var(--surface) 100%);
    border-radius: 16px 16px 0 0;
  }
  .sidebar.has-cover .avatar-wrap { margin-top: 22px; }
  .sidebar-cover-upload { position: absolute; top: 10px; right: 10px; z-index: 2; }
  .sidebar-cover-upload label {
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center;
    background: rgba(10, 13, 16, 0.55); border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff; transition: background 0.15s ease;
  }
  .sidebar-cover-upload label:hover { background: rgba(10, 13, 16, 0.8); }
  .sidebar-cover-upload label svg { width: 14px; height: 14px; }
  .sidebar-cover-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 0; height: 0; }
  /* Floats over the cover, opposite the camera button, instead of taking
     a row of the card: it only renders on your own Resumen tab, and as a
     row it made the card 32px taller there than on the other four -- so
     every line under it moved as you switched tabs. */
  .cover-reposition {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: flex; align-items: center; gap: 3px; padding: 3px;
    border-radius: 9px; background: rgba(10, 13, 16, 0.55); border: 1px solid rgba(255, 255, 255, 0.16);
  }
  .cr-btn {
    width: 22px; height: 22px; border-radius: 6px; border: 1px solid transparent;
    background: transparent; color: #fff; font-size: 11px;
    cursor: pointer; display: grid; place-items: center; font-family: inherit;
  }
  .cr-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.2); }
  .cr-reset { width: auto; padding: 0 8px; font-size: 10.5px; font-weight: 700; }
  /* 22px is under the 24px WCAG 2.5.8 floor and these are five arrows in a
     row -- too fiddly to hit with a thumb. Enlarged at phone widths only. */
  @media (max-width: 640px) {
    .cover-reposition { top: 6px; left: 6px; }
    .cr-btn { width: 32px; height: 32px; font-size: 13px; }
    .cr-reset { width: auto; height: 32px; padding: 0 10px; }
  }
  .avatar-wrap { position: relative; width: 108px; height: 108px; margin: 0 auto; }
  .avatar-photo {
    width: 108px; height: 108px; border-radius: 50%; border: 1px solid var(--line);
    background: linear-gradient(150deg, #2a3542, #171c22); display: grid; place-items: center;
  }
  .avatar-photo svg { width: 52px; height: 52px; color: #3a4552; }
  .sidebar-avatar-upload { position: absolute; bottom: 2px; left: 2px; z-index: 2; }
  .sidebar-avatar-upload label {
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center;
    background: rgba(10, 13, 16, 0.7); border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff; transition: background 0.15s ease;
  }
  .sidebar-avatar-upload label:hover { background: rgba(10, 13, 16, 0.9); }
  .sidebar-avatar-upload label svg { width: 13px; height: 13px; }
  .sidebar-avatar-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 0; height: 0; }

  /* .name is an <h1> -- zero the UA heading margins and let margin-top do the spacing. */
  .sidebar .name { font-size: 18px; font-weight: 800; margin: 16px 0 0; line-height: 1.25; }
  /* The verification mark: a small check beside the name, replacing both the pin on the
     avatar and the "Piloto verificado" pill -- one signal instead of two. */
  .name-check {
    display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px;
    border-radius: 50%; background: var(--accent); color: #04150c; vertical-align: 1px;
  }
  .name-check svg { width: 10px; height: 10px; }
  .sidebar .headline { font-size: 13px; color: var(--text-soft); margin-top: 8px; }
  .headline-team-link { color: inherit; font-weight: 600; }
  .headline-team-link:hover { text-decoration: underline; }
  .headline-bio { font-size: 13px; color: var(--text-soft); line-height: 1.55; margin: 8px 0 0; }
  /* The sidebar centres its text; a bio is a few lines of its own (emoji-led lines), which read from the edge. */
  .sidebar .headline-bio { text-align: left; }

  /* Coach profile: the badge reads like the other status pills (same pill shape and
     accent tokens) because it means the same kind of thing -- a status the
     platform vouches for, not something the user typed. */
  .coach-section { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; }
  .coach-badge {
    display: inline-flex; align-items: center; background: var(--accent-soft); color: var(--accent);
    font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 100px; border: 1px solid var(--accent-line);
  }
  .coach-price { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
  .coach-rel-status { font-size: 12px; color: var(--text-soft); }
  .coach-section form { margin: 0; }

  /* Owner-only nudge: a line of text and a hairline, not a card. */
  .completion-meter { margin-top: 14px; text-align: left; }
  .completion-head { font-size: 11.5px; color: var(--text-soft); margin-bottom: 6px; }
  .completion-bar { height: 3px; border-radius: 100px; background: var(--line); overflow: hidden; }
  .completion-fill { height: 100%; background: var(--accent); border-radius: 100px; }

  /* Up to three numbers, each above its label: the labels vary per pilot
     ("campeonato", "posiciones ganadas"), and inline they wrapped on some
     cards and not on others. */
  .side-stats { display: flex; justify-content: center; gap: 18px; margin-top: 14px; font-size: 11.5px; line-height: 1.25; color: var(--text-soft); }
  .side-stats a { display: flex; flex-direction: column; align-items: center; flex: 0 1 33%; min-width: 0; text-align: center; color: inherit; text-decoration: none; border-radius: 8px; padding: 2px 4px; }
  .side-stats a:hover b, .side-stats a:focus-visible b { color: var(--accent); }
  .side-stats b { color: var(--text-primary); font-size: 16px; font-weight: 800; }
  .side-titles { list-style: none; margin: 12px 0 0; padding: 0; font-size: 12.5px; font-weight: 700; }
  .side-titles li + li { margin-top: 6px; }
  .side-titles-champ { display: block; font-weight: 500; color: var(--text-soft); font-size: 11px; }
  .side-career-stats { margin-top: 12px; border-top: 1px solid var(--line); }
  .scs-row { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
  .scs-row.is-link:hover .scs-v { color: var(--accent); }
  .scs-link { position: absolute; inset: 0; }
  .scs-l { color: var(--text-soft); }
  /* Which circuit/race a figure belongs to (Mejor vuelta), under its label. */
  .scs-cap { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--text-soft); }
  .scs-v { font-weight: 800; }
  .scs-v small { font-weight: 500; color: var(--text-soft); }
  .race-season-head { font-size: 10.5px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.06em; margin: 16px 0 8px; }

  .season-picker { margin-bottom: 14px; }
  .season-picker-label { font-size: 10.5px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
  .season-picker .chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .season-picker .chip { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 100px; border: 1px solid var(--line); color: var(--text-soft); }
  .season-picker .chip:hover { border-color: var(--line-hover); color: var(--text-primary); }
  .season-picker .chip.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
  .season-picker-single { font-size: 13.5px; font-weight: 700; }

  /* Inside the Resumen rail cards (core/_pilot_trajectory.html). */
  .side-nav { margin-top: 14px; display: flex; gap: 14px; font-size: 12.5px; font-weight: 600; }
  .side-nav a { color: var(--text-soft); }
  .side-nav a:hover { color: var(--accent); }

  .side-track { text-align: left; }
  .side-track .side-title { margin-bottom: 10px; }
  .side-car + .side-activity { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
  .activity-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
  .activity-cell { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--line); }
  .activity-cell.level-1 { background: rgba(0, 230, 118, 0.25); }
  .activity-cell.level-2 { background: rgba(0, 230, 118, 0.45); }
  .activity-cell.level-3 { background: rgba(0, 230, 118, 0.7); }
  .activity-cell.level-4 { background: var(--accent); }

  .car-row { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
  .car-row:hover .car-model { text-decoration: underline; }
  .car-row + .car-row { margin-top: 12px; }
  .car-num { font-family: var(--font-mono); font-size: 16px; font-weight: 800; color: var(--accent); flex-shrink: 0; min-width: 40px; }
  .car-info { flex: 1; min-width: 0; }
  .car-model { font-size: 13px; font-weight: 700; }
  .car-cat { font-size: 11px; color: var(--text-soft); margin-top: 1px; }
  .car-logo { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }

  /* Track record (KOM) chip + crowned personal bests */
  .record-chip {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px;
    padding: 4px 11px 4px 9px; border-radius: 100px;
    background: var(--gold-soft); border: 1px solid rgba(255,201,74,0.35); color: var(--gold);
    font-size: 11.5px; font-weight: 700;
  }
  .live-now-pill {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    padding: 4px 11px 4px 9px; border-radius: 100px;
    background: rgba(255,84,112,0.14); border: 1px solid rgba(255,84,112,0.35); color: var(--critical);
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
  }
  .live-now-pill:hover { border-color: var(--critical); }
  .live-now-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: live-now-pulse 1.4s ease-in-out infinite; }
  @keyframes live-now-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  .record-chip svg { width: 13px; height: 13px; }
  a.pb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: inherit; }
  a.pb-row:hover .c-name { color: var(--accent); }
  .c-rank.record { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-weight: 700; }
  .c-rank.record svg { width: 12px; height: 12px; }
  .gap-tag { color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; }

  /* Racecraft note in race-history rows */
  .racecraft-tag { font-weight: 700; color: var(--text-soft); }
  .racecraft-tag.gain { color: var(--accent); }
  .racecraft-tag.loss { color: var(--critical); }

  /* Season results chart */
  .season-card { padding: 22px 24px; margin-bottom: 20px; }
  .season-card .section-sub { margin-bottom: 16px; }
  .points-trend { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
  .pt-label { font-size: 11.5px; font-weight: 700; color: var(--text-soft); margin-bottom: 8px; }
  .pt-svg { width: 100%; height: 70px; display: block; }
  .season-chart { display: flex; align-items: flex-end; gap: 8px; min-height: 150px; }
  .sc-bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; }
  .sc-bar-track { width: 100%; height: 120px; display: flex; align-items: flex-end; justify-content: center; }
  .sc-bar {
    width: 100%; max-width: 46px; min-height: 22px;
    border-radius: 6px 6px 0 0;
    display: flex; align-items: flex-start; justify-content: center;
    background: var(--surface-hover); border: 1px solid var(--line);
    transition: transform 0.15s ease;
  }
  .sc-bar-col:hover .sc-bar { transform: translateY(-2px); }
  .sc-bar.p1 { background: var(--gold-soft); border-color: rgba(255,201,74,0.4); }
  .sc-bar.p2 { background: var(--silver-soft); border-color: rgba(201,211,220,0.35); }
  .sc-bar.p3 { background: var(--bronze-soft); border-color: rgba(214,138,86,0.4); }
  .sc-bar-val { font-family: var(--font-mono); font-size: 12px; font-weight: 800; color: var(--text-primary); margin-top: 5px; }
  .sc-bar.p1 .sc-bar-val { color: var(--gold); }
  .sc-bar.p2 .sc-bar-val { color: var(--silver); }
  .sc-bar.p3 .sc-bar-val { color: var(--bronze); }
  .sc-bar-label { font-size: 10px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  .side-track svg { width: 100%; height: auto; }
  .side-track .track-img { width: 100%; height: auto; max-height: 140px; object-fit: contain; display: block; }
  .side-track .track-illustrative { font-size: 9.5px; color: var(--text-soft); font-style: italic; margin-top: 4px; }
  .side-track .track-name { display: inline-block; font-size: 11.5px; color: var(--text-soft); margin-top: 8px; font-weight: 600; }
  a.track-name:hover { color: var(--accent); }

  /* Center content */
  .breadcrumb { font-size: 12.5px; color: var(--text-soft); margin-bottom: 14px; }
  .breadcrumb a:hover { color: var(--text-primary); }

  /* Pilot shell tab bar (core/_pilot_tabs.html). Scrolls sideways on a
     phone rather than wrapping: a wrapped tab row reads as two rows of
     unrelated links. */
  /* overflow-y:hidden is load-bearing: overflow-x:auto alone makes overflow-y
     compute to auto too, and the tabs' -1px margin (which sits them on the
     border) gives the strip a pixel of vertical scroll -- so scrolling the page
     with the pointer over the tabs nudged them up and down. */
  .pilot-tabs { display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
  .pilot-tabs::-webkit-scrollbar { height: 0; }
  .pilot-tab { padding: 10px 14px; font-size: 13.5px; font-weight: 700; color: var(--text-soft); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .pilot-tab:hover { color: var(--text-primary); }
  .pilot-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

  /* Headline stats: the old stat row + career strip as one panel, with the
     same green-tinted card treatment as .standing-card above it. flex-wrap
     rather than a fixed grid: the tile count varies per pilot (empty stats
     are left out, see core.views._headline_stats), and a wrapped last row
     should stretch instead of leaving empty cells. */
  .headline-stats {
    display: flex; flex-wrap: wrap; gap: 1px;
    background: var(--accent-line); border: 1px solid var(--accent-line);
    border-radius: 14px; overflow: hidden; margin-bottom: 20px;
    box-shadow: 0 0 28px rgba(0, 230, 118, 0.10);
  }
  :root[data-theme="light"] .headline-stats { box-shadow: none; }
  .hs-item {
    position: relative; flex: 1 1 128px; padding: 16px 12px; text-align: center; color: inherit;
    background: linear-gradient(160deg, var(--accent-soft), transparent 70%), var(--surface);
  }
  .hs-item.is-link:hover { background: var(--surface-hover); }
  .hs-link { position: absolute; inset: 0; }
  .hs-item:not(.is-link):hover, .hs-item:not(.is-link):focus-visible { background: var(--surface-hover); outline: none; }
  .hs-tip {
    position: fixed; z-index: 300; max-width: 240px; padding: 9px 11px; border-radius: 10px;
    font-size: 12px; line-height: 1.45; text-align: left; color: var(--text-primary);
    background: var(--surface-raised); border: 1px solid var(--line); box-shadow: 0 12px 32px -12px rgba(0,0,0,.6);
    pointer-events: none;
  }
  .hs-tip[hidden] { display: none; }
  .hs-v { font-size: 21px; font-weight: 800; }
  .hs-v.pos { color: var(--accent); }
  .hs-v.neg { color: var(--critical); }
  .hs-l { font-size: 10px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
  .hs-sub { font-size: 10.5px; font-weight: 700; color: var(--accent); margin-top: 3px; }

  .standings-row { scroll-margin-top: 78px; }
  .standings-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
  .standing-card {
    display: flex; align-items: center; gap: 8px; padding: 16px 16px 16px 20px; border-radius: 14px;
    background: linear-gradient(160deg, rgba(0,230,118,0.12), rgba(0,230,118,0.02) 60%), var(--surface);
    border: 1px solid var(--accent-line);
  }
  .standing-card .sc-main { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; color: inherit; }
  .standing-card .sc-pos { font-size: 28px; font-weight: 800; font-family: var(--font-mono); color: var(--accent); flex-shrink: 0; min-width: 64px; }
  .standing-card .sc-pos small { display: block; font-size: 10px; color: var(--text-soft); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
  .standing-card .sc-info { flex: 1; min-width: 0; }
  .standing-card .sc-name { font-size: 14px; font-weight: 800; }
  .standing-card .sc-sub { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
  .standing-card .sc-points { text-align: right; flex-shrink: 0; }
  .standing-card .sc-points .v { font-size: 19px; font-weight: 800; }
  .standing-card .sc-points .l { font-size: 9.5px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em; }
  .sc-share-btn {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center;
    color: var(--text-soft); border: 1px solid var(--line);
  }
  .sc-share-btn:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
  .sc-share-btn svg { width: 15px; height: 15px; }

  /* The identity card's actions: one primary and a "more" toggle on a row, the rest in a list. */
  .side-actions { display: flex; gap: 8px; margin-top: 16px; }
  .side-actions form { display: contents; }
  .side-actions > .btn-primary,
  .side-actions > .btn-secondary:not(.side-more-btn),
  .side-actions form > button { flex: 1; }
  .side-more-btn { flex: 0 0 auto; padding: 8px 12px; }
  .side-more-btn svg { width: 16px; height: 16px; }
  .side-more-list { display: flex; flex-direction: column; margin-top: 8px; text-align: left; }
  .side-more-list[hidden] { display: none; }
  .side-more-list a, .side-more-list button {
    display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--text-soft); text-align: left; cursor: pointer;
  }
  .side-more-list a:hover, .side-more-list button:hover { background: var(--surface); color: var(--text-primary); }
  .side-more-list .danger { color: var(--critical); }
  .side-more-list form { margin: 0; }
  .btn-secondary.following { color: var(--text-soft); }

  .bio-card { padding: 22px 24px; margin-bottom: 20px; }
  .bio-card p { margin: 0; font-size: 14px; color: var(--text-soft); line-height: 1.7; }

  .race-card { padding: 22px 24px; margin-bottom: 20px; }
  .telemetry-storefront-card { padding: 22px 24px; margin-bottom: 20px; }
  .my-sessions-card { padding: 22px 24px; margin-bottom: 20px; }
  /* Apariciones (my_broadcast_appearances.html and its editor) style themselves in appearances.css. */
  .ms-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .ms-head .section-sub { margin-bottom: 10px; }
  .ms-empty { margin: 0; font-size: 13px; color: var(--text-tertiary); }
  .ms-empty a { color: var(--accent); }
  .telemetry-session-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--line-soft);
    color: inherit;
  }
  .telemetry-session-row:last-of-type { border-bottom: none; }
  /* The event's photo, else the championship logo; a session with no event has neither. */
  .telemetry-session-row > div { flex: 1; min-width: 0; }
  .ts-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line); background: var(--surface); }
  .ts-thumb.logo { object-fit: contain; padding: 5px; }
  .telemetry-session-row:hover .ts-title { color: var(--accent); }
  .telemetry-session-row svg { color: var(--text-tertiary); flex-shrink: 0; }
  .ts-title { font-weight: 700; font-size: 13.5px; }
  .ts-meta { color: var(--text-tertiary); font-size: 12px; margin-top: 3px; }
  .section-title { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
  .section-sub { font-size: 12.5px; color: var(--text-soft); margin-bottom: 18px; }

  .race-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
  .race-row:last-child { border-bottom: none; padding-bottom: 4px; }
  .pos-badge { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-size: 15px; font-weight: 800; font-family: var(--font-mono); }
  .pos-badge.p1 { background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(255,201,74,0.35); }
  .pos-badge.p2 { background: var(--silver-soft); color: var(--silver); border: 1px solid rgba(201,211,220,0.3); }
  .pos-badge.p3 { background: var(--bronze-soft); color: var(--bronze); border: 1px solid rgba(214,138,86,0.35); }
  .pos-badge.pn { background: var(--surface); color: var(--text-soft); border: 1px solid var(--line); }
  /* The event's own photo, else the championship's logo -- never a blank slot
     that would make some rows narrower than others. */
  .race-thumb { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line); background: var(--surface); }
  .race-thumb.logo { object-fit: contain; padding: 6px; }
  @media (max-width: 480px) { .race-thumb { width: 38px; height: 38px; } }
  .race-info { flex: 1; min-width: 0; }
  .race-title { font-size: 13.5px; font-weight: 700; }
  .race-sub { font-size: 12px; color: var(--text-soft); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
  .race-sub .cat-tag { background: var(--surface); border: 1px solid var(--line); padding: 1px 7px; border-radius: 5px; font-weight: 600; color: var(--text-soft); }
  /* Which race of the weekend this row is -- a double-header puts two rows
     on the same event, and without this they read as duplicates. Same
     "Carrera N" wording the standings and event pages already use, sitting
     in the title but lighter than the event name it qualifies. */
  .race-title .heat-part { font-weight: 600; color: var(--text-soft); }
  .laps-led-tag { color: var(--accent); font-weight: 700; }

  /* Podium-rate transparency: which races feed the number */
  .podio-tag {
    display: inline-block;
    margin-left: 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    padding: 2px 7px;
    border-radius: 100px;
    vertical-align: middle;
  }
  /* Car-fault marker on a race row. The class name is shared with the event
     page's results table, but those rules live in event_detail.css, which this
     page does not link -- so the tag is styled here, as a pill matching
     .podio-tag beside it rather than the smaller square tag the results table
     uses. Duplicating one rule beats linking 700 lines of event CSS. */
  .race-title .res-tag.fault {
    display: inline-block;
    margin-left: 8px;
    font-size: 9px;
    font-weight: 800;
    color: var(--critical);
    background: var(--critical-soft);
    padding: 2px 7px;
    border-radius: 100px;
    vertical-align: middle;
    cursor: help;
  }
  .race-row.podium {
    background: linear-gradient(90deg, var(--accent-soft), transparent 55%);
    border-radius: 10px;
    padding-left: 12px;
    padding-right: 12px;
    margin-left: -12px;
    margin-right: -12px;
  }
  .race-row.no-count { opacity: 0.5; }
  .nocount-tag { font-style: italic; color: var(--text-soft); }
  .race-right { text-align: right; flex-shrink: 0; }

  .telemetry-sub-cta { margin-bottom: 14px; }
  .race-time { font-size: 13.5px; font-weight: 700; }
  .src-badge { font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 6px; border-radius: 5px; text-transform: uppercase; margin-top: 4px; display: inline-block; }
  .src-badge.real { background: var(--violet-soft); color: var(--violet); }

  .rookie-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 5px; margin-left: 6px;
    background: var(--violet-soft); color: var(--violet);
    font-size: 9.5px; font-weight: 800; vertical-align: middle;
  }

  /* Right rail */
  .side-card { padding: 20px; }
  .side-card + .side-card { margin-top: 16px; }
  .side-title { font-size: 13px; font-weight: 800; margin-bottom: 12px; }
  .pb-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
  .pb-row:last-child { border-bottom: none; padding-bottom: 0; }
  /* Circuitos recorridos: where, and when (core.views.pilot_sidebar_context). */
  .cv-row { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
  .cv-row:last-child { border-bottom: none; padding-bottom: 0; }
  .cv-name { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
  .cv-name:hover { color: var(--accent); }
  .cv-sub { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; line-height: 1.45; }
  .cv-sub a { color: var(--accent); }
  .pb-row .c-name { font-size: 12.5px; color: var(--text-soft); }
  .pb-row .c-time { font-size: 12.5px; font-weight: 700; font-family: var(--font-mono); }
  .pb-row .c-rank { font-size: 10.5px; color: var(--accent); font-weight: 700; margin-top: 1px; }
  .team-row { display: flex; align-items: center; gap: 10px; color: inherit; }
  .team-row + .team-row { margin-top: 12px; }
  a.team-row .t-arrow { margin-left: auto; color: var(--text-soft); flex-shrink: 0; }
  a.team-row:hover .t-name { color: var(--accent); }
  a.team-row:hover .t-arrow { color: var(--accent); }
  .team-row .t-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-raised); display: grid; place-items: center; border: 1px solid var(--line); flex-shrink: 0; overflow: hidden; }
  .team-row .t-icon svg { width: 18px; height: 18px; }
  .team-row .t-name { font-size: 13px; font-weight: 700; }
  .team-row .t-role { font-size: 11.5px; color: var(--text-soft); }
  .circuit-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 100px; border: 1px solid var(--line); font-size: 11.5px; color: var(--text-soft); margin: 0 6px 6px 0; transition: border-color 0.15s ease, color 0.15s ease; }
  a.circuit-chip:hover { border-color: var(--accent-line); color: var(--accent); }
  .circuit-chip svg { width: 12px; height: 12px; flex-shrink: 0; }

  @media (max-width: 1100px) {
    .shell { grid-template-columns: 240px minmax(0,1fr); }
    /* No third track here, so the rail drops below the centre column
       instead of disappearing -- hiding it left phone and tablet visitors
       with no Mejores marcas, Equipo or Circuitos recorridos at all, and
       the headline "Circuitos" tile jumping to nothing. */
    .shell > .col-rail { grid-column: 2; }
  }
  @media (max-width: 760px) {
    /* minmax(0,1fr), not a bare 1fr: `1fr` is shorthand for
       minmax(auto,1fr), and a grid item's `auto` minimum is its *min-content*
       width -- so a single wide descendant anywhere in the sidebar or main
       column stretches the column past the viewport instead of shrinking,
       taking the whole page horizontal-scrolling with it (measured: 501px
       columns inside a 485px shell). The two wider breakpoints above already
       spell out minmax(0,1fr) for exactly this reason; this one didn't. */
    .shell { grid-template-columns: minmax(0, 1fr); }
    /* One track: `grid-column: 2 / -1` would otherwise place the centre
       column in an implicit second column and push it off the page. This
       also governs the railless screens now that line 41 uses :where() --
       no separate override needed here or at any future breakpoint. */
    .shell > .col-center { grid-column: 1; }
    .shell > .col-rail { grid-column: 1; }
    /* relative, not static: the cover photo, the camera button and the
       cover arrows are absolutely positioned inside the card, and under
       `static` they anchored to the page instead, up under the topbar. */
    .sidebar { position: relative; top: auto; }
  }

  .profile-media-card { padding: 22px 24px; margin-bottom: 20px; }
  .profile-media-card .section-sub { margin-bottom: 14px; }
  .media-see-all { display: block; margin-top: 12px; font-size: 13px; color: var(--accent); text-align: center; }

  /* ---------- Lightbox (shared with event galleries; see lightbox.js) ---------- */
  .lightbox {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(6, 8, 10, 0.93); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .lightbox[hidden] { display: none; }
  .lb-figure { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 4vw; }
  .lb-img { max-width: 88vw; max-height: 82vh; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 70px -24px rgba(0,0,0,0.85); }
  .lb-cap { font-size: 13px; color: rgba(255,255,255,0.72); font-weight: 600; }
  .lb-cap[hidden] { display: none; }
  .lb-close, .lb-nav {
    position: fixed; display: grid; place-items: center; color: #fff;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); line-height: 1;
    transition: background 0.15s ease;
  }
  .lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,0.24); }
  .lb-close { top: 18px; right: 20px; width: 42px; height: 42px; border-radius: 10px; font-size: 26px; }
  .lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; font-size: 30px; }
  .lb-prev { left: 20px; }
  .lb-next { right: 20px; }
  .lightbox.single .lb-nav, .lightbox.single .lb-counter { display: none; }
  .lb-counter { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; }
  @media (max-width: 600px) {
    .lb-nav { width: 42px; height: 42px; font-size: 24px; }
    .lb-prev { left: 8px; }
    .lb-next { right: 8px; }
  }

  /* ---------- Pinned achievements strip ---------- */
  .pinned-strip {
    display: flex; gap: 1px; background: var(--line); border: 1px solid var(--accent-line); border-radius: 14px;
    overflow: hidden; margin-bottom: 20px;
  }
  .ps-item {
    flex: 1; background: linear-gradient(160deg, rgba(0,230,118,0.1), rgba(0,230,118,0.02) 60%), var(--surface);
    padding: 14px 12px; text-align: center;
  }
  .ps-v { font-size: 19px; font-weight: 800; color: var(--accent); display: flex; align-items: center; justify-content: center; }
  .ps-v svg { width: 20px; height: 20px; }
  .ps-l { font-size: 10px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }

  /* ---------- Achievement badges (trophy case) ---------- */
  .badges-card { padding: 22px 24px; margin-bottom: 20px; }
  .badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  /* A locked tile used to be the whole tile at 55% opacity on top of
     tertiary-grey 10.5px / 9.5px text -- the description was unreadable.
     Locked now reads as a muted icon and a plain border; the text keeps
     full contrast. */
  .badge-tile {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
    text-align: center;
  }
  .badge-tile.earned { border-color: rgba(255,201,74,0.45); background: var(--gold-soft); }
  .bt-icon { width: 24px; height: 24px; margin-bottom: 6px; color: var(--text-soft); }
  .badge-tile.earned .bt-icon { color: var(--gold); }
  .bt-icon svg { width: 100%; height: 100%; }
  .bt-label { font-size: 13px; font-weight: 800; color: var(--text-primary); }
  .bt-hint { font-size: 12px; color: var(--text-soft); line-height: 1.45; }
  .bt-progress { width: 100%; margin-top: 6px; }
  .bt-bar { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
  .bt-bar span { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: var(--accent); }
  .bt-count { font-size: 11px; font-weight: 700; color: var(--text-soft); margin-top: 4px; }
  /* Pinned to the bottom so the rarity lines of a row line up whatever
     each description's length. */
  .bt-foot { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
  .bt-when { font-size: 11.5px; font-weight: 700; color: var(--gold); }
  .bt-rarity { font-size: 11px; color: var(--text-soft); }
  /* Two per row on a phone: at one per row the nine tiles ran two screens. */
  @media (max-width: 600px) {
    .badges-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .badge-tile { padding: 14px 10px 12px; }
  }

  /* ---------- Rivalry pin ---------- */
  .rivalry-card { padding: 22px 24px; margin-bottom: 20px; }
  .rivalry-widget { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
  .rv-side { flex: 1; text-align: center; color: inherit; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
  .rv-side:hover { border-color: var(--accent-line); }
  .rv-name { font-size: 13.5px; font-weight: 800; margin-bottom: 10px; }
  .rv-stats { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--text-soft); }
  .rv-stats span { font-weight: 800; color: var(--text-primary); }
  /* Each row explains itself on hover (stat_tips.js); the dotted underline
     says there is something to hover. */
  .rv-stats .has-tip { align-self: center; text-decoration: underline dotted var(--text-tertiary); text-underline-offset: 3px; }
  .rv-vs { font-size: 13px; font-weight: 800; color: var(--text-soft); flex-shrink: 0; }
  .rv-compare-link { display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
  .rv-unpin-form, .rv-pin-form { margin-top: 14px; display: flex; gap: 10px; align-items: center; }
  .rv-pin-form select { flex: 1; padding: 10px 34px 10px 12px; }
  /* Suggested rival (suggest_rival_by_points): the driver next to you in the table. */
  .rv-suggest { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .rv-suggest-tag { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
  .rv-suggest-name { margin-top: 4px; font-size: 16px; font-weight: 800; }
  .rv-suggest-name a { color: var(--text-primary); }
  .rv-suggest-why { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--text-soft); }
  @media (max-width: 480px) {
    .rivalry-widget { flex-direction: column; align-items: stretch; }
    .rv-vs { transform: rotate(90deg); }
  }
  /* The real head-to-head (race_head_to_head): the score of races both
     ran, a split bar, then each shared race with both finishing spots. */
  .h2h { margin-top: 16px; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
  .h2h-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; text-align: center; }
  .h2h-n { display: inline-block; font-size: 34px; font-weight: 900; line-height: 1.1; margin-top: 2px; color: var(--text-soft); }
  .h2h-side.lead .h2h-n { color: var(--accent); }
  .h2h-mid { font-size: 11.5px; color: var(--text-soft); line-height: 1.35; padding-bottom: 6px; }
  .h2h-mid b { color: var(--text-primary); font-size: 13px; }
  .h2h-bar { display: flex; gap: 3px; height: 6px; margin-top: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
  /* The leader's share is green, like their number above it; a tie is grey both sides. */
  .h2h-bar span { background: var(--text-tertiary); }
  .h2h-bar span.lead { background: var(--accent); }
  .h2h-laps { display: table; margin: 10px auto 0; font-size: 12px; color: var(--text-soft); text-decoration: underline dotted var(--text-tertiary); text-underline-offset: 3px; }
  .h2h-laps b { color: var(--text-primary); }
  .h2h .h2h-n.has-tip { text-decoration: underline dotted var(--text-tertiary); text-underline-offset: 5px; text-decoration-thickness: 2px; }
  .h2h-races { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; }
  .h2h-races li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
  .h2h-race { color: var(--text-primary); min-width: 0; }
  .h2h-race:hover { color: var(--accent); }
  .h2h-heat { color: var(--text-soft); }
  .h2h-pos { flex-shrink: 0; font-weight: 700; color: var(--text-soft); white-space: nowrap; }
  .h2h-pos .win { color: var(--accent); }
  .h2h-rule { margin-top: 10px; }
  .h2h-rule p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-soft); }
  .h2h-rule b { color: var(--text-primary); }
  .h2h-rule summary,   .h2h-more summary, .rv-change summary { cursor: pointer; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
  .h2h-more .h2h-races { margin-top: 6px; }
  .h2h-empty { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line); font-size: 13px; line-height: 1.5; color: var(--text-soft); }
  .rv-totals-title { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-soft); }
  .rv-totals-title + .rivalry-widget { margin-top: 8px; }
  /* The compare-style heads under "Totales": room above them and a gap before the table. */
  .rv-totals-title + .cmp-table { margin-top: 12px; }
  .rivalry-card .cmp-heads { margin-top: 18px; margin-bottom: 18px; }
  .rv-change { margin-top: 4px; }

/* ---------- Garage ---------- */
  .garage-card { padding: 22px 24px; margin-bottom: 20px; }
  .garage-subheading { font-size: 12px; font-weight: 800; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.08em; margin: 26px 0 12px; }
  /* Each car is a card: photo on top, facts below. auto-fill so one car is not
     stretched across the page and four do not squeeze. */
  .garage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
  /* The car's own page uses a bare .garage-row as a plain wrapper -- only the card grid gets the card look. */
  .garage-row { padding: 14px 0; }
  .garage-grid .garage-row {
    padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px;
    border: 1px solid var(--line); background: var(--surface-2);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  }
  .garage-grid .garage-row:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.65); }
  .garage-grid .garage-row-retired { opacity: 0.85; }
  .garage-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
  .garage-photo { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
  .garage-grid .garage-row:hover .garage-photo { transform: scale(1.04); }
  .garage-photo-empty { display: grid; place-items: center; color: var(--text-soft); background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
  .garage-photo-empty svg { width: 54px; height: 54px; }
  .garage-number {
    position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 999px;
    background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.02em;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .garage-retired-tag { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: 999px; background: var(--violet-soft); color: var(--violet); border: 1px solid rgba(139, 123, 255, 0.4); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
  .garage-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
  .garage-car-name { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
  .garage-car-name a { color: inherit; }
  .garage-car-name a:hover { color: var(--accent); }
  .garage-car-sub { font-size: 13.5px; color: var(--text-soft); }
  .garage-reliability { margin-top: 8px; }
  .garage-rel-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
  .garage-rel-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
  .garage-rel-text { margin-top: 6px; font-size: 12.5px; color: var(--text-soft); }
  .garage-race-list { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-soft); }
  .garage-race-list li { padding: 3px 0; }
  .garage-grid .garage-race-list li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
  .garage-race-list time { color: var(--text-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* Car tags: the Apariciones card on the car page and the picker in the composers. */
  .car-appearances { padding: 22px 24px; margin-bottom: 20px; }
  .car-appearance-list { list-style: none; margin: 0; padding: 0; }
  .car-appearance-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
  .car-appearance-list li:first-child { border-top: 0; }
  .car-appearance-list a { font-weight: 700; }
  .car-appearance-list time { color: var(--text-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
  .car-appearance-list form { margin-left: auto; }
  .car-appearance-list button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--text-soft); }
  .car-appearance-list button:hover { color: var(--text-primary); }
  .car-chip { display: inline-block; margin: 0 6px 6px 0; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; text-decoration: none; }
  .car-tag-picker { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
  .car-tag-picker legend { float: left; padding: 0; margin-right: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }

/* Siguiendo, Instagram-style: flat rows on the card, no boxes -- a big avatar, the @handle in bold,
   the name and role in grey under it. Used inside the pilot shell and on the plain /siguiendo/ page. */
.follow-card { padding: 22px 22px 14px; }
.follow-list { list-style: none; margin: 10px 0 0; padding: 0; }
.follow-item { display: flex; align-items: center; gap: 10px; }
.follow-item .follow-row { flex: 1 1 auto; min-width: 0; }
.follow-btn {
  flex: 0 0 auto; padding: 7px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  background: var(--accent); color: #04150c; font: inherit; font-size: 13px; font-weight: 700;
}
.follow-btn.following { background: var(--surface-raised); border-color: var(--line); color: var(--text-primary); }
.follow-btn:disabled { opacity: 0.6; cursor: default; }
.follow-row {
  display: flex; align-items: center; gap: 14px; padding: 9px 8px; margin: 0 -8px; border-radius: 12px;
  color: var(--text-primary); transition: background 0.15s;
}
a.follow-row:hover { background: var(--surface-hover); }
.follow-av {
  display: grid; place-items: center; flex: 0 0 auto; width: 56px; height: 56px; overflow: hidden;
  border-radius: 50%; background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line);
  font-weight: 800; font-size: 20px; color: var(--text-secondary);
}
.follow-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.follow-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.follow-handle { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-name { font-size: 13.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-empty { margin: 18px 0 8px; padding: 26px 0; text-align: center; color: var(--text-soft); font-size: 13.5px; }
.follow-count { margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: var(--surface-raised); color: var(--text-soft); font-size: 12px; font-weight: 700; vertical-align: middle; }

.wanted-banner { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding: 18px 20px; border-color: var(--accent-line); background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 70%), linear-gradient(175deg, var(--surface) 0%, var(--card-gradient-end) 100%); }
.wanted-icon { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); }
.wanted-icon svg { width: 22px; height: 22px; }
.wanted-text { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.wanted-label { padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.wanted-title { font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
.wanted-note { font-size: 13.5px; color: var(--text-secondary); }
.wanted-hint { font-size: 12.5px; color: var(--text-soft); }
.wanted-cta { flex: 0 0 auto; padding: 10px 22px; font-weight: 700; }
@media (max-width: 560px) { .wanted-banner { flex-wrap: wrap; } .wanted-text { flex-basis: calc(100% - 62px); } .wanted-cta { flex: 1 1 100%; text-align: center; } }