/* ==========================================================================
   Library pages — the shared directory language for Courses, Resources,
   and Interviews: top-anchored layout, a findability toolbar (filter chips
   + live search), and card grids.
   ========================================================================== */

body.library-page #main-content {
  justify-content: start;
}

#main-content > .library {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;
  inline-size: 100%;
  max-inline-size: 96ch;
  margin-inline: auto;
  padding: calc(var(--navbar-height) + var(--block-space)) var(--inline-space) var(--block-space-double);
}

@media (min-width: 100ch) {
  #main-content > .library {
    padding-block-start: var(--block-space);
  }
}

/* Chips scroll as a group, search sits to their right */
.library-toolbar {
  display: flex;
  align-items: center;
  gap: var(--inline-space);
  margin-block-end: var(--block-space);
}

/* Horizontally scrollable chip row — scales to many categories instead of
   wrapping to several lines; matches the feed's filter row */
.library-chips {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 2px; /* room for focus rings */
}

.library-chips::-webkit-scrollbar { display: none; }

.library-chips > .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.library-search {
  position: relative;
  flex: 0 0 auto;
  inline-size: 15rem;
}

.library-search__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.9em;
  translate: 0 -50%;
  opacity: 0.45;
  pointer-events: none;
  z-index: 1; /* focused inputs promote to their own paint layer */
}

.library-search__input {
  --input-border-radius: 2em;
  --input-padding: 0.4em 1em 0.4em 2.5em;
  --input-background: var(--color-message-bg);
  --input-border-color: transparent;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.library-search__input:focus {
  --input-background: var(--color-bg);
  --input-border-color: var(--color-border-darker);
  outline: none;
}

/* Phones: chips scroll on top, search full-width below */
@media (max-width: 60ch) {
  .library-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--block-space-half);
  }

  .library-search {
    inline-size: auto;
  }
}

/* Tiny avatar inside a filter chip */
.library-chip__avatar {
  --avatar-size: 2.2ch;
  margin: 0;
}

.library-chip__avatar img {
  inline-size: var(--avatar-size);
  block-size: var(--avatar-size);
  border-radius: 50%;
  object-fit: cover;
}

/* Recordings — a visual thumbnail grid, the standard shape for a video
   library (YouTube / Loom / a course classroom) */
.recording-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--block-space) var(--inline-space);
}

.recording-section__title:hover {
  text-decoration: underline;
}

.recording-card-wrap {
  position: relative;
}

.recording-card {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}

.recording-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0.6em;
  overflow: hidden;
  background: var(--color-message-bg);
  display: grid;
  place-items: center;
}

.recording-card__thumb > img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}

.recording-card:hover .recording-card__thumb > img {
  transform: scale(1.03);
}

/* Play badge reads the tile as video; brightens and grows a touch on hover */
.recording-card__play {
  position: relative;
  display: grid;
  place-items: center;
  opacity: 0.9;
  filter: drop-shadow(0 1px 3px oklch(0% 0 0 / 0.5));
  transition: opacity 150ms ease, transform 150ms ease;
}

.recording-card:hover .recording-card__play {
  opacity: 1;
  transform: scale(1.08);
}

.recording-card__thumb--bare .recording-card__play {
  filter: invert(55%);
}

.recording-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.recording-card__title {
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Admin edit pencil, revealed on hover over the thumbnail corner */
.recording-card__edit {
  position: absolute;
  inset-block-start: 0.5em;
  inset-inline-end: 0.5em;
  opacity: 0;
  background: var(--color-bg);
  transition: opacity 150ms ease;
}

.recording-card-wrap:hover .recording-card__edit,
.recording-card-wrap:focus-within .recording-card__edit {
  opacity: 1;
}

@media (pointer: coarse) {
  .recording-card-wrap .recording-card__edit {
    opacity: 0.9;
  }
}

/* Resource sections — full-width stacked header (cleaner than the doc-style
   heading-left grid when sections hold only a few items) */
.library-section + .library-section {
  margin-block-start: var(--block-space-double);
}

.library-section__head {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding-block-end: var(--block-space-half);
  margin-block-end: var(--block-space-half);
  border-block-end: 1px solid var(--color-border);
}

/* Padlock tease — gated content stays visible, labeled with its tier */
.tier-lock__icon {
  font-size: 1.4rem;
  line-height: 1;
}

.course-card__lock,
.event-card__lock {
  margin-inline-start: 0.35em;
  opacity: 0.7;
}

.tier-lock-chip {
  font-size: 0.8em;
  margin-inline-start: 0.15em;
  opacity: 0.7;
}

/* Tier badge-colour picker (admin tier form) */
.tier-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.tier-swatch {
  cursor: pointer;
  line-height: 0;
}

.tier-swatch__dot {
  display: block;
  inline-size: 2em;
  block-size: 2em;
  border-radius: 50%;
  background-color: var(--swatch);
  box-shadow: 0 0 0 2px oklch(var(--lch-white)), 0 0 0 3px oklch(var(--lch-black) / 0.15);
  transition: box-shadow 0.12s ease;
}

.tier-swatch:where(:hover) .tier-swatch__dot {
  box-shadow: 0 0 0 2px oklch(var(--lch-white)), 0 0 0 4px var(--swatch);
}

.tier-swatch:has(:checked) .tier-swatch__dot {
  box-shadow: 0 0 0 2px oklch(var(--lch-white)), 0 0 0 4px var(--swatch);
}

.tier-swatch:has(:focus-visible) .tier-swatch__dot {
  outline: 2px solid oklch(var(--lch-blue));
  outline-offset: 3px;
}

/* Colour dot on the tiers index rows */
.tier-color-dot {
  display: inline-block;
  inline-size: 0.75em;
  block-size: 0.75em;
  border-radius: 50%;
  background-color: var(--dot-color, #3B4B59);
  flex: none;
}

/* Labelled tier/role badge — icon chip + name, for profiles and member lists */
.tier-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.7em 0.2em 0.3em;
  border-radius: 1em;
  background-color: color-mix(in oklab, var(--chip-color, #3B4B59) 14%, transparent);
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.4;
}

.tier-badge-pill__chip {
  display: grid;
  place-items: center;
  inline-size: 1.5em;
  block-size: 1.5em;
  border-radius: 50%;
  background-color: var(--chip-color, #3B4B59);
  flex: none;
}

.tier-badge-pill__chip::before {
  content: "";
  inline-size: 62%;
  block-size: 62%;
  background-color: #fff;
  -webkit-mask: var(--badge-icon) center / contain no-repeat;
  mask: var(--badge-icon) center / contain no-repeat;
}

/* Icon badge preview on the tiers index rows */
.tier-badge-chip {
  display: grid;
  place-items: center;
  inline-size: 1.7em;
  block-size: 1.7em;
  border-radius: 50%;
  background-color: var(--chip-color, #3B4B59);
  flex: none;
}

.tier-badge-chip__glyph {
  inline-size: 62%;
  block-size: 62%;
  background-color: #fff;
  -webkit-mask: var(--badge-icon) center / contain no-repeat;
  mask: var(--badge-icon) center / contain no-repeat;
}

/* Solid-icon picker (admin tier form) */
.tier-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.tier-icon {
  cursor: pointer;
  line-height: 0;
}

.tier-icon__glyph {
  display: grid;
  place-items: center;
  inline-size: 2.4em;
  block-size: 2.4em;
  border-radius: 50%;
  background-color: oklch(var(--lch-black) / 0.06);
  box-shadow: inset 0 0 0 1.5px oklch(var(--lch-black) / 0.12);
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.tier-icon__glyph::before {
  content: "";
  inline-size: 55%;
  block-size: 55%;
  background-color: oklch(var(--lch-black) / 0.55);
  -webkit-mask: var(--badge-icon) center / contain no-repeat;
  mask: var(--badge-icon) center / contain no-repeat;
}

.tier-icon:where(:hover) .tier-icon__glyph {
  background-color: oklch(var(--lch-black) / 0.1);
}

.tier-icon:has(:checked) .tier-icon__glyph {
  background-color: var(--picked-color, #3B4B59);
  box-shadow: 0 0 0 2px oklch(var(--lch-white)), 0 0 0 4px var(--picked-color, #3B4B59);
}

.tier-icon:has(:checked) .tier-icon__glyph::before {
  background-color: #fff;
}

.tier-icon:has(:focus-visible) .tier-icon__glyph {
  outline: 2px solid oklch(var(--lch-blue));
  outline-offset: 3px;
}