.athlete-library[hidden] { display: none !important; }
.athlete-library {
  position: fixed;
  inset: 0;
  z-index: 20050;
  background: #fff;
  color: #101114;
  font-family: inherit;
  padding-top: env(safe-area-inset-top, 0px);
}
.athlete-library__panel {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 22px calc(34px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.athlete-library__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin-bottom: 30px;
}
.athlete-library__icon-button {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #f4f4f5; color: #111; font-size: 22px; cursor: pointer;
}
.athlete-library__eyebrow {
  margin: 0 0 8px; color: #85858b; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.athlete-library__title {
  margin: 0; font-size: 38px; line-height: .98; letter-spacing: -.05em;
}
.athlete-library__subtitle {
  margin: 14px 0 28px; color: #727279; font-size: 16px; line-height: 1.42;
}
/* Whose sources these are. The face and the name on one line, so the screen
   opens by naming the person the search is about. */
.athlete-library__who {
  display: flex; align-items: center; gap: 13px; margin: 16px 0 22px;
}
.athlete-library__face {
  width: 54px; height: 54px; flex: none; border-radius: 50%;
  object-fit: cover; background: #f1f2f4;
}
.athlete-library__face--letters {
  display: flex; align-items: center; justify-content: center;
  color: #45484f; font-size: 18px; font-weight: 700; letter-spacing: .02em;
}
.athlete-library__who-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.athlete-library__who-name {
  margin: 0; display: flex; align-items: center; gap: 6px;
  font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  color: #101114;
}
.athlete-library__who-name i { font-size: 14px; color: #101114; }
.athlete-library__who-line {
  margin: 0; color: #6d7078; font-size: 13px; font-weight: 500; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.athlete-library__search {
  display: flex; gap: 8px; padding: 7px; border: 1px solid #e0e0e2;
  border-radius: 18px; background: #fafafa; margin-bottom: 28px;
}
.athlete-library__search input {
  min-width: 0; flex: 1; border: 0; outline: 0; background: transparent;
  padding: 10px 12px; font: inherit; font-size: 15px;
}
.athlete-library__search button, .athlete-library__post {
  border: 0; border-radius: 13px; background: #101114; color: #fff;
  font: inherit; font-size: 14px; font-weight: 750; cursor: pointer;
}
.athlete-library__search button { padding: 0 15px; min-width: 92px; }
/* The offer and the button that takes it. No box: there is nothing for the
   owner to compose, so the sentence carries the promise and the button is the
   only thing to press. */
.athlete-library__call {
  display: flex; flex-direction: column; gap: 16px;
  margin: 4px 0 30px;
}
.athlete-library__call-copy {
  margin: 0; color: #4a4a52; font-size: 16px; line-height: 1.45;
  text-wrap: pretty;
}
.athlete-library__call-go {
  align-self: stretch; height: 52px; border: 0; border-radius: 16px;
  background: #101114; color: #fff; font: inherit; font-size: 16px;
  font-weight: 750; cursor: pointer;
  transition: transform .12s ease, opacity .15s ease;
}
.athlete-library__call-go:active { transform: scale(.985); }
/* White on the black, said loudly enough to be heard.
 *
 * The page carries a stack of [data-theme="light"] rules in an inline <style>
 * that force every button to black text, and an inline block comes after a
 * linked sheet -- so the label was black on a black button and the control
 * read as an empty slab. The theme attribute has to be in the selector to
 * out-rank it. */
html[data-theme="light"] #mobile-athlete-library .athlete-library__call-go,
html[data-theme="dark"] #mobile-athlete-library .athlete-library__call-go,
html body #mobile-athlete-library .athlete-library__call-go {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #101114 !important;
}
html[data-theme="light"] #mobile-athlete-library .athlete-library__call-go.is-busy,
html body #mobile-athlete-library .athlete-library__call-go.is-busy {
  background: #23242a !important;
}
/* Working. It holds the step it is on, so the label changes but the button
   does not resize under the thumb. */
.athlete-library__call-go.is-busy {
  background: #23242a; opacity: .95; cursor: default;
}
/* The searches worth running, as one row you can tap. Scrolls sideways rather
   than wrapping: six words do not fit across a phone, and a wrapped row pushes
   the saved searches off the fold. */
.athlete-library__pills {
  display: flex; gap: 7px; overflow-x: auto; margin: -18px 0 26px;
  padding: 2px 1px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.athlete-library__pills::-webkit-scrollbar { display: none; }
.athlete-library__pill {
  flex: none; padding: 8px 14px; border-radius: 999px;
  border: 1px solid #e3e4e8; background: #fff; color: #45484f;
  font: inherit; font-size: 13px; font-weight: 650; white-space: nowrap;
  cursor: pointer; transition: background .15s ease, transform .12s ease;
}
.athlete-library__pill:active { transform: scale(.97); }
/* Working. Wide enough to hold "Searching On3, 247" without the row jumping
   every time the step changes. */
.athlete-library__pill.is-busy {
  background: #101114; border-color: #101114; color: #fff;
  min-width: 168px; text-align: center;
}
.athlete-library__section-label {
  margin: 0 0 10px; color: #929299; font-size: 11px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}
.athlete-library__folder {
  display: flex; align-items: center; gap: 14px; width: 100%;
  box-sizing: border-box; padding: 18px 0; border: 0; border-bottom: 1px solid #ededee;
  background: transparent; color: #111; text-align: left; cursor: pointer;
}
.athlete-library__folder-mark {
  display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px;
  border-radius: 13px; background: #f4f4f5; font-size: 19px;
}
.athlete-library__folder-copy { flex: 1; min-width: 0; }
.athlete-library__folder-name { display: block; font-size: 16px; font-weight: 760; }
.athlete-library__folder-meta { display: block; margin-top: 4px; color: #86868d; font-size: 13px; }
.athlete-library__chevron { color: #999; font-size: 24px; }
/* Close under the label it belongs to. 28px on top of the label's own margin
   left a hole that read as a section which had failed to load. */
.athlete-library__empty, .athlete-library__status {
  padding: 2px 0 24px; color: #777780; font-size: 15px; line-height: 1.45;
}
.athlete-library__detail-head { margin-bottom: 22px; }
.athlete-library__detail-head h2 { margin: 0; font-size: 29px; line-height: 1.06; letter-spacing: -.035em; }
.athlete-library__tabs { display: flex; gap: 20px; border-bottom: 1px solid #e5e5e7; margin-bottom: 8px; }
.athlete-library__tab { padding: 12px 0; border: 0; background: transparent; color: #85858d; font: inherit; font-weight: 700; cursor: pointer; }
.athlete-library__tab.is-active { color: #111; border-bottom: 2px solid #111; }
.athlete-library__item { padding: 20px 0; border-bottom: 1px solid #ececef; }
.athlete-library__source { color: #87878d; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.athlete-library__item h3 { margin: 7px 0; font-size: 18px; line-height: 1.18; letter-spacing: -.02em; }
.athlete-library__summary { margin: 0 0 13px; color: #74747b; font-size: 14px; line-height: 1.42; }
.athlete-library__item-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.athlete-library__link { max-width: 58%; overflow: hidden; color: #777780; font-size: 12px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.athlete-library__post { padding: 10px 12px; white-space: nowrap; }
.athlete-library__post[disabled] { background: #e7e7e9; color: #85858b; cursor: default; }


/* The panel sits inside the app's light theme, which carries a
   `[data-theme="light"] *` rule painting every element #000000 !important.
   A rule without !important cannot outrank it, so the white label on the dark
   Search and Post buttons came out black on black -- present, correctly
   sized, and unreadable. Each of them is named here rather than left to
   inherit, which is the only thing that beats a starred !important. */
html body #mobile-athlete-library .athlete-library__search button,
html body #mobile-athlete-library .athlete-library__post {
  background: #101114 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #mobile-athlete-library .athlete-library__post[disabled] {
  background: #e7e7e9 !important;
  color: #85858b !important;
  -webkit-text-fill-color: #85858b !important;
}

/* The tabs read as two stacked boxes because the theme gives every element a
   surface; they are a row of labels with a rule under the active one. */
html body #mobile-athlete-library .athlete-library__tab {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #85858d !important;
  -webkit-text-fill-color: #85858d !important;
}

html body #mobile-athlete-library .athlete-library__tab.is-active {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  border-bottom: 2px solid #111111 !important;
}


/* ---------------------------------------------------------------------------
   The title moved into the header.

   "Your sources / Library" used to sit under the top bar as a 38px display
   heading with a bare × floating above it. It reads better as the header
   itself: centred between the two controls, with the way out as a chevron
   pointing down -- the panel rises from the bottom, so down is where it goes.
   --------------------------------------------------------------------------- */

html body #mobile-athlete-library .athlete-library__top {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 44px 1fr 44px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 52px !important;
  margin-bottom: 22px !important;
}

/* The middle cell, whatever sits either side of it. */
html body #mobile-athlete-library .athlete-library__top-title {
  grid-column: 2 !important;
  text-align: center !important;
  min-width: 0 !important;
}

html body #mobile-athlete-library .athlete-library__top-title .athlete-library__eyebrow {
  margin: 0 0 3px !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
}

/* A display size belongs on a page, not in a header row -- and a saved
   search's name can be long, so it stays on one line and trims. */
html body #mobile-athlete-library .athlete-library__top-title .athlete-library__title {
  margin: 0 !important;
  font-size: 19px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Back sits in the first cell, dismiss in the third, so the title stays
   centred on the panel whether or not there is a back button. */
html body #mobile-athlete-library .athlete-library__back { grid-column: 1 !important; }
html body #mobile-athlete-library .athlete-library__dismiss { grid-column: 3 !important; }

html body #mobile-athlete-library .athlete-library__icon-button {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f4f4f5 !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* The glyphs are icons now rather than × and ‹ characters, and the theme's
   forced black would otherwise be the only thing colouring them. */
html body #mobile-athlete-library .athlete-library__icon-button i {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  font-size: 14px !important;
}

html body #mobile-athlete-library .athlete-library__icon-button:active {
  background: #e8e8ea !important;
}


/* ---------------------------------------------------------------------------
   The folder rows.

   Each was a grey tile, a title, a count and a chevron -- five folders that
   looked like one folder five times. The row now leads with the name, says
   who the sources are underneath it, and marks what kinds of thing it holds
   on the right. No tile, no card, no chevron: the rule between rows and the
   space around them do the grouping, and a box would only draw a second line
   around what the type has already separated.
   --------------------------------------------------------------------------- */

html body #mobile-athlete-library .athlete-library__folder {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 17px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #efeff0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* The last row does not need a line under it -- there is nothing after it to
   be separated from, and the rule reads as a cut-off list. */
html body #mobile-athlete-library .athlete-library__folder:last-of-type {
  border-bottom: 0 !important;
}

html body #mobile-athlete-library .athlete-library__folder:active {
  opacity: 0.55 !important;
}

html body #mobile-athlete-library .athlete-library__folder-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body #mobile-athlete-library .athlete-library__folder-name {
  display: block !important;
  color: #101114 !important;
  -webkit-text-fill-color: #101114 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
}

/* Who it came from, which is the line that tells two folders apart. */
html body #mobile-athlete-library .athlete-library__folder-sources {
  display: block !important;
  margin-top: 5px !important;
  overflow: hidden !important;
  color: #6f6f77 !important;
  -webkit-text-fill-color: #6f6f77 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html body #mobile-athlete-library .athlete-library__folder-meta {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 7px !important;
  color: #9a9aa1 !important;
  -webkit-text-fill-color: #9a9aa1 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

html body #mobile-athlete-library .athlete-library__folder-meta b {
  color: #101114 !important;
  -webkit-text-fill-color: #101114 !important;
  font-weight: 800 !important;
}

/* The separator between the count and the date: a dot, drawn rather than
   typed, so it keeps its size whatever the font does. */
html body #mobile-athlete-library .athlete-library__folder-meta i {
  flex: 0 0 auto !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #c9c9cf !important;
}

/* What the folder holds, as marks rather than words -- four glyphs read
   faster than "Stats, Film, Recruiting, News" and take a quarter of the room. */
html body #mobile-athlete-library .athlete-library__folder-kinds {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: 4px !important;
}

html body #mobile-athlete-library .athlete-library__folder-kinds i {
  color: #b6b6bd !important;
  -webkit-text-fill-color: #b6b6bd !important;
  font-size: 13px !important;
}

/* The section label sat tight against the first row. */
html body #mobile-athlete-library .athlete-library__section-label {
  margin: 4px 0 2px !important;
}


/* The picture off the front of a result.
   Wide rather than square: these are article headers and video frames, both
   of which are landscape, and a square would crop the middle out of them. */
html body #mobile-athlete-library .athlete-library__shot {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 0 13px !important;
  border-radius: 14px !important;
  background: #f1f1f3 !important;
  aspect-ratio: 16 / 9 !important;
}

html body #mobile-athlete-library .athlete-library__shot img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* A play mark on anything that moves, so a still is not mistaken for a
   photograph. Drawn rather than an icon font, so it cannot arrive late. */
html body #mobile-athlete-library .athlete-library__shot.is-video::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  margin: -11px 0 0 -7px !important;
  border-style: solid !important;
  border-width: 11px 0 11px 18px !important;
  border-color: transparent transparent transparent #ffffff !important;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.65)) !important;
  pointer-events: none !important;
}

/* A caption can be a paragraph, and three of them stacked is a wall. */
html body #mobile-athlete-library .athlete-library__item h3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}


/* The link's arrow.
   "↗" is an emoji-presentation character on iOS, so it arrived as a boxed
   glyph in a colour of its own rather than as a mark on the end of the words.
   The icon font the app already loads draws it as type. */
html body #mobile-athlete-library .athlete-library__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 58% !important;
  overflow: hidden !important;
  color: #77777f !important;
  -webkit-text-fill-color: #77777f !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html body #mobile-athlete-library .athlete-library__link i {
  color: #a6a6ad !important;
  -webkit-text-fill-color: #a6a6ad !important;
  font-size: 9px !important;
}


/* An item with no picture is a different shape, not a shorter one.
   MaxPreps refuses the request on every one of theirs, and some publishers
   carry no tag at all, so a good third of a folder arrives without a
   photograph. Given a grey rectangle those rows read as broken; given a
   heavier source line and more air they read as a headline, which is what
   they are. */
html body #mobile-athlete-library .athlete-library__item:not(:has(.athlete-library__shot)) .athlete-library__source {
  color: #101114 !important;
  -webkit-text-fill-color: #101114 !important;
}

html body #mobile-athlete-library .athlete-library__item:not(:has(.athlete-library__shot)) h3 {
  margin-top: 9px !important;
}

/* The frame keeps its shape while the picture is on its way, so the list does
   not jump as each one lands. */
html body #mobile-athlete-library .athlete-library__shot img {
  opacity: 0 !important;
  transition: opacity .18s ease !important;
}

html body #mobile-athlete-library .athlete-library__shot img[src] {
  opacity: 1 !important;
}


/* Six kinds do not fit across a phone.
   The row wrapped -- "All" over "19", and "Recruiting" cut off at the edge --
   so it scrolls sideways instead, each tab whole. The bar under the active
   one is the only rule; the row's own line would otherwise scroll with it. */
html body #mobile-athlete-library .athlete-library__tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 22px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid #ededef !important;
}

html body #mobile-athlete-library .athlete-library__tabs::-webkit-scrollbar {
  display: none !important;
}

html body #mobile-athlete-library .athlete-library__tab {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 11px 0 !important;
  font-size: 15px !important;
  font-weight: 750 !important;
}