:root{
  --bg:#eef1f7; --panel:#ffffff; --panel2:#f5f7fb; --line:#e4e8f0; --line2:#eef1f6;
  --txt:#1f2733; --mut:#697586; --accent:#4f6ef5; --accent-strong:#3f5ae0; --accent-weak:#eef1ff;
  --brand:linear-gradient(135deg,#6366f1,#7c3aed);
  --field:#f7f9fc; --field-line:#d8deea;
  --ok:#15803d; --ok-bg:#e7f6ec; --no:#b45309; --no-bg:#fdf3e6; --na:#8a96a6; --na-bg:#f1f4f8;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --radius:13px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* App-shell: donkere zijbalk (menu) + lichte topbalk (sectie + account) */
.app{display:flex;min-height:100vh}
.sidebar{width:250px;flex:none;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;
  padding:22px 16px;color:#cdd6ea;border-right:1px solid rgba(255,255,255,.06);
  background:radial-gradient(900px 520px at 18% -8%,#1f2b57 0%,#101a34 40%,#0a0f20 72%,#070b16 100%),#080f1f}
.sidebar .brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:700;font-size:16px;
  letter-spacing:-.01em;padding:6px 8px 22px}
.sidebar .brand:hover{text-decoration:none}
.sidebar .brand .logo{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;background:var(--brand);color:#fff;font-size:17px;box-shadow:0 3px 10px rgba(99,102,241,.45)}
.sidebar .navcap{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#5b6680;padding:4px 12px 8px}
.sidenav{display:flex;flex-direction:column;gap:3px}
.sidenav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  color:#9aa6c0;font-size:14.5px;font-weight:500;transition:background .12s,color .12s}
.sidenav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.sidenav a.active{background:rgba(99,102,241,.24);color:#fff;font-weight:600}
.sidenav a svg{width:18px;height:18px;flex:none;opacity:.92}
.sidebar .grow{flex:1}
.sidebar .side-foot{font-size:11.5px;color:#5b6680;padding:10px 12px 2px;border-top:1px solid rgba(255,255,255,.06);margin-top:10px}
.sidedeco{margin:12px -16px -22px;position:relative;height:200px;flex:none;pointer-events:none}
.sidedeco-img{position:absolute;inset:0;background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(to top,#000 26%,rgba(0,0,0,.82) 50%,transparent 96%);
  mask-image:linear-gradient(to top,#000 26%,rgba(0,0,0,.82) 50%,transparent 96%)}

.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:0 28px;height:64px;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;
  box-shadow:0 1px 0 rgba(16,24,40,.03)}
.topbar .pagetitle{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--txt)}
.topbar .spacer{flex:1}
.navuser{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--txt);font-weight:600;
  background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 13px}
.navrole{font-size:10.5px;background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:2px 9px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.logoutlink{font-size:13px;color:var(--mut);font-weight:500;margin-left:6px}
.logoutlink:hover{color:var(--no);text-decoration:none}

@media(max-width:820px){
  .app{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;flex-direction:row;align-items:center;gap:6px;
    padding:10px 12px;overflow-x:auto}
  .sidebar .brand{padding:0 10px 0 2px}
  .sidebar .brand span:not(.logo){display:none}
  .sidebar .navcap,.sidebar .grow,.sidebar .side-foot,.sidedeco{display:none}
  .sidenav{flex-direction:row;gap:2px}
  .sidenav a span.lbl{display:none}
}

main{max-width:1480px;width:100%;margin:0 auto;padding:28px 32px}
footer{max-width:1480px;width:100%;margin:8px auto 40px;padding:18px 32px;color:var(--mut);font-size:12px;border-top:1px solid var(--line)}
h1{font-size:25px;margin:0 0 6px;letter-spacing:-.02em;font-weight:700}
h2{font-size:17px;margin:30px 0 12px;letter-spacing:-.01em;font-weight:650}
.muted{color:var(--mut)}
.crumb{font-size:13px;margin-bottom:8px}

.pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:var(--panel2);
  border:1px solid var(--line);font-size:12px;color:var(--mut);margin-right:6px;margin-bottom:4px;font-weight:500}

table{border-collapse:separate;border-spacing:0;width:100%;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
th,td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--line2);font-variant-numeric:tabular-nums}
th{background:var(--panel2);color:var(--mut);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--panel2)}

.badge{display:inline-block;padding:3px 11px;border-radius:7px;font-size:12px;font-weight:600;white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.no{background:var(--no-bg);color:var(--no)}
.badge.na{background:var(--na-bg);color:var(--na)}
.badge.info{background:var(--accent-weak);color:var(--accent)}

.cards{display:grid;gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card.ok{border-left:4px solid var(--ok)}
.card.no{border-left:4px solid var(--no)}
.card.na{border-left:4px solid var(--na);opacity:.85}
.card.info{border-left:4px solid var(--accent)}
.card h3{margin:0 0 3px;font-size:16px;font-weight:650;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card .meta{color:var(--mut);font-size:12.5px;margin-bottom:10px}
.rule{margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}
.rule .rl{font-weight:600;font-size:13.5px;margin-bottom:8px}
.met{color:var(--ok);font-weight:600}
.miss{color:var(--no);font-weight:600}
.gap{color:var(--mut)}
.todo{color:var(--no);font-size:12px;margin-top:8px}
.target{color:#312e81;background:var(--accent-weak);border:1px solid #dbe1ff;border-radius:9px;
  padding:7px 11px;margin:7px 0 0;font-size:13px}
.target strong{color:var(--accent)}
.addbtn{font-size:12px;padding:2px 9px;border:1px solid var(--line);border-radius:6px;
  background:var(--panel);color:var(--accent);cursor:pointer;white-space:nowrap}
.addbtn:hover{border-color:var(--accent);background:var(--accent-weak)}
.exbtn{font-size:12px;padding:2px 9px;border:1px solid var(--line);border-radius:6px;
  background:var(--panel);color:var(--no);cursor:pointer;white-space:nowrap}
.exbtn:hover{border-color:var(--no);background:var(--no-bg)}
.exundo{border:0;background:none;cursor:pointer;color:var(--accent);font-size:14px;padding:0 2px}
.modal-overlay{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:50;
  align-items:center;justify-content:center;padding:20px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;max-width:420px;width:100%;box-shadow:0 12px 44px rgba(16,24,40,.22)}

.athrow{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  margin-bottom:10px;box-shadow:var(--shadow);transition:border-color .12s,box-shadow .12s}
.athrow:hover{border-color:var(--accent);text-decoration:none;box-shadow:0 2px 10px rgba(79,110,245,.14)}
.athrow .nm{font-weight:650;font-size:16px;color:var(--txt);margin-right:8px}
.athrow .right{text-align:right;white-space:nowrap;color:var(--mut);font-size:13px}

/* --- Roster (overzicht) --- */
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 20px}
.summary.vier{grid-template-columns:repeat(4,1fr)}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px}
.metric .lbl{font-size:12.5px;color:var(--mut)}
.metric .val{font-size:24px;font-weight:650;line-height:1.2;margin-top:2px}
/* Een tegel die doorlinkt: blijft een tegel, maar reageert op aanwijzen. */
a.metric{display:block;text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
a.metric:hover{border-color:var(--accent);transform:translateY(-1px);text-decoration:none}
a.metric:hover .lbl{color:var(--accent)}
.teamgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px;align-items:start}
.teamgrid.single{grid-template-columns:minmax(0,720px)}
/* Agenda: bredere kaarten (2 koloms), met overloop-vaste rijen. */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:16px;align-items:start}
.cardgrid .card{min-width:0;overflow:hidden}
.agrow{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line2)}
.agname{flex:1;min-width:80px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agteams{flex:none;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.teamsection{margin:0;min-width:0}
.teamsection .th{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.teamsection .th .cnt{font-size:12.5px;color:var(--mut)}
.roster{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.rrow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--line2);color:var(--txt);transition:background .1s}
.rrow:last-child{border-bottom:0}
.rrow:hover{background:var(--accent-weak);text-decoration:none}
.avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:650;flex:none}
.rrow .nm{font-size:14.5px;font-weight:650;color:var(--txt)}
.rrow .sub{font-size:11.5px;color:var(--mut)}
.rrow .sub .dim{color:#9aa6b6}
.teamchip{display:inline-block;padding:3px 10px;border-radius:7px;font-size:12px;font-weight:600;white-space:nowrap}
.teamchip+.teamchip{margin-left:5px}
.rend{display:flex;align-items:center;gap:10px}
.prog{text-align:right;min-width:48px}
.prog .cnt{font-size:13px;font-weight:650;color:var(--txt)}
.prog .bar{width:52px;height:4px;border-radius:3px;background:var(--line);margin-top:4px;overflow:hidden}
.prog .bar i{display:block;height:100%;border-radius:3px;background:var(--ok)}

/* --- Beheer-panelen --- */
.adminnav{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 22px}
.adminnav a{font-size:13px;padding:6px 13px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--mut)}
.adminnav a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin:0 0 18px;overflow:hidden}
.panel-head{padding:13px 18px;border-bottom:1px solid var(--line2);background:var(--panel2)}
.panel-head h2{margin:0;font-size:15.5px;font-weight:650}
.panel-head .desc{margin:2px 0 0;color:var(--mut);font-size:12.5px}
.panel-body{padding:16px 18px}
.panel-body > form{margin:0}
.panel-body table{margin-top:0}
/* Gebruikerslijst */
.userlist{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.userrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line2)}
.userrow:last-child{border-bottom:0}
.userrow .uinfo{flex:1;min-width:0}
.userrow .uname{font-weight:650;font-size:14.5px}
.userrow .uname .dn{color:var(--mut);font-weight:400;font-size:12.5px;margin-left:4px}
.userrow .uteams{font-size:12px;color:var(--mut);margin-top:3px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.rolebadge{font-size:11px;font-weight:600;padding:2px 9px;border-radius:6px;white-space:nowrap}
.rolebadge.admin{background:var(--accent-weak);color:var(--accent)}
.rolebadge.user{background:var(--ok-bg);color:var(--ok)}
.rolebadge.viewer{background:var(--na-bg);color:var(--na)}
.uactions{display:flex;gap:6px;flex:none}
.uteamedit{display:none;padding:14px;background:var(--panel2);border-bottom:1px solid var(--line2)}
.uteamedit:last-child{border-bottom:0}
.uteamedit.open{display:block}
.uteamedit form{margin:0}
.te-actions{margin-top:12px}
.teamset{display:flex;flex-wrap:wrap;gap:8px}
.teamtoggle{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--field-line);
  border-radius:9px;background:var(--panel);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
  user-select:none;transition:border-color .12s,background .12s}
.teamtoggle:hover{border-color:var(--accent)}
.teamtoggle:has(input:checked){border-color:var(--accent);background:var(--accent-weak);color:var(--accent)}
.teamtoggle input{width:auto;height:auto;margin:0;accent-color:var(--accent)}
.btn.small{padding:6px 12px;font-size:12.5px;border-radius:8px;box-shadow:none}
.uteamsbtn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-weak)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:760px){.grid2{grid-template-columns:1fr};.topbar{padding:0 16px};main{padding:18px}}

/* Regel in "Binnen bereik": naam, wedstrijd en marge naast elkaar op een
   breed scherm, onder elkaar op een telefoon. */
.kansrij{display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid var(--line2)}
.kansrij .knaam{min-width:180px;font-weight:600}
.kansrij .kcomp{flex:1}
@media(max-width:640px){
  .kansrij{flex-wrap:wrap;gap:4px 10px}
  .kansrij .knaam{min-width:0;flex:1 0 100%}
  .kansrij .kcomp{flex:1 1 auto;min-width:0}
}

/* --- Mobiel: alles binnen de schermbreedte houden ------------------------
 * Een grid-item mag standaard niet smaller worden dan zijn inhoud
 * (min-width:auto). Bij een brede tabel duwt dat de hele pagina uit beeld.
 * minmax(0,1fr) haalt die ondergrens weg; de tabel eronder scrollt zelf.
 */
@media(max-width:640px){
  .summary{grid-template-columns:repeat(2,1fr) !important}
  .metric .val{font-size:20px}
  .tabelrol{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:820px){
  .summary,.grid2,.teamgrid,.kolommen{grid-template-columns:minmax(0,1fr)}
  .summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Profielpagina: analyse links, PR's + beste seizoenstijden vast rechts */
.profile-grid{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:26px;align-items:start;margin-top:14px}
.profile-main{min-width:0}
.profile-aside{position:sticky;top:78px}
.profile-aside h2:first-child{margin-top:0}
.profile-aside table{font-size:12.5px}
.profile-aside th,.profile-aside td{padding:6px 10px;white-space:nowrap;text-align:right}
.profile-aside th:first-child,.profile-aside td:first-child{text-align:left}
.scrollx{overflow-x:auto}
@media(max-width:1040px){.profile-grid{grid-template-columns:1fr}.profile-aside{position:static}}

canvas{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
.small{font-size:12px}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel);color:var(--txt);font:inherit;font-weight:600;font-size:14px;cursor:pointer;box-shadow:var(--shadow);
  transition:border-color .12s,color .12s,background .12s}
.btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(79,110,245,.30)}
.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.btn.danger{color:var(--no);border-color:var(--no-bg)}
.btn.danger:hover{background:var(--no-bg);border-color:var(--no)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 2px}

.filterbar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  margin:12px 0 22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow)}
select,input[type=text],input[type=password],input[type=number],input[type=date],input:not([type]){
  background:var(--field);color:var(--txt);border:1px solid var(--field-line);border-radius:10px;padding:8px 12px;font:inherit;height:40px;
  transition:border-color .12s,box-shadow .12s,background .12s}
select{height:40px}
select:focus,input:focus{outline:none;border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 3px rgba(79,110,245,.15)}
tr.ours td{background:var(--accent-weak);font-weight:600}
tr.cutline td{background:var(--no-bg);color:var(--no);text-align:center;font-size:12px;font-weight:700;letter-spacing:.05em}

.disttabs{display:flex;gap:7px;flex-wrap:wrap;margin:6px 0 0}
.disttabs a{font-size:13px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);box-shadow:var(--shadow);font-weight:500}
.disttabs a:hover{border-color:var(--accent);text-decoration:none}

.notice{background:var(--accent-weak);border:1px solid #dbe1ff;color:#312e81;border-radius:var(--radius);
  padding:12px 15px;font-size:13px;margin:10px 0}
.flash{border-radius:var(--radius);padding:12px 15px;margin:0 0 18px;font-size:14px;font-weight:500}
.flash.ok{background:var(--ok-bg);color:var(--ok);border:1px solid #bfe6cb}
.flash.err{background:var(--no-bg);color:var(--no);border:1px solid #f3d9b8}

.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}
.formgrid label{display:block;font-size:12px;color:var(--mut);font-weight:600;margin-bottom:4px}
.formgrid input,.formgrid select{width:100%}

/* ---- Trainingen (MYLAPS) ---- */
.tstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin:18px 0 20px}
.tstat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px 13px;
  box-shadow:var(--shadow);border-left:4px solid var(--accent)}
.tstat .lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.tstat .val{font-size:28px;font-weight:750;letter-spacing:-.02em;margin:3px 0 1px;font-variant-numeric:tabular-nums}
.tstat .val small{font-size:13px;font-weight:600;color:var(--mut);margin-left:3px}
.tstat .sub{display:flex;justify-content:space-between;font-size:12px;color:var(--mut);gap:8px;flex-wrap:wrap}
.tstat.speed{border-left-color:#7c3aed}
.trainviz{padding:0;margin-bottom:22px}
.trainviz .cardhead{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.trainviz .cardhead h2{font-size:16px}
.trainviz .roundnav{display:flex;align-items:center;gap:8px;margin-left:auto}
.trainviz .roundnav button{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--panel);
  color:var(--accent);font-size:16px;cursor:pointer;line-height:1}
.trainviz .roundnav button:hover{border-color:var(--accent);background:var(--accent-weak)}
.trainviz .roundnav .cur{font-size:13px;font-weight:650;min-width:78px;text-align:center;font-variant-numeric:tabular-nums}
.trainviz .viz-wrap{padding:6px 10px 0;overflow-x:auto}
.trainviz .viz-wrap svg{display:block;min-width:700px;width:100%;height:auto}
.trainviz .legend{display:flex;align-items:center;gap:10px;padding:8px 18px 14px;font-size:12px;color:var(--mut);flex-wrap:wrap}
.trainviz .legend .scale{width:110px;height:8px;border-radius:99px;background:linear-gradient(90deg,#c3cdf2,#4033c9)}
th.num,td.num{text-align:right}
tr.tr-fastest td{background:var(--accent-weak)}
tr.tr-rest td{color:var(--na)}
@media (prefers-reduced-motion: reduce){ .trainviz .skater{display:none} }

/* ---- Rondetijden ---- */
.kiesbalk{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin:0 0 18px}
.kiesbalk label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--mut);font-weight:600}
.kiesbalk select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);
  font:inherit;font-size:14px;color:inherit;min-width:170px}
.afstandkeuze{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin-top:14px}
.afstandknop{display:grid;place-items:center;gap:2px;padding:18px 10px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);text-decoration:none;color:inherit;
  transition:border-color .12s,transform .12s}
.afstandknop:hover{border-color:var(--accent);transform:translateY(-1px);text-decoration:none}
.afstandknop b{font-size:26px;font-weight:650;line-height:1}
.afstandknop span{font-size:12px;color:var(--mut)}
/* De rondetijden van één rit, naast elkaar. De snelste en de slotronde krijgen
   een merkteken, zodat het verval in één oogopslag te zien is. */
td.rondes{white-space:nowrap;font-variant-numeric:tabular-nums}
.ronde{display:inline-block;padding:1px 6px;border-radius:6px;font-size:13px}
.ronde.snel{background:var(--accent-weak);font-weight:650}
.ronde.slot{outline:1px solid var(--line);outline-offset:-1px}
@media(max-width:640px){
  .kiesbalk{gap:10px}
  .kiesbalk select{min-width:0;width:100%}
  .kiesbalk label{flex:1 1 140px}
  .afstandknop{padding:14px 8px}
  .afstandknop b{font-size:21px}
}
/* Per rit: elke rondetijd met daaronder de passage waar die ronde eindigt. */
.tussenkop{font-size:10px;font-weight:600;letter-spacing:.03em;color:var(--na);text-transform:none}
.ritrij{display:inline-flex;gap:6px}
.ritkolom{display:inline-flex;flex-direction:column;align-items:center;gap:1px}
.ritkolom .ronde{text-align:center}
.tussen{display:inline-flex;flex-direction:column;align-items:center;font-size:11.5px;
  color:var(--mut);line-height:1.2}
.tussen i{font-style:normal;font-size:9.5px;color:var(--na);letter-spacing:.02em}
/* Een tabel die breder mag zijn dan de kaart schuift binnen de kaart, ook op
   een groot scherm. Zonder dit wordt de hele pagina breder dan het venster. */
.card table.breed{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
/* De wedstrijdnaam mag de rondetijden niet uit beeld duwen: afkappen met
   puntjes, smaller naarmate het scherm smaller is. */
.card table.breed td:nth-child(2){max-width:340px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){ .card table.breed td:nth-child(2){max-width:132px} }