/* The race on /top-brands (owner preview): js/top-brands-race.js.
   Everything that moves is a transform or opacity set from one rAF loop; this
   file sets the stage and the resting states. Bar colours are the category
   lines (--c-*), so the race reads by category the way the rest of the site does.
   The full race is .tbr (the panel); it sits put away inside .tbr-host as the
   card at the end of this file (js/top-brands-race-pill.js). */
.tbr{position:relative;margin:0 0 var(--s-6);padding:var(--s-5) var(--s-5) var(--s-4);border-radius:var(--r-lg);background:linear-gradient(180deg,color-mix(in srgb,var(--violet) 7%,var(--pane)),var(--pane) 140px);border:1px solid var(--accent-line);box-shadow:var(--elev-2)}
.tbr[aria-busy="true"]{min-height:640px}
.tbr .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Head: title on the left, the date ticker on the right. */
.tbr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-4)}
.tbr-ticker{margin-left:auto}
.tbr-min{flex:none;height:36px;padding:0 12px 0 9px;font-size:13px}
.tbr-title{min-width:0;max-width:60ch}
.tbr-title h2{margin:0 0 6px;font-size:26px;line-height:1.1;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.tbr-sub{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.tbr-ticker{flex:none;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px}
.tbr-date{display:block;overflow:hidden;line-height:1}
.tbr-date-t{display:block;font-size:46px;font-weight:700;letter-spacing:-.035em;line-height:1.02;color:var(--ink);font-variant-numeric:tabular-nums;min-width:4.2ch}
.tbr-meta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbr-dot{color:var(--ink-3)}
.tbr-changes-n{display:inline-block;color:var(--ink);font-weight:700}
.tbr-gap{visibility:hidden;min-height:22px;display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-pill);font-size:12px;font-weight:600;color:var(--tone-warn);background:color-mix(in srgb,var(--tone-warn) 12%,transparent);border:1px dashed color-mix(in srgb,var(--tone-warn) 55%,transparent)}


.tbr-gap.is-on{visibility:visible}
.tbr-gap:empty::before{content:"\00a0"}

/* By category: All, then each category with enough brands. Wraps on a
   laptop; one swipeable line on a phone. */
.tbr-cats{display:flex;flex-wrap:wrap;gap:6px;margin:calc(-1 * var(--s-1)) 0 var(--s-4)}
.tbr-cat{appearance:none;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--rule);background:var(--pane-2);color:var(--ink-2);
  font:600 12.5px/1 var(--sans);white-space:nowrap;cursor:pointer;transition:transform .16s cubic-bezier(0.23,1,0.32,1),background-color .15s ease,color .15s ease,border-color .15s ease}
.tbr-cat i{flex:none;width:9px;height:9px;border-radius:3px;background:var(--c)}
.tbr-cat[aria-pressed="true"]{background:var(--accent-fill);border-color:transparent;color:#fff}
.tbr-cat[aria-pressed="true"] i{box-shadow:0 0 0 1.5px color-mix(in srgb,#fff 70%,transparent)}
.tbr-cat:active{transform:scale(.97)}
.tbr-cat:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (hover:hover) and (pointer:fine){
  .tbr-cat:not([aria-pressed="true"]):hover{color:var(--ink);background:color-mix(in srgb,var(--violet) 10%,var(--pane-2))}
}

/* Stage: rows are absolutely placed and moved with translate3d. */
.tbr-stage{position:relative}
.tbr-rows{position:relative;list-style:none;margin:0;padding:0;overflow:hidden;contain:layout paint}
.tbr-row{--row-name:184px;position:absolute;left:0;right:0;top:0;height:38px;display:grid;grid-template-columns:30px var(--row-name) minmax(0,1fr);align-items:center;column-gap:10px;padding-right:2px;will-change:transform,opacity;opacity:0;border-radius:var(--r-sm)}
.tbr-place{font:700 13px/1 var(--sans);color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.tbr-row.is-lead .tbr-place{color:var(--accent)}
.tbr-id{display:flex;align-items:center;gap:9px;min-width:0}
.tbr-id .mark{width:24px;height:24px;border-radius:7px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.tbr-name{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbr-row.is-lead .tbr-name{font-weight:700}
.tbr-track{position:relative;height:100%;min-width:0}
.tbr-clip{position:absolute;left:0;top:50%;height:24px;margin-top:-12px;right:0;overflow:hidden;border-radius:6px 0 0 6px}
.tbr-bar{position:absolute;left:0;top:0;height:100%;border-radius:6px;transform:translate3d(-100%,0,0);will-change:transform;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 45%,var(--pane)),var(--c));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent),inset 0 -1px 0 color-mix(in srgb,#000 10%,transparent)}
.tbr-val{position:absolute;left:0;top:50%;margin-top:-9px;height:18px;display:flex;align-items:baseline;gap:6px;white-space:nowrap;will-change:transform;font-variant-numeric:tabular-nums}
.tbr-val b{font-size:13.5px;font-weight:700;color:var(--ink)}
.tbr-val small{font-size:11.5px;font-weight:500;color:var(--ink-3)}

/* A new leader: one soft wash over its row. Opacity only. */
.tbr-row::before{content:"";position:absolute;inset:0 -6px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--violet) 18%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--violet) 40%,transparent);opacity:0;pointer-events:none}
.tbr-row.is-pulse::before{animation:tbr-pulse 1s cubic-bezier(0.23,1,0.32,1)}
@keyframes tbr-pulse{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* Gridlines ride the scale as it grows. */
.tbr-grid{position:absolute;top:0;bottom:-2px;right:0;pointer-events:none}
.tbr-gl{position:absolute;top:0;bottom:0;left:0;width:0;border-left:1px dashed color-mix(in srgb,var(--rule) 85%,transparent);opacity:0;transition:opacity .25s ease;will-change:transform}
.tbr-gl.is-on{opacity:1}
.tbr-gl span{position:absolute;bottom:-18px;left:0;transform:translateX(-50%);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Controls */
.tbr-controls{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--rule)}
.tbr-buttons{display:flex;align-items:center;gap:6px;flex:none}
.tbr-play,.tbr-btn,.tbr-speed button{appearance:none;font:600 13px/1 var(--sans);cursor:pointer;border:0;transition:transform .16s cubic-bezier(0.23,1,0.32,1),background-color .15s ease,color .15s ease}
.tbr-play{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;min-width:104px;padding:0 18px 0 14px;border-radius:var(--r-pill);background:var(--accent-fill);color:#fff;box-shadow:0 8px 22px -12px var(--violet-fill)}
.tbr-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:44px;padding:0 10px;border-radius:var(--r-pill);background:var(--pane-2);color:var(--ink);border:1px solid var(--rule)}
.tbr-step{display:none}
.tbr-speed{display:inline-flex;padding:3px;gap:2px;border-radius:var(--r-pill);background:var(--pane-2);border:1px solid var(--rule)}
.tbr-speed button{height:36px;min-width:40px;padding:0 10px;border-radius:var(--r-pill);background:none;color:var(--ink-2)}
.tbr-speed button[aria-pressed="true"]{background:var(--pane);color:var(--ink);box-shadow:var(--elev-1)}
.tbr-play:active,.tbr-btn:active,.tbr-speed button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .tbr-play:hover{background:var(--accent-deep)}
  .tbr-btn:hover{background:color-mix(in srgb,var(--violet) 10%,var(--pane-2))}
  .tbr-speed button:hover{color:var(--ink)}
}
.tbr-play:focus-visible,.tbr-btn:focus-visible,.tbr-speed button:focus-visible,.tbr-range:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tbr-today{flex:none;padding:0 14px}

.tbr-scrub{position:relative;flex:1;min-width:0;padding-top:2px}
.tbr-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:0;background:none;cursor:pointer;border-radius:var(--r-pill)}
.tbr-range::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:var(--rule)}
.tbr-range::-moz-range-track{height:6px;border-radius:99px;background:var(--rule)}
.tbr-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:var(--pane);border:2px solid var(--accent-fill);box-shadow:var(--elev-2)}
.tbr-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--pane);border:2px solid var(--accent-fill);box-shadow:var(--elev-2)}
.tbr-ticks{position:relative;height:8px;margin:0 10px}
.tbr-tick{position:absolute;top:0;width:2px;height:5px;margin-left:-1px;border-radius:1px;background:color-mix(in srgb,var(--ink-3) 45%,transparent)}
.tbr-tick.is-change{top:-1px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--accent)}
.tbr-skip{position:absolute;top:-1px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;border:1.5px dashed var(--tone-warn);background:var(--pane)}
.tbr-ends{display:flex;justify-content:space-between;margin:2px 10px 0;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.tbr-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-5);margin-top:var(--s-3)}
.tbr-legend{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:0;padding:0;font-size:12px;color:var(--ink-2)}
.tbr-legend li{display:inline-flex;align-items:center;gap:6px}
.tbr-legend i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.tbr-legend li.is-dim{opacity:.38}
.tbr-note{margin:0;flex:1 1 320px;max-width:72ch;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.tbr-key-change,.tbr-key-skip{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:1px;background:var(--accent)}
.tbr-key-skip{background:none;border:1.5px dashed var(--tone-warn)}

/* Reduced motion: the final standing, still; step buttons instead of play. */
.tbr.is-reduced .tbr-play,.tbr.is-reduced .tbr-speed,.tbr.is-reduced [data-act="replay"]{display:none}
.tbr.is-reduced .tbr-step{display:inline-flex}
.tbr.is-reduced .tbr-row::before{animation:none}

/* Phones: top 8, a narrower name column, controls stacked. */
@media (max-width:640px){
  .tbr{padding:var(--s-4) var(--s-3) var(--s-3)}
  .tbr[aria-busy="true"]{min-height:600px}
  .tbr-head{flex-direction:column;gap:var(--s-3);position:relative}
  .tbr-min{position:absolute;top:0;right:0}
  .tbr-min span{display:none}
  .tbr-title h2{font-size:22px}
  .tbr-sub{font-size:13px}
  .tbr-ticker{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;text-align:left;gap:4px 10px;width:100%}
  .tbr-date-t{font-size:34px}
  /* The skipped-day note always takes its own line, so its text never reflows the race. */
  .tbr-break{flex-basis:100%;height:0}
  /* Two lines per bar: the full name above, the bar under it. */
  .tbr-row{height:42px;grid-template-columns:18px 22px minmax(0,1fr);grid-template-rows:17px 21px;column-gap:8px;align-content:center}
  .tbr-place{grid-row:1/3;grid-column:1}
  .tbr-id{display:contents}
  .tbr-id .mark{grid-row:1/3;grid-column:2;width:22px;height:22px;border-radius:6px}
  .tbr-name{grid-row:1;grid-column:3;font-size:12.5px;line-height:17px}
  .tbr-track{grid-row:2;grid-column:3}
  .tbr-clip{height:12px;margin-top:-6px;border-radius:4px 0 0 4px}
  .tbr-bar{border-radius:4px}
  .tbr-val{margin-top:-8px;height:16px}
  .tbr-val b{font-size:12px}
  .tbr-val small{display:none}
  .tbr-cats{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(-1 * var(--s-3)) var(--s-3);padding:2px var(--s-3) 4px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--s-3),#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--s-3),#000 calc(100% - 28px),transparent)}
  .tbr-cats::-webkit-scrollbar{display:none}
  .tbr-cat{flex:none;height:36px}
  .tbr-controls{flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
  .tbr-scrub{order:-1;flex:1 1 100%}
  .tbr-controls{justify-content:space-between}
  .tbr-buttons{gap:5px}
  .tbr-play{min-width:0;padding:0 14px 0 11px}
  .tbr-today{padding:0 12px}
  .tbr-today span{display:none}
}

/* ---- The race, put away (js/top-brands-race-pill.js) ----------------------
   A slim card with a looping mini race; "Watch the race" grows the full race
   in place (laptops) or opens it as a sheet (phones). The card's height is
   fixed and reserved by the section, so nothing below it moves on load. */
.tbr-host{position:relative;margin:0 0 var(--s-3);min-height:96px}
.tbr-host[data-open]:not(.is-ready){min-height:880px}
/* Minimized holds the card alone; open holds the race alone. */
.tbr-host:not(.is-open):not(.is-mounting):not(.is-closing) > .tbr-panel{display:none}

/* Under the race, open or put away: the page goes on. */
.tb-below{display:flex;align-items:center;justify-content:center;gap:7px;width:max-content;max-width:100%;margin:0 auto var(--s-6);padding:8px 14px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:none;transition:color .15s ease,background-color .15s ease}
.tb-below svg{flex:none;transition:transform .2s cubic-bezier(0.23,1,0.32,1)}
.tb-below:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (hover:hover) and (pointer:fine){
  .tb-below:hover{color:var(--ink);background:color-mix(in srgb,var(--violet) 8%,transparent)}
  .tb-below:hover svg{transform:translateY(2px)}
}
#tb-root{scroll-margin-top:88px}
.tbr-host > .tbr{margin:0}
/* While the height animates the section clips, keeping room for the shadow. */
.tbr-host.is-animating{overflow:clip;overflow-clip-margin:28px}
.tbr-host.is-open .tbr-pill{display:none}
.tbr-host.is-open.is-animating .tbr-pill{display:block;position:absolute;left:0;right:0;top:0;pointer-events:none}
.tbr-host.is-closing .tbr-panel,.tbr-host.is-mounting .tbr-panel{position:absolute;left:0;right:0;top:0;pointer-events:none}
.tbr-host.is-mounting .tbr-panel{visibility:hidden}

.tbr-pill{--mini-row:22px;position:relative;height:96px;padding:1px;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:color-mix(in srgb,var(--violet) 24%,var(--rule));box-shadow:0 16px 36px -28px var(--violet-fill),var(--elev-1)}
/* The glow: a soft light that travels the border now and then. Transform only. */
.tbr-pill::before{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:32%;pointer-events:none;will-change:transform;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--violet) 85%,#fff) 50%,transparent);
  transform:translate3d(-110%,0,0);animation:tbr-sheen 6.4s cubic-bezier(0.77,0,0.175,1) 1.2s infinite}
@keyframes tbr-sheen{0%{transform:translate3d(-110%,0,0)}55%,100%{transform:translate3d(420%,0,0)}}
.tbr-pill-in{position:relative;z-index:1;height:100%;display:grid;grid-template-columns:minmax(190px,320px) minmax(0,1fr) auto;align-items:center;gap:var(--s-5);
  padding:0 var(--s-4) 0 var(--s-5);border-radius:calc(var(--r-lg) - 1px);
  background:linear-gradient(100deg,color-mix(in srgb,var(--violet) 8%,var(--pane)),var(--pane) 48%)}
.tbr-pill-in::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:color-mix(in srgb,var(--violet) 5%,transparent);opacity:0;transition:opacity .2s ease}

.tbr-pill-copy{min-width:0}
.tbr-pill-eyebrow{display:flex;align-items:center;gap:7px;margin:0 0 5px;font-size:11.5px;font-weight:700;letter-spacing:.08em;line-height:16px;text-transform:uppercase;color:var(--accent)}
.tbr-pill-sep{color:var(--ink-3)}
.tbr-pill-date{color:var(--ink-2);letter-spacing:.03em;font-variant-numeric:tabular-nums;min-width:5ch}
.tbr-pill-dot{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tbr-pill-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:tbr-dot 2.4s cubic-bezier(0.23,1,0.32,1) infinite}
@keyframes tbr-dot{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.8);opacity:0}}
.tbr-pill-story{margin:0;min-width:0}
.tbr-pill-head{display:block;font-size:15px;font-weight:650;line-height:20px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbr-pill-chip{display:inline-flex;align-items:center;height:20px;margin-top:6px;padding:0 8px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;
  color:var(--ink-2);background:color-mix(in srgb,var(--violet) 9%,transparent);border:1px solid color-mix(in srgb,var(--violet) 18%,transparent)}
.tbr-pill-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.tbr-mini{position:relative;height:calc(var(--mini-row) * 3);padding-left:18px;min-width:0}
.tbr-mini-n{position:absolute;left:0;top:0;height:var(--mini-row);display:flex;align-items:center;font:700 11px/1 var(--sans);color:var(--ink-3);font-variant-numeric:tabular-nums}
.tbr-mini-n:first-child{color:var(--accent)}
.tbr-mini-rows{position:relative;height:100%;list-style:none;margin:0;padding:0;overflow:hidden;contain:layout paint}
.tbr-mini-row{position:absolute;left:0;right:0;top:0;height:var(--mini-row);display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);align-items:center;column-gap:10px;opacity:0;will-change:transform,opacity}
.tbr-mini-id{display:flex;align-items:center;gap:7px;min-width:0}
.tbr-mini-id .mark{width:16px;height:16px;border-radius:5px;font-size:9px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.tbr-mini-name{font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbr-mini-row.is-lead .tbr-mini-name{color:var(--ink)}
.tbr-mini-track{position:relative;height:10px;overflow:hidden;border-radius:5px 0 0 5px}
.tbr-mini-bar{position:absolute;left:0;top:0;height:100%;border-radius:5px;transform:translate3d(-100%,0,0);will-change:transform;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 40%,var(--pane)),var(--c))}

/* One real button; its ::after stretches over the card so the whole card is the target. */
.tbr-pill-go{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 15px 0 18px;border-radius:var(--r-pill);
  background:var(--accent-fill);color:#fff;font:650 14px/1 var(--sans);white-space:nowrap;box-shadow:0 8px 22px -12px var(--violet-fill);
  transition:transform .16s cubic-bezier(0.23,1,0.32,1),background-color .15s ease}
.tbr-pill-go::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit}
.tbr-pill-go svg{transition:transform .2s cubic-bezier(0.23,1,0.32,1)}
.tbr-pill-go:focus-visible{outline:none}
.tbr-pill:has(.tbr-pill-go:focus-visible){box-shadow:var(--focus-ring),0 16px 36px -28px var(--violet-fill)}
.tbr-pill:active .tbr-pill-go{transform:scale(.97)}
.tbr-pill-go.is-loading{cursor:progress}
.tbr-pill-go.is-loading svg{opacity:.55}
@media (hover:hover) and (pointer:fine){
  .tbr-pill:hover .tbr-pill-go{background:var(--accent-deep)}
  .tbr-pill:hover .tbr-pill-go svg{transform:translateX(2px)}
  .tbr-pill:hover .tbr-pill-in::after{opacity:1}
}

/* The sheet (phones): the full race, full height, over a scrim. */
.tbr-sheet-root{position:fixed;inset:0;z-index:120}
.tbr-scrim{position:absolute;inset:0;background:color-mix(in srgb,#05040c 56%,transparent)}
.tbr-sheet{position:absolute;left:0;right:0;bottom:0;top:max(10px,env(safe-area-inset-top));display:flex;flex-direction:column;border-radius:20px 20px 0 0;
  background:var(--pane);box-shadow:0 -10px 40px -14px rgba(0,0,0,.45);will-change:transform}
.tbr-sheet-bar{position:relative;flex:none;height:48px;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;touch-action:none;cursor:grab}
.tbr-grab{position:absolute;left:50%;top:8px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:color-mix(in srgb,var(--ink-3) 50%,transparent)}
.tbr-sheet-close{appearance:none;border:0;cursor:pointer;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--pane-2);color:var(--ink);transition:transform .16s cubic-bezier(0.23,1,0.32,1)}
.tbr-sheet-close:active{transform:scale(.95)}
.tbr-sheet-close:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tbr-sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
.tbr-sheet .tbr{border:0;border-radius:0;box-shadow:none;background:none;padding-top:0}
.tbr-sheet .tbr-min{display:none}

@media (max-width:639.98px){
  .tbr-host{min-height:136px}
  .tb-below{font-size:13px;margin-bottom:var(--s-5)}
  .tbr-pill{--mini-row:16px;height:136px}
  .tbr-pill-in{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eye go" "story story" "mini mini";align-content:center;gap:5px 10px;padding:0 12px 0 14px}
  .tbr-pill-copy{display:contents}
  .tbr-pill-eyebrow{grid-area:eye;margin:0}
  .tbr-pill-story{grid-area:story;display:flex;align-items:center;gap:8px}
  .tbr-pill-head{flex:0 1 auto;min-width:0;font-size:14px}
  .tbr-pill-chip{flex:none;margin-top:0;height:19px;padding:0 7px;font-size:11px}
  .tbr-mini{grid-area:mini;margin-top:3px;padding-left:15px}
  .tbr-mini-row{grid-template-columns:minmax(0,118px) minmax(0,1fr);column-gap:8px}
  .tbr-mini-name{font-size:12px}
  .tbr-mini-id .mark{width:14px;height:14px;border-radius:4px}
  .tbr-mini-track{height:8px;border-radius:4px 0 0 4px}
  .tbr-mini-bar{border-radius:4px}
  .tbr-pill-go{grid-area:go;height:30px;padding:0 9px 0 12px;gap:4px;font-size:12.5px}
  .tbr-pill-go svg{width:13px;height:13px}
}

/* Reduced motion: a still border and dot, today's standing in the mini race,
   and the race opens and closes at once. */
@media (prefers-reduced-motion:reduce){
  .tbr-pill{background:linear-gradient(100deg,color-mix(in srgb,var(--violet) 55%,var(--rule)),color-mix(in srgb,var(--violet) 20%,var(--rule)) 55%)}
  .tbr-pill::before{display:none;animation:none}
  .tbr-pill-dot::after{animation:none;opacity:0}
}
@media (max-width:429.98px){.tb-below-more{display:none}}
/* Signed out: the category chips show, locked; a tap opens the note under them. */
.tbr-cat.is-locked{color:var(--ink-3);background:transparent;border-style:dashed}
.tbr-cat.is-locked i{opacity:.55}
.tbr-cat .tbr-lock{flex:none;margin-left:-2px;opacity:.85}
.tbr-lock-note{display:flex;align-items:center;gap:8px;max-width:none;margin:calc(-1 * var(--s-2)) 0 var(--s-4);padding:9px 12px;border-radius:var(--r-md,10px);
  font-size:13.5px;line-height:1.45;color:var(--ink);background:var(--accent-soft);border:1px solid var(--accent-line)}
.tbr-lock-note .tbr-lock{flex:none;color:var(--accent)}
.tbr-lock-note a{color:var(--accent);font-weight:650}
.tbr-lock-note.is-shown{animation:tbr-note-in .22s cubic-bezier(.23,1,.32,1)}
@keyframes tbr-note-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tbr-lock-note.is-shown{animation:none}}

/* ---- Share (js/top-brands-race-share.js) -----------------------------------
   A compact menu that grows up from the Share button: the two image sizes
   side by side, then the clip and the link. Under the controls, one line
   follows a clip being made (progress, Cancel) and confirms a save. */
.tbr-share{position:relative;flex:none}
.tbr-share-btn{padding:0 14px 0 12px}
.tbr-share-btn[aria-expanded="true"]{background:color-mix(in srgb,var(--violet) 14%,var(--pane-2));border-color:var(--accent-line)}
.tbr-share-menu{position:absolute;right:0;bottom:calc(100% + 10px);z-index:30;width:304px;padding:8px;border-radius:var(--r-lg);
  background:var(--pane);border:1px solid var(--rule);box-shadow:var(--elev-3);transform-origin:100% 100%}
.tbr-share-menu[hidden],.tbr-share-status[hidden],.tbr-ss-job[hidden],.tbr-ss-note[hidden],.tbr-ss-bar[hidden]{display:none}
.tbr-share-h{margin:4px 8px 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.tbr-share-sizes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tbr-share-item{appearance:none;display:flex;align-items:center;gap:11px;width:100%;min-height:52px;padding:8px 10px;border:0;border-radius:var(--r-md);background:none;
  color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background-color .15s ease,transform .16s cubic-bezier(0.23,1,0.32,1)}
.tbr-share-item svg{flex:none;color:var(--accent)}
.tbr-share-size{flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:92px;text-align:center;background:var(--pane-2);border:1px solid var(--rule)}
.tbr-share-t{display:grid;gap:2px;min-width:0}
.tbr-share-t b{font-size:13.5px;font-weight:650;line-height:1.25}
.tbr-share-t small{font-size:11.5px;line-height:1.3;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tbr-share-item:active:not(:disabled){transform:scale(.97)}
.tbr-share-item:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tbr-share-item:disabled{cursor:default;opacity:.6}
.tbr-share-item:disabled svg{color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){
  .tbr-share-item:not(:disabled):hover{background:color-mix(in srgb,var(--violet) 10%,var(--pane-2))}
}
.tbr-share-sep{height:1px;margin:8px 4px;background:var(--rule)}
.tbr-share-scope{margin:6px 10px 4px;font-size:11.5px;line-height:1.4;color:var(--ink-3)}

.tbr-share-status{display:grid;gap:6px;margin-top:var(--s-3)}
.tbr-ss-job,.tbr-ss-note{padding:8px 8px 8px 12px;border-radius:var(--r-md);background:var(--pane-2);border:1px solid var(--rule)}
.tbr-ss-row,.tbr-ss-note{display:flex;align-items:center;gap:10px;min-height:32px}
.tbr-ss-ico{flex:none;display:inline-flex;color:var(--accent)}
.tbr-ss-ico svg{width:18px;height:18px}
.tbr-ss-note .tbr-ss-ico{color:var(--confirm)}
.tbr-ss-job[data-state="error"] .tbr-ss-ico{color:var(--tone-warn)}
.tbr-ss-text{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tbr-ss-acts{flex:none;display:flex;align-items:center;gap:6px}
.tbr-ss-btn{appearance:none;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--rule);background:var(--pane);
  color:var(--ink);font:600 12.5px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,transform .16s cubic-bezier(0.23,1,0.32,1)}
.tbr-ss-x{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer}
.tbr-ss-btn:active,.tbr-ss-x:active{transform:scale(.96)}
.tbr-ss-btn:focus-visible,.tbr-ss-x:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (hover:hover) and (pointer:fine){
  .tbr-ss-btn:hover{background:color-mix(in srgb,var(--violet) 10%,var(--pane))}
  .tbr-ss-x:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
}
.tbr-ss-bar{height:4px;margin:8px 4px 2px 0;border-radius:99px;background:var(--rule);overflow:hidden}
.tbr-ss-bar i{display:block;height:100%;border-radius:inherit;background:var(--accent-fill);transform:scaleX(0);transform-origin:0 50%;will-change:transform}

@media (max-width:640px){
  /* Today and Share sit together at the right of the buttons row. */
  .tbr-today{margin-left:auto}
  .tbr-share-btn{padding:0 12px}
  .tbr-share-btn span{display:none}
  .tbr-share-menu{width:min(304px,calc(100vw - 32px))}
  .tbr-ss-text{font-size:13px}
}