/* ============================================================================
   Shared "Common Mistakes" treatment for the IRR and TMP pages.
   One implementation, applied through the markup class .mistakes-accordion.
   Behavior (the escalating humor gag) lives in mistakes-treatment.js; this file
   is styling only.

   Red is a SIGNAL, not a theme: the card borders are red and the wash is a very
   light red; the red treatment itself is the warning (no "!" marker, removed
   2026-07-07 per Lindsay). Body text stays black and readable. Everything else
   stays on the site palette (black + gold). No blue.
   ============================================================================ */

.mistakes-accordion{display:flex;flex-direction:column;gap:10px}

/* Each mistake is its own warning card: red left border, full red hairline,
   pale-red wash. Header and body share one bordered block, so an open card reads
   as one connected unit. */
.mistakes-accordion .acc-item{
  border:1px solid var(--red);
  border-left:4px solid var(--red);
  background:var(--red-soft);
  border-radius:10px;
  overflow:hidden;
}
.mistakes-accordion .acc-item + .acc-item{border-top:1px solid var(--red)} /* override the site's grey divider */

/* Title row. Matches the site's standard sub-heading treatment (Nunito Sans,
   heading weight + tracking) so a callout title reads as a heading in the same
   type system as section titles like "Presentation Structure," not as bold body
   text. Family is inherited from the base .acc-head rule (Nunito Sans). */
.mistakes-accordion .acc-head{
  position:relative;
  padding:13px 18px;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ink);
}
.mistakes-accordion .acc-head:hover{background:transparent}

/* Body: black text, aligned under the title. */
.mistakes-accordion .acc-body{color:var(--ink);padding:0 18px 15px}
.mistakes-accordion .acc-body p{margin:0 0 8px}
.mistakes-accordion .acc-body p:last-child{margin-bottom:0}
.mistakes-accordion .mistake-fix{color:var(--ink)}

/* The escalating humor line: a small italic gold wink, visually separate from the
   teaching text (not part of the lesson). */
.mistakes-accordion .gag{
  display:block;font-style:italic;font-weight:800;font-size:.8rem;
  color:var(--gold-deep);background:var(--surface);
  border-left:3px solid var(--gold);border-radius:0 6px 6px 0;
  padding:6px 10px;margin:0 0 12px;
}

/* ---- Lone Wolf easter egg (IRR "Lone Wolf Paragraph" card only) ------------
   The wolf lives INSIDE this card and only appears while it is expanded
   (mistakes-treatment.js toggles .wolf-show to match the .open state). A right
   gutter is reserved in the body so the wolf sits in its own column, never on
   the text and never over a neighboring card. */
.mistakes-accordion .acc-item.lone-wolf-card{position:relative}
.lone-wolf-card .acc-body{padding-right:132px}
.wolf-pop{
  position:absolute;right:14px;bottom:12px;width:118px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  pointer-events:none;               /* never blocks clicks */
  opacity:0;transform:translateY(10px) scale(.9);
  transition:opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
  z-index:2;
}
.lone-wolf-card.wolf-show .wolf-pop{opacity:1;transform:translateY(0) scale(1)}
.wolf-bubble{
  position:relative;background:#fff;color:#1A1A1A;
  border:1.5px solid #1A1A1A;border-top:4px solid var(--gold);
  border-radius:12px;padding:5px 10px;font-size:.72rem;font-weight:800;
  line-height:1.15;text-align:center;max-width:118px;
  box-shadow:0 3px 8px rgba(0,0,0,.16);
}
.wolf-bubble::after{               /* little tail pointing down to the wolf */
  content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#1A1A1A;
}
.wolf-svg{width:auto;height:72px;flex:none;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.28))}
@media (prefers-reduced-motion: reduce){
  .wolf-pop{transition:none}
  .lone-wolf-card.wolf-show .wolf-pop{transform:none}
}
@media (max-width:560px){
  .lone-wolf-card .acc-body{padding-right:108px}
  .wolf-pop{width:96px;right:10px}
  .wolf-svg{height:62px}
  .wolf-bubble{max-width:96px;font-size:.68rem}
}