/* 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)}

/* the Schedule as a calendar (Sage, Oct 20; 67_calendar.js): the day, the week, the month */
.cseg{display:inline-flex;gap:4px}
.tops .cal-add{margin-left:auto}
.cal-sec{margin-top:18px}
.cal-scroll{overflow-x:auto}
.cal-wk.week{display:grid;grid-template-columns:34px repeat(7,minmax(0,1fr));gap:0}
.cal-wk .day{padding:0;border-top:0;min-width:0;display:block}
.cal-wk .day h3{height:24px;margin:0;display:flex;align-items:flex-end;justify-content:center;font:500 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.cal-wk .day.today h3{color:var(--accent-deep)}
.cal-wk .dayadd{height:26px;min-height:26px;margin:4px 3px;font-size:11px}
.cadd-sp{height:34px}
.ch3{height:24px}
.cad{display:grid;gap:3px;align-content:start;padding:0 3px;overflow:hidden}
.cad.one{padding:0 0 8px}
.cchip{display:block;width:100%;text-align:left;border-radius:6px;padding:3px 6px;font:500 11px/1.25 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--warn-soft);color:var(--warn)}
.cchip.g,.cchip.dt.mine{background:var(--raise);color:var(--soft)}
.cchip.tp{background:var(--accent-soft);color:var(--accent-deep)}
.cbody{position:relative;border-left:1px solid var(--line)}
.cal-hrs .cbody{border-left:0}
.cal-hrs span{position:absolute;right:6px;transform:translateY(-6px);font:400 10px var(--mono);color:var(--dim)}
.chr{position:absolute;left:0;right:0;border-top:1px solid var(--line)}
.chit{position:absolute;inset:0;cursor:copy}
.cb{position:absolute;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;border-radius:6px;padding:3px 6px;overflow:hidden;text-align:left;font:500 11.5px/1.2 var(--sans);color:var(--ink);background:var(--raise);border-left:3px solid var(--ink)}
.cb .t{display:block;font:400 10px/1.25 var(--mono);color:var(--muted);letter-spacing:.02em}
.cb .n{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.cb .m{display:block;font:400 10.5px/1.3 var(--mono);color:var(--muted);margin-top:1px}
.cb.short{padding-top:1px;padding-bottom:1px}.cb.short .n{white-space:nowrap}.cb.short .t{display:inline}
.cb.sess{background:color-mix(in srgb,var(--accent) 22%,var(--bg));border-left-color:var(--accent)}
.cb.sess.cx .n{text-decoration:line-through;color:var(--dim)}
.cb.bk.req{background:var(--warn-soft);border-left:3px dashed var(--warn)}
.cb.open{z-index:0;justify-content:flex-end;background:color-mix(in srgb,var(--accent) 6%,var(--bg));border:1.5px dashed var(--accent);color:var(--accent-deep)}
.cb.open .n{font-weight:500}
.cb.g{background:var(--raise);border-left-color:var(--dim);color:var(--soft)}
.cb.g.busy{background:repeating-linear-gradient(135deg,transparent 0 9px,var(--line) 9px 10px);border-left-color:var(--line2);color:var(--muted)}
.cb.dt{background:var(--warn-soft);border-left-color:var(--warn)}
.cb.dt.mine{background:var(--raise);border-left-color:var(--line2)}
button.cb:hover .n{text-decoration:underline;text-underline-offset:2px}
.cnow{position:absolute;left:0;right:0;z-index:2;border-top:2px solid var(--accent);pointer-events:none}
.cnow::before{content:'';position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
@container app (max-width:759px){
  .cal-wk.week{grid-template-columns:26px repeat(7,minmax(0,1fr))}
  .cal-wk .day h3{font-size:9px;letter-spacing:.02em}
  .cal-wk .dayadd{font-size:0;gap:0;margin:4px 2px}
  .cal-wk .cb{font-size:9.5px;padding:2px 3px;border-radius:4px;border-left-width:2px}
  .cal-wk .cb .t,.cal-wk .cb .m{display:none}
  .cal-wk .cchip{font-size:9px;padding:2px 3px}
  .cal-hrs span{right:3px;font-size:8.5px}
}
/* one day: the week as a strip, the day's hours */
.cal-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:12px}
.csd{border-radius:12px;padding:7px 0 6px;display:grid;justify-items:center;gap:1px;font:400 10px/1.2 var(--mono);text-transform:uppercase;color:var(--muted)}
.csd b{font:400 20px/1.1 var(--display);color:var(--ink)}
.csd.today b{color:var(--accent-deep)}
.csd.on{background:var(--ink);color:var(--bg)}.csd.on b{color:var(--bg)}
.csd i{display:flex;gap:3px;height:6px}
.csd em{width:5px;height:5px;border-radius:50%;background:var(--ink)}
.csd em.sess{background:var(--accent)}.csd em.open{border:1px solid var(--accent);background:transparent}.csd em.g{background:var(--dim)}.csd em.dt{background:var(--warn)}
.csd.on em.bk{background:var(--bg)}
.day.cal-one{border-top:1px solid var(--line);padding:10px 0 0}
.cdh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.cal-one .cdh h3{font:400 20px/1 var(--display);text-transform:uppercase;letter-spacing:0;color:var(--ink);margin:0}
.cdh span{font:400 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:right}
.cal-tl{display:grid;grid-template-columns:40px minmax(0,1fr);max-height:max(300px,min(640px,calc(100dvh - 430px)));overflow-y:auto;overscroll-behavior:contain;padding-top:8px;border-bottom:1px solid var(--line)}
.cal-tl .cb{font-size:13px;padding:6px 9px;border-radius:8px}
.cal-tl .cb .t{font-size:10.5px}
.cal-tl .cfree{position:absolute;left:0;right:0;z-index:0;margin:0;min-height:0;font:400 11px var(--mono);letter-spacing:.05em;text-transform:uppercase}
/* the month */
.cal-mo .cmh{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));font:400 10px var(--mono);letter-spacing:.06em;color:var(--muted);text-align:center;padding-bottom:6px}
.cmg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cmd{min-height:84px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px;display:grid;align-content:start;gap:3px;text-align:left;min-width:0}
.cmd b{font:400 15px/1 var(--display)}
.cmd.out{opacity:.4}
.cmd.today b{color:var(--accent-deep)}
.cmd em{display:block;font:500 10px/1.2 var(--sans);font-style:normal;border-radius:4px;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--raise);color:var(--ink)}
.cmd em.sess{background:color-mix(in srgb,var(--accent) 22%,var(--bg))}
.cmd em.open{border:1px dashed var(--accent);background:transparent;color:var(--accent-deep)}
.cmd em.dt,.cmd em.tp{background:var(--warn-soft);color:var(--warn)}
@container app (max-width:520px){.cmd{min-height:58px;padding:3px}.cmd em{font-size:9px;padding:1px 2px}}
/* the typical week, under the calendar */
.typ-o{display:block;font:400 13px/1.4 var(--sans);text-align:left;color:var(--accent-deep);margin-top:2px}
.da-types{margin-bottom:6px}
@container app (max-width:759px){.openbar{padding:10px 14px;gap:8px 12px;margin-top:12px}.openbar .tag{display:none}.openbar .txt{margin-top:0;font-size:14px}.openbar .btn{min-height:34px;padding:6px 12px;font-size:13px}}
/* the year on Today (Oct 20): the arc across the top, milestones as warm circles, the horizon as tiles */
.yr-top{margin-top:12px}
.yr-top svg{width:100%;height:auto;max-width:none}
.a-node.ms{stroke:var(--warn)}
.a-node.ms.past{opacity:.5}
.hz{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);gap:10px;overflow-x:auto;margin-top:12px;padding-bottom:2px}
.hz-t{display:grid;gap:3px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.hz-t .nm{font:400 17px/1.1 var(--display);text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hz-d{font:400 11px var(--mono);letter-spacing:.04em;color:var(--muted)}
.hz-t.add{border-style:dashed;background:transparent}
.hz-t.add .nm{color:var(--accent-deep)}
.ac-f.none{color:var(--muted)}.ac-f.none b{color:var(--accent-deep);font-weight:500}

/* ---------- the website's look (Sage, Oct 21: "match some of the design of what we've just made here to the app"), with
   his changes the same day: no initials circles on players, "not a huge fan of boxy" (no box where a line will do; the
   boxes that stay keep their rounded corners), and the burnt orange where a little contrast helps. Paper and ink, mono
   capitals on buttons, the next session as the one dark block, the lockup with its line. Every screen, flow and word
   stays the same, and the app's logo keeps no line between the arcs and ARQ (Sage, Oct 19). Switched on by the class
   site-look on <html> while Sage looks at it. ---------- */
:root.site-look{
  --bg:#f2efe8;--surface:#f8f6f1;--raise:#ebe7de;--ink:#111214;--soft:#2c2b28;--muted:#6b6860;--dim:#8a8780;
  --line:#d9d4c9;--line2:#bdb7ab;--accent:#111214;--accent-deep:#111214;--accent-soft:#e6e1d6;
  --hover:rgba(17,18,20,.05);--stage:#e6e1d6;--shadow:none;--hero-bg:#0b0b0c;--pop:#a5501f;--pop-ink:#e29a6f;
}
@media (prefers-color-scheme:dark){:root.site-look:not([data-theme="light"]){
  --bg:#0b0b0c;--surface:#121214;--raise:#1a1a1d;--ink:#f2efe8;--soft:#dcd9d1;--muted:#9a978f;--dim:#7a776f;
  --line:#26262a;--line2:#3a3a3f;--accent:#f2efe8;--accent-deep:#f2efe8;--accent-soft:#1d1d20;
  --hover:rgba(242,239,232,.06);--stage:#050506;--shadow:none;--hero-bg:#1a1a1d;--pop:#e29a6f;--pop-ink:#a5501f;color-scheme:dark}}
:root.site-look[data-theme="dark"]{
  --bg:#0b0b0c;--surface:#121214;--raise:#1a1a1d;--ink:#f2efe8;--soft:#dcd9d1;--muted:#9a978f;--dim:#7a776f;
  --line:#26262a;--line2:#3a3a3f;--accent:#f2efe8;--accent-deep:#f2efe8;--accent-soft:#1d1d20;
  --hover:rgba(242,239,232,.06);--stage:#050506;--shadow:none;--hero-bg:#1a1a1d;--pop:#e29a6f;--pop-ink:#a5501f;color-scheme:dark}
.site-look :is(.card,.cd,.tier,.toast,.find ul){box-shadow:none}

/* buttons and chips: mono capitals like the website's, still round; the wide ones carry its arrow */
.site-look .btn{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;min-height:44px;padding:0 18px}
.site-look .btn.sm{min-height:36px;padding:0 14px;font-size:10.5px;letter-spacing:.12em}
.site-look .btn.ghost{border-color:var(--ink)}
.site-look :is(.btn.wide,.hero-act .btn){justify-content:space-between;padding:0 22px}
.site-look :is(.btn.wide,.hero-act .btn)::after{content:"→";font:400 16px/1 var(--sans);letter-spacing:0}
.site-look .chip{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;min-height:36px}
.site-look .askb{border-color:var(--ink)}

/* no box where a line will do: the dashboard's sections sit on the page under a rule, like the website's */
.site-look .dash>.cd:not(:has(> .hero-row)){background:none;border:0;border-top:1px solid var(--line2);border-radius:0;padding:16px 0 4px}

/* the next session: the one dark block on the page, rounded */
.site-look .cd:has(> .hero-row){--ink:#f2efe8;--soft:#dcd9d1;--muted:#a7a49c;--dim:#8a877f;--line:#2e2e33;--line2:#4a4a50;--bg:#0b0b0c;--surface:var(--hero-bg);--hover:rgba(242,239,232,.06);
  --accent:#f2efe8;--accent-deep:#f2efe8;--accent-soft:#232327;--pop:#e29a6f;background:var(--hero-bg);border-color:var(--hero-bg);color:var(--ink)}

/* players by name, not initials in circles (Sage, Oct 20 and 21); a burnt orange dot for one with no plan yet */
.site-look .faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
@container app (min-width:620px){.site-look .faces{grid-template-columns:repeat(4,minmax(0,1fr))}}
.site-look .face{display:flex;align-items:center;justify-items:start;width:auto;min-width:0;padding:10px 0;border-bottom:1px solid var(--line);text-align:left}
.site-look .face .av{display:none}
.site-look .face>span:last-child{font:500 15px/1.25 var(--sans);color:var(--ink);max-width:none}
.site-look .face:has(.av.new)>span:last-child::after{content:"";display:inline-block;width:7px;height:7px;margin-left:7px;vertical-align:2px;border-radius:50%;background:var(--pop)}
.site-look .face:hover>span:last-child{text-decoration:underline;text-underline-offset:3px}

/* what tonight's group is working on: the names' own rules already close the list, so no second line; on a phone the
   strip runs to the block's edge so the cut chip reads as "scroll", not as clipped */
.site-look .cd:has(> .hero-row) .foc{border-top:0;padding-top:0}
@container app (max-width:619px){.site-look .cd:has(> .hero-row) .foc{margin-right:-20px;padding-right:20px}}

/* burnt orange for now: the current tab, Ask, the calendar's now line and today's date */
.site-look .tabs button[aria-current=page] .nd,.site-look .askb .nd{border-color:var(--pop)}
.site-look .cnow{border-top-color:var(--pop)}
.site-look .cnow::before{background:var(--pop)}
.site-look .csd.today b{color:var(--pop)}
.site-look .csd.on.today b{color:var(--bg)}
.site-look .csd.on.today span{color:var(--pop-ink)}
/* the chosen day is an ink tile: its dots turn paper so they still show */
.site-look .csd.on em.sess{background:var(--bg)}
.site-look .csd.on em.bk{background:none;border-color:var(--bg)}
.site-look .csd.on em.open{border-color:color-mix(in srgb,var(--bg) 55%,var(--ink))}

/* the calendar: group training is the black block, as tonight's is on Today; a one-on-one is a paper block drawn in ink.
   The day strip's dots follow: filled for training, a ring for a one-on-one, grey for open times and your own calendar,
   orange for dates */
.site-look .cb.sess{background:var(--ink);color:var(--bg);border-left:0}
.site-look .cb.sess :is(.t,.m){color:color-mix(in srgb,var(--bg) 70%,var(--ink))}
.site-look .cb.sess.cx{background:var(--raise);color:var(--ink);border-left:3px solid var(--line2)}
.site-look .cb.sess.cx :is(.t,.m){color:var(--muted)}
.site-look .cb.bk:not(.req){background:var(--surface);border:1px solid var(--ink);border-left-width:3px}
.site-look .cmd em.sess{background:var(--ink);color:var(--bg)}
.site-look .cmd em.bk{background:none;box-shadow:inset 0 0 0 1px var(--ink)}
.site-look .cmd.today b{color:var(--pop)}
.site-look .wk .pill.sess{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.site-look .wk .pill.sess span{color:color-mix(in srgb,var(--bg) 70%,var(--ink))}
.site-look .csd em.bk{background:none;border:1px solid var(--ink)}
.site-look .csd em.open{border-color:var(--dim)}
.site-look .ev.dt{box-shadow:inset 3px 0 0 var(--warn)}
.site-look .ev.dt .t{color:var(--warn)}

/* ---------- the rest of the app in the same look (Sage, Oct 21: "roll this look across the rest of the app") ---------- */

/* nobody shown as initials in a circle: players, families and coaches go by name (the account button at the top stays) */
.site-look :is(.ath-head,.ac-top,.hero-who,.pp,.join-co) .av{display:none}
.site-look .pp{grid-template-columns:minmax(0,1fr) auto}

/* lists sit on the page under a rule, as Needs you does: the Athletes list (Sage disliked its cards, Oct 19), people,
   each plan's focus areas, sent updates, tonight's roll, and a player's heading */
.site-look :is(.agrid,.fgrid,.sentc){gap:0 32px}
.site-look :is(.agrid>.cd.ac,.agrid>.cd.ppl,.fgrid>.cd.fc,.sentc>.cd){background:none;border:0;border-top:1px solid var(--line2);border-radius:0;padding:18px 0}
.site-look .agrid>.cd.ac:hover .nm{text-decoration:underline;text-underline-offset:3px}
.site-look :is(.cd.ath-head,.cd.roll-c){background:none;border:0;border-radius:0;padding-left:0;padding-right:0}
.site-look .side{gap:0}
.site-look .side>.cd{background:none;border:0;border-top:1px solid var(--line2);border-radius:0;padding:16px 0}
.site-look .cd.ath-head{padding-top:0}
.site-look .ac-top~.cd{background:none;border:0;border-top:1px solid var(--line2);border-radius:0;padding:14px 0 0!important}

/* a ticked "I'll be there": the tick takes the page colour, so it shows on the ink box in dark mode too */
.site-look :is(.going,.chk)[aria-pressed=true] .bx{color:var(--bg)}
.me-look{display:grid;gap:8px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}