/* Anton, Archivo, Inter Tight and Spline Sans Mono, latin, from Google Fonts. SIL Open Font License 1.1 (scripts.sil.org/OFL). */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-5f6ded.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivo-29dd3e.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-tight-a807ee.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-tight-a807ee.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-a807ee.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-tight-a807ee.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spline-sans-mono-850940.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/spline-sans-mono-850940.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{padding-top:env(safe-area-inset-top,0px)}
/* ARQ 360 · prototype
   Layout: one app that answers to its own width. Under 760px it is the phone app: Anton title, one column,
   a card only for the next thing that happens, a floating tab bar. Wider, it follows the ARQ Intelligence pages:
   top nav, Anton title with one quiet line beside it, sections under a hairline, mono labels,
   hollow nodes on thin lines. Every node is a plain circle with no fill. */
:root{
  --bg:#f1f2f3;--surface:#ffffff;--raise:#f6f7f8;--ink:#111214;--soft:#2b2d31;--muted:#5e6166;--dim:#7d8087;
  --line:#dadcdf;--line2:#c4c7cc;--accent:#44b3dc;--accent-deep:#1b7fa8;--accent-soft:#e1f2f9;--warn:#a5501f;--warn-soft:#f8e9e0;--ok:#3e6b26;
  --hover:rgba(17,18,20,.045);--scrim:rgba(14,14,16,.32);--shadow:0 20px 60px rgba(17,18,20,.14);--stage:#e4e5e7;
  --display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,Menlo,Consolas,monospace;
  --brand:"Archivo","Arial Black",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e0f11;--surface:#18191c;--raise:#1f2024;--ink:#f1f2f3;--soft:#d6d7da;--muted:#a3a6ad;--dim:#80838a;--line:#2a2c31;--line2:#3b3e44;--accent:#44b3dc;--accent-deep:#6cc6e6;--accent-soft:#132a33;--warn:#e29a6f;--warn-soft:#2e1f17;--ok:#a2c76d;--hover:rgba(255,255,255,.05);--scrim:rgba(0,0,0,.6);--shadow:0 20px 60px rgba(0,0,0,.6);--stage:#050506;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e0f11;--surface:#18191c;--raise:#1f2024;--ink:#f1f2f3;--soft:#d6d7da;--muted:#a3a6ad;--dim:#80838a;--line:#2a2c31;--line2:#3b3e44;--accent:#44b3dc;--accent-deep:#6cc6e6;--accent-soft:#132a33;--warn:#e29a6f;--warn-soft:#2e1f17;--ok:#a2c76d;--hover:rgba(255,255,255,.05);--scrim:rgba(0,0,0,.6);--shadow:0 20px 60px rgba(0,0,0,.6);--stage:#050506;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--stage);color:var(--ink);font:400 14px/1.45 var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;display:flex;flex-direction:column;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
svg{display:block;overflow:visible}
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.num,.tbl td,.agenda{font-variant-numeric:tabular-nums}

/* prototype bar: not part of the app */
#rv{flex:none;display:flex;align-items:center;gap:14px;min-height:32px;padding-block:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:var(--ink);color:var(--bg);font:500 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;z-index:30}
#rv .rv-k{opacity:.62;white-space:nowrap}
#rv .rv-b{display:inline-flex;align-items:center;gap:6px;padding:8px 0;white-space:nowrap;border-bottom:1px solid transparent}
#rv .rv-b:hover{border-bottom-color:currentColor}
#rv .rv-sp{flex:1}
#rv .rv-x{display:none}
@media (min-width:640px){#rv .rv-x{display:inline}}

#stage{flex:1;min-height:0;display:flex;justify-content:center;overflow:hidden}
#app{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);overflow:hidden;container-type:inline-size;container-name:app}
body.framed #app{flex:none;width:402px;max-width:calc(100% - 24px);height:calc(100% - 36px);max-height:874px;margin:18px 0;border:1px solid var(--line2);border-radius:34px;box-shadow:var(--shadow)}
body.framed #stage{align-items:center}

/* app header */
.ah{flex:none;display:flex;align-items:center;gap:18px;height:54px;padding-block:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--line);background:var(--bg)}
.logo{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none}
.logo .mark{width:34px;height:auto}
.logo b{font:700 19px/1 var(--brand);letter-spacing:-.02em}
.logo i{font:400 11px/1 var(--mono);font-style:normal;letter-spacing:.08em;color:var(--dim);text-transform:uppercase;padding-left:2px}
.ah nav{display:none;height:100%;gap:2px}
.ah nav button{display:flex;align-items:center;height:100%;padding:0 12px;font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);border-bottom:2px solid transparent}
.ah nav button:hover{color:var(--ink)}
.ah nav button[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink)}
.ah .ah-r{margin-left:auto;display:flex;align-items:center;gap:16px}
.themes{display:none;gap:14px}
.themes button{font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:8px 0 7px;border-bottom:1px solid transparent}
.themes button:hover{color:var(--ink)}
.themes button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}
.me{display:flex;align-items:center;gap:10px}
.me .av{width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font:500 11px var(--mono);letter-spacing:.04em}
.me .who{display:none;font:400 11px/1.25 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:right}
.me .who b{display:block;font-weight:500;color:var(--ink)}
@container app (min-width:760px){
  .ah{height:62px;gap:26px;padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}
  .ah nav,.themes{display:flex}
  .me .who{display:block}
}

/* scroller and page */
#scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#view{padding-block:0 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1440px;margin:0 auto}
@container app (min-width:760px){#view{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px));padding-bottom:90px}}
@container app (min-width:1100px){#view{padding-left:56px;padding-right:56px}}
.narrow #view{max-width:760px}

.top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 22px;padding:18px 0 4px}
h1{font:400 34px/1 var(--display);letter-spacing:-.2px;text-transform:uppercase;text-wrap:balance}
.need{font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-bottom:4px;flex:1 1 220px;min-width:0}
.top .find,.top .tops{margin-left:auto}
@container app (min-width:760px){.top{padding-top:26px}h1{font-size:38px}}
.back{display:inline-flex;align-items:center;gap:4px;margin:14px 0 -6px -4px;padding:6px 4px;font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.back .ic{width:18px;height:18px}
.back:hover{color:var(--ink)}

.sec{margin-top:34px}
.sh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;border-top:1px solid var(--line);padding-top:16px;margin-bottom:14px}
.sh h2{font:600 12px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.sh>span{font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;justify-content:flex-end}
.sh>span b{font-weight:500;color:var(--ink)}
.sh.flat{border-top:0;padding-top:0}
@container app (min-width:760px){.sec{margin-top:52px}}

/* type roles */
.nm{font:400 19px/1.08 var(--display);text-transform:uppercase;letter-spacing:.1px;color:var(--ink)}
.tag,.lab{font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lab{color:var(--dim)}
.tag b,.lab b{font-weight:500;color:var(--ink)}
.dim{color:var(--dim)}
.warn{color:var(--warn)!important}
.ok{color:var(--ok)!important}
.txt{font:400 14px/1.45 var(--sans);color:var(--soft)}
.cue{font:500 15px/1.35 var(--sans);color:var(--ink)}
.cue::before{content:"\201C"}.cue::after{content:"\201D"}
.big{font:400 44px/.95 var(--display);text-transform:uppercase;letter-spacing:-.3px}
.lnk{font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line2);padding:2px 0}
.lnk:hover{border-bottom-color:var(--ink)}
.empty{font:400 14px/1.5 var(--sans);color:var(--muted);padding:6px 0}

/* buttons, chips, fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font:600 14px/1 var(--sans);letter-spacing:.005em;white-space:nowrap}
.btn:hover{opacity:.88}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--ink);opacity:1}
.btn.sm{min-height:34px;padding:0 14px;font-size:13px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.38;cursor:default}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--line2);border-radius:999px;font:500 13px/1 var(--sans);color:var(--soft);white-space:nowrap}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip small{font:400 11px var(--mono);letter-spacing:.04em;opacity:.7}
.chip[disabled]{opacity:.45;cursor:default}
.field{display:grid;gap:7px;min-width:0}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line2);border-radius:12px;padding:11px 13px;background:var(--surface);font:400 15px/1.4 var(--sans);color:var(--ink);outline:none;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink)}
.tog{display:flex;align-items:center;gap:10px;font:500 14px/1.3 var(--sans);color:var(--soft);cursor:pointer}
.tog input{width:20px;height:20px;accent-color:var(--ink)}
.find{position:relative;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line2);padding:4px 0;min-width:0;width:100%}
.find .ic{width:16px;height:16px;color:var(--dim)}
.find input{border:0;background:none;outline:none;font:400 13px var(--mono);color:var(--ink);padding:6px 0;width:100%;min-width:0}
.find input::placeholder{color:var(--dim)}
.find:focus-within{border-bottom-color:var(--ink)}
.find ul{position:absolute;left:0;right:0;top:100%;z-index:9;margin-top:6px;padding:6px 0;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.find li button{display:flex;justify-content:space-between;gap:16px;width:100%;padding:10px 14px}
.find li button:hover{background:var(--hover)}
@container app (min-width:760px){.top .find{width:240px;flex:none}}

/* the one card on a phone screen */
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px}
@container app (min-width:760px){.card{border-radius:18px;padding:22px 24px}}

/* tiles: one per player, rule on top */
.tiles{display:grid;grid-template-columns:1fr;gap:22px}
@container app (min-width:620px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 28px}}
@container app (min-width:1100px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{border-top:1px solid var(--line2);padding-top:12px;min-width:0;display:flex;flex-direction:column}
.tile header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.tile .tag{margin-top:3px}
.tile .txt{margin-top:8px}
.tile .acts{margin-top:0;padding-top:12px}
.tile>.acts:last-child{margin-top:auto}
.tile-more{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.tile.multi>.acts:last-child{margin-top:0}
.tile-more .txt{margin-top:6px}
.nmb{cursor:pointer;text-align:left}
.nmb:hover .nm{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* tonight's brief */
.brief-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.counts{font:400 13px/1.4 var(--mono);letter-spacing:.03em;color:var(--muted)}
.counts b{font-weight:500;color:var(--ink)}
.brief{display:grid;grid-template-columns:1fr;gap:0 28px}
@container app (min-width:760px){.brief{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container app (min-width:1100px){.brief{grid-template-columns:repeat(3,minmax(0,1fr))}}
.br{display:flex;flex-direction:column;gap:3px;padding:12px 0 16px;border-top:1px solid var(--line);min-width:0}
.br .cue{font-size:14px;margin-top:2px}
.br .tag+.tag{margin-top:6px}
.tail{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}

/* week columns */
.week{display:grid;grid-template-columns:1fr;gap:0}
.day{padding:10px 0 12px;border-top:1px solid var(--line);min-width:0}
.day h3{font:500 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.day.today h3{color:var(--ink)}
.day.off{display:none}
.ev{display:block;width:100%;padding:7px 0;text-align:left;min-width:0}
.ev+.ev{border-top:1px solid var(--line)}
.ev .t{font:400 11px var(--mono);letter-spacing:.04em;color:var(--muted)}
.ev .n{display:block;font:400 15px/1.15 var(--display);text-transform:uppercase;letter-spacing:.1px;margin-top:2px}
.ev .m{display:block;font:400 13px/1.35 var(--sans);color:var(--soft);margin-top:2px}
.ev.req .t::after{content:" · ASKED";color:var(--warn)}
.ev.cx .n{text-decoration:line-through;color:var(--dim)}
.ev:hover .n{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.busy{font:400 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);padding:6px 0}
@container app (min-width:760px){
  .week{grid-template-columns:repeat(7,minmax(0,1fr));gap:0 18px}
  .day,.day.off{display:block;border-top:1px solid var(--line2);padding-top:10px}
  .day.today{border-top-color:var(--ink)}
}

/* since you were here */
.since{display:grid}
.since>div{display:grid;grid-template-columns:1fr;gap:4px;padding:11px 0;border-top:1px solid var(--line)}
.since dt{font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.since dd{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;font:400 13px/1.45 var(--sans);color:var(--soft)}
.since dd button{display:inline-flex;gap:7px;align-items:baseline}
.since dd .nm{font-size:15px}
@container app (min-width:760px){.since>div{grid-template-columns:120px 1fr;gap:18px}}

/* roster */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.roster{display:grid;grid-template-columns:1fr;gap:0 26px}
@container app (min-width:620px){.roster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container app (min-width:1000px){.roster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container app (min-width:1300px){.roster{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rc{display:grid;gap:3px;padding:12px 0 14px;border-top:1px solid var(--line);text-align:left;min-width:0}
.rc:hover .nm{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.rc .rc-f{font:400 13px/1.4 var(--sans);color:var(--soft);margin-top:4px}
.rc .rc-f i{font:400 11px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-left:6px}

/* athlete page */
.athp-grid{display:grid;grid-template-columns:1fr;gap:0 56px}
@container app (min-width:1000px){.athp-grid{grid-template-columns:minmax(0,1fr) 320px}.athp-side{padding-top:52px}}
.snap{border-top:1px solid var(--line);padding:14px 0 16px}
.snap h3{font:600 12px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px}
.snap p:not(.tag){font:400 14px/1.45 var(--sans);color:var(--soft)}
.snap .row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:3px 0}
.arcs{margin:4px 0 6px}
.arcs svg{width:100%;max-width:900px;height:auto}
.focus{display:grid;grid-template-columns:1fr;gap:0 40px}
@container app (min-width:900px){.focus{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fa{padding:16px 0 18px;border-top:1px solid var(--line);min-width:0;transition:background .2s}
.fa.on{background:linear-gradient(var(--hover),var(--hover))}
.fa-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.fa .why{font:400 14px/1.45 var(--sans);color:var(--soft);margin-top:7px;max-width:62ch}
.fa .cue{margin-top:9px}
.fa-d{display:grid;gap:8px;margin-top:12px}
.fa-d div{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:baseline}
.fa-d dt{font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.fa-d dd{font:400 14px/1.45 var(--sans);color:var(--soft)}
.fa-hist{margin-top:12px;display:grid;gap:7px}
.fa-hist li{display:grid;grid-template-columns:96px 1fr;gap:10px;font:400 13px/1.45 var(--sans);color:var(--soft)}
.fa-hist li span{font:400 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);padding-top:1px}
.fa-hist li b{font-weight:600;color:var(--ink)}

/* station picker: four stops on one line, a plain circle at each */

/* timeline */
.tl{display:grid}
.tl li{display:grid;grid-template-columns:1fr;gap:4px;padding:12px 0;border-top:1px solid var(--line)}
.tl li:first-child{border-top:0}
.tl p:not(.tag){font:400 14px/1.5 var(--sans);color:var(--soft);max-width:70ch}
@container app (min-width:760px){.tl li{grid-template-columns:200px 1fr;gap:20px}}

/* instruments */
.svg-lab{font:400 11px var(--mono);letter-spacing:.06em;fill:var(--muted)}
.svg-lab.ink{fill:var(--ink);font-weight:500}
.svg-lab.halo{paint-order:stroke;stroke:var(--bg);stroke-width:5px;stroke-linejoin:round}
.card .svg-lab.halo{stroke:var(--surface)}
.lab-bg{fill:var(--bg)}
.card .lab-bg{fill:var(--surface)}
.svg-lab .sw{fill:var(--ink)}
.a-base{fill:none;stroke:var(--line2);stroke-width:1.2}
.a-done{fill:none;stroke:var(--ink);stroke-width:2}
.a-node{fill:none;stroke:var(--ink);stroke-width:1.5}
.a-guide{fill:none;stroke:var(--line);stroke-width:1}
.lead{stroke:var(--muted);stroke-width:1;fill:none}
.a-hit{fill:none;stroke:transparent;stroke-width:16;cursor:pointer;pointer-events:stroke}
.arc-g.dimmed .a-done{stroke:var(--muted)}
.arc-g.dimmed .a-node{stroke:var(--muted)}
.arc-g.dimmed .svg-lab{fill:var(--dim)}
.arc-g.on .a-done{stroke-width:3}
.arc-g.on .a-base{stroke:var(--muted)}
.arc-g.on .svg-lab{fill:var(--ink);font-weight:500}
.y-off{fill:none;stroke:var(--ink);stroke-width:2}
.y-in{fill:none;stroke:var(--ink);stroke-width:2}
.y-rest{fill:none;stroke:var(--line2);stroke-width:1.2}
.track{display:block;width:100%;height:auto}
/* progress arcs (Sage, Oct 19, option A): one per fix, one for the whole plan, and the season on top */
.fix-arc,.season-arc{display:block;width:100%;height:auto}
.fix-arc{margin-top:2px}
.y-now{fill:none;stroke:var(--accent);stroke-width:2.4}
.stat .fix-arc{margin-top:10px}
.season-c .cd-h{margin-bottom:4px}
.prog-v{display:flex;align-items:baseline;gap:10px;margin-top:2px}
.prog-v b{font:400 32px/1 var(--display);letter-spacing:-.3px}
.prog input[type=range]{width:100%;height:28px;margin:4px 0 0;accent-color:var(--ink);cursor:pointer}

/* sheets: bottom sheet on a phone, a right-hand drawer on desk */
.scrim{position:absolute;inset:0;background:var(--scrim);z-index:20;opacity:0;transition:opacity .2s}
.scrim.in{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:90%;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border-radius:24px 24px 0 0;z-index:21;transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);padding:10px max(18px,env(safe-area-inset-right,0px)) 24px max(18px,env(safe-area-inset-left,0px))}
.sheet.in{transform:none}
.sheet .grip{width:40px;height:4px;border-radius:2px;background:var(--line2);margin:0 auto 12px}
.sheet .x{position:absolute;top:12px;right:14px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--muted)}
.sheet .x:hover{background:var(--hover);color:var(--ink)}
.sheet h2{font:400 26px/1 var(--display);text-transform:uppercase;padding-right:40px}
.sheet .sb{display:grid;gap:18px;margin-top:14px}
@container app (min-width:760px){
  .sheet{left:auto;top:0;width:440px;max-height:none;border-radius:0;border-left:1px solid var(--line);transform:translateX(100%);padding:26px 28px 40px}
  .sheet .grip{display:none}
}
@media (prefers-reduced-motion:reduce){.sheet,.scrim{transition:none}}

.toast{position:absolute;left:50%;bottom:96px;transform:translate(-50%,10px);opacity:0;z-index:40;max-width:calc(100% - 32px);background:var(--ink);color:var(--bg);border-radius:14px;padding:12px 16px;font:500 13px/1.35 var(--sans);box-shadow:var(--shadow);transition:opacity .2s,transform .2s;pointer-events:none}
.toast.in{opacity:1;transform:translate(-50%,0)}
@container app (min-width:760px){.toast{bottom:28px}}

/* phone tab bar */
/* the bottom tabs: words on a plain bar at the page's edge, and an open circle over the place you are (Sage, Oct 19) */
.tabs{flex:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:0 max(6px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(6px,env(safe-area-inset-left,0px));background:var(--surface);border-top:1px solid var(--line)}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:11px 0 14px;font:500 12.5px/1 var(--sans);color:var(--muted)}
.tabs .nd{display:block;width:10px;height:10px;border-radius:50%;border:1.5px solid transparent;box-sizing:border-box}
.tabs button[aria-current=page]{color:var(--ink);font-weight:600}
.tabs button[aria-current=page] .nd{border-color:var(--accent)}
@container app (min-width:760px){.tabs{display:none}}

/* family */
.kids{display:flex;gap:18px;margin-top:4px}
.kids button{font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:10px 0 8px;border-bottom:1px solid transparent}
.kids button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}
.nextc{margin-top:16px}
.nextc .when{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.nextc .nm{font-size:24px;margin-top:6px}
.nextc .txt{margin-top:4px}
.nextc .acts{margin-top:16px}
.nextc .said{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.nextc .said p:not(.tag){font:600 15px/1.3 var(--sans)}
.agenda{display:grid}
.ag{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line);text-align:left;width:100%}
.ag .ag-d{display:grid;justify-items:start}
.ag .ag-d span{font:400 11px var(--mono);letter-spacing:.06em;color:var(--muted)}
.ag .ag-d b{font:400 24px/1 var(--display)}
.ag .nm{font-size:17px}
.ag .meta{font:400 13px/1.35 var(--sans);color:var(--soft);margin-top:3px}
.ag .st{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right}
.ag:hover .nm{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.checks{display:grid}
.ck{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--line);text-align:left;width:100%}
.ck:first-child{border-top:0}
.ck .bx{width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:transparent}
.ck .bx .ic{width:15px;height:15px;stroke-width:2.2}
.ck[aria-pressed=true] .bx{border-color:var(--ink);color:var(--ink)}
.ck[aria-pressed=true] .ckt{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.ck .ckt{font:500 15px/1.35 var(--sans);color:var(--ink)}
.ck .tag{margin-top:2px}
.note-c{display:grid;gap:8px}
.note-c p.q{font:400 16px/1.5 var(--sans);color:var(--ink)}
.svc{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;padding:14px 0;border-top:1px solid var(--line);width:100%;text-align:left}
.svc .nm{font-size:18px}
.svc .txt{grid-column:1}
.svc .px{grid-row:1 / span 2;grid-column:2;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right}
.svc:hover .nm{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.days{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin:0 -2px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.days button{flex:none;display:grid;justify-items:center;gap:2px;width:56px;padding:10px 0;border:1px solid var(--line2);border-radius:16px}
.days button span{font:400 11px var(--mono);letter-spacing:.06em;color:var(--muted)}
.days button b{font:400 22px/1 var(--display)}
.days button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.days button[aria-pressed=true] span{color:var(--bg);opacity:.75}
.days button[disabled]{opacity:.35;cursor:default}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.slots .chip{justify-content:center}
.plan-pick{display:grid;gap:12px}
.tier{display:grid;gap:6px;text-align:left;padding:16px;border:1px solid var(--line2);border-radius:18px;width:100%}
.tier[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tier .price{font:400 30px/1 var(--display)}
.tier ul{display:grid;gap:4px;margin-top:4px}
.tier li{font:400 13px/1.4 var(--sans);color:var(--soft)}
.tier li::before{content:"— ";color:var(--dim)}
.memb .mrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.memb .mrow>span:first-child{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0}
.memb .mrow:first-child{border-top:0}
.kv{display:grid;gap:0}
.kv>div{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line)}
.kv>div:first-child{border-top:0}
.kv dt{font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.kv dd{font:500 14px/1.35 var(--sans);text-align:right}
.cat{display:grid;grid-template-columns:1fr;gap:0 32px}
@container app (min-width:760px){.cat{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cat h3{font:600 12px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;padding:14px 0 8px;border-top:1px solid var(--line2)}
.cat li{display:grid;gap:2px;padding:9px 0;border-top:1px solid var(--line)}
.cat li b{font:600 14px/1.3 var(--sans)}
.cat li span{font:400 13px/1.4 var(--sans);color:var(--soft)}
.year-c{margin-top:6px}
.year-c svg{width:100%;max-width:1000px;height:auto}
.yr-cols{display:grid;grid-template-columns:1fr;gap:0 28px;margin-top:8px}
@container app (min-width:620px){.yr-cols{grid-template-columns:2fr 1fr}}
.yr-cols h3{font:600 12px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;padding:12px 0 6px;border-top:1px solid var(--line2)}
.yr-cols li{font:400 14px/1.45 var(--sans);color:var(--soft);padding:3px 0}

/* updates */
.upd-grid{display:grid;grid-template-columns:1fr;gap:0 56px}
@container app (min-width:1000px){.upd-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.compose{display:grid;gap:16px;margin-top:18px}
.sent li{display:grid;gap:6px;padding:14px 0;border-top:1px solid var(--line)}
.sent li p:not(.tag){font:400 14px/1.5 var(--sans);color:var(--soft);max-width:68ch}
.feed li{display:grid;gap:5px;padding:13px 0;border-top:1px solid var(--line)}
.feed li:first-child{border-top:0}
.feed li p:not(.tag){font:400 15px/1.45 var(--sans);color:var(--ink)}

/* tables become stacked rows on a phone */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);text-align:left;padding:0 12px 8px 0;font-weight:400;white-space:nowrap}
.tbl td{padding:11px 12px 11px 0;border-top:1px solid var(--line);vertical-align:baseline;font:400 14px/1.35 var(--sans);color:var(--soft)}
.tbl td .nm{font-size:16px}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--hover)}
@container app (max-width:759px){
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{padding:12px 0;border-top:1px solid var(--line)}
  .tbl td{border:0;padding:2px 0}
  .tbl td[data-k]::before{content:attr(data-k) " · ";font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
}

/* session mode */
.sess-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;margin-top:10px;background:var(--bg);border-bottom:1px solid var(--line)}
.roll{display:grid}
.rl{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.rl:first-child{border-top:0}
.rl-ck{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:transparent}
.rl-ck .ic{width:20px;height:20px;stroke-width:2.2}
.rl-ck[aria-pressed=true]{border:1.6px solid var(--ink);color:var(--ink)}
.rl .cue{font-size:14px;margin-top:3px}
.rl.out{opacity:.55}

/* plan editor */
.pe-list{display:grid;gap:0}
.pe-fa{padding:18px 0;border-top:1px solid var(--line2);display:grid;gap:12px}
.pe-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pe-h .pe-i{font:400 26px/1 var(--display);width:24px}
.pe-h input{flex:1 1 200px;min-width:0;border:0;border-bottom:1px solid var(--line2);background:none;font:400 22px/1.1 var(--display);text-transform:uppercase;padding:6px 0;outline:none;color:var(--ink)}
.pe-h input:focus{border-bottom-color:var(--ink)}
.pe-ord{display:flex;gap:4px}
.pe-ord button{min-height:32px;padding:0 10px;border:1px solid var(--line2);border-radius:999px;font:400 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pe-ord button:hover{border-color:var(--ink);color:var(--ink)}
.pe-g{display:grid;grid-template-columns:1fr;gap:12px}
@container app (min-width:900px){.pe-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pe-foot{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:14px 0;margin-top:18px;background:var(--bg);border-top:1px solid var(--line2)}
.pe-foot .field{flex:1 1 180px;max-width:240px}
.lib li{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}

/* settings */
.set-grid{display:grid;grid-template-columns:1fr;gap:0 56px}
@container app (min-width:1000px){.set-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.conn{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.conn b{font:600 14px/1.3 var(--sans)}
.conn span.txt{font-size:13px}

/* about sheet and prototype review */
.rv-sheet{position:fixed;inset:0;z-index:60;display:grid;place-items:end center;background:var(--scrim)}
.rv-sheet>div{width:min(560px,100%);max-height:92%;overflow:auto;background:var(--surface);color:var(--ink);border-radius:22px 22px 0 0;padding:20px max(20px,env(safe-area-inset-right,0px)) 28px max(20px,env(safe-area-inset-left,0px))}
@media (min-width:640px){.rv-sheet{place-items:center}.rv-sheet>div{border-radius:22px}}
.rv-sheet h2{font:400 24px/1 var(--display);text-transform:uppercase}
.rv-sheet .rv-g{display:grid;gap:8px;margin-top:16px}
.rv-sheet .rv-g>span{font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.rv-sheet p:not(.tag){font:400 14px/1.5 var(--sans);color:var(--soft)}
.rv-sheet ul.rv-l{display:grid;gap:6px;margin-top:6px}
.rv-sheet ul.rv-l li{font:400 14px/1.45 var(--sans);color:var(--soft);padding-left:14px;position:relative}
.rv-sheet ul.rv-l li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--dim)}

/* wide and compact drawings of the same instrument */
.svg-w{display:none}
.svg-c{display:block}
@container app (min-width:760px){.svg-w{display:block}.svg-c{display:none}}
.ic.sm{width:16px;height:16px}
.lnk{display:inline-flex;align-items:center;gap:6px}

/* ---------- second pass: dashboards. Cards on a grey page, big numbers, few words ---------- */
.dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-top:18px}
.dash>*{grid-column:span 12;min-width:0}
@container app (max-width:619px){.dash>.stat.s3,.dash>.stat.s6{grid-column:span 6}.dash>.stat .v{font-size:34px}.dash>.stat{padding:16px}}
@container app (min-width:620px){.dash .s3{grid-column:span 6}.dash .s4,.dash .s6{grid-column:span 6}}
@container app (min-width:980px){.dash .s3{grid-column:span 3}.dash .s4{grid-column:span 4}.dash .s5{grid-column:span 5}.dash .s6{grid-column:span 6}.dash .s7{grid-column:span 7}.dash .s8{grid-column:span 8}}
.cd{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 20px;min-width:0}
button.cd{text-align:left;width:100%;cursor:pointer}
button.cd:hover{border-color:var(--line2)}
.cd-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.cd-h h2{font:600 12px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase}
.cd-h .count{font:400 24px/1 var(--display)}
.stat .v{display:block;font:400 40px/1 var(--display);letter-spacing:-.3px}
.stat .v small{font:500 15px var(--sans);color:var(--muted);margin-left:3px;letter-spacing:0}
.stat .l{display:block;font:400 11px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pbar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:10px}
.pbar b{display:block;height:100%;border-radius:3px;background:var(--accent)}
.av{width:40px;height:40px;flex:none;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font:600 13px/1 var(--sans);letter-spacing:.02em;color:var(--ink);background:var(--surface)}
.av.lg{width:64px;height:64px;font-size:20px}
.av.sm{width:30px;height:30px;font-size:11px;border-width:1px}
.badge{display:inline-flex;align-items:center;font:500 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--raise);border:1px solid var(--line);color:var(--soft);white-space:nowrap}
.badge.full{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.badge.new{background:var(--accent-soft);color:var(--accent-deep);border-color:transparent}

/* today: the next session */
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 34px}
.hero-big{display:grid;gap:4px}
.hero-big .big{font:400 64px/.9 var(--display);letter-spacing:-.5px}
.hero-big .ampm{font:400 20px var(--display);margin-left:4px}
.hero-act{margin-left:auto;align-self:center}
.hero-who{display:flex;align-items:center;gap:12px}
.hero-who .nm{display:block;font-size:24px}
.faces{display:flex;flex-wrap:wrap;gap:14px 8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.face{display:grid;justify-items:center;gap:6px;width:64px}
.face>span:last-child{font:500 12px/1.2 var(--sans);color:var(--soft);max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.face:hover .av{background:var(--accent-soft)}
.face .av.new{border-color:var(--accent-deep);color:var(--accent-deep)}
@container app (max-width:619px){.hero-big .big{font-size:52px}.hero-act{margin-left:0;width:100%}.hero-act .btn{width:100%}}

/* needs you: one row per player, one button */
.todo{display:grid}
.todo>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.todo>li:first-child{border-top:0;padding-top:2px}
.todo .who{min-width:0;text-align:left}
.todo .who b{display:block;font:400 16px/1.1 var(--display);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todo .who span{display:block;font:400 13px/1.3 var(--sans);color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todo>li.urgent .who span{color:var(--warn)}
.allclear{display:flex;align-items:center;gap:10px;font:500 15px var(--sans);color:var(--muted);padding:6px 0}

/* the week strip */
.wk{display:grid;grid-template-columns:repeat(7,minmax(104px,1fr));gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.wk::-webkit-scrollbar{display:none}
.wk .dh{font:500 11px/1 var(--mono);letter-spacing:.05em;color:var(--muted);text-transform:uppercase;padding-bottom:9px;border-bottom:2px solid var(--line)}
.wk .today .dh{color:var(--ink);border-bottom-color:var(--ink)}
.wk .pill{display:block;width:100%;text-align:left;margin-top:8px;padding:9px 10px;border-radius:12px;background:var(--raise);border:1px solid var(--line);min-width:0}
.wk .pill b{display:block;font:400 14px/1.1 var(--display);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk .pill span{display:block;font:400 11px/1.3 var(--mono);color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk .pill.sess{background:var(--accent-soft);border-color:transparent}
.wk .pill.req{border-color:var(--warn);border-style:dashed}
.wk .pill.cx b{text-decoration:line-through;color:var(--dim)}
.wk .pill:hover{border-color:var(--ink)}
.wk .none{font:400 12px var(--sans);color:var(--dim);margin-top:10px}

/* members pulse */
.mbar{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;margin-top:14px}
.mbar i{display:block;height:100%}
.k-a{background:var(--accent)}.k-s{background:var(--line2)}.k-i{background:var(--warn)}.k-p{background:var(--dim)}
.mleg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font:400 12px var(--sans);color:var(--muted)}
.mleg span{display:inline-flex;align-items:center;gap:6px}
.mleg i{width:8px;height:8px;border-radius:2px;display:inline-block}

/* updates card */
.upd-last p.msg{font:400 15px/1.45 var(--sans);color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px}

/* athletes */
.agrid{display:grid;grid-template-columns:1fr;gap:12px}
@container app (min-width:620px){.agrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container app (min-width:1000px){.agrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container app (min-width:1320px){.agrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ac{display:flex;flex-direction:column;gap:14px}
.ac-top{display:flex;gap:12px;align-items:center;min-width:0}
.ac-top .nm{display:block;font-size:19px}
.ac-top .tag{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-top .badge{margin-left:auto}
.ac-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ac-plan{display:grid;gap:2px}
.ac-f{display:block;margin-top:-6px;font:400 13px/1.35 var(--sans);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-stats{display:flex;gap:6px 14px;flex-wrap:wrap;font:400 12px/1.3 var(--sans);color:var(--muted);padding-top:12px;border-top:1px solid var(--line)}
.ac-stats b{font-weight:600;color:var(--ink)}
.classh{display:flex;align-items:baseline;gap:12px;margin:30px 0 12px}
.classh h2{font:400 22px/1 var(--display);text-transform:uppercase}

/* one athlete */
.ath-head{display:flex;flex-wrap:wrap;align-items:center;gap:16px 18px;margin-top:16px}
.ath-head h1{font-size:34px}
.ath-head .ath-id{min-width:0;flex:1 1 220px}
.ath-head .ath-id .tag{margin-top:6px}
.ath-head .acts{margin-top:0}
.fgrid{display:grid;grid-template-columns:1fr;gap:12px}
@container app (min-width:900px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fc{display:flex;flex-direction:column;gap:12px}
.fc-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fc-h .nm{font-size:21px}
.fc-h>span{display:grid;gap:2px;min-width:0}
.fc-pct{font:500 13px var(--mono);color:var(--soft);white-space:nowrap}
.fc .why{font:400 14px/1.45 var(--sans);color:var(--soft)}
.fc dl{display:grid;gap:6px}
.fc dl div{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:baseline}
.fc dt{font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.fc dd{font:400 14px/1.45 var(--sans);color:var(--soft)}
.fc .last{font:400 13px/1.45 var(--sans);color:var(--soft);border-top:1px solid var(--line);padding-top:10px}
.fc .last .tag{display:block;margin-bottom:2px}
.fc .acts{margin-top:auto;padding-top:2px}
.side{display:grid;gap:12px;align-content:start}
@container app (min-width:1000px){.athp2{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0 18px}}
.sh2{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;margin:26px 0 12px}
.sh2 h2{font:400 22px/1 var(--display);text-transform:uppercase}
.sh2 span{font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}

/* family: I'm coming */
.going{display:flex;align-items:center;gap:12px;width:100%;margin-top:16px;padding:14px 16px;border-radius:16px;border:1.5px solid var(--line2);font:600 16px/1.2 var(--sans);color:var(--ink);background:var(--surface)}
.going .bx,.chk .bx{width:28px;height:28px;flex:none;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;color:transparent;background:var(--surface)}
.going .bx .ic,.chk .bx .ic{width:16px;height:16px;stroke-width:2.4}
.going[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.going[aria-pressed=true] .bx,.chk[aria-pressed=true] .bx{background:var(--accent);border-color:var(--accent);color:#fff}
.chk{display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.wrows{display:grid}
.wrows>li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.wrows>li:first-child{border-top:0;padding-top:0}
.dd{display:grid;justify-items:start}
.dd span{font:400 11px var(--mono);letter-spacing:.06em;color:var(--muted)}
.dd b{font:400 24px/1 var(--display)}
.wrows .what b{display:block;font:400 17px/1.1 var(--display);text-transform:uppercase}
.wrows .what span{display:block;font:400 13px/1.3 var(--sans);color:var(--muted);margin-top:2px}
.wrows .st{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.next .big{font:400 60px/.9 var(--display);letter-spacing:-.5px}
.next .ampm{font:400 20px var(--display);margin-left:4px}
.pmini{display:grid;gap:12px}
.pmini li{display:grid;gap:7px}
.pmini .row{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.pmini .row b{font:400 16px/1.1 var(--display);text-transform:uppercase}
.links2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.links2 button{display:grid;gap:4px;text-align:left;padding:14px;border-radius:14px;background:var(--raise);border:1px solid var(--line)}
.links2 button b{font:400 17px/1.1 var(--display);text-transform:uppercase}
.links2 button span{font:400 12px/1.35 var(--sans);color:var(--muted)}
.banner{display:grid;gap:10px;background:var(--ink);color:var(--surface);border-color:var(--ink)}
.banner .tag,.banner .txt{color:var(--surface);opacity:.82}
.banner .btn{background:var(--surface);color:var(--ink);border-color:var(--surface)}

/* family calendar */
.mhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.mhead h2{font:400 24px/1 var(--display);text-transform:uppercase;text-align:center}
.mhead h2 .tag{display:block;margin-top:5px}
.mcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.mcal .wd{font:400 11px var(--mono);color:var(--dim);text-align:center;padding:2px 0 6px}
.mcal button{min-height:52px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:7px;gap:5px;font:500 14px/1 var(--sans);color:var(--ink)}
.mcal button.out{color:var(--dim);opacity:.55}
.mcal button.today{box-shadow:inset 0 0 0 1.5px var(--ink)}
.mcal button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
.mcal button:hover{background:var(--hover)}
.mcal button[aria-pressed=true]:hover{background:var(--ink)}
.mk{display:flex;gap:3px;min-height:7px}
.mk i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.mk i.bk{background:var(--warn)}
.mk i.go{background:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.mlegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font:400 12px var(--sans);color:var(--muted)}
.mlegend span{display:inline-flex;align-items:center;gap:6px}
.mlegend i{width:8px;height:8px;border-radius:50%;display:inline-block}

/* booking: services as cards */
.svcs{display:grid;grid-template-columns:1fr;gap:10px}
@container app (min-width:620px){.svcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.svc2{display:grid;gap:6px}
.svc2 .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.svc2 .nm{font-size:19px}
.svc2 .txt{font-size:13px}

/* updates: quick starts and read bars */
.quick{display:flex;flex-wrap:wrap;gap:8px}
.quick::-webkit-scrollbar{display:none}
.sentc{display:grid;gap:10px}
.sentc .cd p.msg{font:400 15px/1.45 var(--sans);color:var(--ink);margin-top:6px}
.preview{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--raise);border:1px solid var(--line)}
.preview .pmark{width:34px;height:34px;flex:none;border-radius:9px;background:var(--ink);color:var(--surface);display:grid;place-items:center}
.preview .pmark .mark{width:22px;height:auto}
.preview b{display:block;font:600 13px var(--sans)}
.preview p{font:400 13px/1.4 var(--sans);color:var(--soft);margin-top:2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* schedule: open-for-booking windows inside the week */
.openw{display:block;margin-top:6px;padding:6px 8px;border-radius:8px;border:1px dashed var(--accent);font:400 11px/1.35 var(--mono);color:var(--accent-deep);letter-spacing:.03em}

.tier-l{display:grid;gap:6px}
.tier-l li::before{content:"— ";color:var(--dim)}
.wrows .what{text-align:left;min-width:0}
.hero-who{text-align:left}
.next .cd-h .lnk .ic{width:14px;height:14px}

/* third pass: refinements */
.foc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.foc .tag{margin-right:4px}
.face.dim,.rl.dim{opacity:.32}
.face,.rl{transition:opacity .15s}
.roll-c{padding-top:6px;padding-bottom:6px}
.pe-count{display:grid;justify-items:end;gap:2px;margin-left:auto}
.pe-count .big{font:400 44px/1 var(--display)}
.pe-list{display:grid;gap:12px}
.pe-fa{border-top:1px solid var(--line)}
.libc{display:flex;flex-direction:column;gap:10px}
.libc .nm{font-size:18px}
.libc .cue{font-size:14px}
.libc .add{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--sans);color:var(--accent-deep)}
.libc .add .ic{width:16px;height:16px;stroke-width:2}
.libc[disabled]{opacity:.55;cursor:default}
.libc[disabled] .add{color:var(--muted)}
.mk i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--accent);background:transparent}
.mk i.go{background:var(--accent);box-shadow:none}
.mk i.bk{border-color:var(--warn);background:var(--warn)}
.mcal button[aria-pressed=true] .mk i:not(.go):not(.bk){border-color:var(--surface)}
.mlegend i.lg-s{border:1.5px solid var(--accent);background:transparent}
.mlegend i.lg-g{background:var(--accent)}
.mlegend i.lg-b{background:var(--warn)}
@container app (max-width:619px){.foc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.foc::-webkit-scrollbar{display:none}.foc .chip,.foc .tag{flex:none}}

/* open times */
.openbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:18px;border-style:dashed;border-color:var(--accent)}
.openbar .acts{margin-top:0}
.openbar .txt{margin-top:4px}
.openbar.empty-w{border-color:var(--warn)}
button.openw{text-align:left;width:100%;cursor:pointer}
button.openw:hover{background:var(--accent-soft)}

/* getting in */
#app.authing{background:var(--bg)}
.auth{min-height:100%;display:grid;place-items:center;padding:28px 0 56px}
.auth-c{width:100%;max-width:420px;display:grid;gap:14px}
.auth-c.wide{max-width:480px}
.auth-mark{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--ink)}
.auth-mark .mark{width:48px;height:auto}
.auth-mark b{font:700 26px/1 var(--brand);letter-spacing:-.02em}
.auth-mark i{font:400 12px var(--mono);font-style:normal;letter-spacing:.08em;color:var(--dim)}
.auth h1{font-size:40px}
.auth .sb{display:grid;gap:14px;margin-top:4px}
.err{font:500 14px/1.4 var(--sans);color:var(--warn);background:var(--warn-soft);border-radius:12px;padding:10px 12px}
.pw{position:relative;display:block}
.pw input{padding-right:70px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:9px 8px}
.pw button:hover{color:var(--ink)}
.proto-hint{margin-top:16px;padding:14px 16px;border:1px dashed var(--line2);border-radius:14px;display:grid;gap:6px}
.proto-hint .lnk{margin-right:4px;text-transform:none;letter-spacing:0}
.auth-note{text-align:center;margin-top:6px}
.auth-kv{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:2px 14px}
.dots{display:flex;gap:6px;margin-bottom:4px}
.dots i{width:26px;height:4px;border-radius:2px;background:var(--line)}
.dots i.on{background:var(--ink)}
.howto{display:grid;gap:12px;margin-top:4px}
.howto li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font:400 15px/1.45 var(--sans);color:var(--soft)}
.howto .hn{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font:600 12px var(--sans);color:var(--ink)}
.howto .ic.sm{display:inline-block;vertical-align:-3px;width:17px;height:17px}
.au-acts{margin-top:10px}
.ppl{display:grid;gap:2px}
.pp{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.ppl>.pp:first-child,.ppl>.ac-row+.pp{border-top:0}
.pp b{display:block;font:600 14px/1.25 var(--sans)}
.pp .tag{display:block}

/* the real app on the server: the bar only on the test server, a blank mark while it asks who is signed in,
   a quiet outline while a screen's answers arrive */
#rv[hidden]{display:none!important}
.auth-c.boot{justify-items:center;padding:12vh 0;opacity:.5}
.sk{display:grid;gap:12px;min-height:118px;align-content:start}
.sk span{display:block;height:13px;width:72%;border-radius:7px;background:var(--line);opacity:.7;animation:skp 1.3s ease-in-out infinite}
.sk span:first-child{height:26px;width:38%}
.sk span:nth-child(3){width:54%}
@keyframes skp{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.sk span{animation:none}}


/* ---------- the app as home base (Oct 19): what's new from Coach, Film, Recruiting, the dates that matter ---------- */
.cfeed{display:grid}
.cfeed>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.cfeed>li:first-child{border-top:0;padding-top:0}
.cfeed .nm{font-size:18px;margin-top:4px}
.cfeed .txt{color:var(--ink);font-size:15px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cd.dated{box-shadow:inset 3px 0 0 var(--accent)}
.contacts{display:grid}
.contacts>li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.contacts>li:first-child{border-top:0;padding-top:0}
.contacts b{display:block;font:400 17px/1.1 var(--display);text-transform:uppercase}
.contacts .txt{margin-top:4px}
.chip.static{cursor:default}
.chip.static:hover{border-color:var(--line2);color:var(--soft)}
.wrows>li.dt .st{color:var(--accent-deep)}
.mcal button.dated{color:var(--accent-deep);font-weight:700}
.lg-d{font:700 12px/1 var(--sans);color:var(--accent-deep);margin-right:2px}
.ev.dt{box-shadow:inset 3px 0 0 var(--accent);padding-left:12px}
.ev.dt .t{color:var(--accent-deep)}
.since.mng dd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.since.mng dd>span{min-width:0}

/* Ask, the staff assistant: a word with an open circle in the header, like the tabs. In its sheet each question is a
   hollow node on a thin line with the answer under it, and a change waits on a card until Confirm */
.askb{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 11px;border:1px solid var(--line2);border-radius:999px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.askb:hover{border-color:var(--ink)}
.askb .nd{width:8px;height:8px;border:1.5px solid var(--accent);border-radius:50%}
.sheet.ask .sb{gap:16px}
.ask-stand{color:var(--warn)}
.ask-log:empty{display:none}
.ask-sug{display:grid;gap:10px}
.ask-sug .chip{white-space:normal;text-align:left;line-height:1.25;padding-block:8px}
.ask-thread{display:grid;gap:22px}
.ask-turn{position:relative;padding-left:24px}
.ask-turn::before{content:"";position:absolute;left:4.5px;top:6px;bottom:-22px;width:1px;background:var(--line2)}
.ask-turn:last-child::before{bottom:0}
.ask-q{position:relative;font:600 15px/1.4 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.ask-q::before{content:"";position:absolute;left:-24px;top:5px;width:10px;height:10px;border:1.5px solid var(--accent);border-radius:50%}
.ask-a{margin-top:8px;font:400 14.5px/1.5 var(--sans);color:var(--soft);white-space:pre-line;overflow-wrap:anywhere}
.ask-a.err{color:var(--warn)}
.ask-wait{margin-top:8px;font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);animation:askp 1.2s ease-in-out infinite}
.ask-wait::after{content:"…"}
@keyframes askp{50%{opacity:.35}}
.ask-card{margin-top:12px;display:grid;gap:8px;padding:13px 14px;border:1px solid var(--line2);border-radius:14px;background:var(--raise)}
.ask-card .acts{margin-top:2px}
.ask-sum{font:500 14.5px/1.45 var(--sans);color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.ask-card.done>.tag:first-child{color:var(--ok)}
.ask-card.failed>.tag:first-child,.ask-card.late>.tag:first-child{color:var(--warn)}
.ask-card.cancelled,.ask-card.late,.ask-card.closed{background:transparent}
.ask-card.cancelled .ask-sum,.ask-card.late .ask-sum,.ask-card.closed .ask-sum{color:var(--muted)}
.ask-clear{justify-self:start;margin-top:22px}
.ask-form{position:sticky;bottom:-24px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:0 -18px -24px;padding:12px 18px calc(16px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}   /* held at the sheet's own bottom edge: the sheet's padding is taken off where sticky boxes stop */
.ask-form textarea{flex:1;min-width:0;height:44px;max-height:140px;border:1px solid var(--line2);border-radius:12px;padding:11px 13px;background:var(--surface);font:400 15px/1.4 var(--sans);color:var(--ink);outline:none;resize:none}
.ask-form .btn{min-height:44px}
.ask-starts{flex:1 0 100%;min-width:0;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}
.sheet.ask .sb>*{min-width:0}
.ask-starts::-webkit-scrollbar{display:none}
.ask-starts .chip{flex:none;min-height:32px;padding:0 12px;font-size:12.5px}
.ask-form textarea:focus{border-color:var(--ink)}
@container app (min-width:760px){.ask-form{bottom:-40px;margin:0 -28px -40px;padding:14px 28px 28px}}
@media (prefers-reduced-motion:reduce){.ask-wait{animation:none}}

/* joining: the page anyone can open from a link (/#/join), and its request form */
.join{max-width:600px;margin:0 auto;padding:4px 0 56px}
.join-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 26px}
.join-h .auth-mark{margin:0}
.join h1{font-size:46px;line-height:.95}
.join>.need{margin-top:12px;padding:0}
.join>.acts{margin-top:20px}
.join .sec{margin-top:38px}
.join-wk dd .nm{font:600 15px/1.3 var(--sans);color:var(--ink)}
.join .tier{cursor:default}
.join-cat{display:grid;gap:20px}
.join-cat dl{display:grid;margin-top:6px}
.join-cat dl>div{display:grid;grid-template-columns:minmax(0,9.5em) 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.join-cat dt{font:600 14px/1.35 var(--sans);color:var(--ink)}
.join-cat dd{font:400 14px/1.4 var(--sans);color:var(--soft)}
.join-co{display:grid;gap:12px}
.join-co li{display:flex;align-items:center;gap:12px}
.join-co b{display:block;font:600 15px/1.3 var(--sans)}
.join-end{display:grid;gap:10px;justify-items:center;margin-top:40px}
.join-f{display:grid;gap:16px;margin-top:26px}
.join-g{margin-top:10px;padding-top:18px;border-top:1px solid var(--line);color:var(--ink)}
a.btn{text-decoration:none}
.join-f fieldset{border:0;margin:0;padding:0;min-width:0}
.join-f legend{padding:0;margin-bottom:7px}
.join-f .pe-g.two{grid-template-columns:1fr 1fr}
.join-f .chip{position:relative;cursor:pointer}
.join-f .chip input,.join-tiers input{position:absolute;opacity:0;pointer-events:none}
.join-f .chip:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--bg)}
.join-f .chip:has(input:focus-visible),.join-tiers .tier:has(input:focus-visible){outline:1.5px solid var(--accent);outline-offset:3px}
.join-tiers{gap:8px}
.join-tiers .tier{position:relative;cursor:pointer;grid-template-columns:1fr auto;align-items:baseline;padding:13px 16px;border-radius:14px}
.join-tiers .tier:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.join-tiers .price{font-size:24px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.join-thanks{font-size:16px;margin-top:14px}
.join-app{margin-top:24px;display:grid;gap:10px}
.pay-ways .tier{grid-template-columns:1fr auto;align-items:center}
.pay-ways .tier>span:first-of-type{display:grid;gap:3px}
.pay-ways .num b{font:400 24px/1 var(--display)}
.join-pay{margin-top:12px}

/* the recommended path (Sage, Oct 19): each membership's "best for", and the usual path as nodes on one line */
.tier .best{font:400 13px/1.4 var(--sans);color:var(--ink);margin-top:2px}
.tier .best .tag{margin-right:4px}
.tpath{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px;margin:8px 0 18px}
.tpath::before{content:"";position:absolute;top:6px;left:6px;width:calc(100% * (var(--n) - 1) / var(--n) + 6px);height:1px;background:var(--line2)}
.tp-n{position:relative;display:grid;gap:4px;align-content:start}
.tp-n i{display:block;width:12px;height:12px;border:1.5px solid var(--accent);border-radius:50%;margin-bottom:4px}
.tp-n b{font:400 22px/1 var(--display);text-transform:uppercase}
.tp-n span{font:400 13px/1.35 var(--sans);color:var(--soft)}
.join-tiers .tier{grid-template-columns:1fr auto}
.join-tiers .tier .best{grid-column:1 / -1}
.join-tiers .rec-tag{display:none;font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep)}
.join-tiers .tier.rec .rec-tag{display:inline}

/* formatting pass (Oct 19): a button in a list row centers its words like every other button */
.since dd button.btn{align-items:center}

/* ARQ IQ inside ARQ 360 (Oct 19, the approved mockup): lessons done large, the three level paths as bars, up next, and
   the week's board with the family's own athletes marked */
.tops:not(.chips){display:flex;flex-wrap:wrap;gap:8px}
.iq-n{display:flex;align-items:baseline;gap:8px}
.iq-n .big{font-size:40px}
.iq-n+.pbar{margin-top:12px}
.iq-lv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px 12px;align-items:center;margin-top:14px}
.iq-lv .pbar{margin-top:0}
.iq-lv .tag:nth-child(3n){text-align:right;white-space:nowrap}
.iq-lv .tag b{font-weight:500;color:var(--ink)}
.iq-next{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.iq-next .nm{margin:5px 0 3px}
.iq .acts .btn{flex:1 1 auto}
.iq-last,.iq-up{margin-top:14px}
.iq-up .tag{margin-right:6px}
.iq .ac-stats{margin-top:14px}
.iq .conn{margin-top:4px;border-top:0;padding-bottom:0}
.iqs{display:inline-flex;align-items:baseline;gap:4px;padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-deep)}
.ac-stats .iqs b{color:inherit}
.iqb{display:grid}
.iqb li>div,.iqb li>button{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:46px;padding:8px 10px;border-top:1px solid var(--line)}
.iqb li:first-child>*{border-top-color:transparent}
.iqb li>button:hover .who b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.iqb .rk{font:400 12px var(--mono);color:var(--muted)}
.iqb .who{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0;font:500 15px/1.3 var(--sans);color:var(--ink)}
.iqb .who b{font-weight:500}
.iqb .pt{font:400 24px/1 var(--display)}
.iqb li.mine>*{background:var(--accent-soft);border-radius:10px;border-top-color:transparent}
.iqb li.mine+li>*{border-top-color:transparent}
.iqb li.mine .rk,.iqb li.mine .who{color:var(--accent-deep)}
.sheet .iqb+.tag{margin-top:14px}

/* the boards (Oct 19): sessions this offseason beside ARQ IQ's week, one card with a tab for each */
.boards .cd-h{align-items:center;flex-wrap:wrap}
.board-tabs{gap:6px}
.board-tabs .chip{min-height:32px;padding:0 12px;font-size:12.5px}
.sheet .board-tabs{margin-bottom:4px}
.boards>.tag{margin:-4px 0 6px}
.board-mine{font:400 14px/1.5 var(--sans);color:var(--soft);margin:2px 0 8px}
.board-mine b{font-weight:600;color:var(--ink)}
.board-mine .sep{display:inline-block;width:1px;height:12px;background:var(--line2);margin:0 10px;vertical-align:-1px}


/* adding straight onto a day of the Schedule (Oct 19): an Add button under each day, and what's only the staff's */
.dayadd{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:38px;margin-top:8px;border:1px dashed var(--line2);border-radius:10px;
  font:500 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);opacity:.7;transition:opacity .15s,border-color .15s,color .15s}
.dayadd .ic{width:15px;height:15px}
.dayadd:hover,.day:hover .dayadd{opacity:1;border-color:var(--ink);color:var(--ink)}
.ev.dt.mine{box-shadow:inset 3px 0 0 var(--line2)}
.ev.dt.mine .t{color:var(--muted)}
.tag.warn{color:var(--warn)}

/* importing the players (Oct 19): what the spreadsheet would add, line by line */
.import-rep{display:grid;gap:6px;margin-top:8px}
.import-rep li{padding-left:14px;position:relative}
.import-rep li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;border:1.5px solid var(--accent)}