/* Component styles for the Coach Training Hub. Layered on top of colors-and-type.css. */

.wrap{max-width:1000px;margin:0 auto;padding:0 24px;}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid var(--line);background:var(--bg);
}
.topbar .brand svg{height:20px;width:auto;}
.topbar .who{display:flex;align-items:center;gap:14px;font-size:13.5px;color:var(--fg-muted);}
/* Wraps rather than overflowing. Four items fit one line at 375px with about
   13px to spare, which is too little to rely on for a narrower phone. */
.topnav{display:flex;align-items:center;flex-wrap:wrap;gap:6px 22px;}
.topnav a{
  font-size:13.5px;color:var(--fg-muted);text-decoration:none;
  padding:4px 0;border-bottom:1.5px solid transparent;
}
.topnav a:hover{color:var(--fg);}
.topnav a.is-current{color:var(--fg);border-bottom-color:var(--bu-blue);}
/* Leaves the hub, so it never takes the current-page underline. */
.topnav a.is-external{color:var(--fg-faint);}
.topnav a.is-external:hover{color:var(--fg);}
@media (max-width:640px){
  .topbar{flex-wrap:wrap;gap:10px 16px;}
  .topnav{order:3;flex-basis:100%;gap:18px;}
  /* The address is the first thing worth dropping on a narrow screen, the
     nav and the sign-out control are not. */
  .whoemail{display:none;}
}
.topbar .signout{cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:var(--fg-faint);}
.topbar .signout:hover{opacity:.7;}

.btn{
  font-family:var(--font-body);font-weight:500;font-size:14px;letter-spacing:.03em;
  padding:13px 22px;border-radius:8px;border:1.5px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;user-select:none;text-decoration:none;
  transition:opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--bu-blue);color:var(--bu-white);}
.btn-primary:hover{opacity:.88;}
.btn-primary:disabled{opacity:.35;cursor:not-allowed;}
.btn-outline{background:transparent;color:var(--fg);border-color:var(--line-strong);}
.btn-outline:hover{opacity:.7;}
.btn-ghost{background:transparent;color:var(--bu-blue);padding-left:0;padding-right:0;}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px;font-size:13px;}

.field{display:flex;flex-direction:column;gap:6px;}
.field .lbl{font-family:var(--font-body);font-weight:500;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-muted);}
.input{
  font-family:var(--font-body);font-size:15px;padding:13px 15px;
  background:var(--bu-white);border:1.5px solid rgba(0,28,51,.18);
  color:var(--bu-navy);border-radius:8px;outline:none;width:100%;
}
.input:focus{border-color:var(--bu-blue);box-shadow:var(--focus-ring);}
.help{font-size:12.5px;color:var(--fg-faint);}
.error{font-size:12.5px;color:#ff8a75;}

.badge{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:10.5px;letter-spacing:.12em;padding:5px 9px;border-radius:4px;line-height:1;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:none;
}
.badge-locked{background:transparent;color:var(--fg-faint);border:1px solid var(--line-strong);}
.badge-progress{background:var(--bu-blue);color:var(--bu-white);}
.badge-complete{background:transparent;color:var(--bu-blue);border:1px solid var(--bu-blue);}
/* Uploaded, waiting on an admin. Deliberately not the same as complete: it
   unlocks the next module but is not a pass. */
.badge-pending{background:transparent;color:var(--bu-stone-deep);border:1px dashed var(--line-strong);}
/* Listed so coaches know it is planned, but not part of this season. */
.badge-soon{background:transparent;color:var(--fg-faint);border:1px dashed var(--line-strong);}

.icon{width:14px;height:14px;flex:none;}
.icon path,.icon rect,.icon polyline{stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- login (index.html, signed out) ---------- */
.loginhero{
  min-height:100vh;background:var(--bu-navy);color:var(--bu-stone);
  display:flex;align-items:center;justify-content:center;padding:48px 24px;
}
.loginhero .panel{width:100%;max-width:380px;display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center;}
.loginhero .wordmark{height:24px;}
.loginhero h2{font-size:clamp(26px,5vw,38px);color:var(--bu-stone);}
.loginhero .editorial{color:rgba(247,245,237,.86);font-size:17px;}
.loginhero form{width:100%;display:flex;flex-direction:column;gap:14px;text-align:left;}
.loginhero .field .lbl{color:rgba(247,245,237,.7);}
.loginhero .foot{font-size:12.5px;color:rgba(247,245,237,.5);}

/* ---------- module list (index.html, signed in) ---------- */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 22px;}
@media (max-width:640px){.statrow{grid-template-columns:1fr;}}
.statcard{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;}
.statcard .num{font-family:var(--font-display);font-size:32px;color:var(--bu-blue);line-height:1;}
.statcard .lbl{font-size:12.5px;letter-spacing:.03em;color:var(--fg-muted);}

.progressbar{height:8px;border-radius:999px;background:rgba(247,245,237,.14);overflow:hidden;margin-bottom:8px;}
.progressbar .fill{height:100%;background:var(--bu-blue);border-radius:999px;}
.progresscaption{font-size:12px;color:var(--fg-faint);display:flex;justify-content:space-between;margin-bottom:28px;}

.sectiontitle{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
.sectiontitle h3{font-size:20px;}

.modgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding-bottom:48px;}
@media (max-width:640px){.modgrid{grid-template-columns:1fr;}}
.modcard{background:var(--bg-card);border-radius:16px;border:1px solid var(--line);padding:20px 20px 18px;display:flex;flex-direction:column;gap:12px;min-height:160px;}
.modcard.is-locked{border-style:dashed;}
.modcard.is-current{border-color:var(--bu-blue);border-width:1.5px;}
.modcard .top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.modcard .num{font-family:var(--font-display);font-size:11px;letter-spacing:.1em;color:var(--fg-faint);}
.modcard .title{font-family:var(--font-serif);font-size:19px;line-height:1.15;}
.modcard.is-locked .title{color:var(--fg-faint);}
.modcard .desc{font-size:13.5px;color:var(--fg-muted);line-height:1.45;}
.modcard .bottom{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:10px;}
.modcard .score{font-size:12.5px;color:var(--fg-muted);}
.modcard .lockrow{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--fg-faint);}

/* ---------- module.html ---------- */
/* The 4px bottom margin left the heading almost touching whatever followed
   it, video or upload card. The gap here also sets eyebrow-to-title and
   title-to-description, since this is a flex column. */
.lessonhead{display:flex;flex-direction:column;gap:14px;margin:28px 0 32px;}
.crumb{font-size:12.5px;color:var(--fg-faint);text-decoration:underline;text-underline-offset:3px;width:fit-content;cursor:pointer;}
.lessonhead h2{font-size:clamp(24px,3vw,32px);}
.lessonhead .editorial{font-size:16px;color:var(--fg-muted);max-width:60ch;}

.videowrap{margin:18px 0 6px;border-radius:14px;overflow:hidden;border:1.5px solid rgba(247,245,237,.3);background:var(--bu-navy);}
/* Matches both the placeholder div and the iframe the YouTube API swaps in
   over it, which keeps the same id. A module can hold several videos, so
   these are numbered player-0, player-1, and so on. */
/* height:auto is load-bearing. The YouTube API writes height="360" onto the
   iframe as an attribute, and aspect-ratio is ignored when both dimensions are
   already definite, so without this the video rendered at 2.64:1 instead of
   16:9, roughly two thirds of its proper height. */
[id^="player-"]{aspect-ratio:16/9;width:100%;height:auto;display:block;border:0;}
.videoblock + .videoblock{margin-top:22px;}
/* Stands in for a player that has not opened yet, so it holds the same shape
   as the video it replaces rather than collapsing the layout. */
.videolocked{
  aspect-ratio:16/9;width:100%;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 24px;font-size:13.5px;color:var(--fg-faint);
}
.videolabel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:18px;}
.videostate{font-size:12px;color:var(--fg-faint);white-space:nowrap;}
.videoblock .videowrap{margin-top:8px;}
/* Runs the full width of the video above it. It had max-width:64ch, but ch
   scales with the element's own font size, and at 12.5px that came out around
   430px under a 952px video, which read as a stray narrow paragraph. */
.videocap{margin:18px 0 0;padding:0 2px 24px;font-size:12.5px;color:var(--fg-faint);}

.quizcard{margin:0 0 48px;background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:26px 26px 24px;}
.quizhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:8px;}
.qcounter{font-size:12.5px;color:var(--fg-muted);}
.stem{font-size:18px;line-height:1.4;font-weight:400;margin-bottom:16px;}
.options{display:flex;flex-direction:column;gap:10px;}
.option{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:10px;border:1.5px solid var(--line);cursor:pointer;}
.option:hover{border-color:var(--line-strong);}
.option input{accent-color:var(--bu-blue);width:17px;height:17px;flex:none;}
.option label{font-size:14.5px;cursor:pointer;flex:1;}
.option.is-checked{border-color:var(--bu-blue);background:rgba(0,128,242,.14);}
.qactions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}

.result .banner{border-radius:12px;padding:18px 20px;display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.result .banner.pass{background:var(--bu-blue);color:var(--bu-white);}
.result .banner.fail{background:transparent;border:1.5px solid var(--fg-faint);color:var(--fg);}
.result .banner .score{font-family:var(--font-display);font-size:24px;line-height:1;}
.result .banner .label{font-size:13px;letter-spacing:.03em;}
.reviewitem{padding:14px 0;border-top:1px solid var(--line);}
.reviewitem:first-of-type{border-top:none;}
.reviewitem .q{font-size:14px;margin-bottom:6px;}
.reviewitem .a{font-size:13px;color:var(--fg-muted);}
.reviewitem .a.wrong{color:#ff8a75;}
.reviewitem .a.right{color:var(--bu-blue);}
.resultactions{display:flex;justify-content:flex-end;gap:10px;}

/* ---------- admin.html ---------- */
.admintable{width:100%;border-collapse:collapse;margin:24px 0 48px;font-size:12.5px;}
.admintable th,.admintable td{text-align:left;padding:11px 4px;border-bottom:1px solid var(--line);}
/* Twelve columns have to fit 952px without a sideways scroll, so the layout is
   fixed and the module columns get only what a mark needs. The wrapper keeps
   its overflow for a phone, where nothing makes twelve columns fit. */
/* Fixed, with a floor: below this the columns would squeeze until the marks
   sat on top of each other, so the wrapper scrolls instead. That only happens
   on a phone, where twelve columns were never going to fit. */
.admintable{table-layout:fixed;min-width:800px;}
.admintable th:first-child,.admintable td:first-child{width:27%;padding-left:2px;overflow-wrap:anywhere;}
.admintable th:nth-child(2),.admintable td:nth-child(2){width:76px;}
.admintable th:nth-child(n+2),.admintable td:nth-child(n+2){text-align:center;}
.modcell{white-space:nowrap;}
/* The number above the name: the number is what people say, the name is what
   makes the column findable without counting across ten of them. */
.modhead{vertical-align:bottom;}
.modhead .modnum{display:block;}
.modhead .modname{
  display:block;margin-top:3px;font-size:9px;letter-spacing:0;
  color:var(--fg-faint);text-transform:none;font-family:var(--font-body);
  /* One word that does not fit a narrow window is cut rather than broken
     across two lines; the number above it still says which module, and the
     heading's title has the whole name. */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.modcell.ok{color:var(--bu-blue);}
.modcell.wait{color:var(--bu-stone-deep);}
.modcell.bad{color:var(--bu-red,#e5484d);}
.admintable th{font-family:var(--font-display);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);}
.admintable tr:hover td{background:var(--bg-card);}
.tablewrap{overflow-x:auto;}

.centernote{max-width:520px;margin:80px auto;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;padding:0 24px;}

/* ---- document uploads (SafeSport certificate, Ramp account proof) ---- */
/* The upload is a separate phase from the instructions above it: a coach
   reads those, leaves for an hour and a half, and comes back to this. The
   rule makes that a break rather than the next item in a list. */
.uploadrow{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:24px 0 8px;padding-top:20px;border-top:1px solid var(--line);
}
.uploadrow input[type=file]{
  flex:1 1 240px;min-width:0;font-size:13px;color:var(--fg-muted);
  padding:10px 12px;border:1.5px dashed var(--line-strong);border-radius:10px;background:transparent;
}
.uploadrow input[type=file]::file-selector-button{
  font:inherit;font-size:12.5px;margin-right:10px;padding:6px 12px;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:6px;background:transparent;color:var(--fg);
}
.docstate{font-size:12.5px;color:var(--fg-faint);}
.docstate.is-pending{color:var(--bu-stone-deep);}
.docstate.is-approved{color:var(--bu-blue);}
.docstate.is-rejected{color:var(--bu-red,#e5484d);}

/* ---- admin review queue ---- */
.reviewrow{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.reviewrow:last-child{border-bottom:0;}
.reviewcoach{font-size:14px;}
.reviewmod{font-size:12.5px;color:var(--fg-faint);margin-top:3px;}
.reviewwarn{font-size:12.5px;color:var(--bu-stone-deep);margin-top:4px;}
.reviewactions{display:flex;gap:8px;flex-wrap:wrap;}
.reviewmsg{flex-basis:100%;margin:0;}
.reviewmsg:empty{display:none;}

/* ---- the documents behind a cell of the progress table ---- */
/* A cell for a module proved by uploading something opens the files the coach
   sent. It has to still read as a table cell, so it borrows the cell's own
   colour and only the dotted underline says it can be clicked. */
.celldocs{
  font:inherit;color:inherit;background:none;border:0;padding:0;
  cursor:pointer;text-align:center;
  border-bottom:1px dotted var(--line-strong);
}
.celldocs:hover{color:var(--bu-blue);border-bottom-color:var(--bu-blue);}
.celldocs:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:3px;}

/* The panel opens in a row of its own, spanning the table. tr:hover paints
   every cell on the admin table, which would flicker the panel's background
   as the mouse crosses it. */
.docsrow td{padding:0 2px 16px;background:transparent;text-align:left;}
.admintable tr.docsrow:hover td{background:transparent;}
.docspanel{
  background:var(--bg-card);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;
  /* The row it sits in is as wide as the whole table, which is wider than the
     screen. Without a width of its own, Close and Open land off to the right
     where an admin has to scroll sideways to find them. */
  width:min(720px, calc(100vw - 48px));
}
.docshead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.docstitle{font-size:14px;}
.docswho{font-size:12.5px;color:var(--fg-faint);margin-top:3px;}

.doclist{list-style:none;margin:14px 0 0;padding:0;}
.docfile{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:11px 0;border-top:1px solid var(--line);
}
.docfilewho{min-width:0;}
/* A coach's own file name, which can be long and has no spaces to break on. */
.docname{font-size:13.5px;overflow-wrap:anywhere;}
.docmeta{font-size:12px;color:var(--fg-faint);margin-top:3px;}
.doctag{
  display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  background:var(--bu-blue-tint);color:var(--bu-navy);font-size:11px;
}
.docsmsg{margin:12px 0 0;}
.docsmsg:empty{display:none;}

/* ---- in-person attendance, a column of the progress table ---- */
/* Two small toggles per coach, a tick and an E, so attendance reads as part
   of a coach's row rather than as a list somewhere else on the page. */
.ipcell{white-space:nowrap;}
.ipmark{
  font:inherit;font-size:12.5px;line-height:1;cursor:pointer;
  width:25px;height:25px;padding:0;margin:0 2px;
  border:1.5px solid var(--line-strong);border-radius:7px;
  background:transparent;color:var(--fg-faint);
}
.ipmark:hover{border-color:var(--bu-blue);color:var(--fg);}
.ipmark:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.ipmark.is-on{background:var(--bu-blue);border-color:var(--bu-blue);color:var(--bu-white);}
/* Excused is not the same thing as turning up, so it does not get the colour
   that means attended. */
.ipmark.is-on[data-ip-mark="excused"]{
  background:var(--bu-stone-deep);border-color:var(--bu-stone-deep);color:var(--bu-navy);
}

/* The note explaining the marks sits under the table, and the table's own
   48px bottom margin would leave it floating a long way from what it
   explains, so the gap moves below the note instead. */
.admintable{margin-bottom:14px;}
.tablenote{margin:0 0 6px;line-height:1.7;}
.tablenote .ok{color:var(--bu-blue);}
.tablenote .wait{color:var(--bu-stone-deep);}
.tablenote .bad{color:var(--bu-red,#e5484d);}
.tablemsg{margin:0 0 40px;}

/* For the half of a toggle that only a screen reader needs. */
.sronly{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Adding a name to the in-person register. The input takes the room, the
   button stays its own size, and they stack on a narrow screen. */
.addperson{display:flex;gap:10px;align-items:center;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);}
.addperson .input{flex:1 1 auto;min-width:0;}
.addperson .btn{flex:none;}
@media (max-width:560px){ .addperson{flex-wrap:wrap;} .addperson .btn{width:100%;} }

/* Season picker on the admin page. Narrow, so it reads as a control on the
   heading row rather than as a form field. */
.seasonpick{width:auto;min-width:170px;padding-right:34px;cursor:pointer;}

/* ---- coach info: welcome and key dates, above the modules ---- */
.infocard{
  /* The bottom margin carries the whole gap to the Key Dates heading that
     follows, because .sectiontitle has no top margin of its own and is
     shared with the training and admin pages. */
  margin:28px 0 40px;padding:26px;border-radius:16px;
  background:var(--bg-card);border:1px solid var(--line);
}
.infocard h2{font-size:clamp(21px,2.4vw,27px);margin:8px 0 12px;}
.infocard .editorial{font-size:15.5px;color:var(--fg-muted);max-width:62ch;}
.infocard .editorial + .editorial{margin-top:10px;}

/* Body copy in the serif face.
   .editorial is a display style: text-wrap:balance evens the lines out and
   line-height:1.15 sets them tight, which suits a one-line lead but leaves a
   real paragraph ragged, stopping well short of the box it sits in, and
   bunched together. Prose runs the full measure and gives the lines room. */
.prose{
  font-family:var(--font-serif);font-weight:300;text-transform:none;
  font-size:16.5px;line-height:1.55;color:var(--fg-muted);margin:0;
  text-wrap:pretty;
}
.prose + .prose{margin-top:16px;}

/* The line under a resources heading, explaining what the group is for. */
.groupblurb{font-size:13.5px;color:var(--fg-faint);margin:-6px 0 14px;max-width:68ch;}

/* Who to contact, on the home page. Two ordinary cards, then the DCFS line
   set apart: it is a legal reporting duty rather than a Box United inbox, and
   a coach scanning the page in a hurry has to be able to find it. */
.contactgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px;}
.contactcard{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:20px;}
.contactto{
  font-family:var(--font-display);font-size:15px;letter-spacing:.01em;
  color:var(--bu-blue);text-decoration:none;word-break:break-word;
}
.contactto:hover{text-decoration:underline;text-underline-offset:3px;}
.contactlead{font-size:14px;color:var(--fg-muted);margin-top:8px;line-height:1.5;}
.contactcovers{list-style:none;margin:12px 0 0;padding:0;}
.contactcovers li{
  font-size:13.5px;color:var(--fg);padding:5px 0 5px 18px;position:relative;line-height:1.4;
}
.contactcovers li::before{
  content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;
  border-radius:2px;background:var(--bu-blue);
}

.urgentcard{
  border:1.5px solid var(--bu-blue);border-radius:16px;padding:22px 24px;
  margin-bottom:48px;background:rgba(0,128,242,.07);
}
.urgentphone{
  display:inline-block;font-family:var(--font-display);font-size:34px;line-height:1;
  color:var(--bu-blue);text-decoration:none;margin:10px 0 6px;letter-spacing:.01em;
}
.urgentphone:hover{text-decoration:underline;text-underline-offset:4px;}
.urgentwho{font-size:13px;color:var(--fg-muted);letter-spacing:.02em;}
.urgentlead{font-size:14.5px;color:var(--fg);margin-top:12px;line-height:1.55;max-width:78ch;}
.urgentafter{font-size:13.5px;color:var(--fg-muted);margin-top:8px;line-height:1.5;max-width:78ch;}

/* FAQ. <details> does the work, so these are mostly about giving the summary
   a hit area and stopping the marker from fighting the type. */
.faqitem{border-bottom:1px solid var(--line);}
.faqitem summary{
  list-style:none;cursor:pointer;padding:15px 34px 15px 0;position:relative;
  font-size:15.5px;line-height:1.45;color:var(--fg);
}
.faqitem summary::-webkit-details-marker{display:none;}
.faqitem summary:hover{color:var(--bu-blue);}
.faqitem summary::after{
  content:"+";position:absolute;right:6px;top:14px;
  font-family:var(--font-display);font-size:19px;color:var(--fg-faint);line-height:1;
}
.faqitem[open] summary::after{content:"–";}
.faqitem[open] summary{color:var(--bu-blue);}
.faqanswer{padding:0 34px 18px 0;}
.faqanswer p{font-size:14.5px;color:var(--fg-muted);line-height:1.6;max-width:82ch;}
.faqanswer p + p{margin-top:10px;}
.faqanswer a{color:var(--bu-blue);}
.faqsource{font-size:12.5px;color:var(--fg-faint);margin-top:10px;font-style:italic;}

@media (max-width:720px){
  .contactgrid{grid-template-columns:1fr;}
  .urgentphone{font-size:28px;}
}

.datelist{list-style:none;margin:0 0 8px;padding:0;}
.dateitem{
  display:flex;gap:18px;align-items:baseline;
  padding:14px 2px;border-bottom:1px solid var(--line);
}
.dateitem:last-child{border-bottom:0;}
.datewhen{
  flex:0 0 76px;font-family:var(--font-display);font-size:13px;
  letter-spacing:.04em;color:var(--bu-blue);white-space:nowrap;
}
.datewhat{min-width:0;}
.datetitle{font-size:15px;line-height:1.35;}
.datedetail{font-size:13.5px;color:var(--fg-muted);margin-top:5px;max-width:82ch;line-height:1.5;}
.datelink{display:inline-block;font-size:13px;margin-top:7px;color:var(--bu-blue);text-decoration:none;}
.datelink:hover{text-decoration:underline;text-underline-offset:3px;}

@media (max-width:520px){
  .dateitem{flex-direction:column;gap:4px;}
  .datewhen{flex:none;}
}

/* Shown only to admins, where they are seeing something a coach would not. */
.adminnote{
  margin:18px 0;padding:12px 16px;border-radius:10px;font-size:13px;
  color:var(--fg-muted);background:transparent;
  border:1px dashed var(--line-strong);
}
.adminnote a{color:var(--bu-blue);}

/* Instructions for training that happens on someone else's site. */
/* Something the coach has to do that this site does not handle itself.
   Shares the callout treatment with .uploadnote. */
.modulenote,
.uploadnote{
  margin:14px 0 20px;padding:11px 14px;border-radius:9px;font-size:13.5px;
  color:var(--fg);background:transparent;border:1px solid var(--bu-blue);
}
.modulenote{margin:0 0 28px;}
.uploadsteps{margin:20px 0 12px 18px;padding:0;font-size:13.5px;color:var(--fg-muted);}
.uploadsteps li{margin-bottom:7px;line-height:1.45;}
.uploadsteps li:last-child{margin-bottom:0;}

.codechip{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:12px 0 18px;padding:11px 14px;border-radius:9px;
  border:1px dashed var(--line-strong);
}
.codelabel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);}
.codechip code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;color:var(--fg);word-break:break-all;
}

/* ---- season calendar on the home page ---- */
.calwrap{margin:0 0 40px;}
.calhead h3{font-size:20px;}
.calsummary{font-size:13.5px;color:var(--fg-muted);margin-top:6px;max-width:60ch;}
.callegend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 18px;font-size:12.5px;color:var(--fg-muted);}
.callegenditem{display:inline-flex;align-items:center;gap:8px;}
.calswatch{width:15px;height:15px;border-radius:4px;flex:none;display:inline-block;}
.calswatch.is-session{background:var(--bu-blue-tint);}
.calswatch.is-nosession{background:var(--bu-stone-deep);}
.calswatch.is-training{border:1.5px dashed var(--bu-blue);}

.calmonths{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.calmonth{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:18px 16px;}
.calmonthname{font-family:var(--font-display);font-size:13px;letter-spacing:.06em;margin-bottom:12px;}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.caldow{
  font-size:10.5px;letter-spacing:.06em;color:var(--fg-faint);
  text-align:center;padding-bottom:6px;
}
.calday{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--fg-muted);border-radius:5px;
}
.calday.is-blank{visibility:hidden;}
/* Shading matches the legend swatches above, so the two read as one key. */
.calday.is-session{background:var(--bu-blue-tint);color:var(--bu-navy);}
.calday.is-nosession{background:var(--bu-stone-deep);color:var(--bu-navy);}
.calday.is-training{border:1.5px dashed var(--bu-blue);color:var(--fg);}
.calfootnote{margin-top:14px;font-size:12.5px;color:var(--fg-faint);}

@media (max-width:820px){
  .calmonths{grid-template-columns:1fr;max-width:360px;}
}

/* ---- resources on the home page ---- */
.resourcelist{list-style:none;margin:0 0 48px;padding:0;}
.resourceitem{padding:14px 2px;border-bottom:1px solid var(--line);}
.resourceitem:last-child{border-bottom:0;}
.resourceitem a{font-size:15px;color:var(--bu-blue);text-decoration:none;}
.resourceitem a:hover{text-decoration:underline;text-underline-offset:3px;}
.resourcedetail{font-size:13.5px;color:var(--fg-muted);margin-top:5px;max-width:82ch;line-height:1.5;}

/* ---------- curriculum ---------- */
/* The week cards reuse .modcard, .badge and .modgrid from the training page,
   and a week's documents reuse .resourcelist. This is the only piece those
   did not already cover: the session date under a week's title. */
.weekwhen{
  font-family:var(--font-display);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg-faint);margin:-4px 0 0;
}
.lessonhead .weekwhen{margin:0;}

/* Focus and key phrase on a week's page, sitting between the header and the
   summary. Flex-wraps to one item per line on a phone. */
.weekmeta{display:flex;flex-wrap:wrap;gap:10px 32px;margin:0 0 22px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.weekmetaitem{display:flex;flex-direction:column;gap:4px;font-size:14px;}
.weekmetaitem .lbl{font-family:var(--font-display);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);}

/* Materials and Charity Rescue deliverables on a week's page. Two columns on
   a wide screen so a short list does not run down the page, one on a phone. */
.weeklist{list-style:none;margin:0 0 8px;padding:0;columns:2;column-gap:32px;}
.weeklist li{
  break-inside:avoid;padding:9px 0 9px 22px;position:relative;
  font-size:14.5px;color:var(--fg);line-height:1.4;
}
.weeklist li::before{
  content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;
  border-radius:2px;background:var(--bu-blue);
}
/* Deliverables read as a checklist, the things that leave the gym with you. */
.weeklist.is-submit li::before{
  background:transparent;border:1.5px solid var(--bu-blue);border-radius:3px;
  width:11px;height:11px;left:0;top:13px;
}
.weeklist.is-submit{margin-bottom:16px;}
@media (max-width:720px){ .weeklist{columns:1;} }

/* A curriculum walkthrough. The training pages size their player by id, this
   is a plain iframe so it needs its own rule. */
.weekvideo{aspect-ratio:16/9;width:100%;height:auto;display:block;border:0;}

/* The burnout demos. Smaller than the walkthrough and side by side, since a
   coach is checking a movement rather than watching a session through. */
.drillgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:4px;}
.drill .videowrap{margin:0;}
.drilllabel{
  font-family:var(--font-display);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-muted);margin-top:9px;
}
@media (max-width:720px){ .drillgrid{grid-template-columns:1fr;} }
/* The empty-slot note carries two lines and a field name, so it needs room to
   breathe where .videolocked alone centres a single short line. */
.videolocked code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:rgba(247,245,237,.08);padding:1px 5px;border-radius:4px;color:var(--bu-stone);
}
.videolocked{line-height:1.6;}
/* .videolocked centres its children as flex items, so multi-line content has
   to arrive as one child or each line lands in its own column. */
.videolocked > span{display:block;max-width:46ch;}

/* Explains a locked plan without walling the page off, since the videos below
   or above it are still open. Stacks on a phone. */
.lockbanner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--bg-card);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;margin:0 0 28px;font-size:14px;color:var(--fg-muted);line-height:1.5;
}
.lockbanner strong{color:var(--fg);font-weight:500;}
.lockbanner > div{flex:1 1 320px;min-width:0;}
.lockbanner .btn{flex:none;}