/* Aera Coach: the coach's desk. Look taken from the 2026-11-11 team mock. */
:root {
  --ink: #1b1a17;
  --s: rgba(0, 0, 0, .6);
  --t: rgba(0, 0, 0, .42);
  --line: rgba(0, 0, 0, .09);
  --fill: rgba(0, 0, 0, .055);
  --run: #F1641C;
  --runink: #C2500F;
  --ok: #2f6a1c;
  --okbg: rgba(127, 196, 100, .28);
  --off: #7a4a05;
  --offbg: rgba(240, 165, 58, .28);
  --bad: #B3261E;
  --page: #F6F4EF;
  --text: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { background: var(--page); color: var(--ink); font: 400 15px/20px var(--text); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--runink); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: default; }
.sp { flex: 1; }

.brand { display: flex; align-items: center; gap: 10px; font: 900 19px var(--round); letter-spacing: -.2px; }
.brand img { border-radius: 8px; }
.brand small { font: 600 12px var(--text); color: var(--runink); background: rgba(241, 100, 28, .12); border-radius: 7px; padding: 2px 7px; margin-left: -2px; }

/* sign-in */
.sign { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; }
.card { width: 100%; max-width: 400px; background: #fff; border-radius: 30px; box-shadow: 0 30px 70px rgba(60, 50, 30, .16); padding: 34px 34px 28px; }
.card h1 { font: 900 22px/27px var(--round); margin-top: 26px; }
.card p { font-size: 14px; line-height: 19px; color: var(--s); margin-top: 6px; }
.note { color: var(--ink) !important; background: var(--fill); border-radius: 12px; padding: 10px 12px; margin-top: 16px !important; }
.apl { margin-top: 20px; height: 46px; border-radius: 23px; background: #000; color: #fff; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.apl svg { margin-top: -2px; }
.keep { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 14px; color: var(--s); cursor: pointer; }
.keep input { width: 17px; height: 17px; accent-color: var(--ink); }
.card .foot { margin-top: 26px; font-size: 12.5px; color: var(--t); }

/* frame */
.desk { min-height: 100%; display: grid; grid-template-columns: 212px minmax(0, 1fr); }
.side { border-right: 1px solid var(--line); background: #F1EEE7; padding: 20px 12px 16px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .brand { padding: 0 8px 16px; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.nv { height: 38px; border-radius: 11px; display: flex; align-items: center; gap: 11px; padding: 0 10px; font-weight: 600; color: var(--s); }
.nv.on { background: rgba(0, 0, 0, .07); color: var(--ink); }
.nv svg { flex: none; opacity: .8; }
.nv em { margin-left: auto; font: 700 12px var(--text); background: var(--run); color: #fff; border-radius: 9px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.side h6 { font: 600 12px var(--text); letter-spacing: .3px; text-transform: uppercase; color: var(--t); padding: 18px 10px 6px; }
.pin { height: 34px; border-radius: 10px; display: flex; align-items: center; gap: 9px; padding: 0 10px; font: 500 14px var(--text); }
.pin.on { background: rgba(0, 0, 0, .07); }
.pin u { margin-left: auto; width: 7px; height: 7px; border-radius: 4px; background: var(--run); }
.av { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--round); font-weight: 800; color: #fff; flex: none; font-style: normal; }
.me { margin-top: auto; border-top: 1px solid var(--line); padding: 12px 8px 0; }
.me > b { display: block; font: 600 14px/18px var(--text); }
.smp { font: 400 12px/16px var(--text); color: var(--s); background: rgba(241, 100, 28, .1); border-radius: 10px; padding: 7px 9px; margin: 0 -2px 12px; }
.smp b { display: block; color: var(--runink); }
.link { font-size: 13px; line-height: 18px; color: var(--s); text-decoration: underline; text-underline-offset: 2px; }

.main { padding: 24px 30px 48px; min-width: 0; }
.page { max-width: 1320px; }
.hd { display: flex; align-items: center; gap: 10px 14px; min-height: 52px; flex-wrap: wrap; }
.hd h1 { font: 900 27px/30px var(--round); letter-spacing: -.3px; }
.sub { font: 400 14px/18px var(--text); color: var(--s); margin-top: 1px; }
.main h2 { font: 600 12px/16px var(--text); letter-spacing: .3px; text-transform: uppercase; color: var(--t); margin: 22px 0 8px; }
.body { max-width: 560px; font-size: 14px; line-height: 19px; color: var(--s); margin-top: 4px; }
.empty { padding: 60px 0; text-align: center; color: var(--t); }
.empty.in { padding: 26px 0; }
.cap { font: 600 12px/16px var(--text); letter-spacing: .3px; text-transform: uppercase; color: var(--t); }
.scroll { overflow-x: auto; }
.rnd { width: 34px; height: 34px; border-radius: 17px; background: var(--fill); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rnd.sm { width: 26px; height: 26px; color: var(--s); }

.seg { height: 36px; border-radius: 18px; background: var(--fill); display: inline-flex; padding: 3px; }
.seg button { border-radius: 15px; padding: 0 15px; font: 600 14px var(--text); color: var(--s); white-space: nowrap; transition: background .25s, color .25s; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); cursor: default; }
.seg.sm { height: 30px; border-radius: 15px; }
.seg.sm button { padding: 0 12px; font-size: 13px; border-radius: 12px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.chip { height: 30px; border-radius: 15px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--text); background: var(--fill); color: rgba(0, 0, 0, .7); white-space: nowrap; }
.chip.on { background: var(--ink); color: #fff; }
.chip.a { background: var(--offbg); color: var(--off); }
.btn { height: 36px; border-radius: 18px; padding: 0 16px; display: inline-flex; align-items: center; gap: 7px; font: 700 14px var(--text); background: linear-gradient(#A2DA86, #8FCB72); color: #12300a; box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .55), 0 3px 10px rgba(80, 140, 60, .22); white-space: nowrap; }
.btn.q { background: var(--fill); color: var(--ink); box-shadow: none; font-weight: 600; }
.btn.danger { color: var(--bad); }
.btn.solid { background: var(--bad); color: #fff; box-shadow: none; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.st { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 22px; height: 22px; border-radius: 11px; padding: 0 9px; font: 700 12px var(--text); white-space: nowrap; }
.st.ok { background: var(--okbg); color: var(--ok); }
.st.off { background: var(--offbg); color: var(--off); }
.st.miss { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); color: var(--t); }
.st.pl { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); color: var(--s); }

.list { list-style: none; max-width: 560px; background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.list li { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.list li + li { border-top: 1px solid var(--line); }
.list b { display: block; }
.list span { display: block; font-size: 13px; line-height: 18px; color: var(--s); }
.list .btn { margin-left: auto; }

/* athletes */
.tbl { margin-top: 14px; min-width: 1110px; }
.tr { display: grid; grid-template-columns: 136px 150px repeat(7, 62px) 76px 116px 1fr; align-items: center; height: 51px; border-top: 1px solid var(--line); gap: 0 6px; transition: background .2s; }
.tr.h { height: 30px; border-top: 0; font: 600 12px var(--text); letter-spacing: .2px; text-transform: uppercase; color: var(--t); }
.tr.h .d { text-align: center; }
.tr.h .d.t { color: var(--runink); }
/* A whole row opens what its name links to. */
.go { position: relative; cursor: pointer; }
.go:hover { background: rgba(0, 0, 0, .035); }
.go .nm a::after { content: ""; position: absolute; inset: 0; }
.go .nm a:focus-visible { outline: none; }
.go:has(a:focus-visible) { outline: 2px solid var(--runink); outline-offset: -2px; border-radius: 8px; }
.tr .nm { display: flex; align-items: center; gap: 11px; font: 600 15px var(--text); padding-left: 4px; }
.tr .wt { font: 400 13px var(--text); color: var(--s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr.h .wt { font: inherit; color: inherit; }
.c { height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 600 11.5px var(--text); white-space: nowrap; overflow: hidden; }
.c.ok { background: var(--okbg); color: var(--ok); }
.c.off { background: var(--offbg); color: var(--off); }
.c.miss { color: rgba(0, 0, 0, .35); text-decoration: line-through; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.c.plan { color: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .17); }
.c.extra { background: rgba(0, 0, 0, .07); color: rgba(0, 0, 0, .6); }
.c.rest { color: rgba(0, 0, 0, .25); }
.c.ill { background: rgba(216, 85, 59, .13); color: #A23A22; }
.c.away { color: rgba(0, 0, 0, .5); background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .06) 0 4px, transparent 4px 8px); }
.tr .goal { font: 400 12.5px/16px var(--text); color: var(--s); white-space: nowrap; padding-left: 8px; }
.tr.h .goal { font: inherit; color: inherit; }
.tr .goal b { color: var(--ink); }
.cm { width: 20px; height: 20px; border-radius: 10px; margin-left: -3px; background: var(--run); color: #fff; font: 700 12px var(--text); display: flex; align-items: center; justify-content: center; }
.frm { display: flex; align-items: center; gap: 7px; font: 600 13px var(--text); white-space: nowrap; }
.frm i { width: 8px; height: 8px; border-radius: 4px; flex: none; }
.tr .wk { font: 400 12.5px/16px var(--text); color: var(--s); white-space: nowrap; }
.tr .wk b { font: 800 14px var(--round); color: var(--ink); }
.tr .wk u { display: block; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .08); margin-top: 4px; width: 62px; overflow: hidden; }
.tr .wk u i { display: block; height: 100%; border-radius: 2px; background: #8FCB72; }
.key { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; font: 400 13px var(--text); color: var(--s); margin-top: 14px; }
.key > span { display: inline-flex; align-items: center; gap: 7px; }
.key .c { height: 18px; width: 26px; border-radius: 6px; }

/* week */
.well { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.well em { white-space: nowrap; font: 600 12px var(--text); letter-spacing: .3px; text-transform: uppercase; color: var(--t); margin-right: 4px; }
.well span { height: 28px; border-radius: 14px; padding: 0 11px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); font: 400 13px var(--text); color: var(--s); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.well b { color: var(--ink); }
.wkbar { display: flex; align-items: center; gap: 8px 14px; margin-top: 12px; min-height: 36px; flex-wrap: wrap; }
.wkbar.nx { margin-top: 18px; }
.wkbar b.R { font: 800 18px var(--round); }
.wkbar .rnd + b.R { min-width: 96px; text-align: center; margin: 0 -6px; }
.phase { font: 400 14px var(--text); color: var(--s); }
.tot { display: flex; align-items: baseline; gap: 6px; font: 400 14px var(--text); color: var(--s); white-space: nowrap; }
.tot b { font: 800 18px var(--round); color: var(--ink); }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 8px; min-width: 860px; }
.dy { border-radius: 16px; padding: 8px 7px 7px; display: flex; flex-direction: column; gap: 6px; background: rgba(0, 0, 0, .028); min-height: 150px; transition: background .25s, box-shadow .25s; }
.dy.today { background: rgba(241, 100, 28, .075); }
.dy.drop { background: rgba(127, 196, 100, .2); box-shadow: inset 0 0 0 2px rgba(110, 180, 85, .7); }
.dh { display: flex; align-items: baseline; gap: 6px; padding: 0 4px; font: 600 12px var(--text); text-transform: uppercase; letter-spacing: .2px; color: var(--t); }
.dh b { font: 800 17px var(--round); color: var(--ink); }
.dh .c { height: 20px; padding: 0 7px; margin-left: auto; align-self: center; text-transform: none; }
.dy.today .dh { color: var(--runink); }
.restd { margin: auto; font: 500 13px var(--text); color: var(--t); }
.addd { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 13px var(--text); color: var(--t); border-radius: 12px; padding: 10px 14px; }
.addd.more { margin: 0 auto; padding: 4px 14px; opacity: 0; }
.dy:hover .addd.more, .addd.more:focus-visible { opacity: 1; }
.addd:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
.sc { display: block; width: 100%; text-align: left; background: #fff; border-radius: 13px; padding: 8px 9px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 16px rgba(60, 50, 30, .07); position: relative; min-width: 0; }
a.sc, button.sc, .sc[role="button"] { cursor: pointer; }
.sc.pl { background: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
.sc.gone { opacity: .6; cursor: default; }
.sc .t { font: 600 14px/18px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc .m { font: 400 12.5px/17px var(--text); color: var(--s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf { display: flex; align-items: flex-end; gap: 1.5px; height: 20px; margin: 7px 0 6px; }
.pf i, .prev i { flex: 1 1 0; min-width: 1px; border-radius: 1.5px; background: rgba(0, 0, 0, .16); }
.pf i.h, .prev i.h { background: var(--run); }
.pf i.m, .prev i.m { background: #E9A23B; }
.sc .ft { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.sc .ld { margin-left: auto; font: 800 14px var(--round); }
.sc .ld small { font: 500 11px var(--text); color: var(--t); margin-right: 3px; }
.bub { position: absolute; right: -5px; top: -6px; width: 20px; height: 20px; border-radius: 10px; background: var(--run); color: #fff; font: 700 11px var(--text); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--page); }
.shelf { margin-top: 22px; }
.shelf .row { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.shelf .sc { width: 176px; flex: none; }
.lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.lib .sc { padding: 12px 13px; }

/* one run */
.sgrid { display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: 26px; margin-top: 8px; }
.facts { display: flex; gap: 10px 22px; margin-top: 8px; flex-wrap: wrap; }
.facts b { display: block; font: 800 19px/23px var(--round); }
.facts span { font: 400 12.5px/16px var(--text); color: var(--s); white-space: nowrap; }
.reps { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; margin-top: 14px; }
.rp { border-radius: 11px; padding: 7px 10px; background: var(--okbg); color: var(--ok); }
.rp.off { background: var(--offbg); color: var(--off); }
.rp b { display: block; font: 800 16px/20px var(--round); }
.rp span { font: 500 12px/15px var(--text); opacity: .85; white-space: nowrap; }
.chart { margin-top: 16px; }
.strips { position: relative; touch-action: pan-y; }
.strip { position: relative; height: 66px; border-top: 1px solid var(--line); }
.strip:first-child { border-top: 0; }
.strip .l { position: absolute; left: 0; top: 7px; font: 600 12px var(--text); color: var(--s); }
.strip .r { position: absolute; right: 0; top: 6px; font: 800 13px var(--round); }
.strip .r small { font: 400 12px var(--text); color: var(--t); margin-right: 5px; }
.strip svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink); opacity: .45; pointer-events: none; }
.xax { display: flex; justify-content: space-between; font: 400 11.5px var(--text); color: var(--t); margin-top: 3px; position: relative; }
.read { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); font: 600 12.5px var(--text); color: var(--ink); white-space: nowrap; }
.cap.zt { margin-top: 30px; }
.zbar { display: flex; gap: 2px; height: 16px; margin-top: 8px; border-radius: 8px; overflow: hidden; }
.zbar i { display: flex; align-items: center; padding: 0 8px; overflow: hidden; flex: 1 1 0; min-width: 3px; }
.zbar b { font: 600 11.5px var(--text); color: rgba(0, 0, 0, .72); white-space: nowrap; }
.zleg { display: flex; gap: 6px 16px; margin-top: 8px; font: 400 12.5px/16px var(--text); color: var(--s); flex-wrap: wrap; }
.zleg span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.zleg i { width: 9px; height: 9px; border-radius: 5px; }
.zleg b { color: var(--ink); }
.rc h4 { font: 900 17px var(--round); margin-bottom: 6px; }
.rc h4.gap { margin-top: 20px; }
.ldbig { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ldbig b { font: 900 46px/48px var(--round); letter-spacing: -.6px; }
.ldbig span { font: 700 15px var(--text); color: var(--runink); }
.fl { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font: 400 13.5px/18px var(--text); color: var(--s); }
.fl b { color: var(--ink); }
.fl span { margin-left: auto; text-align: right; }
.msg { display: flex; gap: 9px; margin-top: 10px; }
.bb { background: #fff; border-radius: 4px 15px 15px 15px; padding: 8px 11px; font: 400 13.5px/18px var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); overflow-wrap: anywhere; }
.bb small { display: block; font: 600 11.5px/15px var(--text); color: var(--t); margin-bottom: 1px; }
.msg.me { flex-direction: row-reverse; }
.msg.me .bb { background: #DDF0D2; border-radius: 15px 4px 15px 15px; }
.feel { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: -1px; }
.feel i { width: 5px; height: 10px; border-radius: 2px; background: rgba(0, 0, 0, .14); }
.feel i.on { background: var(--run); }
.box { margin-top: 10px; height: 40px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); display: flex; align-items: center; padding: 0 6px 0 14px; }
.box input { flex: 1; min-width: 0; border: 0; background: none; font: 400 13.5px var(--text); outline: none; }
.box:focus-within { box-shadow: inset 0 0 0 2px var(--runink); }
.box button { width: 28px; height: 28px; border-radius: 14px; background: var(--run); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }

/* season */
.goals { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.gl { height: 32px; border-radius: 16px; padding: 0 13px 0 5px; display: inline-flex; gap: 8px; align-items: center; font: 500 13.5px var(--text); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .07); white-space: nowrap; }
.gl i { width: 22px; height: 22px; border-radius: 11px; background: var(--ink); color: #fff; font: 800 12px var(--round); font-style: normal; display: flex; align-items: center; justify-content: center; }
.gl i.b { background: rgba(0, 0, 0, .25); }
.plot { margin-top: 16px; min-width: 820px; }
.plot svg { display: block; width: 100%; height: auto; margin-top: 8px; }
svg text { font: 400 11.5px var(--text); fill: rgba(0, 0, 0, .45); }
svg text.v { font: 800 13px var(--round); fill: var(--ink); }
.phs { position: relative; height: 40px; }
.ph { position: absolute; top: 0; height: 40px; border-radius: 9px; padding: 4px 9px; overflow: hidden; white-space: nowrap; }
.ph b { display: block; font: 700 13px/16px var(--text); }
.ph span { font: 400 11.5px/14px var(--text); opacity: .8; }
.lg { display: flex; gap: 16px; align-items: center; font: 400 12.5px var(--text); color: var(--s); margin-top: 10px; flex-wrap: wrap; }
.lg span { display: inline-flex; align-items: center; gap: 6px; }
.lg i { width: 12px; height: 12px; border-radius: 3px; }
.lg i.plan { background: rgba(0, 0, 0, .12); }
.lg i.done { background: #7FC464; }
.lg i.now { background: var(--run); }

/* tests and zones */
.zg { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 34px; margin-top: 16px; }
svg.tests { display: block; width: 100%; max-width: 330px; height: auto; margin-top: 10px; overflow: visible; }
.thr { display: flex; gap: 26px; margin-top: 12px; }
.thr span { display: block; font: 400 12.5px/16px var(--text); color: var(--s); }
.thr b { font: 900 30px/34px var(--round); letter-spacing: -.3px; }
.thr b s { font: 700 17px var(--round); color: var(--t); margin-right: 8px; text-decoration-thickness: 1.5px; }
.zt { min-width: 520px; }
.zr { display: grid; grid-template-columns: 10px 130px minmax(60px, 1fr) 216px 84px; gap: 12px; align-items: center; height: 46px; border-top: 1px solid var(--line); font: 400 14px var(--text); }
.zr.h { height: 28px; border: 0; font: 600 12px var(--text); text-transform: uppercase; letter-spacing: .2px; color: var(--t); }
.zr > i { width: 10px; height: 26px; border-radius: 5px; }
.zr b.R { font: 800 16px var(--round); }
.zr s { color: var(--t); font-size: 12.5px; margin-left: 7px; }
.zr .bar { height: 8px; border-radius: 4px; background: var(--fill); position: relative; }
.zr .bar u { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.blurb { font: 400 13.5px/19px var(--text); color: var(--s); margin-top: 12px; max-width: 620px; }
.tests { margin-top: 20px; }
.tests .cap { margin-bottom: 6px; }

/* team week */
.tgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; margin-top: 14px; }
.gs { background: #fff; border-radius: 18px; padding: 14px 16px 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.gs.nx { margin-top: 12px; padding-bottom: 14px; }
.gh { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; flex-wrap: wrap; }
.gs.nx .gh { padding-bottom: 0; }
.gh b { display: block; font: 800 18px/22px var(--round); }
.gh div span { font: 400 13px/17px var(--text); color: var(--s); }
.av-row { display: flex; }
.av-row .av { margin-left: -5px; box-shadow: 0 0 0 2px #fff; }
.gt { min-width: 600px; }
.gr { display: grid; grid-template-columns: 120px 100px minmax(0, 1fr) 62px 40px; align-items: center; min-height: 44px; border-top: 1px solid var(--line); gap: 0 10px; font: 400 13px var(--text); color: var(--s); transition: background .2s; }
.gr.h { min-height: 28px; border-top: 0; font: 600 12px var(--text); letter-spacing: .2px; text-transform: uppercase; color: var(--t); }
.gr .nm { display: flex; align-items: center; gap: 9px; font: 600 14.5px var(--text); color: var(--ink); }
.gr b { font: 800 14.5px var(--round); color: var(--ink); }
.rs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px 0; }
.rs i { font: 600 11.5px var(--text); font-style: normal; height: 24px; min-width: 38px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--okbg); color: var(--ok); }
.rs i.off { background: var(--offbg); color: var(--off); }
.rs i.no { background: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); color: var(--t); }
.race { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font: 600 14px/18px var(--text); margin-top: 0; }
.cap + .race { margin-top: 8px; }
.race > b { font: 800 14px/18px var(--round); width: 58px; flex: none; color: var(--runink); }
.race span { display: flex; gap: 3px; margin-top: 5px; }

/* dialogs */
dialog { margin: auto; border: 0; border-radius: 24px; padding: 26px 26px 22px; width: calc(100% - 48px); max-width: 380px; color: var(--ink); box-shadow: 0 30px 70px rgba(60, 50, 30, .25); }
dialog::backdrop { background: rgba(27, 26, 23, .35); }
dialog h2 { font: 900 20px/25px var(--round); }
dialog p { font-size: 14px; line-height: 19px; color: var(--s); margin-top: 6px; }
dialog.dlg { max-width: 900px; width: calc(100% - 32px); max-height: calc(100% - 32px); overflow-y: auto; background: var(--page); border-radius: 26px; padding: 22px 26px; box-shadow: 0 40px 90px rgba(0, 0, 0, .35); }
select, input[type="date"], input.n { height: 34px; border-radius: 10px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .13); padding: 0 9px; font: 500 14px var(--text); min-width: 0; }
input.n { width: 68px; text-align: right; font: 800 15px var(--round); }
input.name { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; font: 900 23px/34px var(--round); padding-bottom: 4px; outline: none; }
input.name:focus { border-bottom-color: var(--runink); }
.flds { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld span { font: 600 12px/16px var(--text); letter-spacing: .3px; text-transform: uppercase; color: var(--t); }
.bgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; margin-top: 16px; }
.stp { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 50px; border-top: 1px solid var(--line); padding: 7px 0; }
.stp > i { height: 28px; border-radius: 3px; }
.pair { display: flex; gap: 6px; min-width: 0; }
.pair select { flex: 0 1 auto; }
.rpt { background: rgba(241, 100, 28, .07); border-radius: 14px; padding: 0 12px 2px; margin: 4px -12px; }
.rh { min-height: 44px; display: flex; align-items: center; gap: 8px; font: 700 12px var(--text); letter-spacing: .2px; text-transform: uppercase; color: var(--runink); }
.rh .link { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--runink); }
.rpt .stp:first-of-type { border-top: 0; }
.acts.adds { margin-top: 12px; }
.prev { display: flex; align-items: flex-end; gap: 2px; height: 92px; margin-top: 8px; border-bottom: 1px solid var(--line); }
.prev i { border-radius: 3px 3px 0 0; }
.about { display: flex; align-items: baseline; gap: 5px; margin-top: 8px !important; color: var(--s); }
.about small { font-size: 13px; margin-right: 2px; }
.about b { font: 800 18px var(--round); color: var(--ink); margin-left: 4px; }
.cap.lands { margin-top: 18px !important; }
.to { display: flex; align-items: center; gap: 9px; min-height: 38px; border-top: 1px solid var(--line); font: 500 14px var(--text); }
.cap.lands + .to { border-top: 0; }
.to span { margin-left: auto; font: 400 12.5px var(--text); color: var(--s); display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.to span b { font: 700 12.5px var(--round); color: var(--ink); margin-right: 4px; }
.sub.own { margin-top: 8px; font-size: 13px; }
.acts.foot { margin-top: 22px; }

.toast { position: fixed; z-index: 80; left: 50%; bottom: 22px; transform: translate(-50%, 90px); background: var(--ink); color: #fff; border-radius: 22px; min-height: 44px; padding: 10px 18px; display: flex; align-items: center; font: 600 14px var(--text); transition: transform .45s cubic-bezier(.2, .9, .2, 1); max-width: calc(100% - 32px); pointer-events: none; }
.toast.in { transform: translate(-50%, 0); }
.nojs { padding: 40px; text-align: center; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01s !important; } }

@media (max-width: 1260px) {
  .tbl { min-width: 950px; }
  .tr { grid-template-columns: 136px repeat(7, 62px) 76px 116px 1fr; }
  .tr .wt { display: none; }
}
@media (max-width: 1140px) {
  .desk { grid-template-columns: 64px minmax(0, 1fr); }
  .side { padding: 20px 8px 14px; align-items: center; }
  .side .brand { padding: 0 0 16px; }
  .side .brand span, .side .brand small, .nv span, .side h6, .pin span, .smp, .me > b { display: none; }
  .nv, .pin { width: 44px; padding: 0; justify-content: center; position: relative; }
  .nv em { position: absolute; right: -2px; top: -2px; }
  .pin u { position: absolute; right: 4px; top: 4px; margin: 0; }
  .me { padding: 10px 0 0; text-align: center; }
  .me .link { font-size: 12px; line-height: 15px; }
  .main { padding: 22px 22px 48px; }
}
@media (max-width: 1000px) {
  .sgrid, .tgrid, .zg, .bgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .desk { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .side { position: static; height: auto; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; gap: 6px; overflow: visible; }
  .side .brand { padding: 0 6px 0 0; }
  .side nav { flex-direction: row; }
  .pins { display: none; }
  .me { margin: 0 0 0 auto; border: 0; padding: 0; }
  .main { padding: 14px 16px 40px; }
  dialog.dlg { padding: 18px 16px; }
}