@layer components {
  /* ===================================================
     TGK Quiz System: Sacred Evaluation Component
     Version: 3.0, Responsive Editorial Rewrite (2026)

     Improvements:
     • Preserves existing class names and JavaScript hooks
     • Uses responsive spacing and typography throughout
     • Improves mobile answer-button layout
     • Strengthens keyboard focus and disabled states
     • Makes feedback and completion panels easier to read
     • Keeps correct, incorrect and perfect-score states
     • Reduces unnecessary heavy card styling
     • Preserves reduced-motion support
     =================================================== */

  /* ===================================================
     Quiz question wrapper
     =================================================== */

  :where(.quiz-question) {
    width: 100%;
    min-width: 0;

    margin:
      0
      0
      clamp(
        2rem,
        6vw,
        var(--space-xl, 4rem)
      );

    padding:
      clamp(
        1.25rem,
        4vw,
        var(--space-lg, 3rem)
      );

    background:
      linear-gradient(
        180deg,
        color-mix(
          in srgb,
          var(--section-bg-top, var(--bg-secondary)) 54%,
          transparent
        ),
        color-mix(
          in srgb,
          var(--section-bg-bottom, var(--bg-primary)) 78%,
          transparent
        )
      );

    border:
      1px solid
      color-mix(
        in srgb,
        var(--section-border) 82%,
        transparent
      );

    border-radius:
      var(
        --border-radius-base,
        0.75rem
      );

    box-shadow:
      var(
        --quiz-shadow,
        0 10px 30px
        color-mix(
          in srgb,
          var(--shadow-glow) 18%,
          transparent
        )
      );

    overflow: hidden;
  }

  /* ===================================================
     Quiz metadata
     =================================================== */

  :where(.quiz-meta) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    gap:
      var(
        --space-sm,
        1rem
      );

    margin:
      0
      0
      var(
        --space-md,
        1.5rem
      );
  }

  :where(.quiz-progress),
  :where(.quiz-instruction) {
    margin: 0;
    max-width: 100%;
  }

  :where(.quiz-progress) {
    color: var(--text-accent);

    font-family: var(--font-display);

    font-size:
      clamp(
        0.78rem,
        1.2vw,
        var(--font-size-sm)
      );

    font-weight: var(--type-weight-bold, 700);
    line-height: 1.35;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    overflow-wrap: anywhere;
  }

  :where(.quiz-instruction) {
    color: var(--text-secondary);

    font-size:
      clamp(
        0.82rem,
        1.2vw,
        var(--font-size-sm)
      );

    line-height: 1.45;
    text-align: right;

    overflow-wrap: anywhere;
  }

  /* ===================================================
     Quiz prompt
     =================================================== */

  :where(.quiz-prompt) {
    width: 100%;
    min-width: 0;

    margin:
      0
      0
      var(
        --space-md,
        1.5rem
      );

    padding:
      clamp(
        0.85rem,
        2.5vw,
        var(--space-sm, 1rem)
      )
      clamp(
        1rem,
        3vw,
        var(--space-md, 1.5rem)
      );

    color: var(--text-accent);

    background:
      linear-gradient(
        90deg,
        color-mix(
          in srgb,
          var(--text-accent) 8%,
          transparent
        ),
        transparent 85%
      );

    border-left:
      3px solid
      var(--text-accent);

    font-family:
      var(
        --font-serif,
        "Libre Baskerville",
        serif
      );

    font-size:
      clamp(
        1.05rem,
        1.6vw,
        1.3rem
      );

    font-weight: var(--type-weight-semibold, 600);
    line-height: 1.5;

    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* ===================================================
     Quiz options list
     =================================================== */

  :where(.quiz-block .quiz-options),
  :where(.quiz-options) {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    gap:
      clamp(
        0.65rem,
        2vw,
        var(--space-sm, 1rem)
      );

    list-style: none;
  }

  :where(.quiz-option-item) {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  /* ===================================================
     Quiz answer buttons
     =================================================== */

  :where(.quiz-options button),
  :where(.quiz-button) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;

    width: 100%;
    min-width: 0;
    min-height: 3.5rem;

    gap:
      clamp(
        0.75rem,
        2vw,
        var(--space-md, 1.5rem)
      );

    padding:
      clamp(
        0.85rem,
        2.5vw,
        var(--space-md, 1.5rem)
      );

    box-sizing: border-box;

    background:
      linear-gradient(
        135deg,
        color-mix(
          in srgb,
          var(--bg-secondary) 82%,
          transparent
        ),
        color-mix(
          in srgb,
          var(--bg-primary) 68%,
          transparent
        )
      );

    border:
      1px solid
      color-mix(
        in srgb,
        var(--section-border) 88%,
        transparent
      );

    border-radius:
      var(
        --border-radius-base,
        0.75rem
      );

    color: var(--text-primary);

    font-family:
      var(
        --font-serif,
        "Libre Baskerville",
        serif
      );

    font-size:
      clamp(
        0.98rem,
        1.4vw,
        var(--font-size-base)
      );

    font-weight: var(--type-weight-regular, 400);
    line-height: 1.45;
    text-align: left;

    cursor: pointer;

    box-shadow:
      inset
      0
      0
      3px
      rgba(0, 0, 0, 0.08);

    transition:
      background-color 0.25s ease,
      color 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease,
      transform 0.2s ease,
      opacity 0.2s ease;
  }

  :where(.quiz-options button:hover),
  :where(.quiz-button:hover) {
    background:
      linear-gradient(
        135deg,
        color-mix(
          in srgb,
          var(--highlight) 16%,
          var(--bg-secondary)
        ),
        color-mix(
          in srgb,
          var(--text-accent) 10%,
          var(--bg-primary)
        )
      );

    color: var(--text-primary);
    border-color: var(--text-accent);

    box-shadow:
      0
      0
      12px
      color-mix(
        in srgb,
        var(--shadow-glow) 55%,
        transparent
      );

    transform: translateY(-1px);
  }

  :where(.quiz-options button:focus-visible),
  :where(.quiz-button:focus-visible) {
    outline:
      2px solid
      var(
        --quiz-outline-selected,
        var(--highlight)
      );

    outline-offset: 3px;

    box-shadow:
      0
      0
      0
      4px
      color-mix(
        in srgb,
        var(--shadow-glow) 28%,
        transparent
      );
  }

  /* ===================================================
     Option key and text
     =================================================== */

  :where(.quiz-option-key) {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    min-width: 2.25rem;
    min-height: 2.25rem;

    padding:
      0
      var(
        --space-xs,
        0.5rem
      );

    border:
      1px solid
      color-mix(
        in srgb,
        var(--text-accent) 40%,
        var(--section-border)
      );

    border-radius: 999px;

    background:
      color-mix(
        in srgb,
        var(--text-accent) 12%,
        var(--bg-primary)
      );

    color: var(--text-accent);

    font-family: var(--font-display);

    font-size:
      clamp(
        0.78rem,
        1.2vw,
        var(--font-size-sm)
      );

    font-weight: var(--type-weight-bold, 700);
    line-height: 1;
    text-align: center;
  }

  :where(.quiz-option-text) {
    display: block;
    min-width: 0;

    line-height: 1.5;

    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* ===================================================
     Correct state
     =================================================== */

  :where(.quiz-button.correct-answer) {
    background:
      var(
        --quiz-correct-bg,
        var(--text-accent)
      );

    color:
      var(
        --quiz-correct-text,
        var(--bg-primary)
      );

    border-color:
      var(
        --quiz-correct-border,
        var(--text-accent)
      );

    box-shadow:
      0
      0
      14px
      color-mix(
        in srgb,
        var(--text-accent) 35%,
        transparent
      );
  }

  :where(.quiz-button.correct-answer)
  :where(.quiz-option-key) {
    background:
      color-mix(
        in srgb,
        var(--quiz-correct-text, var(--bg-primary)) 16%,
        transparent
      );

    border-color:
      color-mix(
        in srgb,
        var(--quiz-correct-text, var(--bg-primary)) 45%,
        transparent
      );

    color:
      var(
        --quiz-correct-text,
        var(--bg-primary)
      );
  }

  /* ===================================================
     Incorrect state
     =================================================== */

  :where(
    .quiz-button.wrong-answer,
    .quiz-button.quiz-wrong
  ) {
    background:
      var(
        --quiz-wrong-bg,
        color-mix(
          in srgb,
          var(--bg-secondary) 78%,
          #b73333 22%
        )
      );

    color:
      var(
        --quiz-wrong-text,
        var(--text-primary)
      );

    border-color:
      var(
        --quiz-wrong-border,
        color-mix(
          in srgb,
          #b73333 45%,
          var(--section-border)
        )
      );

    opacity: 0.88;
  }

  :where(
    .quiz-button.wrong-answer,
    .quiz-button.quiz-wrong
  )
  :where(.quiz-option-key) {
    background:
      color-mix(
        in srgb,
        var(--quiz-wrong-text, var(--text-primary)) 12%,
        transparent
      );

    border-color:
      color-mix(
        in srgb,
        var(--quiz-wrong-text, var(--text-primary)) 40%,
        transparent
      );

    color:
      var(
        --quiz-wrong-text,
        var(--text-primary)
      );
  }

  /* ===================================================
     Disabled and selected states
     =================================================== */

  :where(.quiz-button.quiz-disabled),
  :where(.quiz-options button:disabled) {
    opacity: 0.58;
    cursor: not-allowed;
    filter: grayscale(0.25);
    transform: none;
    box-shadow: none;
  }

  :where(.quiz-button.quiz-disabled:hover),
  :where(.quiz-options button:disabled:hover) {
    transform: none;
    box-shadow: none;
  }

  :where(.quiz-button.quiz-selected) {
    outline:
      2px solid
      var(
        --quiz-outline-selected,
        var(--highlight)
      );

    outline-offset: 2px;
  }

  /* ===================================================
     Reveal text
     =================================================== */

  :where(.quiz-reveal) {
    display: none;

    max-width: 100%;

    margin-top:
      var(
        --space-xs,
        0.5rem
      );

    padding-left:
      var(
        --space-sm,
        1rem
      );

    color:
      var(
        --quiz-reveal-text,
        var(--text-secondary)
      );

    font-size:
      clamp(
        0.82rem,
        1.2vw,
        var(--font-size-sm)
      );

    font-style: italic;
    line-height: 1.55;

    overflow-wrap: anywhere;
  }

  :where(.quiz-reveal.show) {
    display: block;
  }

  /* ===================================================
     Feedback panel
     =================================================== */

  :where(.quiz-feedback) {
    display: none;

    width: 100%;
    min-width: 0;

    margin-top:
      var(
        --space-md,
        1.5rem
      );

    padding:
      clamp(
        0.85rem,
        2.5vw,
        var(--space-sm, 1rem)
      )
      clamp(
        1rem,
        3vw,
        var(--space-md, 1.5rem)
      );

    color: var(--text-accent);

    background:
      color-mix(
        in srgb,
        var(--bg-primary) 58%,
        transparent
      );

    border:
      1px solid
      color-mix(
        in srgb,
        var(--text-accent) 28%,
        var(--section-border)
      );

    border-radius:
      var(
        --border-radius-base,
        0.75rem
      );

    font-size:
      clamp(
        0.95rem,
        1.4vw,
        var(--font-size-base, 1rem)
      );

    font-weight: var(--type-weight-semibold, 600);
    line-height: 1.55;
    text-align: left;

    overflow-wrap: anywhere;
  }

  :where(.quiz-feedback.show) {
    display: block;
  }

  :where(.quiz-feedback.correct) {
    color:
      var(
        --quiz-feedback-correct,
        var(--text-accent)
      );
  }

  :where(.quiz-feedback.incorrect) {
    color:
      var(
        --quiz-wrong-text,
        #d36b6b
      );
  }

  /* ===================================================
     Score
     =================================================== */

  :where(.quiz-score) {
    max-width: 100%;

    margin:
      var(
        --space-md,
        1.5rem
      )
      0
      0;

    color: var(--text-accent);

    font-size:
      clamp(
        0.95rem,
        1.4vw,
        var(--font-size-base, 1rem)
      );

    font-weight: var(--type-weight-bold, 700);
    line-height: 1.4;
    text-align: right;

    overflow-wrap: anywhere;
  }

  /* ===================================================
     Completion panel
     =================================================== */

  :where(.quiz-complete) {
    width: min(100%, 760px);
    min-width: 0;

    margin:
      clamp(
        2rem,
        6vw,
        var(--space-xl, 4rem)
      )
      auto
      0;

    padding:
      clamp(
        1.5rem,
        5vw,
        var(--space-xl, 2.5rem)
      );

    text-align: center;

    background:
      var(
        --card-gradient,
        linear-gradient(
          135deg,
          var(--bg-secondary),
          var(--bg-primary)
        )
      );

    border:
      1px solid
      var(--section-border);

    border-radius:
      var(
        --radius-lg,
        0.75rem
      );

    box-shadow:
      var(
        --page-shadow-soft,
        0 10px 30px rgba(0, 0, 0, 0.18)
      );

    animation:
      quizFadeIn
      0.6s
      ease;
  }

  :where(.quiz-complete p) {
    max-width: 60ch;

    margin:
      0.5rem
      auto;

    color: var(--text-primary);

    font-size:
      clamp(
        0.98rem,
        1.5vw,
        1.05rem
      );

    line-height: 1.65;

    overflow-wrap: anywhere;
  }

  :where(.quiz-complete strong) {
    display: inline-block;

    color: var(--text-accent);

    font-family: var(--font-display);

    font-size:
      clamp(
        1.15rem,
        2.4vw,
        1.4rem
      );

    line-height: 1.35;
  }

  /* ===================================================
     Retry button
     =================================================== */

  :where(
    .quiz-complete .quiz-retry,
    .quiz-complete .retry-quiz
  ) {
    min-height: 2.75rem;

    margin-top: 1.25rem;

    padding:
      0.8rem
      1.6rem;

    border: 0;

    border-radius:
      var(
        --btn-radius,
        0.5rem
      );

    background: var(--text-accent);
    color: var(--bg-primary);

    font-family: var(--font-display);

    font-size:
      clamp(
        0.9rem,
        1.4vw,
        1rem
      );

    font-weight: var(--type-weight-bold, 700);
    line-height: 1.2;

    cursor: pointer;

    transition:
      background-color 0.25s ease,
      box-shadow 0.25s ease,
      transform 0.2s ease;
  }

  :where(
    .quiz-complete .quiz-retry:hover,
    .quiz-complete .retry-quiz:hover
  ) {
    background: var(--highlight);

    box-shadow:
      0
      0
      15px
      color-mix(
        in srgb,
        var(--shadow-glow) 70%,
        transparent
      );

    transform: translateY(-1px);
  }

  :where(
    .quiz-complete .quiz-retry:focus-visible,
    .quiz-complete .retry-quiz:focus-visible
  ) {
    outline:
      2px solid
      var(--highlight);

    outline-offset: 3px;

    box-shadow:
      0
      0
      0
      4px
      color-mix(
        in srgb,
        var(--shadow-glow) 30%,
        transparent
      );
  }

  /* ===================================================
     Perfect score
     =================================================== */

  :where(.quiz-complete.perfect) {
    background:
      var(
        --quiz-perfect-bg,
        var(--soft-gold, #fdf3c1)
      );

    border:
      2px solid
      var(
        --quiz-perfect-border,
        var(--golden-blaze, #f6d66e)
      );

    box-shadow:
      0
      0
      25px
      var(
        --quiz-perfect-glow,
        rgba(246, 214, 110, 0.7)
      );

    animation:
      quizPulseGlow
      2s
      infinite,
      quizFadeIn
      0.6s
      ease;
  }

  /* ===================================================
     Animations
     =================================================== */

  @keyframes quizFadeIn {
    from {
      opacity: 0;
      transform: translateY(16px);
    }

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

  @keyframes quizPulseGlow {
    0% {
      box-shadow:
        0
        0
        15px
        color-mix(
          in srgb,
          var(
            --quiz-perfect-glow,
            rgba(246, 214, 110, 0.7)
          )
          70%,
          transparent
        );
    }

    50% {
      box-shadow:
        0
        0
        35px
        var(
          --quiz-perfect-glow,
          rgba(246, 214, 110, 0.7)
        );
    }

    100% {
      box-shadow:
        0
        0
        15px
        color-mix(
          in srgb,
          var(
            --quiz-perfect-glow,
            rgba(246, 214, 110, 0.7)
          )
          70%,
          transparent
        );
    }
  }

  /* ===================================================
     Tablet responsiveness
     =================================================== */

  @media (max-width: 1024px) {
    :where(.quiz-question) {
      padding:
        clamp(
          1.15rem,
          3vw,
          2rem
        );
    }

    :where(.quiz-options button),
    :where(.quiz-button) {
      gap:
        var(
          --space-sm,
          1rem
        );
    }
  }

  /* ===================================================
     Mobile responsiveness
     =================================================== */

  @media (max-width: 640px) {
    :where(.quiz-question) {
      margin-bottom:
        clamp(
          1.75rem,
          8vw,
          2.5rem
        );

      padding:
        var(
          --space-md,
          1.5rem
        );

      border-radius:
        calc(
          var(--border-radius-base, 0.75rem)
          * 0.85
        );
    }

    :where(.quiz-meta) {
      align-items: flex-start;
      flex-direction: column;
      gap: 0.4rem;
    }

    :where(.quiz-instruction) {
      text-align: left;
    }

    :where(.quiz-prompt) {
      padding:
        0.85rem
        1rem;

      font-size:
        clamp(
          1rem,
          4.5vw,
          1.15rem
        );

      line-height: 1.5;
    }

    :where(.quiz-options button),
    :where(.quiz-button) {
      grid-template-columns: auto minmax(0, 1fr);

      min-height: 3.25rem;

      gap:
        var(
          --space-sm,
          1rem
        );

      padding:
        var(
          --space-sm,
          1rem
        );

      font-size:
        clamp(
          0.95rem,
          4vw,
          1.02rem
        );
    }

    :where(.quiz-option-key) {
      min-width: 2rem;
      min-height: 2rem;
      padding-inline: 0.4rem;
    }

    :where(.quiz-reveal) {
      padding-left: 0;
    }

    :where(.quiz-feedback) {
      padding:
        0.85rem
        1rem;

      font-size:
        clamp(
          0.92rem,
          4vw,
          1rem
        );
    }

    :where(.quiz-score) {
      text-align: left;
    }

    :where(.quiz-complete) {
      padding:
        clamp(
          1.25rem,
          6vw,
          1.75rem
        );
    }

    :where(
      .quiz-complete .quiz-retry,
      .quiz-complete .retry-quiz
    ) {
      width: 100%;
    }
  }

  /* ===================================================
     Narrow mobile responsiveness
     =================================================== */

  @media (max-width: 420px) {
    :where(.quiz-question) {
      padding: 1rem;
    }

    :where(.quiz-prompt) {
      padding:
        0.8rem
        0.85rem;

      border-left-width: 2px;
    }

    :where(.quiz-options button),
    :where(.quiz-button) {
      gap: 0.7rem;
      padding: 0.85rem;
      border-radius: 0.65rem;
    }

    :where(.quiz-option-key) {
      min-width: 1.85rem;
      min-height: 1.85rem;

      font-size: 0.78rem;
    }

    :where(.quiz-option-text) {
      line-height: 1.45;
    }

    :where(.quiz-complete) {
      padding: 1.15rem;
    }

    :where(.quiz-complete p) {
      font-size: 0.95rem;
      line-height: 1.6;
    }
  }

  /* ===================================================
     Very narrow screens
     =================================================== */

  @media (max-width: 340px) {
    :where(.quiz-options button),
    :where(.quiz-button) {
      grid-template-columns: 1fr;
      justify-items: start;
    }

    :where(.quiz-option-key) {
      margin-bottom: 0.15rem;
    }
  }

  /* ===================================================
     Reduced motion
     =================================================== */

  @media (prefers-reduced-motion: reduce) {
    :where(
      .quiz-complete,
      .quiz-complete.perfect
    ) {
      animation: none;
    }

    :where(
      .quiz-options button,
      .quiz-button,
      .quiz-complete .quiz-retry,
      .quiz-complete .retry-quiz
    ) {
      transition: none;
    }
  }
  .quiz-options,
  .quiz-options li,
  .quiz-block .quiz-options,
  .quiz-block .quiz-options li {
    list-style: none;
  }

  .quiz-options {
    padding-left: 0;
    margin-left: 0;
  }

  .quiz-option-item {
    padding-left: 0;
  }
}