/* ── Tutorials page and player (tutorials.js) ───────────────────────── */
.tut-count { display: inline-block; margin-left: 0.3rem; font-size: 0.72rem; color: var(--gray-400); font-weight: 600; }
.page-tab.active .tut-count { color: var(--blue); }

/* No logo strip on this page, and a tighter top, so a whole tab of tutorials
   (the largest has 8: two rows of four) is in view on a laptop screen. */
.main-content:has(#tutorials-section:not(.hidden)) .content-logo-strip { display: none; }
.main-content:has(#tutorials-section:not(.hidden)) .content-body { padding-top: 1.25rem; }
#tutorials-section .page-tabs { margin: 0.8rem 0 0.6rem; }
#tutorials-section #tut-area-about { margin: 0; }
.tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.85rem; margin-top: 0.75rem; }
.tut-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; text-align: left;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 0 0 0.75rem;
  font: inherit; color: inherit; cursor: pointer; overflow: hidden; position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tut-card:hover { border-color: var(--blue); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12); }
.tut-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tut-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; background: var(--gray-100); border-bottom: 1px solid var(--gray-200); }
.tut-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.tut-play {
  position: absolute; left: 50%; top: 50%; width: 2.9rem; height: 2.9rem; margin: -1.45rem 0 0 -1.45rem;
  border-radius: 999px; background: rgba(23, 23, 23, 0.72); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s ease;
}
.tut-play svg { width: 1.35rem; height: 1.35rem; margin-left: 0.15rem; }
.tut-card:hover .tut-play { background: var(--blue); }
.tut-length {
  position: absolute; right: 0.5rem; bottom: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 6px;
  background: rgba(23, 23, 23, 0.75); color: #fff; font-size: 0.72rem; font-weight: 600;
}
.tut-card-title { font-weight: 700; font-size: 0.9rem; line-height: 1.3; padding: 0 0.9rem; margin-top: 0.3rem; }
.tut-card-summary { color: var(--gray-500); font-size: 0.78rem; line-height: 1.4; padding: 0 0.9rem; }
.tut-watched { position: absolute; top: 0.55rem; left: 0.55rem; }

.tut-watch-link { border: none; cursor: pointer; gap: 0.25rem; }
.tut-watch-link svg { width: 0.8em; height: 0.8em; }
.tut-watch-link:hover { filter: brightness(0.95); }

/* As wide as fits, but never so tall that the caption and Next scroll out of
   sight: the video is 16:10, and the steps column, gaps and padding add ~21.6rem
   of width; the title, caption, footer and padding ~12.5rem of height. */
.modal-box.modal-video { max-width: min(1240px, 96vw, calc((94vh - 12.5rem) * 1.6 + 21.6rem)); }
.tut-player-body { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.1rem; align-items: start; }
.tut-video-wrap video { width: 100%; display: block; border-radius: 10px; background: #000; aspect-ratio: 16 / 10; }
.tut-caption { margin: 0.6rem 0 0; min-height: 2.6em; font-size: 0.92rem; line-height: 1.4; color: var(--gray-900); }
.tut-steps { list-style: none; margin: 0; padding: 0; max-height: min(calc(94vh - 15rem), 34rem); overflow-y: auto; display: flex; flex-direction: column; gap: 0.2rem; }
.tut-steps button {
  display: flex; gap: 0.55rem; width: 100%; text-align: left; font: inherit; font-size: 0.8rem; line-height: 1.4;
  background: none; border: none; border-radius: 8px; padding: 0.45rem 0.55rem; color: var(--gray-700); cursor: pointer;
}
.tut-steps button:hover { background: var(--gray-100); }
.tut-steps button.active { background: var(--blue-light); color: var(--gray-900); }
.tut-step-time { flex: none; color: var(--gray-400); font-variant-numeric: tabular-nums; font-size: 0.74rem; padding-top: 0.05rem; }
.tut-steps button.active .tut-step-time { color: var(--blue); }
.tut-player-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.tut-player-foot .hint { margin: 0; }

@media (max-width: 860px) {
  .tut-player-body { grid-template-columns: 1fr; }
  .tut-steps { max-height: 14rem; }
}