.story-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 3rem 0;
  margin-bottom: 2rem;
  border-radius: 0.5rem;
}

.story-header img.header-img {
  max-height: 15em;
}

.story-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.section-card {
  margin-bottom: 2rem;
  border: none;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.annotation-badge {
  display: inline-block;
  margin: 0.25rem;
}

.grammar-annotation {
  background-color: #e7f3ff;
  border-left: 4px solid #0d6efd;
}

.word-annotation {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
}

.japanese-text {
  font-size: 1.25rem;
  line-height: 2;
  font-family: "Noto Sans JP", sans-serif;
}

.translation-text {
  font-size: 1.1rem;
}

.furigana {
  font-size: 1em;
  color: #6c757d;
}

/* Styling for annotation markers */
.word-annotation-marker {
  /*background-color: #fff3cd;*/
  border-bottom: 2px solid #ffc107;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0 2px;
}

.word-annotation-marker:hover {
  background-color: #ffe69c;
  border-bottom-width: 3px;
}

.grammar-annotation-marker {
  /*background-color: #e7f3ff;*/
  border-bottom: 2px solid #0d6efd;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0 2px;
}

.grammar-annotation-marker:hover {
  background-color: #cfe2ff;
  border-bottom-width: 3px;
}

.unknown-annotation-marker {
  background-color: #f8d7da;
  border-bottom: 2px dashed #dc3545;
  cursor: help;
  padding: 0 2px;
}

/* Tooltip styles */
.annotation-tooltip {
  position: absolute;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 0.75rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-width: 300px;
  display: none;
}

.annotation-tooltip.show {
  display: block;
}

/*
 * detail.css – additions / overrides for the story detail page.
 *
 * These rules complement the existing style.css and cover:
 *   1. Section bottom layout (translation + annotations side by side on wide screens).
 *   2. Toggle switch bar styling.
 *   3. Annotation marker states (active / disabled).
 *   4. Annotation card highlight effect triggered by JS.
 *   5. Popover width cap for readability.
 */

/* ── 1. Section bottom layout ─────────────────────────────────────────────── */

/*
 * .section-bottom uses a flex layout instead of Bootstrap's grid so that
 * the two panels (translation + annotations) can independently appear /
 * disappear without leaving empty grid columns.
 *
 * flex: 1 1 300px  →  each child grows to fill available space,
 *                      shrinks if needed, and will wrap when the available
 *                      width drops below 300 px (≈ mobile).
 * This means:
 *   - ≥ ~620 px total (2 × 300 px): panels sit side by side.
 *   - < ~620 px: panels stack vertically, each full width.
 * No JS is required to change the layout when a panel is hidden.
 */
.section-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.section-translation,
.section-annotations {
  flex: 1 1 300px;
  min-width: 0; /* Prevents flex children from overflowing their container */
}

/* ── 2. Toggle switch bar ─────────────────────────────────────────────────── */

.section-controls {
  /* Consistent vertical rhythm around the control bar */
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Slightly larger touch target for the switch on mobile */
.section-controls .form-check-input {
  width: 2.5em;
  height: 1.25em;
  cursor: pointer;
}

.section-controls .form-check-label {
  cursor: pointer;
  user-select: none; /* Prevent accidental text selection on tap */
}

/* ── 3. Annotation marker states ─────────────────────────────────────────── */

/*
 * [data-tag] – base style for in-text annotation markers.
 * The exact visual (underline colour, background) is expected to be defined
 * in style.css already; these rules only add cursor and transition.
 */
[data-tag] {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

/*
 * .annotations-off – applied by JS when the Annotations toggle is switched off.
 * Removes the visual distinction so markers look like regular text.
 * pointer-events: none ensures they are completely non-interactive.
 */
[data-tag].annotations-off {
  /* Reset any highlight styles that style.css may apply */
  background-color: transparent !important;
  border-bottom: none !important;
  text-decoration: none !important;
  color: inherit !important;
  opacity: 1;
  pointer-events: none;
  cursor: default;
}

/* ── 4. Annotation card highlight ────────────────────────────────────────── */

/*
 * .annotation-card-highlight is added / removed by JS when the user clicks
 * an in-text marker.  The class triggers a short yellow-flash animation
 * so the user can easily locate the matching card in the list below.
 */
@keyframes cardFlash {
  0% {
    background-color: #fff9c4;
  } /* Light yellow  */
  70% {
    background-color: #fff9c4;
  }
  100% {
    background-color: transparent;
  }
}

.annotation-card-highlight {
  animation: cardFlash 1.5s ease forwards;
}

/* ── 5. Popover width cap ─────────────────────────────────────────────────── */

/*
 * Bootstrap's default popover max-width (276 px) can feel cramped for
 * grammar explanations. We widen it slightly while keeping it readable.
 */
.popover {
  max-width: 320px;
}