/* Trainer Line Tutorial viewer -- kept in its own file rather than added to
   the shared styles.css, since every other page on the site also loads
   that file and none of this is relevant to them. */

/* styles.css's shared ".hidden { display: none; }" and this file's own
   "display: flex/inline-block" rules below (.branch-picker,
   .note-unreviewed-badge) have EQUAL specificity (both single classes) --
   whichever stylesheet loads second wins a tie, which is this file, so
   ".hidden" alone was silently losing and the element never actually
   hid. These two-class overrides break the tie explicitly so toggling
   "hidden" always works regardless of stylesheet load order. */
.branch-picker.hidden,
.note-unreviewed-badge.hidden {
  display: none;
}

#tutorial-app {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tutorial-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  background: #020617;
  border: 1px solid #1f2937;
  border-radius: 10px;
  font-size: 0.85rem;
}

body.clean .tutorial-toolbar {
  display: none;
}

/* Hiding the toolbar/header/title/article/footer below still leaves the
   page slightly taller than the viewport in some browsers, showing a
   scrollbar even in fullscreen -- clean mode is meant to be a distraction-
   free capture, so suppress it outright rather than trimming margins. */
body.clean {
  overflow: hidden;
}

/* Recording mode should hide ALL non-essential chrome, not just this
   page's own toolbar -- the site's shared top navigation is exactly the
   kind of thing that shouldn't be on screen while recording or presenting
   full-screen. .app-header is defined in the shared styles.css, but this
   override belongs here since it's specific to this page's "clean" mode. */
body.clean .app-header {
  display: none;
}

.tutorial-status {
  color: #9ca3af;
}

.tutorial-toolbar button,
.tutorial-toolbar select {
  background: #111827;
  color: #e5e7eb;
  border: 1px solid #374151;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.85rem;
}

.tutorial-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: radial-gradient(circle at top, #0b1220 0%, #000 70%);
  border-radius: 12px;
}

.tutorial-board-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.tutorial-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

/* Desktop: board on the left, notes and branch choices in a sidebar on the
   right, instead of one long stacked column -- on a normal desktop window
   at 100% zoom the stacked version pushed the note text and branch picker
   below the fold even though there was plenty of unused width beside the
   board. Mobile keeps the stacked layout below this breakpoint -- there's
   no spare width to split there. */
@media (min-width: 900px) {
  .tutorial-stage {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
  }

  .tutorial-board-column {
    /* Grow to fill whatever space is left beside the sidebar, instead of
       staying pinned at the old single-column width -- a normal desktop
       window has plenty of room for a bigger board than that. */
    flex: 1 1 auto;
    min-width: 420px;
    max-width: 640px;
    width: auto;
    align-items: stretch;
  }

  .tutorial-sidebar {
    width: 340px;
    flex: 0 0 340px;
    align-items: stretch;
  }

  #tutorial-stage #board,
  .tutorial-board-column .branch-label,
  .tutorial-board-column .progress {
    width: 100%;
  }

  .tutorial-sidebar .note-panel,
  .tutorial-sidebar .branch-picker {
    width: 100%;
  }
}

#tutorial-stage #board {
  width: min(480px, 92%);
  position: relative;
}

.branch-label {
  width: min(480px, 92%);
  font-size: 0.85rem;
  color: #9ca3af;
  text-align: center;
}

.note-panel {
  width: min(480px, 92%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.9);
  border: 1px solid #1f2937;
  min-height: 3em;
}

.note-text {
  color: #e5e7eb;
  font-size: 0.95rem;
  line-height: 1.4;
}

.note-unreviewed-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #fca5a5;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.note-audio-btn {
  align-self: flex-start;
  background: #111827;
  color: #e5e7eb;
  border: 1px solid #374151;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}

.branch-picker {
  width: min(480px, 92%);
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(28, 20, 6, 0.9);
  border: 1px solid #f59e0b;
}

.end-note {
  color: #fde68a;
  font-size: 0.95rem;
  line-height: 1.4;
}

.branch-picker-label {
  color: #9ca3af;
  font-size: 0.8rem;
}

.branch-picker-options {
  /* Column, not wrapped chips -- these labels are full opening-line names
     (e.g. "Stafford Gambit: immediate Bc4 popular development"), too long
     to size as inline chips without forcing the container wider than the
     sidebar. */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.branch-picker-options button {
  width: 100%;
  box-sizing: border-box;
  background: #111827;
  color: #e5e7eb;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  cursor: pointer;
}

.branch-picker-options button:hover {
  background: #1c1406;
}

.progress {
  width: min(480px, 92%);
  height: 6px;
  border-radius: 999px;
  background: #1f2937;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: #f59e0b;
}

/* Multi-arrow overlay + attacked-square highlight, same technique as the
   trainer's own mistake-arrow (site/js/app.js): live DOM square positions,
   not our own coordinate math, so it's correct regardless of board size. */
.tutorial-arrow-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.tutorial-attacked-square {
  box-shadow: inset 0 0 0 3px rgba(239, 68, 68, 0.75);
}

/* === Keyboard-shortcuts hint: same pattern as video/replay/'s ============= */
.shortcuts-hint {
  position: fixed;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: min(180px, 42vw);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #374151;
  color: #e5e7eb;
  font-size: 0.78rem;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.shortcuts-hint[hidden] { display: none; }
.shortcuts-hint.fading { opacity: 0; }

.shortcuts-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 3px;
  border-radius: 4px;
  background: #1f2937;
  border: 1px solid #4b5563;
  font: inherit;
  font-size: 0.72rem;
}

/* === Page title + real article content (SEO) ===============================
   Both of these are genuinely visible page content for every viewer, not
   just for search bots -- see the note in tutorial_template.html. Hidden
   in Recording mode along with the rest of the page's own chrome, since
   that mode is specifically for a clean, text-free capture of the board. */

.tutorial-page-title {
  margin: 0 0 12px;
  font-size: 1.4rem;
  color: #e5e7eb;
}

.tutorial-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.tutorial-article-cta {
  margin-top: 20px;
}

body.clean .tutorial-page-title,
body.clean .tutorial-page-actions,
body.clean .tutorial-article,
body.clean .site-footer {
  display: none;
}

.tutorial-article {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 24px;
  border-radius: 12px;
  background: #0b1220;
  border: 1px solid #1f2937;
  color: #d1d5db;
  line-height: 1.6;
}

.tutorial-article h2 {
  margin-top: 0;
  color: #e5e7eb;
  font-size: 1.15rem;
}

.tutorial-article-intro,
.tutorial-article-outro {
  color: #d1d5db;
}

.tutorial-article-moves {
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tutorial-article-moves strong {
  color: #f59e0b;
  font-weight: 600;
}

/* === /tutorial/ index page ================================================= */

.tutorial-index-intro {
  max-width: 640px;
  color: #d1d5db;
  line-height: 1.6;
  margin-bottom: 24px;
}

.tutorial-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.tutorial-index-item {
  padding: 18px 20px;
  border-radius: 12px;
  background: #0b1220;
  border: 1px solid #1f2937;
}

.tutorial-index-item a {
  text-decoration: none;
}

.tutorial-index-item h2 {
  margin: 0 0 8px;
  color: #f59e0b;
  font-size: 1.1rem;
}

.tutorial-index-item p {
  margin: 0;
  color: #d1d5db;
  line-height: 1.5;
}

.tutorial-index-empty {
  list-style: none;
  color: #9ca3af;
}