/* ============================================================
   css/components/alert.css
   Zolto v8.1.0 — Callouts, Admonitions & Details
   ============================================================
   Purpose:
   - .zolto-callout   — single-line and multi-line callout blocks
   - .zolto-admonition — titled admonition blocks
   - .zolto-details   — spoiler/details disclosure
   - All 22 callout types mapped to intent colours
   - All values via CSS custom properties from variables.css
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. Callout Base
      <tip>Text</tip>  →  .zolto-callout.zolto-callout-tip
   ───────────────────────────────────────────────────────────── */

.zolto-callout {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-3);
  padding:       var(--callout-padding);
  border-radius: var(--callout-radius);
  border-left:   3px solid transparent;
  margin-bottom: var(--prose-block-gap);
  line-height:   var(--leading-relaxed);
}

.zolto-callout-icon {
  flex-shrink:  0;
  font-size:    var(--callout-icon-size);
  line-height:  var(--leading-normal);
  margin-top:   0.1em;
  user-select:  none;
}

.zolto-callout-body {
  flex:      1;
  min-width: 0;
  font-size: var(--text-base);
}

.zolto-callout-body > *:last-child {
  margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────
   2. Callout Type Map
   ───────────────────────────────────────────────────────────── */

/* tip */
.zolto-callout-tip {
  background:   var(--intent-success-bg);
  border-color: var(--intent-success-border);
  color:        var(--text-main);
}
.zolto-callout-tip .zolto-callout-icon { color: var(--intent-success); }

/* note */
.zolto-callout-note {
  background:   var(--intent-info-bg);
  border-color: var(--intent-info-border);
}
.zolto-callout-note .zolto-callout-icon { color: var(--intent-info); }

/* info */
.zolto-callout-info {
  background:   var(--intent-info-bg);
  border-color: var(--intent-info-border);
}
.zolto-callout-info .zolto-callout-icon { color: var(--intent-info); }

/* warning / caution / attention */
.zolto-callout-warning,
.zolto-callout-caution,
.zolto-callout-attention {
  background:   var(--intent-warning-bg);
  border-color: var(--intent-warning-border);
}
.zolto-callout-warning  .zolto-callout-icon,
.zolto-callout-caution  .zolto-callout-icon,
.zolto-callout-attention .zolto-callout-icon { color: var(--intent-warning); }

/* danger */
.zolto-callout-danger {
  background:   var(--intent-danger-bg);
  border-color: var(--intent-danger-border);
}
.zolto-callout-danger .zolto-callout-icon { color: var(--intent-danger); }

/* important */
.zolto-callout-important {
  background:   var(--intent-primary-bg);
  border-color: var(--intent-primary-border);
}
.zolto-callout-important .zolto-callout-icon { color: var(--intent-primary); }

/* success / check */
.zolto-callout-success,
.zolto-callout-check {
  background:   var(--intent-success-bg);
  border-color: var(--intent-success-border);
}
.zolto-callout-success .zolto-callout-icon,
.zolto-callout-check   .zolto-callout-icon { color: var(--intent-success); }

/* bug */
.zolto-callout-bug {
  background:   var(--intent-danger-bg);
  border-color: var(--intent-danger-border);
}
.zolto-callout-bug .zolto-callout-icon { color: var(--intent-danger); }

/* example */
.zolto-callout-example {
  background:   var(--intent-neutral-bg);
  border-color: var(--intent-neutral-border);
}
.zolto-callout-example .zolto-callout-icon { color: var(--intent-neutral); }

/* quote */
.zolto-callout-quote {
  background:   var(--intent-neutral-bg);
  border-color: var(--accent-primary-border);
  font-style:   italic;
}
.zolto-callout-quote .zolto-callout-icon { color: var(--accent-primary); }

/* abstract / summary */
.zolto-callout-abstract,
.zolto-callout-summary {
  background:   var(--intent-info-bg);
  border-color: var(--intent-info-border);
}
.zolto-callout-abstract .zolto-callout-icon,
.zolto-callout-summary  .zolto-callout-icon { color: var(--intent-info); }

/* todo */
.zolto-callout-todo {
  background:   var(--intent-primary-bg);
  border-color: var(--intent-primary-border);
}
.zolto-callout-todo .zolto-callout-icon { color: var(--intent-primary); }

/* question */
.zolto-callout-question {
  background:   var(--intent-warning-bg);
  border-color: var(--intent-warning-border);
}
.zolto-callout-question .zolto-callout-icon { color: var(--intent-warning); }

/* failure */
.zolto-callout-failure {
  background:   var(--intent-danger-bg);
  border-color: var(--intent-danger-border);
}
.zolto-callout-failure .zolto-callout-icon { color: var(--intent-danger); }

/* seealso / hint */
.zolto-callout-seealso,
.zolto-callout-hint {
  background:   var(--intent-info-bg);
  border-color: var(--intent-info-border);
}
.zolto-callout-seealso .zolto-callout-icon,
.zolto-callout-hint    .zolto-callout-icon { color: var(--intent-info); }

/* definition */
.zolto-callout-definition {
  background:   var(--intent-primary-bg);
  border-color: var(--intent-primary-border);
}
.zolto-callout-definition .zolto-callout-icon { color: var(--intent-primary); }

/* theorem */
.zolto-callout-theorem {
  background:   rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.30);
}
.zolto-callout-theorem .zolto-callout-icon { color: var(--accent-secondary); }


/* ─────────────────────────────────────────────────────────────
   3. Admonition (titled block version)
   ───────────────────────────────────────────────────────────── */

.zolto-admonition {
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow:      hidden;
  margin-bottom: var(--prose-block-gap);
}

.zolto-admonition-header {
  display:     flex;
  align-items: center;
  gap:         var(--space-2-5);
  padding:     var(--space-3) var(--space-4);
  font-weight: var(--weight-semibold);
  font-size:   var(--text-sm);
}

.zolto-admonition-icon {
  font-size:   1em;
  flex-shrink: 0;
}

.zolto-admonition-title {
  flex: 1;
}

.zolto-admonition-body {
  padding:   var(--space-4);
  font-size: var(--text-base);
}

.zolto-admonition-body > *:last-child {
  margin-bottom: 0;
}

/* Type-specific header colours */
.zolto-admonition-tip     .zolto-admonition-header,
.zolto-admonition-success .zolto-admonition-header,
.zolto-admonition-check   .zolto-admonition-header {
  background: var(--intent-success-bg);
  border-bottom: 1px solid var(--intent-success-border);
  color: var(--intent-success-text);
}

.zolto-admonition-note    .zolto-admonition-header,
.zolto-admonition-info    .zolto-admonition-header,
.zolto-admonition-seealso .zolto-admonition-header,
.zolto-admonition-hint    .zolto-admonition-header,
.zolto-admonition-abstract .zolto-admonition-header,
.zolto-admonition-summary  .zolto-admonition-header {
  background: var(--intent-info-bg);
  border-bottom: 1px solid var(--intent-info-border);
  color: var(--intent-info-text);
}

.zolto-admonition-warning   .zolto-admonition-header,
.zolto-admonition-caution   .zolto-admonition-header,
.zolto-admonition-attention .zolto-admonition-header,
.zolto-admonition-question  .zolto-admonition-header {
  background: var(--intent-warning-bg);
  border-bottom: 1px solid var(--intent-warning-border);
  color: var(--intent-warning-text);
}

.zolto-admonition-danger  .zolto-admonition-header,
.zolto-admonition-bug     .zolto-admonition-header,
.zolto-admonition-failure .zolto-admonition-header {
  background: var(--intent-danger-bg);
  border-bottom: 1px solid var(--intent-danger-border);
  color: var(--intent-danger-text);
}

.zolto-admonition-important  .zolto-admonition-header,
.zolto-admonition-todo       .zolto-admonition-header,
.zolto-admonition-definition .zolto-admonition-header {
  background: var(--intent-primary-bg);
  border-bottom: 1px solid var(--intent-primary-border);
  color: var(--intent-primary-text);
}

.zolto-admonition-theorem .zolto-admonition-header {
  background: rgba(139, 92, 246, 0.08);
  border-bottom: 1px solid rgba(139, 92, 246, 0.25);
  color: var(--accent-secondary);
}


/* ─────────────────────────────────────────────────────────────
   4. Details / Spoiler
      <details class="zolto-details">
   ───────────────────────────────────────────────────────────── */

.zolto-details {
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow:      hidden;
  margin-bottom: var(--prose-block-gap);
  background:    var(--bg-surface);
}

.zolto-details-summary {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2-5);
  padding:         var(--space-3) var(--space-4);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  color:           var(--text-main);
  cursor:          pointer;
  user-select:     none;
  list-style:      none;
  transition:      background var(--duration-fast) var(--ease-out);
}

.zolto-details-summary:hover {
  background: var(--bg-surface-2);
}

/* Custom disclosure triangle */
.zolto-details-summary::before {
  content:     '▶';
  font-size:   0.65em;
  color:       var(--text-faint);
  flex-shrink: 0;
  transition:  transform var(--duration-fast) var(--ease-out);
  display:     inline-block;
  line-height: 1;
}

.zolto-details[open] .zolto-details-summary::before {
  transform: rotate(90deg);
}

.zolto-details[open] .zolto-details-summary {
  border-bottom: 1px solid var(--border-subtle);
}

.zolto-details-body {
  padding:   var(--space-4);
  font-size: var(--text-base);
}

.zolto-details-body > *:last-child {
  margin-bottom: 0;
}

/* Smooth open/close animation */
.zolto-details:not([open]) .zolto-details-body {
  display: none;
}


/* ─────────────────────────────────────────────────────────────
   5. Accordion
      .zolto-accordion wraps multiple .zolto-details
   ───────────────────────────────────────────────────────────── */

.zolto-accordion {
  border:        1px solid var(--accordion-border);
  border-radius: var(--accordion-radius);
  overflow:      hidden;
  margin-bottom: var(--prose-block-gap);
}

/* Accordion items share borders — no double lines */
.zolto-accordion .zolto-details {
  border:        none;
  border-bottom: 1px solid var(--accordion-border);
  border-radius: 0;
  margin-bottom: 0;
  background:    transparent;
}

.zolto-accordion .zolto-details:last-child {
  border-bottom: none;
}

.zolto-accordion .zolto-details[open] .zolto-details-summary {
  background: var(--accordion-header-hover-bg);
}

.zolto-accordion-header {
  padding:     var(--space-3-5) var(--space-4);
  font-size:   var(--text-sm);
  font-weight: var(--weight-medium);
  color:       var(--accordion-header-text);
}

.zolto-accordion-icon {
  color:      var(--accordion-icon-color);
  flex-shrink: 0;
  font-size:  0.75em;
  transition: transform var(--duration-fast) var(--ease-out);
}

.zolto-accordion .zolto-details[open] .zolto-accordion-icon {
  transform: rotate(90deg);
}

.zolto-accordion-body {
  padding:     var(--space-4);
  color:       var(--accordion-body-text);
  font-size:   var(--text-base);
  border-top:  1px solid var(--accordion-border);
}

.zolto-accordion-body > *:last-child {
  margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────
   6. Steps
   ───────────────────────────────────────────────────────────── */

.zolto-steps {
  margin-bottom: var(--prose-block-gap);
  padding-left:  0;
  list-style:    none;
}

.zolto-step {
  display: flex;
  gap:     var(--space-4);
  padding-bottom: var(--space-6);
  position: relative;
}

/* Connector line between steps */
.zolto-step:not(:last-child)::after {
  content:    '';
  position:   absolute;
  left:       calc(var(--space-4) + 12px);  /* centre of marker */
  top:        calc(var(--space-4) + 24px);  /* below marker */
  bottom:     0;
  width:      1px;
  background: var(--steps-connector);
}

.zolto-step-marker {
  flex-shrink:     0;
  width:           28px;
  height:          28px;
  border-radius:   var(--radius-full);
  background:      var(--steps-marker-bg);
  border:          1px solid var(--steps-marker-border);
  color:           var(--steps-marker-text);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-semibold);
  font-family:     var(--font-mono);
  display:         flex;
  align-items:     center;
  justify-content: center;
  user-select:     none;
  z-index:         var(--z-raised);
  margin-top:      var(--space-0-5);
}

.zolto-step-content {
  flex:      1;
  min-width: 0;
  padding-top: var(--space-0-5);
}

.zolto-step-title {
  font-size:     var(--text-base);
  font-weight:   var(--weight-semibold);
  color:         var(--steps-title-text);
  margin-bottom: var(--space-1-5);
  line-height:   var(--leading-snug);
}

.zolto-step-body {
  font-size: var(--text-base);
  color:     var(--steps-body-text);
}

.zolto-step-body > *:last-child {
  margin-bottom: 0;
}

/* Completed step styling */
.zolto-step.zolto-step-done .zolto-step-marker {
  background:   var(--intent-success-bg);
  border-color: var(--intent-success-border);
  color:        var(--intent-success);
}

.zolto-step.zolto-step-done::after {
  background: var(--intent-success-border);
}

/* Active step */
.zolto-step.zolto-step-active .zolto-step-marker {
  background:   var(--accent-primary);
  border-color: var(--accent-primary);
  color:        #ffffff;
  box-shadow:   var(--shadow-glow-primary);
}


/* ─────────────────────────────────────────────────────────────
   7. MCQ & Assessment Blocks
   ───────────────────────────────────────────────────────────── */

.zolto-mcq {
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow:      hidden;
  margin-bottom: var(--prose-block-gap);
  background:    var(--bg-surface);
}

.zolto-mcq-header {
  display:      flex;
  align-items:  flex-start;
  gap:          var(--space-3);
  padding:      var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.zolto-mcq-question {
  font-size:   var(--text-base);
  font-weight: var(--weight-medium);
  color:       var(--text-heading);
  flex:        1;
  line-height: var(--leading-snug);
}

.zolto-mcq-difficulty {
  font-size:     var(--text-xs);
  padding:       var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  flex-shrink:   0;
  font-weight:   var(--weight-medium);
}

.zolto-mcq-difficulty[data-level="easy"]   { background: var(--intent-success-bg); color: var(--intent-success-text); }
.zolto-mcq-difficulty[data-level="medium"] { background: var(--intent-warning-bg); color: var(--intent-warning-text); }
.zolto-mcq-difficulty[data-level="hard"]   { background: var(--intent-danger-bg);  color: var(--intent-danger-text);  }

.zolto-mcq-options {
  padding:        var(--space-3);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.zolto-mcq-option {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-4);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor:        pointer;
  font-size:     var(--text-sm);
  color:         var(--text-main);
  background:    transparent;
  transition:    background   var(--duration-fast) var(--ease-out),
                 border-color var(--duration-fast) var(--ease-out),
                 color        var(--duration-fast) var(--ease-out);
  user-select:   none;
}

.zolto-mcq-option:hover {
  background:   var(--bg-surface-2);
  border-color: var(--border-normal);
}

.zolto-mcq-option.selected {
  background:   var(--accent-primary-subtle);
  border-color: var(--accent-primary-border);
}

.zolto-mcq-option.correct {
  background:   var(--intent-success-bg);
  border-color: var(--intent-success-border);
  color:        var(--intent-success-text);
}

.zolto-mcq-option.incorrect {
  background:   var(--intent-danger-bg);
  border-color: var(--intent-danger-border);
  color:        var(--intent-danger-text);
}

.zolto-mcq-option-marker {
  width:           20px;
  height:          20px;
  border-radius:   var(--radius-full);
  border:          1px solid var(--border-normal);
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.7em;
  font-weight:     var(--weight-bold);
  transition:      background   var(--duration-fast) var(--ease-out),
                   border-color var(--duration-fast) var(--ease-out);
}

.zolto-mcq-option.selected   .zolto-mcq-option-marker { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.zolto-mcq-option.correct    .zolto-mcq-option-marker { background: var(--intent-success); border-color: var(--intent-success); color: #fff; }
.zolto-mcq-option.incorrect  .zolto-mcq-option-marker { background: var(--intent-danger);  border-color: var(--intent-danger);  color: #fff; }

.zolto-mcq-explanation {
  margin:        var(--space-3);
  padding:       var(--space-3) var(--space-4);
  background:    var(--intent-info-bg);
  border:        1px solid var(--intent-info-border);
  border-radius: var(--radius-md);
  font-size:     var(--text-sm);
  color:         var(--intent-info-text);
  display:       none;
}

.zolto-mcq.revealed .zolto-mcq-explanation {
  display: block;
}


/* ─────────────────────────────────────────────────────────────
   8. Flashcard
   ───────────────────────────────────────────────────────────── */

.zolto-flashcard {
  perspective:   800px;
  margin-bottom: var(--prose-block-gap);
  min-height:    140px;
}

.zolto-flashcard-inner {
  position:        relative;
  width:           100%;
  height:          100%;
  min-height:      140px;
  transform-style: preserve-3d;
  transition:      transform var(--duration-slow) var(--ease-in-out);
  cursor:          pointer;
}

.zolto-flashcard.flipped .zolto-flashcard-inner {
  transform: rotateY(180deg);
}

.zolto-flashcard-front,
.zolto-flashcard-back {
  position:         absolute;
  inset:            0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border:           1px solid var(--border-subtle);
  border-radius:    var(--radius-lg);
  padding:          var(--space-6) var(--space-6);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  text-align:       center;
  font-size:        var(--text-base);
  line-height:      var(--leading-relaxed);
}

.zolto-flashcard-front {
  background: var(--bg-surface);
  color:      var(--text-main);
}

.zolto-flashcard-back {
  background: var(--accent-primary-subtle);
  border-color: var(--accent-primary-border);
  color:      var(--text-main);
  transform:  rotateY(180deg);
}

.zolto-flashcard-hint {
  position:   absolute;
  bottom:     var(--space-3);
  right:      var(--space-4);
  font-size:  var(--text-xs);
  color:      var(--text-faint);
  user-select: none;
}


/* ─────────────────────────────────────────────────────────────
   9. Responsive
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .zolto-callout {
    gap:     var(--space-2);
    padding: var(--space-3);
  }

  .zolto-step {
    gap: var(--space-3);
  }

  .zolto-mcq-option {
    padding: var(--space-2-5) var(--space-3);
  }
}