/* components.css: page heads, cards, filters, video, drill blocks. Colours
   come from tokens.css only (var(--color-*)); no literals here. */

/* --- Page head and headings ------------------------------------------------ */
.page-head { padding: var(--space-1) 0 0; }
.page-title,
.rule {
  text-align: center;
  font: 800 var(--text-title) / 1.15 var(--font-body);
  letter-spacing: -0.01em;
  padding-bottom: 10px;
  border-bottom: 4px solid var(--color-accent);
  margin: var(--space-1) 0 14px;
  overflow-wrap: anywhere;
}
.rule--2 { font-size: var(--text-h2); border-bottom-width: 3px; margin-top: var(--space-5); }
.page-head__lead { margin: 0 0 var(--space-4); color: var(--color-muted); font-size: 1rem; text-align: center; }

/* Small caps label: family names, in-card labels, drill-page block labels. No rule. */
.blk h2,
.group__title,
.card__label {
  margin: var(--space-4) 0 var(--space-2);
  font: 700 var(--text-small) / 1.2 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-min);
  padding-right: var(--space-4);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

/* --- Level: bars + word. Never colour alone. ------------------------------- */
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.bars i { display: block; width: 4px; border: 1px solid currentColor; }
.bars i:nth-child(1) { height: 6px; }
.bars i:nth-child(2) { height: 10px; }
.bars i:nth-child(3) { height: 14px; }
.bars i.on { background: currentColor; }
.lvl { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text); font-weight: 600; }

/* --- Lists of cards -------------------------------------------------------- */
.list { list-style: none; display: grid; gap: var(--space-4); margin-bottom: var(--space-4); min-width: 0; }
.list > li { min-width: 0; }
.list--tight { gap: var(--space-3); }

/* Drill card (full): photo, pill, icon circle, title, meta. One link. */
.dcard {
  display: block;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--color-text);
  text-decoration: none;
}
.thumb { position: relative; aspect-ratio: 16 / 9; background: var(--color-thumb); overflow: hidden; }
.thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* No resource, or the thumbnail failed to load: a plain placeholder. */
.thumb--none::before {
  content: "No preview";
  content: "No preview" / "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-muted);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pill {
  position: absolute;
  left: 10px; bottom: 10px;
  max-width: calc(100% - 20px);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-pill);
  color: var(--color-white);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.2;
}
.dbody { display: flex; align-items: flex-start; gap: var(--space-3); padding: 12px 14px 14px; min-width: 0; }
.ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.ico svg, .badge svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico svg { width: 24px; height: 24px; }
.dtext { flex: 1; min-width: 0; }
.dtitle { display: block; font-size: var(--text-card); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.dmeta { display: block; margin-top: var(--space-1); font-size: var(--text-small); line-height: 1.35; color: var(--color-muted); }

/* Drill card (compact): thumbnail left, no pill, level and length in the meta. */
.dcard--row { display: flex; align-items: stretch; }
.dcard--row .thumb { flex: none; width: 104px; aspect-ratio: auto; min-height: 76px; }
.dcard--row .dtext { display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; }
.dcard--row .dtitle { font-size: 1rem; }
.dcard--row .dmeta { color: var(--color-muted); }

/* Schedule card: meta row, badge, name, count, chevron. */
.sched {
  display: block;
  min-width: 0;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-left: 4px solid var(--color-edge);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
}
.sched__top { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-small); line-height: 1.3; }
.sched__top b { font-weight: 700; }
.sched__top span { color: var(--color-muted); text-align: right; }
.sched__main { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); min-width: 0; }
.sched--one .sched__main { margin-top: 0; }
.sched__name { flex: 1; min-width: 0; font-size: var(--text-h2); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.sched__right { flex: none; font-size: 1rem; font-weight: 700; line-height: 1; }
.chev { flex: none; color: var(--color-accent-text); }
.chev svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
}
.badge svg { width: 22px; height: 22px; }
/* A schedule card that holds links (zone page) is not itself a link. */
.sched--info { padding-bottom: var(--space-2); }
.sched--info .sched__name { display: block; margin-top: var(--space-2); }
.sched--info p { margin: var(--space-2) 0 0; }
.sched--info .list { margin: 0 0 var(--space-2); }

/* --- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid var(--color-text);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: 700 1rem / 1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.btn--solid { background: var(--color-text); color: var(--color-white); }

.suggest { margin: var(--space-4) 0 0; }
.note {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-card-border);
  border-left: 4px solid var(--color-edge);
  border-radius: var(--radius);
}
.note[hidden] { display: none; }
.note p:last-child { margin-bottom: 0; }
.note code { overflow-wrap: anywhere; }
.bullets { margin: 0 0 var(--space-3) var(--space-5); }
.bullets li { margin-bottom: var(--space-1); }

/* --- Find: three selects, result line, empty state ------------- */
/* One row from 360px: the three selects share the width in proportion to their
   longest option, so no chosen value is ever cut off. Below 360px Skill takes
   its own row. Labels are visually hidden (each select keeps a real label). */
.finder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0 0 var(--space-2); }
.sel--skill { grid-column: 1 / -1; }
.sel { min-width: 0; }
.sel__box { position: relative; }
.sel__box::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  color: var(--color-text);
}
.sel select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px 0 5px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: 600 0.875rem / 1.2 var(--font-body);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.sel select option { background: var(--color-surface); color: var(--color-text); }
/* A non-default select: light orange tint fill, heavier ink border, bold; its value is the visible text, so
   state is never colour alone. */
.sel select[data-active="true"] { background: var(--color-accent-tint); border-color: var(--color-text); font-weight: 700; }

/* Result line with Clear all on the right. Fixed height so the list does not jump. */
.resultrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap-min); margin: 0 0 var(--space-2); }
.result { margin: 0; font-size: 0.9375rem; color: var(--color-muted); }
.clear {
  flex: none;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 var(--space-1) 0 var(--space-3);
  border: 0;
  background: none;
  color: var(--color-accent-text);
  font: 700 0.9375rem / 1 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.empty {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-left: 4px solid var(--color-edge);
  border-radius: var(--radius);
}
.empty h2 { margin-bottom: var(--space-1); font-size: var(--text-card); font-weight: 700; line-height: 1.25; }

/* --- Video (click to load) ------------------------------------------------- */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--space-2);
  background: var(--color-thumb);
  border-radius: var(--radius);
  overflow: hidden;
}
.video__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.video__play:focus-visible { outline-offset: -6px; }
.video__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border: 3px solid var(--color-text);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.video__icon::after {
  content: "";
  margin-left: 6px;
  border-left: 20px solid currentColor;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.video__label {
  position: absolute;
  left: 10px; bottom: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-pill);
  color: var(--color-white);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.2;
}
/* Thumbnail failed to load: a deliberate placeholder, not a bare grey box. */
.video--nothumb::before {
  content: "Thumbnail unavailable";
  position: absolute;
  top: 10px; left: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-small);
  font-weight: 600;
}
.video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video--gone { display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-card-border); }
.video__gone { margin: 0; font-size: var(--text-h2); font-weight: 800; line-height: 1.2; text-align: center; }
.credit { margin: 0 0 14px; color: var(--color-muted); font-size: var(--text-small); }

/* --- Drill page blocks ----------------------------------------------------- */
.facts {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-left: 4px solid var(--color-edge);
  border-radius: var(--radius);
}
.facts__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-3); margin: 0; }
.facts dt { font-size: var(--text-small); color: var(--color-muted); }
.facts dd { margin: 0; font-weight: 700; }
.facts hr { border: 0; border-top: 1px solid var(--color-card-border); margin: 10px 0; }
.facts p { margin: 0; font-size: var(--text-small); color: var(--color-muted); }

.doit { margin: 0 0 6px; padding: 14px var(--space-4); background: var(--color-accent); color: var(--color-on-accent); border-radius: var(--radius); }
.doit h2 { margin-bottom: var(--space-1); font-size: var(--text-small); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.doit p { margin: 0; font-size: var(--text-h2); font-weight: 700; line-height: 1.3; }

.blk p { margin: 0; }
.cues { list-style: none; display: grid; gap: var(--space-2); }
.cue {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-left: 4px solid var(--color-edge);
  border-radius: var(--radius);
  font-weight: 600;
  line-height: 1.3;
}
.cue__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1rem;
  font-weight: 800;
}
.why {
  margin-top: 14px;
  padding: 4px 14px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-left: 4px solid var(--color-edge);
  border-radius: var(--radius);
}
.why .blk h2 { margin-top: 10px; }

/* --- Positions and zone ---------------------------------------------------- */
.group { margin-bottom: var(--space-2); }
.group__title { margin-top: var(--space-2); }

/* --- Wider screens ----------------------------------------------------------- */
@media (min-width: 22.5em) {
  .finder { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1.41fr) minmax(0, 1fr); }
  .sel--skill { grid-column: auto; }
}
@media (min-width: 48em) {
  .app-main { padding-left: var(--space-5); padding-right: var(--space-5); }
  .app-bar { padding-left: var(--space-5); padding-right: var(--space-5); }
  .site-foot { width: calc(100% - 2 * var(--space-5)); max-width: calc(var(--content-max) - 2 * var(--space-5)); }
  .list--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-title, .rule { font-size: 2rem; }
  .rule--2 { font-size: var(--text-h2); }
}