/* ==========================================================================
   In-class shared UI — see js/class-nav.js
   ========================================================================== */

/* ---------- Tags v2 ---------- */
.tag-v2 {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 3px 8px; border-radius: 4px;
  font: 500 12px/15px var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; /* 21px tall per Figma */
  color: var(--caviar);
}

/* ---------- Section Content Cards ---------- */
.content-card {
  --cc-bg: #fff;
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 16px 8px 16px 16px;
  background: var(--cc-bg); border-radius: 8px;
  text-align: left; cursor: pointer;
  transition: transform .12s ease;
}
.content-card:active { transform: scale(.99); }
.content-card.done { background: var(--neutral-light); }
.content-card.current { background: #fff; box-shadow: inset 0 0 0 2px var(--success); }
.ccd-thumb { position: relative; width: 70px; height: 70px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--neutral-light); }
.ccd-thumb > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.ccd-video { position: absolute; left: 8px; top: 38px; }
.ccd-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ccd-meta { display: flex; align-items: center; gap: 8px; }
.ccd-time { display: inline-flex; align-items: center; gap: 4px; font: 400 12px/normal var(--font-sans); color: var(--caviar); white-space: nowrap; }
.ccd-time img { width: 16px; height: 16px; }
.ccd-title { font: 700 14px/19.6px var(--font-sans); color: var(--caviar); }
.ccd-check { width: 24px; height: 24px; flex-shrink: 0; margin-left: -8px; } /* Figma: 8px between text and check (row gap is 16) */
.ccd-check img { width: 24px; height: 24px; animation: pop .3s var(--ease-out); }

/* ---------- Bottom Nav v3 (collapsed class bar, 72px) ---------- */
.class-bar {
  position: relative; flex-shrink: 0; z-index: 25;
  display: flex; align-items: center; gap: 12px;
  padding: 20px 16px;
  box-sizing: content-box; padding-bottom: calc(20px + max(var(--safe-bottom) - 34px, 0px));
  height: 32px;
  background: var(--bg); border-top: 1px solid var(--neutral-light-shade);
}
.cb-title {
  flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 8px; text-align: left;
}
.cb-title span {
  flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 16px/22.4px var(--font-sans); color: var(--caviar); padding-top: 1px;
}
.cb-caret { width: 24px; height: 24px; flex-shrink: 0; }
.cb-caret.down { transform: rotate(180deg); }
.cb-pag { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.cb-arrow { width: 32px; height: 32px; }
.cb-arrow img { width: 32px; height: 32px; }
.cb-arrow.prev img { transform: rotate(180deg); }
.cb-arrow:disabled { cursor: default; }
.cb-count { font: 400 16px/26px var(--font-sans); color: var(--caviar); min-width: 41px; white-space: nowrap; }

/* ---------- Expanded class sheet (Figma: Bottom Nav v3 Expanded, 556px) ---------- */
.sheet.class-sheet {
  height: min(556px, calc(100% - var(--safe-top) - 24px));
  background: var(--neutral-light);
}
.cs-head {
  position: relative; flex-shrink: 0; height: 72px;
  background: var(--bg); border-bottom: 1px solid var(--neutral-light-shade);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  touch-action: none;
}
.cs-head .cb-title { padding-top: 1px; }
.cs-head .cb-title span { flex: 0 1 auto; max-width: 184px; }
.cs-grabber { position: absolute; top: 7px; left: calc(50% + .5px); transform: translateX(-50%); width: 32px; height: 3px; border-radius: 4px; background: var(--neutral-light-shade); }
.cs-list { background: var(--neutral-light); padding-bottom: var(--safe-bottom); }
.cs-group { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.cs-label { font: 700 16px/22.4px var(--font-sans); color: var(--caviar); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Header buttons over media / sticky header ---------- */
.media-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  height: calc(var(--safe-top) + 56px); padding-top: var(--safe-top);
  pointer-events: none; transition: opacity .2s;
}
.media-header.hide { opacity: 0; }
.media-header > *, .sticky-header .sh-bar > * { pointer-events: auto; }
.media-header, .sh-bar { display: block; }
.hb-btn { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.hb-btn img { width: 40px; height: 40px; }
.hb-back { position: absolute; left: 16px; top: calc(var(--safe-top) + 8px); }
.sh-bar .hb-back { top: 8px; }
.hb-right { position: absolute; right: 16px; top: calc(var(--safe-top) + 8px); display: flex; gap: 8px; align-items: center; }
.sh-bar .hb-right { top: 8px; }

.sticky-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 31;
  height: calc(var(--safe-top) + 56px); padding-top: var(--safe-top);
  background: var(--caviar);
  transform: translateY(-100%); transition: transform .25s var(--ease-out);
}
.sticky-header.show { transform: translateY(0); }
.sh-bar { position: relative; height: 56px; }
.sh-title {
  position: absolute; left: 56px; right: 160px; top: 29px; transform: translateY(-50%);
  font: 700 12px/13.6px var(--font-sans); color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Stopwatch + time text next to a tag (UI.readTime) */
.read-time { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.read-time img { width: 16px; height: 16px; flex-shrink: 0; }