/*
 * sebook-flashcards.css
 *
 * Presentation rules live in CSS modules, not inline HTML style blocks.
 * Keep light mode, dark mode (html.dark-mode), and print behavior together
 * with the component/page rules they affect.
 */

/* Extracted from _includes/flashcards.html. */

  /* Flex wrapper: flashcards on the left, configured avatar on the right. */
  .flashcards-outer-wrap {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 18px 0;
  }

  .flashcards-outer-wrap > .flashcards-container {
    flex: 1;
    min-width: 0;
    margin: 0;
  }

  .flashcards-avatar-side {
    width: clamp(220px, 18vw, 320px);
    flex-shrink: 0;
    position: sticky;
    top: 80px;
  }

  .flashcards-avatar-side:empty {
    display: none;
  }

  .flashcards-avatar-side [data-gym-hero-svg] {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 22px rgba(0, 47, 82, 0.22));
  }

  html.dark-mode .flashcards-avatar-side [data-gym-hero-svg] {
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.48));
  }

  @media (max-width: 900px) {
    .flashcards-outer-wrap {
      flex-direction: column;
    }

    .flashcards-avatar-side {
      width: clamp(150px, 45vw, 220px);
      align-self: center;
      position: static;
      order: -1;
    }
  }

  .flashcards-container {
    background:
      radial-gradient(circle at 100% 0%, rgba(139, 184, 232, 0.2) 0 88px, transparent 90px),
      linear-gradient(180deg, #ffffff, #f7fbff);
    border: 1.5px solid #8BB8E8;
    border-radius: 8px;
    padding: 18px;
    margin: 18px 0;
    box-shadow: 0 16px 34px rgba(0, 59, 92, 0.14);
    font-family: 'Inter', sans-serif;
    position: relative;
  }

  .flashcards-container::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(90deg, #2774AE 0 44%, #FFD100 44% 56%, #2774AE 56% 100%);
  }

  .flashcards-container > * {
    position: relative;
    z-index: 1;
  }

  .flashcards-container .quiz-progress-bar {
    height: 10px;
    background: #dbeeff;
    border: 1px solid #547fa4;
    border-radius: 999px;
    margin: 12px 0 16px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 59, 92, 0.12);
  }

  .flashcards-container .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2774AE 0 76%, #FFD100 76% 100%);
    transition: width 0.4s ease;
  }

  .flashcard-card {
    display: none;
    animation: fadeIn 0.4s ease;
    text-align: center;
    padding: 5px;
  }

  .flashcard-card.active {
    display: block;
  }

  .flashcard-question {
    font-size: 1.15em;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.25;
    color: #17324d;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Difficulty chip — color-coded with text label so meaning never depends
     on color alone (WCAG 1.4.1). Light-mode pairs clear 4.5:1; dark-mode
     re-pairs them for the dark surface. */
  .flashcards-container .quiz-difficulty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
    border: 1px solid transparent;
  }
  .flashcards-container .quiz-difficulty-prefix {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
  }
  .flashcards-container .quiz-difficulty-label {
    text-transform: capitalize;
  }
  .flashcards-container .quiz-difficulty-basic {
    background: #e6f4ea;
    color: #14532d;
    border-color: #98c8a8;
  }
  .flashcards-container .quiz-difficulty-intermediate {
    background: #e0ecf6;
    color: #173a5e;
    border-color: #97b8d6;
  }
  .flashcards-container .quiz-difficulty-advanced {
    background: #fdf0d8;
    color: #5a3500;
    border-color: #d6a35c;
  }
  .flashcards-container .quiz-difficulty-expert {
    background: #fbe2e2;
    color: #5a0d10;
    border-color: #d29193;
  }
  html.dark-mode .flashcards-container .quiz-difficulty-basic {
    background: #1a3a2a;
    color: #b8f0c8;
    border-color: #2f6a4a;
  }
  html.dark-mode .flashcards-container .quiz-difficulty-intermediate {
    background: #15283f;
    color: #b8d6f3;
    border-color: #3d6a99;
  }
  html.dark-mode .flashcards-container .quiz-difficulty-advanced {
    background: #3a2a08;
    color: #fbd99a;
    border-color: #886433;
  }
  html.dark-mode .flashcards-container .quiz-difficulty-expert {
    background: #3d1a1a;
    color: #ffc7c7;
    border-color: #8a3d3d;
  }

  .flashcard-question p,
  .flashcard-answer p,
  .flashcard-explanation p {
    margin: 0;
  }

  .flashcard-answer-container {
    margin-top: 16px;
    padding: 14px 16px;
    background: #eef7ff;
    border: 1.5px solid #8BB8E8;
    border-left: 5px solid #2774AE;
    border-radius: 8px;
    animation: slideDown 0.3s ease;
    font-size: 0.95em;
    line-height: 1.45;
    color: #17324d;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .flashcard-answer {
    font-size: 1.2em;
    color: var(--color-primary, #2774AE);
    margin-bottom: var(--sp-md, 12px);
  }

  .flashcard-answer strong,
  .flashcard-answer b {
    font-weight: 800 !important;
  }

  .flashcard-explanation {
    font-size: 1em;
    color: #17324d;
    line-height: 1.5;
  }

  .flashcard-actions {
    margin-top: 12px;
  }

  .show-answer-btn,
  .restart-btn,
  .review-btn {
    background: var(--color-primary, #2774AE);
    color: var(--color-text-on-primary, white);
    border: none;
    padding: 8px 16px;
    min-height: 42px;
    border-radius: var(--radius-md, 8px);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    font-size: 0.95em;
    box-shadow: 0 7px 16px rgba(0, 59, 92, 0.18);
  }

  .show-answer-btn:focus-visible,
  .restart-btn:focus-visible,
  .review-btn:focus-visible,
  .assess-btn:focus-visible,
  .se-gym-toggle:focus-visible {
    outline: var(--focus-width, 3px) solid var(--focus-color, #2774AE);
    outline-offset: var(--focus-offset, 2px);
  }

  .flashcards-container .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }

  .show-answer-btn:hover,
  .restart-btn:hover,
  .review-btn:hover {
    background: var(--color-primary-hover, #1e5c8a);
  }

  .assessment-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  .assess-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    font-size: 20px;
    color: white;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .assess-btn:hover {
    transform: scale(1.1);
  }

  .correct-btn {
    background: var(--color-success, #1f7a3d);
  }

  .correct-btn:hover {
    background: var(--color-success-hover, #186430);
  }

  .incorrect-btn {
    background: var(--color-error, #b81e2c);
  }

  .incorrect-btn:hover {
    background: var(--color-error-hover, #94121e);
  }

  .flashcards-results {
    text-align: center;
    padding: 32px 0;
  }

  .quiz-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-right: 0;
  }

  .quiz-title-row h2,
  .quiz-title-row h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }

  .flashcards-container .se-gym-toggle {
    background: none;
    border: 2px solid #ccc;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    transition: all 0.2s;
    padding: 0;
    position: static;
    flex: 0 0 auto;
    margin: 1px 0 0 auto;
  }

  .se-gym-toggle:hover {
    border-color: var(--color-primary, #2774AE);
    color: var(--color-primary, #2774AE);
  }

  .se-gym-toggle.in-gym {
    background: var(--color-success, #1f7a3d);
    border-color: var(--color-success, #1f7a3d);
    color: var(--color-text-on-primary, white);
  }

  .se-gym-toggle.in-gym:hover {
    background: var(--color-error, #b81e2c);
    border-color: var(--color-error, #b81e2c);
  }

  /* Dark Mode */
  html.dark-mode .flashcards-container {
    background:
      radial-gradient(circle at 100% 0%, rgba(139, 184, 232, 0.16) 0 88px, transparent 90px),
      linear-gradient(180deg, #111f31, #0f1722) !important;
    border-color: #8BB8E8 !important;
    color: #e6f4ff !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.46), inset 0 0 0 1px rgba(139, 184, 232, 0.16) !important;
  }

  html.dark-mode .flashcards-container::before {
    background: linear-gradient(90deg, #8BB8E8 0 44%, #FFD100 44% 56%, #8BB8E8 56% 100%);
  }

  html.dark-mode .flashcards-container .quiz-progress-bar {
    background: #172536 !important;
    border-color: #718499 !important;
  }

  html.dark-mode .flashcards-container .progress-fill {
    background: linear-gradient(90deg, #8BB8E8 0 76%, #FFD100 76% 100%) !important;
  }

  html.dark-mode .flashcard-question {
    color: #f0f7ff !important;
  }

  html.dark-mode .flashcard-answer-container {
    background: #14283f !important;
    border-color: #8BB8E8 !important;
    border-left-color: #FFD100 !important;
    color: #e6f4ff !important;
  }

  html.dark-mode .flashcard-answer {
    color: #FFD100 !important;
  }

  html.dark-mode .flashcard-explanation {
    color: #d9ecff !important;
  }

  /* The se-gym-toggle pill keeps a subtle neutral border in light mode
     (#ccc on white). On the dark surface, a #ccc border becomes a harsh
     near-white ring and #999 text fails contrast — pair both with dark
     equivalents. */
  html.dark-mode .flashcards-container .se-gym-toggle {
    border-color: #555 !important;
    color: #b0b0b0 !important;
  }
  html.dark-mode .flashcards-container .se-gym-toggle:hover {
    border-color: var(--color-primary, #5fa8d3) !important;
    color: var(--color-primary, #5fa8d3) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .flashcard-card,
    .flashcard-answer-container,
    .flashcards-container .progress-fill,
    .show-answer-btn,
    .restart-btn,
    .review-btn,
    .assess-btn {
      animation: none !important;
      transition: none !important;
    }

    .assess-btn:hover,
    .show-answer-btn:hover,
    .restart-btn:hover,
    .review-btn:hover {
      transform: none !important;
    }
  }

  @media print {
    .flashcards-container::before {
      display: none !important;
    }

    .flashcards-container {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    html.dark-mode .flashcards-container {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      color: #111 !important;
    }

    html.dark-mode .flashcards-container::before {
      display: none !important;
    }

    html.dark-mode .flashcards-container .quiz-difficulty-basic {
      background: #e6f4ea !important;
      color: #14532d !important;
      border-color: #98c8a8 !important;
    }

    html.dark-mode .flashcards-container .quiz-difficulty-intermediate {
      background: #e0ecf6 !important;
      color: #173a5e !important;
      border-color: #97b8d6 !important;
    }

    html.dark-mode .flashcards-container .quiz-difficulty-advanced {
      background: #fdf0d8 !important;
      color: #5a3500 !important;
      border-color: #d6a35c !important;
    }

    html.dark-mode .flashcards-container .quiz-difficulty-expert {
      background: #fbe2e2 !important;
      color: #5a0d10 !important;
      border-color: #d29193 !important;
    }

    .flashcards-list {
      display: block !important;
    }

    .flashcards-list .flashcard-card,
    .flashcards-list .flashcard-card.active {
      display: block !important;
      margin-bottom: 30px !important;
      page-break-inside: avoid;
      border: 1px solid #eee !important;
      padding: 20px !important;
      text-align: left !important;
      opacity: 1 !important;
      transform: none !important;
      background: #fff !important;
    }

    html.dark-mode .flashcards-list .flashcard-card,
    html.dark-mode .flashcards-list .flashcard-card.active {
      background: #fff !important;
      border-color: #eee !important;
      color: #111 !important;
      box-shadow: none !important;
    }

    .flashcard-card .flashcard-question,
    .flashcard-card .flashcard-answer {
      display: block !important;
      font-size: 1.15em !important;
      min-height: auto !important;
      position: relative !important;
      padding-left: 35px !important;
      line-height: 1.4 !important;
      color: #000 !important;
    }

    html.dark-mode .flashcard-card .flashcard-question,
    html.dark-mode .flashcard-card .flashcard-answer {
      color: #000 !important;
    }

    .flashcard-card .flashcard-question {
      margin-bottom: 15px !important;
      font-weight: 700 !important;
    }

    .flashcard-card .flashcard-question::before {
      content: "Q:";
      position: absolute;
      left: 0;
      top: 0;
      font-weight: 800 !important;
      color: #000 !important;
    }

    .flashcard-card .flashcard-answer-container,
    .flashcard-card .flashcard-answer-container.hidden {
      display: block !important;
      margin-top: 10px !important;
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      animation: none !important;
    }

    html.dark-mode .flashcard-card .flashcard-answer-container,
    html.dark-mode .flashcard-card .flashcard-answer-container.hidden {
      background: transparent !important;
      border: none !important;
      color: #111 !important;
    }

    .flashcard-card .flashcard-answer {
      color: #000 !important;
      font-weight: 700 !important;
      margin-bottom: 10px !important;
    }

    .flashcard-card .flashcard-answer::before {
      content: "A:";
      position: absolute;
      left: 0;
      top: 0;
      font-weight: 800 !important;
      color: #000 !important;
    }

    .flashcard-explanation {
      display: block !important;
      color: #444 !important;
      font-size: 0.95em !important;
      margin-left: 35px !important;
      line-height: 1.5 !important;
      padding-top: 10px !important;
      border-top: 1px dashed #ddd !important;
    }

    html.dark-mode .flashcard-explanation {
      color: #444 !important;
      border-top-color: #ddd !important;
    }

    .flashcard-answer p,
    .flashcard-question p {
      display: inline !important;
    }

    .flashcards-container .quiz-progress-bar,
    .flashcards-container .flashcard-actions,
    .flashcards-container .flashcards-results,
    .flashcards-container .show-answer-btn,
    .flashcards-container .assessment-buttons {
      display: none !important;
    }
  }