/* ============================================================
   DRE SWIPE-GAPS1 — CONSOLIDATED STABLE CSS (NO SQUEEZE) — CLEAN v2
   Goals:
   - Desktop: neat centred column for sentence/button/input/nav
   - Mobile: TRUE FULL-WIDTH (no centred narrow column), strip-style cards
   - Nav: arrows at edges, Check dead-centre
   Notes:
   - Uses global vars: --dre-blue, --dre-green, --dre-grey-dark, --dre-grey (with fallbacks)
   - Includes HARD OVERRIDES for lesson template wrappers on mobile
   Scope: SwipeGaps1 only (no global leaks)
============================================================ */

/* ============================================================
   ROOT / OUTER CONTAINER
============================================================ */
.dre-swipe-gaps1{
  width:100%;
  max-width:960px;               /* desktop container width */
  margin:24px auto;
  padding:16px;
  box-sizing:border-box;

  /* One place to change your desktop centred column width */
  --dre-sg1-col:520px;
}

.dre-swipe-gaps1,
.dre-swipe-gaps1 *{
  box-sizing:border-box;
}

/* ============================================================
   CARD
============================================================ */
.dre-swipe-gaps1-card{
  display:none;
  width:100%;
  max-width:none;

  background:#fff;
  border:1px solid #e4e4e4;
  border-radius:14px;

  padding:22px;
  margin:0 0 22px 0;
}

.dre-swipe-gaps1-card.active{ display:block; }

/* ============================================================
   CARD TOP (DISC ONLY)
============================================================ */
.dre-swipe-gaps1-card-top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:6px;
}

/* Disc number content (engine-authoritative) */
.dre-swipe-gaps1 .dre-disc-number::before{
  content:attr(data-num);
}

/* Correct disc state */
.dre-swipe-gaps1 .dre-disc-number.dre-disc--correct::before{
  content:"✓";
  color:var(--dre-green, #2ecc71);
  font-weight:700;
}
.dre-swipe-gaps1 .dre-disc-number.dre-disc--correct{
  border-color:var(--dre-green, #2ecc71);
}

/* ============================================================
   AUDIO BUTTON (SCOPED)
============================================================ */
.dre-swipe-gaps1 .dre-audio-btn{
  display:block;
  width:100%;
  max-width:var(--dre-sg1-col);
  margin:10px auto 12px;
}

/* IMPORTANT: do NOT style .dre-audio-btn globally in this file */

/* ============================================================
   SENTENCE PANEL
============================================================ */
.dre-swipe-gaps1-sentence{
  width:100%;
  max-width:var(--dre-sg1-col);
  margin:12px auto;

  text-align:center;
  font-size:1.3rem;
  line-height:1.6;

  background:#F6FBFE;
  padding:14px 16px;
  border-radius:12px;
}

/* Gap visual */
.dre-swipe-gaps1-gap-visual{
  display:inline-block;
  width:20px;
  height:0.9em;
  margin:0 6px;
  vertical-align:baseline;
  border-bottom:3px dotted var(--dre-blue, #18a5dd);
}
.dre-swipe-gaps1-card.is-correct .dre-swipe-gaps1-gap-visual{
  border-bottom-color:var(--dre-green, #2ecc71);
}

/* ============================================================
   INPUT
============================================================ */
.dre-swipe-gaps1 input.dre-swipe-gaps1-gap{
  display:block;
  width:100%;
  max-width:var(--dre-sg1-col);
  min-width:0;

  margin:14px auto 0;
  padding:10px 12px;

  font-family:inherit;
  font-size:1em;
  text-align:center;

  background:#fff;
  border:2px solid var(--dre-blue, #18a5dd);
  border-radius:8px;
  outline:none;
}

.dre-swipe-gaps1 input.dre-swipe-gaps1-gap:focus{
  box-shadow:0 0 0 3px rgba(24,165,221,0.15);
}

.dre-swipe-gaps1-card.is-correct input.dre-swipe-gaps1-gap{
  border-color:var(--dre-green, #2ecc71);
}

/* ============================================================
   ATTEMPT / WARNING MESSAGE
============================================================ */
.dre-swipe-gaps1-attempt-msg{
  margin:8px auto 0;
  text-align:center;
  font-size:0.95rem;
  font-weight:400;
  color:var(--dre-blue, #18a5dd);
  min-height:1.2em;
}

.dre-swipe-gaps1-card.is-correct .dre-swipe-gaps1-attempt-msg{
  color:var(--dre-green, #2ecc71);
  font-weight:500;
}

.dre-swipe-gaps1-card.is-correct .dre-swipe-gaps1-answer-inline{
  font-weight:700;
}

/* ============================================================
   NAV (ARROWS EDGE, CHECK CENTRE)
============================================================ */
/* SG1 nav aligned with content column */
.dre-swipe-gaps1-nav{
  width:100%;
  max-width:var(--dre-sg1-col);
  margin:10px auto 0;          /* slightly closer to input */

  display:grid;
  grid-template-columns:44px auto 44px;
  justify-content:center;      /* keep arrows/check centered */
  align-items:center;

  column-gap:14px;             /* space between arrow + check */
}

/* Arrow buttons (safer than pure all:unset) */
.dre-swipe-gaps1-prev,
.dre-swipe-gaps1-next{
  all:unset; /* ok, but we re-add essentials below */
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.dre-swipe-gaps1-prev{ justify-self:start; }
.dre-swipe-gaps1-next{ justify-self:end; }

/* Check button centred */
.dre-swipe-gaps1-check{
  justify-self:center;
  margin:0;
  white-space:nowrap;
}

/* Arrow visual cleanup */
.dre-swipe-gaps1-prev,
.dre-swipe-gaps1-next{
  background:transparent;
  box-shadow:none;
  outline:none;
}

.dre-swipe-gaps1-prev .dre-arrow,
.dre-swipe-gaps1-next .dre-arrow{
  display:inline-block;
  line-height:1;
  transform:translateY(-1px);
  color:var(--dre-grey-dark, #4F535D);
  fill:currentColor;
  background:transparent;
}

.dre-swipe-gaps1-prev:hover .dre-arrow,
.dre-swipe-gaps1-next:hover .dre-arrow{
  color:var(--dre-blue, #18a5dd);
  fill:currentColor;
}


/* ============================================================
   REVIEW / FEEDBACK
============================================================ */
.dre-swipe-gaps1-review{
  display:none;
  margin-top:24px;
}
.dre-swipe-gaps1-review.show{ display:block; }

.dre-swipe-gaps1-feedback-list{
  margin:18px 12px 0;
  padding:16px 18px;

  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);

  display:flex;
  flex-direction:column;
  gap:12px;

  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}
.dre-swipe-gaps1-review.show .dre-swipe-gaps1-feedback-list{
  opacity:1;
  transform:translateY(0);
}

.dre-swipe-gaps1-feedback-item{
  font-size:1rem;
  line-height:1.6;
  color:var(--dre-grey-dark, #4F535D);
}
.dre-swipe-gaps1-feedback-item .num{
  font-weight:700;
  color:var(--dre-blue, #18a5dd);
  margin-right:6px;
}
.dre-swipe-gaps1-feedback-item .answer{
  font-weight:700;
  color:var(--dre-blue, #18a5dd);
}

/* ============================================================
   MOBILE — TRUE FULL WIDTH / NO SQUEEZE
============================================================ */
@media (max-width:640px){

  .dre-swipe-gaps1{
    max-width:none;
    width:100%;
    margin:16px 0;
    padding:0;
    --dre-sg1-col:100%;
  }

  .dre-swipe-gaps1-card{
    width:100%;
    max-width:none;
    border:0;
    border-radius:0;
    background:transparent;

    padding:18px 0;
    margin:0 0 18px 0;
  }

  .dre-swipe-gaps1-card.active{
    background:transparent;
  }

  .dre-swipe-gaps1-sentence,
  .dre-swipe-gaps1 .dre-audio-btn,
  .dre-swipe-gaps1 input.dre-swipe-gaps1-gap,
  .dre-swipe-gaps1-nav{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
  }

  .dre-swipe-gaps1-nav{
    padding:0;
    column-gap:12px;
    grid-template-columns:44px 1fr 44px;
  }

  .dre-swipe-gaps1-prev .dre-arrow,
  .dre-swipe-gaps1-next .dre-arrow{
    transform:translateY(-2px);
  }

  .dre-swipe-gaps1-feedback-list{
    margin:12px 12px 0;
    padding:14px 16px;
  }
}

/* ============================================================
   DESKTOP POLISH (OPTIONAL)
============================================================ */
@media (min-width:641px){
  .dre-swipe-gaps1--square-cards .dre-swipe-gaps1-card{
    border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,0.04);
  }
}

/* ============================================================
   HARD OVERRIDE AGAINST LESSON/THEME WRAPPERS (MOBILE)
============================================================ */
@media (max-width:640px){

  #dre-lesson-shell-01 .dre-engine-card,
  #dre-lesson-shell-01 .dre-engine-slot{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  #dre-lesson-shell-01 .dre-engine-slot > *{
    max-width:none !important;
  }

  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1,
  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1-card,
  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1-card.active{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1-card{
    overflow:hidden;
  }

  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1-sentence,
  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1 .dre-audio-btn,
  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1 input.dre-swipe-gaps1-gap,
  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1-nav{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1 .dre-swipe-gaps1-sentence,
  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1 input.dre-swipe-gaps1-gap{
    overflow:hidden;
  }

  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1 input.dre-swipe-gaps1-gap{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1-nav{
    margin:16px 0 0 !important;
    padding:0 !important;
    box-sizing:border-box !important;

    display:grid !important;
    grid-template-columns:44px 1fr 44px !important;
    align-items:center !important;
    column-gap:12px !important;
  }

  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1-prev{ justify-self:start !important; }
  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1-next{ justify-self:end !important; }
  #dre-lesson-shell-01 .dre-engine-slot .dre-swipe-gaps1-check{ justify-self:center !important; margin:0 !important; }
}

/* SG1 — kill any global hover/focus backgrounds on nav arrows */
.dre-swipe-gaps1-prev,
.dre-swipe-gaps1-next{
  background: transparent !important;
  box-shadow: none !important;
}

.dre-swipe-gaps1-prev:hover,
.dre-swipe-gaps1-next:hover,
.dre-swipe-gaps1-prev:focus,
.dre-swipe-gaps1-next:focus,
.dre-swipe-gaps1-prev:active,
.dre-swipe-gaps1-next:active{
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* If the square is actually a pseudo element from global styles */
.dre-swipe-gaps1-prev::before,
.dre-swipe-gaps1-next::before,
.dre-swipe-gaps1-prev::after,
.dre-swipe-gaps1-next::after{
  content: none !important;
}



.dre-swipe-gaps1-review{
  display:none;
  margin-top:24px;
}

.dre-swipe-gaps1-review.show{
  display:block;
}

/* SG1 — standard DRE action button states */

.dre-swipe-gaps1-check.dre-btn-pink{
  background:#fff !important;
  color:#ed4db4 !important;
  border:1px solid #ed4db4 !important;
}

.dre-swipe-gaps1-check.dre-btn-pink:hover{
  background:#ed4db4 !important;
  color:#fff !important;
}

.dre-swipe-gaps1-check.dre-btn-outline-grey{
  background:#fff !important;
  color:#b8bec7 !important;
  border:1px solid #b8bec7 !important;
}

.dre-swipe-gaps1-check.dre-btn-outline-grey:hover{
  background:#b8bec7 !important;
  color:#fff !important;
  border-color:#b8bec7 !important;
}

/* SG1 feedback alignment + status styling */

.dre-swipe-gaps1-review{
  text-align:center;
}

.dre-swipe-gaps1-feedback-title,
.dre-swipe-gaps1-score{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.dre-swipe-gaps1-score{
  margin-bottom:18px;
  font-weight:700;
  color:#4F535D;
}

.dre-swipe-gaps1-feedback-list{
  text-align:left;
}

.dre-swipe-gaps1-feedback-status-row{
  margin-top:8px;
}

.dre-swipe-gaps1-feedback-status.is-correct{
  color:#3ebe4e;
  font-weight:700;
}

.dre-swipe-gaps1-feedback-status.is-missed{
  color:#ed4db4;
  font-weight:700;
}

.dre-swipe-gaps1-tally{
  margin-left:8px;
  color:#9aa0a6 !important;
  font-weight:400;
  font-size:0.9rem;
}