:root{--orange:#ff6600;--orange-d:#e85500;--black:#000;--bg:#0f0f11;--panel:#1a1a1a;--panel2:#222;--line:#333;--text:#d9d9d9;--dim:#8a8a8a;--white:#fff;--live:#3ddc6f;--purple:#c77dff;--green:#5eed93}
*{box-sizing:border-box}
html{background:#060606}
body{margin:0;font:15px/1.5 Barlow,Arial,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--orange);text-decoration:none}a:hover{color:#ff8a33}
h1,h2,h3{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;color:var(--white);margin:0;letter-spacing:.5px}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.material-icons{font-size:20px;vertical-align:middle}

/* header (2TheExperience style: black bar, orange accents) */
.site-header{background:#000;position:sticky;top:0;z-index:20;border-bottom:3px solid var(--orange);margin-bottom:10px}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.logo-link{display:flex;align-items:center;gap:16px}
.logo-link img{height:52px;width:auto;display:block}
.logo-link .tag{font:700 20px 'Barlow Condensed';text-transform:uppercase;letter-spacing:2px;color:var(--white);border-left:2px solid var(--orange);padding-left:16px;line-height:1}
.site-nav a{font:700 15px Ubuntu,sans-serif;text-transform:uppercase;color:var(--white);margin-left:28px;padding:8px 0;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a.on{color:var(--orange);border-color:var(--orange)}

/* hero: no title/subtitle/filters are shown any more (see the "no intro sentence" rule below); the section only still
   holds the search field and circuit select that the header search (nav.js) types into */
.hero{padding:0}
.filters{display:flex;gap:12px;flex-wrap:wrap}
.field{display:flex;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:0 12px;color:var(--dim);flex:1 1 280px;max-width:420px}
.field.search{flex:0 1 260px}
.field input{border:0;outline:0;padding:12px 8px;flex:1;font:inherit;color:var(--white);background:transparent;min-width:0}
select.field,select{background:var(--panel);border:1px solid var(--line);border-radius:3px;color:var(--white);font:inherit;padding:12px;min-width:200px;flex:0 0 auto}
select option{background:#111}

main{padding:30px 0 60px;min-height:50vh}
.group{margin-bottom:40px}
h2{font-size:30px;font-weight:800;display:flex;align-items:center;gap:12px;padding-bottom:8px;border-bottom:2px solid var(--orange);margin-bottom:6px}
h2 .count{font:600 13px Barlow;background:var(--panel2);color:var(--dim);border-radius:10px;padding:1px 10px}
.dot{width:11px;height:11px;border-radius:50%;background:var(--live);animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,111,.7)}100%{box-shadow:0 0 0 10px rgba(61,220,111,0)}}

table{width:100%;border-collapse:collapse}
th{text-align:left;font:700 12px Barlow;text-transform:uppercase;letter-spacing:1px;color:var(--dim);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px;border-bottom:1px solid #232323;vertical-align:middle}
.list tbody tr:hover{background:#171717}
.ev{display:flex;align-items:center;gap:12px}
.lg{width:42px;height:42px;object-fit:contain;flex:none;border-radius:3px;background:#fff;padding:2px}
.lg.ph{display:flex;align-items:center;justify-content:center;background:var(--panel2);color:#666}
.name{color:var(--white);font-weight:600;font-size:16px}.sub{font-size:12px;color:var(--dim)}
.nowrap{white-space:nowrap}.right{text-align:right}
.badge{display:inline-block;font:700 11px Barlow;padding:2px 8px;border-radius:2px;text-transform:uppercase;letter-spacing:.8px;background:var(--panel2);color:var(--dim)}
.badge.live{background:var(--live);color:#062b12}.badge.priv{background:#3b2400;color:var(--orange);margin-left:6px}
.btn{display:inline-flex;align-items:center;gap:4px;padding:8px 18px;background:var(--orange);color:#000!important;font:700 14px Ubuntu,sans-serif;text-transform:uppercase;border-radius:2px;white-space:nowrap;border:0;cursor:pointer}
.btn:hover{background:#ff8a33}
.btn.ghost{background:transparent;color:var(--orange)!important;border:1px solid var(--orange)}
.btn.ghost:hover{background:var(--orange);color:#000!important}
.empty{color:var(--dim);padding:26px 0;text-align:center}

footer{background:#060606;border-top:2px solid var(--orange);color:#666;padding:22px 0;font-size:13px}
footer a{color:#999}footer a:hover{color:var(--orange)}
/* three columns on wide screens: data source left, credit centred, "N viewers" right. The side columns are equal (1fr)
   so the credit stays in the true centre, also on pages without the viewers line. Narrower screens: lines stack. */
.footer-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;row-gap:10px;column-gap:28px}
.footer-line{margin:0}
.footer-credit{text-align:center}
.footer-watch{justify-self:end}
.footer-grid>*{white-space:nowrap}
/* up to 900px the three lines do not fit with the credit truly centred, so they stack (tablet and phone) */
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr;row-gap:3px}
  .footer-grid>*{white-space:normal}
  .footer-credit{text-align:left}
  .footer-watch{justify-self:start}
}

/* ---------- live event screen (raceresults layout) ---------- */
.ev-tabs{background:#111;border-bottom:1px solid var(--line)}
.ev-tabs .wrap{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.ev-tabs a.tab{font:700 15px Ubuntu,sans-serif;text-transform:uppercase;color:#aaa;padding:14px 18px;border-bottom:3px solid transparent;margin-bottom:-1px}
.ev-tabs a.tab.on,.ev-tabs a.tab:hover{color:var(--white);border-color:var(--orange)}
.ev-tabs .spacer{flex:1}
.ev-tabs .upd{font-size:12px;color:var(--dim);text-align:right;line-height:1.3;padding:6px 0}
.ev-tabs .upd b{color:var(--white);font-weight:600}

.heat{display:flex;align-items:stretch;gap:0;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.heat>div{padding:14px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.heat .lbl{font:600 11px Barlow;text-transform:uppercase;letter-spacing:1px;color:var(--dim)}
.heat .val{font:700 26px 'Barlow Condensed';color:var(--white);line-height:1.15}
.heat .title{flex:1;min-width:220px;border-right:0}
.heat .title .val{font-size:32px;text-transform:uppercase}
.heat .title .val .no{margin-left:10px;color:var(--orange);font-weight:800}
.heat .title .subline{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--dim);margin-top:3px}
.flag{min-width:130px;align-items:center;justify-content:center!important;font:800 22px 'Barlow Condensed';text-transform:uppercase;letter-spacing:1.5px;background:transparent;color:var(--live)}
.flag.off{background:#333;color:#aaa}.flag.done{background:#444;color:#ddd}.flag.soon{background:#7a4a00;color:#fff}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px 0}
.chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.chip{font:700 13px Ubuntu,sans-serif;text-transform:uppercase;background:var(--panel);color:#bbb;border:1px solid var(--line);border-radius:2px;padding:6px 12px;cursor:pointer}
.chip.on{background:var(--orange);border-color:var(--orange);color:#000}
.chip small{opacity:.7;margin-left:4px}

table.res{font-variant-numeric:tabular-nums}
table.res th{background:#141414;cursor:pointer;user-select:none}
table.res th.on{color:var(--orange)}
table.res th .ar{font-size:10px}
table.res td{padding:9px 10px;font-size:16px}
table.res td.pos{font:800 20px 'Barlow Condensed';color:var(--white);width:60px;padding-left:8px;padding-right:2px;white-space:nowrap}
table.res td.num{color:var(--orange);font-weight:700}
table.res td.nm{color:var(--white);font-weight:600;white-space:nowrap}
table.res td.t{white-space:nowrap}
table.res td.best{color:var(--white);font-weight:700}
table.res td.fast{color:var(--purple)}
table.res td.gap{color:var(--dim)}
table.res tbody tr:nth-child(even){background:#131313}
table.res tbody tr:hover{background:#1f1f1f}
table.res tbody tr.flash td{background:rgba(122,51,0,var(--fl,0))}   /* --fl is faded 1 -> 0 by event.js */
table.res tr.none td{color:#666}
.hide-s{}
.wide{overflow-x:auto}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:26px}
.card{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--orange);padding:16px}
.card .k{font:600 12px Barlow;text-transform:uppercase;letter-spacing:1px;color:var(--dim)}
.card .v{font:800 34px 'Barlow Condensed';color:var(--white);line-height:1.2}
.card .s{font-size:13px;color:var(--dim)}
.notice{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--orange);padding:18px 20px;margin:24px 0;color:#ccc}
.back{display:inline-block;margin:18px 0 0;font:700 13px Ubuntu;text-transform:uppercase}

@media(max-width:900px){
  .logo-link .tag{display:none}
  .hide-m{display:none}
  .heat>div{padding:10px 14px}.heat .title .val{font-size:24px}
}
@media(max-width:560px){
  .hide-s{display:none}
  table.res:not(.all) td{padding:8px 5px;font-size:14px}
  td{padding:10px 6px}
}

/* rider detail */
table.res td.nm a{color:var(--white)}table.res td.nm a:hover{color:var(--orange)}
.chart-box{background:var(--panel);border:1px solid var(--line);padding:16px 14px 8px;margin-bottom:26px;position:relative}
.chart-box svg{width:100%;height:auto;display:block;overflow:visible}
.chart-box .tip{position:absolute;pointer-events:none;background:#000;border:1px solid var(--orange);padding:6px 10px;font-size:13px;color:#fff;white-space:nowrap;display:none;z-index:2;transform:translate(-50%,-115%)}
.legend{display:flex;gap:18px;font-size:12px;color:var(--dim);padding:6px 4px 8px;flex-wrap:wrap}
.legend i{display:inline-block;width:14px;height:3px;vertical-align:middle;margin-right:6px}
table.res tr.bestlap td{color:var(--purple);font-weight:700}
/* rider page: live countdown card, personal best on this circuit, hints under tables/charts */
.card.next{border-top-color:var(--live)}
.card .v.txt{font-size:26px;line-height:1.55}
.pr-box{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--purple);padding:14px 16px;margin:12px 0 14px}
.pr-box .v{font:800 40px 'Barlow Condensed';color:var(--purple);line-height:1.1}
.pr-box .s{font-size:14px;color:var(--dim);margin-top:2px}
.pr-new{color:var(--green)}
.ghint{font-size:13px;color:var(--dim);margin:8px 0 0}
table.res tr.cur td{background:#1d140c}
table.res tr.cur small{color:var(--dim);font-weight:400}
/* share card preview (card.js) */
.card-dlg{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:16px}
.card-dlg-in{width:min(460px,100%);max-height:100%;display:flex;flex-direction:column;gap:12px}
.card-dlg img{width:100%;height:auto;max-height:calc(100vh - 110px);object-fit:contain;border:1px solid var(--line);background:#0b0b0b}
.card-dlg-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* language switch */
.lang{display:flex;margin-left:24px;border:1px solid #444;border-radius:2px;overflow:hidden;flex:none}
.lang button{background:transparent;color:#aaa;border:0;padding:6px 11px;font:700 13px Ubuntu,sans-serif;cursor:pointer}
.lang button.on{background:var(--orange);color:#000}
.lang button:not(.on):hover{color:#fff}
.site-header .wrap>nav{margin-left:auto}
table.res tbody tr[data-href]{cursor:pointer}
.more{text-align:center;margin:18px 0 0}

/* anchor jumps must not hide the heading under the sticky header */
html{scroll-behavior:smooth}
section.group{scroll-margin-top:100px}


/* ================= touch + mobile ================= */
html{-webkit-text-size-adjust:100%}
a,button,select,input,.chip,tr[data-href]{-webkit-tap-highlight-color:rgba(255,102,0,.25);touch-action:manipulation}
input,select{font-size:16px}                         /* 16px stops iOS from zooming on focus */
.wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
footer{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
.btn,.tab,.lang button{min-height:44px}
.chip{min-height:40px}
.chart-box svg{touch-action:pan-y;-webkit-user-select:none;user-select:none}   /* vertical scroll still works, horizontal drag scrubs */
.only-m,.jump,#allcols{display:none}
table.res tbody tr[data-href]:active,.list tbody tr[data-href]:active{background:#2a1a0e}
.list tbody tr[data-href]{cursor:pointer}
.wide{-webkit-overflow-scrolling:touch}
@media(hover:none){table.res tbody tr:hover,.list tbody tr:hover{background:transparent}table.res tbody tr:nth-child(even):hover{background:#131313}}

@media(max-width:700px){
  .wrap{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  section.group{scroll-margin-top:76px}

  /* header */
  .site-header .wrap{height:60px;gap:10px}
  .logo-link img{height:36px}
  .site-nav.multi{display:none}
  .site-nav a{margin-left:0;padding:10px 0;font-size:13px}
  .lang{margin-left:0}
  .lang button{padding:0 12px;min-height:40px}

  /* home */
  .filters{flex-direction:column}
  .field,.field.search{max-width:none;flex:1 1 auto}
  .field input{padding:14px 8px}
  select{width:100%;min-height:48px}
  .jump{display:flex;gap:8px;margin-top:14px}
  .jump a{flex:1;text-align:center;padding:12px 6px;background:rgba(255,255,255,.08);border:1px solid #444;border-radius:2px;color:#fff;font:700 13px Ubuntu,sans-serif;text-transform:uppercase}
  main{padding-top:20px}
  h2{font-size:26px}

  /* event list: one tappable card per event */
  table.list,table.list tbody{display:block}
  table.list thead{display:none}
  table.list tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"ev ev" "date btn";gap:10px 12px;padding:14px 2px;border-bottom:1px solid #232323}
  table.list td{display:block;padding:0;border:0}
  .c-ev{grid-area:ev}.c-date{grid-area:date;align-self:center}.c-btn{grid-area:btn}
  .c-badge,.c-circ{display:none}
  .only-m{display:block}
  .name{font-size:17px}
  .btn{padding:0 18px}

  /* event page */
  .ev-tabs .wrap{gap:0}
  .ev-tabs a.tab{flex:1;text-align:center;padding:14px 6px;min-height:48px}
  .ev-tabs .spacer,.ev-tabs .upd{display:none}
  .heat{display:grid;grid-template-columns:repeat(3,1fr)}
  .heat>div{border-right:0;border-bottom:1px solid var(--line);padding:10px 14px;min-width:0}
  .heat>.flag{grid-column:1/-1;flex-direction:row;font-size:20px;padding:8px}
  .heat>.title{grid-column:1/-1;min-width:0}
  .heat>.meta{display:none}   /* event page: circuit, date and riders are left out on phones */
  /* live: no separate "LIVE" row, the pulsing dot sits in front of the title instead */
  .heat>.flag.is-live{display:none}
  .heat .tdot{display:inline-block;margin-right:10px;vertical-align:.12em}
  .heat .title .val{font-size:24px}
  .heat .val{font-size:22px}
  .toolbar{flex-direction:column;align-items:stretch;gap:10px;padding:12px 0}
  .toolbar .field.search{order:1}
  .tools{order:2}
  .tools .chip{flex:1;justify-content:center;min-height:44px}
  #allcols{display:inline-flex;align-items:center}
  .chips{order:3;flex:none;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -14px;padding:0 14px 4px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none;display:inline-flex;align-items:center;padding:0 14px}

  /* results table: only Pos, Name and Best unless "show all data" is on */
  table.res:not(.all) .opt{display:none}
  table.res.all .hide-m,table.res.all .hide-s{display:table-cell}
  /* "Show all data": columns keep their normal (desktop) width instead of being squeezed into the screen - the
     table just becomes wider than the phone and users scroll it sideways, same as it already works on tablet/desktop
     widths below 900px. A fixed min-width here still forced the browser to compress every column to fit that one
     number; width:auto lets the automatic table layout size each column by its own content, like on desktop. */
  table.res.all{width:auto;min-width:100%}
  table.res:not(.all) th{padding:12px 8px}
  table.res:not(.all) td{padding:3px 8px;font-size:16px}
  table.res:not(.all) td.pos{width:50px;font-size:20px;padding-left:6px;padding-right:2px}
  table.res:not(.all) td.nm{white-space:normal;line-height:1.25}
  table.res:not(.all) td.best{font-size:18px;line-height:1.1}

  /* stats + rider */
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:12px}.card .v{font-size:28px}
  .chart-box{padding:12px 4px 4px;margin-left:-14px;margin-right:-14px;border-left:0;border-right:0}
  .legend{padding:6px 10px 8px}
}


/* ================= favorites, compare, share, live ================= */
.tools{display:flex;gap:8px;align-items:center}
.chip .material-icons{font-size:18px;margin-right:4px;vertical-align:-4px}
.chip.toggle{display:inline-flex;align-items:center}
.chip.fav .material-icons{color:var(--orange);margin-right:2px}.chip.fav.on .material-icons{color:#000}
.chip.toggle.on{background:var(--orange);border-color:var(--orange);color:#000}

table.res th.fav,table.res td.fav{width:44px;padding:0 2px;text-align:center}
table.res th.fav .material-icons{font-size:18px;color:#666}
.star{background:transparent;border:0;color:#555;cursor:pointer;width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.star .material-icons{font-size:24px}
.star.on{color:var(--orange)}
@media(hover:hover){.star:not(.on):hover{color:#999}}
table.res th.cmp,table.res td.cmp{width:44px;padding:0 4px;text-align:center}
.cmpbox{width:22px;height:22px;accent-color:var(--orange);cursor:pointer}
table.res tr.picked td{background:#2a1a0e}

.cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#000;border-top:3px solid var(--orange);padding:10px max(14px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px}
.cmpbar[hidden]{display:none}
.cmp-count{flex:1;color:#fff;font-weight:600}.cmp-count small{color:var(--dim);font-weight:400}
.btn.disabled{opacity:.35;pointer-events:none}
.has-cmpbar footer{margin-bottom:76px}

.heat-actions{display:flex;gap:10px;align-items:center;flex-direction:row!important;justify-content:flex-end;padding:0 18px!important}
.ev-tabs .share-btn{margin:6px 0 6px 10px;min-height:38px;padding:0 14px}
.share-btn .material-icons{font-size:18px;margin-right:4px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal[hidden]{display:none}
.modal-box{background:#1a1a1a;border:1px solid var(--line);border-top:3px solid var(--orange);padding:22px;max-width:380px;width:100%;text-align:center}
.modal-box h3{font-size:26px;margin-bottom:14px}
#sh-url{-webkit-user-select:text;user-select:text;width:100%;background:#0f0f11;border:1px solid var(--line);border-radius:3px;color:#ddd;padding:10px;font:13px/1.3 Barlow,sans-serif}
.modal-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}

.chart-box .tip div{margin-top:2px;white-space:nowrap}
.chart-box .tip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}

.cmp-cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cmp-card{position:relative}
.cmp-x{position:absolute;top:8px;right:8px;color:#888}.cmp-x:hover{color:#fff}
.cmp-name{font-size:26px}.cmp-name a{color:#fff}.cmp-name a:hover{color:var(--orange)}
table.res td.win{color:var(--green);font-weight:700}

@media(max-width:700px){
  .ev-tabs .share-btn{margin:4px 0 4px 6px;padding:0 12px;min-width:44px}
  .ev-tabs .share-btn span:last-child{display:none}
  .ev-tabs .share-btn .material-icons{margin:0}
  .heat>.heat-actions{grid-column:1/-1;justify-content:stretch;padding:10px 14px!important}
  .heat-actions .btn{flex:1;justify-content:center;min-width:0}
  /* icon-only: fav/PDF/share/back can be up to four buttons in a 390px row, no room for labels too */
  .heat-actions .btn span:not(.material-icons){display:none}
  .heat-actions .btn .material-icons{margin:0}
  .cmp-cards{grid-template-columns:1fr 1fr}
  .cmp-name{font-size:20px}
  .cmpbar .btn{padding:0 14px}
  .cmp-count small{display:block}
  table.res th.fav,table.res td.fav{width:40px}
}

.modal .hint{color:var(--orange);font-size:13px;margin:10px 0 0}

/* the hidden attribute must always win over component display rules (e.g. .btn is inline-flex) */
[hidden]{display:none!important}

.legend .off{color:var(--dim)}

/* vehicle brand logos: every logo sits in the same box, as a light grey silhouette so any logo fits the dark theme.
   Unknown brands show nothing. */
.brand{width:52px;height:22px;object-fit:contain;object-position:center;vertical-align:middle;margin-right:8px;filter:brightness(0) invert(.85)}
span.brand{display:inline-block;filter:none}
table.res td.veh{white-space:nowrap}
/* logo-only column between name and time: shown when the vehicle column itself is hidden (compact / narrow) */
table.res th.bcol,table.res td.bcol{display:none;width:60px;padding-left:4px;padding-right:4px;text-align:center}
table.res td.bcol .brand{margin:0}
@media(max-width:900px){table.res:not(.all) th.bcol,table.res:not(.all) td.bcol{display:table-cell}}
@media(max-width:700px){
  .brand{width:44px;height:20px;margin-right:6px}
  table.res th.bcol,table.res td.bcol{width:52px}
}

/* phone: the toolbar rows must never be wider than the screen (they scroll inside themselves instead), and the
   favorites chip is just a star with a count */
@media(max-width:700px){
  .toolbar>*{min-width:0;max-width:calc(100% + 28px)}
  .tools .chip{min-width:0;padding:0 8px}
  .chip.fav .lbl{display:none}
  .chip.fav .material-icons{margin-right:4px}
}

.badge.demo{background:var(--orange);color:#000;margin-right:6px;vertical-align:middle}
.notice.demo{margin:14px 0 0;font-size:14px;padding:12px 16px}
@media(max-width:700px){.notice.demo{font-size:13px;padding:10px 12px;margin-top:10px}}

/* compact phone view: the last lap under the best time, so every new lap is visible */
td.best .lt{display:none}
@media(max-width:700px){
  table.res:not(.all) td.best .lt{display:block;font-size:13px;font-weight:400;line-height:1.25;color:var(--dim)}
  table.res:not(.all) td.best .lt.pb{color:var(--green);font-weight:600}
}

/* ================= phone header: hamburger, search icon, language dropdown ================= */
/* desktop: nothing of this is visible and the language switch looks like before (two buttons next to each other) */
.hb,.hmenu,.hsearch,.lang-cur{display:none}
.lang-menu{display:flex}

@media(max-width:700px){
  /* header row: logo on the left, then search icon, language dropdown and hamburger */
  .logo-link{margin-right:auto}
  .site-header .wrap{gap:2px}
  .site-nav{display:none}                                   /* its links live in the hamburger menu now */
  .hb{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;background:transparent;border:0;color:#fff;cursor:pointer}
  .hb .material-icons{font-size:26px}
  .hb-search{display:none}
  body.has-search .hb-search{display:inline-flex}
  .hb.active,.hb[aria-expanded="true"]{color:var(--orange)}

  /* language: one button, the options drop down */
  .lang{position:relative;margin-left:0;border:0;overflow:visible}
  .lang-cur{display:inline-flex;align-items:center;min-height:44px;padding:0 0 0 8px;background:transparent;border:0;color:#fff;font:700 14px Ubuntu,sans-serif;cursor:pointer}
  .lang-cur .material-icons{font-size:22px}
  .lang-cur[aria-expanded="true"]{color:var(--orange)}
  .lang-menu{display:none;position:absolute;right:-4px;top:calc(100% + 11px);min-width:180px;flex-direction:column;background:#0a0a0a;border:1px solid #333;border-top:3px solid var(--orange);z-index:40}
  .lang.open .lang-menu{display:flex}
  .lang-menu button{display:flex;align-items:center;justify-content:flex-start;min-height:48px;padding:0 16px;background:transparent;border:0;color:#ddd;font:700 15px Ubuntu,sans-serif}
  .lang-menu button::after{content:attr(data-name);margin-left:12px;font-weight:500;color:#888}
  .lang-menu button.on{background:var(--orange);color:#000}
  .lang-menu button.on::after{color:#000}

  /* the menu and the search bar drop down under the header */
  .hmenu{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:calc(100% + 3px);background:#0a0a0a;border-bottom:3px solid var(--orange);padding:4px max(14px,env(safe-area-inset-left)) 4px}
  .hmenu a{padding:15px 4px;border-bottom:1px solid #1f1f1f;color:#fff;font:700 16px Ubuntu,sans-serif;text-transform:uppercase}
  .hmenu a:last-child{border-bottom:0}
  .hsearch{display:block;position:absolute;left:0;right:0;top:calc(100% + 3px);background:#0a0a0a;border-bottom:3px solid var(--orange);padding:10px max(14px,env(safe-area-inset-left))}
  .hsearch .field{max-width:none;width:100%}
  .hs-clear{flex:none;width:40px;height:40px;padding:0;background:transparent;border:0;color:#999;cursor:pointer}

  /* the in-page search fields move to the header on a phone (they stay in the page so they can be driven from there) */
  .hero .field,.toolbar .field.search{display:none}

  /* events overview: one compact row per event, no date / circuit / length */
  table.list tr{grid-template-columns:60% 1fr;grid-template-areas:"ev btn";align-items:center;gap:0 10px;padding:12px 2px}
  /* specific selector: the general "table.list td{display:block}" rule would otherwise win */
  table.list td.c-date,table.list td.c-badge,table.list td.c-circ{display:none}
  .c-btn{justify-self:end}
  .list .lg{width:36px;height:36px}
  .list .ev{gap:10px}
  .list .name{font-size:16px;line-height:1.25}
  .list .sub.only-m{font-size:13px;margin-top:2px}
  .c-btn .btn{padding:0 12px;font-size:13px}
}

/* compact phone view: the header of the best column also names the small last-lap line under each time */
th .lt-h{display:none}
@media(max-width:700px){
  table.res:not(.all) th .lt-h{display:block;margin-top:2px;font-size:10px;font-weight:500;letter-spacing:.8px;color:var(--dim);line-height:1.2}
}

/* iOS Safari zooms the page in when a field with a font smaller than 16px gets focus. The search fields inherited 15px
   ("font: inherit"), so state the size where it wins over that rule. Phone only; desktop keeps its look. */
@media(max-width:700px){
  .field input,.hsearch input,input,select,textarea{font-size:16px}
}

/* ================= search in the header, no circuit dropdown, no intro line ================= */
/* the in-page search fields stay in the DOM (the header search types into them) but are never shown */
.hero .field,.toolbar .field.search{display:none}
/* no intro sentence and no circuit dropdown on any screen size */
.hero .filters,.hero p{display:none}

/* wide screens: an inline search field in the header */
.dsearch{display:none;align-items:center;flex:none;width:clamp(300px,26vw,330px);height:40px;margin-left:24px;padding:0 4px 0 12px;background:#141414;border:1px solid #333;border-radius:3px;color:#888;cursor:text}
body.has-search .dsearch{display:flex}
.dsearch:focus-within{border-color:var(--orange)}
.dsearch input{flex:1;min-width:0;height:100%;padding:0 8px;border:0;outline:0;background:transparent;color:#fff;font:inherit}
.dsearch .material-icons{font-size:20px}
.hs-clear{flex:none;width:32px;height:32px;padding:0;background:transparent;border:0;color:#999;cursor:pointer}

/* up to 1100px there is not enough room next to the menu links: a search icon that drops down a bar (as on the phone) */
@media(max-width:1100px){
  body.has-search .dsearch{display:none}
  body.has-search .hb-search{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;background:transparent;border:0;color:#fff;cursor:pointer}
  .hb-search .material-icons{font-size:26px}
  .hb-search.active,.hb-search[aria-expanded="true"]{color:var(--orange)}
  .hsearch{display:block;position:absolute;left:0;right:0;top:calc(100% + 3px);background:#0a0a0a;border-bottom:3px solid var(--orange);padding:10px max(20px,env(safe-area-inset-left))}
  .hsearch .field{max-width:none;width:100%}
  .hs-clear{width:40px;height:40px}
}

/* narrow tablet: three menu links plus the icons need a little less spacing to fit next to the logo */
@media(min-width:701px) and (max-width:780px){
  .site-nav a{margin-left:16px}
}

/* the browser's own clear cross would sit next to ours */
.dsearch input::-webkit-search-cancel-button,.hsearch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}

/* results PDF button (finished events), next to the share button */
.ev-tabs .pdf-btn,.ev-tabs .fav-btn{margin:6px 0 6px 10px;min-height:38px;padding:0 14px}
.fav-btn.on{color:var(--orange)!important;border-color:var(--orange)!important}
.fav-btn.on .material-icons{color:var(--orange)}
.pdf-btn .material-icons{font-size:18px;margin-right:4px}
@media(max-width:700px){
  .ev-tabs .pdf-btn,.ev-tabs .fav-btn{margin:4px 0 4px 6px;padding:0 12px;min-width:44px}
  .ev-tabs .pdf-btn .pdf-lbl,.ev-tabs .fav-btn span:not(.material-icons){display:none}
  .ev-tabs .pdf-btn .material-icons,.ev-tabs .fav-btn .material-icons{margin:0}
}

/* A long motorcycle (or rider) name must never widen the table into a horizontal scroll: the motorcycle column takes the
   space that is left and cuts long names short with "..." (the full name is in the tooltip). */
table.res td.veh{max-width:0;width:22%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.res td.nm a{display:inline-block;max-width:260px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
@media(max-width:700px){
  table.res td.nm a{display:inline;max-width:none}      /* on a phone names wrap instead */
  table.res td.nm{overflow-wrap:anywhere}
}

/* compare page: each rider's own fastest lap is purple (where and when it was); green marks the fastest rider in that lap */
table.res td.win{background:rgba(94,237,147,.10);color:var(--green);font-weight:700}
table.res td.pb{color:var(--purple);font-weight:700}
.cmp-legend{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 10px;font-size:13px;color:var(--dim)}
.cmp-legend span::before{content:'';display:inline-block;width:10px;height:10px;margin-right:7px;border-radius:2px;vertical-align:-1px}
.cmp-legend .pbkey::before{background:var(--purple)}
.cmp-legend .winkey::before{background:var(--green)}
.cmp-card .pbinfo{color:var(--dim)}

/* /all: the note above the lists, and the organizer line under the title (year follows it on a phone) */
.notice.all-note{margin:0 0 24px;font-size:14px}
@media(max-width:700px){.sub span.only-m{display:inline}}

/* no live session: the dot next to "Live now" is red and does not pulse */
.tdot{display:none}   /* live dot in front of the heat bar title: phones only (see the 700px block) */
.dot.off{background:#e1071b;animation:none}

/* group colours (riders split into groups such as A/B/C/D each get a distinct colour, see buildGroupColors in util.js) */
.badge.grp{border:1px solid transparent;font-weight:800}
.chip .gdot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:middle;border:1px solid rgba(255,255,255,.25)}

/* footer "N viewers" line (event.js/rider.js/compare.js), only shown while that event is live: a plain dot + text,
   in keeping with the other plain-text footer lines (no pill/box around it) */
.footer-watch{display:inline-flex;align-items:center;gap:7px;margin:0;color:#888}
.footer-watch .wdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);animation:vpulse 2.4s ease-in-out infinite}
@keyframes vpulse{0%,100%{opacity:1}50%{opacity:.3}}

/* live position-change arrow next to "Pos" (only shown while sorted by Best, the natural race-position view) */
.posmove{display:inline-block;margin-left:3px;font-size:11px;vertical-align:2px;animation:posmove .5s ease-out}
.posmove.up{color:var(--green)}
.posmove.down{color:#ff6b6b}
@keyframes posmove{0%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}