/* ============================================================
   DRE SW1 (SWIPE QUIZ) — PRODUCTION CSS (CONSOLIDATED)
   Scope: SW1 only
   Notes:
   - Disc & arrow visuals handled globally (elements)
   - This file handles layout + component states only
   - JS injects .dre-sw1-nav and .dre-sw1-check as siblings inside .dre-sw1-quiz
============================================================ */


/* ============================================================
   QUIZ CONTAINER
============================================================ */
.dre-sw1-quiz{
  max-width:720px;
  margin:24px auto;
  padding:12px;

  /* Footer layout context (required for injected siblings) */
  display:grid;
  grid-template-columns:1fr;
}


/* ============================================================
   QUESTION CARD
============================================================ */
.dre-sw1-card{
  display:none;
  background:#ffffff;
  border:1px solid #e4e4e4;
  border-radius:14px;
  padding:22px;
  margin-bottom:22px;
}

.dre-sw1-card.active{
  display:block;
}


/* ============================================================
   SW1 FOOTER GRID — AUTHORITATIVE
   - .dre-sw1-nav and .dre-sw1-check are injected siblings
   - Do NOT move HTML
============================================================ */

/* Ensure injected controls share the same grid column */
.dre-sw1-nav,
.dre-sw1-check,
.dre-sw1-check-msg{
  grid-column:1;
}


/* ============================================================
   SW1 NAV (ARROWS) — AUTHORITATIVE
   Requirement:
   - Arrows separated (left/right)
   - Arrow group centred over Check button
   - Single source of truth (no competing rules)
============================================================ */
.dre-sw1-nav{
  display:grid;
  grid-template-columns:44px 44px;
  justify-content:space-between;
  align-items:center;

  /* This is the core centring behaviour */
  width:160px;
  margin-left:auto;
  margin-right:auto;

  /* Nav itself should not add horizontal drift */
  padding:0;
  box-sizing:border-box;
}

/* Explicit arrow placement (2-column grid) */
.dre-sw1-prev{
  grid-column:1;
  justify-self:start;
}

.dre-sw1-next{
  grid-column:2;         /* FIX: was 3 */
  justify-self:end;
}

/* Arrow buttons (no UA button styles) */
.dre-sw1-prev,
.dre-sw1-next{
  all:unset;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}


/* ============================================================
   SW1 CHECK BUTTON — MATCH GLOBAL DRE BUTTON
============================================================ */
.dre-sw1-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:auto;
  max-width:none;

  border-radius:50px;
  white-space:nowrap;
}


/* ============================================================
   SW1 QUESTION — GLOBAL ALIGNMENT (DESKTOP + MOBILE)
   Single source of truth
============================================================ */
.dre-sw1-question{
  margin-bottom:18px;
  font-weight:700;
  line-height:1.35;

  display:flex;
  align-items:flex-start;
  gap:12px;

  /* Optical alignment (safe with overflow hidden) */
  transform:
    translateX(calc(-1 * var(--dre-disc-size)))
    translateY(-2px);
}

.dre-sw1-question .dre-disc-number{
  flex-shrink:0;
}

.dre-sw1-question .dre-disc-number::before{
  content:attr(data-num);
}


/* ============================================================
   OPTIONS — STRUCTURE ONLY
============================================================ */
.dre-sw1-option{
  position:relative;
  display:block;

  padding:14px 18px 14px 52px;
  margin-bottom:12px;

  border:1px solid #e4e4e4;
  border-radius:12px;
  background:#ffffff;

  cursor:pointer;
}


/* ============================================================
   SW1 OPTION STRIP — INTERACTION FEEDBACK
   Neutral, pre-check only
============================================================ */

/* Hover */
.dre-sw1-option:not(.checked):hover{
  background:#f6f7f9;
}

/* Pressed */
.dre-sw1-option:not(.checked):active{
  background:#eef1f4;
}

/* Keyboard focus */
.dre-sw1-option:not(.checked):focus-visible{
  outline:2px solid #d0d5db;
  outline-offset:2px;
}


/* ============================================================
   SW1 OPTION STRIP — SELECTED (PERSISTENT, PRE-CHECK)
============================================================ */
.dre-sw1-option.selected:not(.checked){
  background:#eef1f4;
}

.dre-sw1-option.selected:not(.checked),
.dre-sw1-option.selected:not(.checked) *{
  color:var(--dre-blue);
  font-weight:600;
}


/* ============================================================
   SW1 OPTION STRIP — POST-CHECK FEEDBACK (LOCKED)
============================================================ */

/* ✅ CORRECT OPTION */
.dre-sw1-option.dre-disc--correct{
  background:#EEF9F0;
  border-color:var(--dre-green);
}

.dre-sw1-option.dre-disc--correct,
.dre-sw1-option.dre-disc--correct *{
  color:var(--dre-grey-dark);
  font-weight:700;
}

/* ❌ INCORRECT OPTION */
.dre-sw1-option.dre-disc--incorrect{
  background:#F2F4F6;
  border-color:var(--dre-grey-dark);
}

.dre-sw1-option.dre-disc--incorrect,
.dre-sw1-option.dre-disc--incorrect *{
  color:var(--dre-grey-dark);
  font-weight:700;
}


/* ============================================================
   DISC POSITIONING ONLY (NO VISUALS)
============================================================ */
.dre-sw1-option::before{
  position:absolute;
  left:14px;
  top:14px;
}

/* Letter content (only when not marked correct/incorrect) */
.dre-sw1-option.dre-disc-letter:not(.dre-disc--correct):not(.dre-disc--incorrect)::before{
  content:attr(data-choice);
}


/* ============================================================
   SW1 CHECK MESSAGE — COMPLETION PROMPT
   (Vertical gap fix lives here)
============================================================ */
.dre-sw1-check-msg{
  margin:2px auto 6px;      /* tighter gap under arrows */
  text-align:center;
  font-size:0.95rem;
  font-weight:400;
  color:var(--dre-blue) !important;
  min-height:0.9em;       /* reserve a small line when message appears */
  line-height:1.1;
}

/* Collapse completely when empty (safe) */
.dre-sw1-check-msg:empty{
  min-height:0;
  margin-top:0;
}


/* ============================================================
   REVIEW / FEEDBACK PANEL (LAYOUT ONLY)
============================================================ */
.dre-sw1-review{
  display:none;
  margin-top:24px;
}

.dre-sw1-review.show{
  display:block;
}

.dre-sw1-score{
  text-align:center;
  font-weight:700;
  margin-bottom:16px;
}

.dre-sw1-feedback{
  margin:18px 12px 0;
  padding:14px 16px;
  background:#ffffff;
  border-radius:12px;
  opacity:0;
  transform:translateY(6px);
  transition:.35s;
}

.dre-sw1-feedback.show{
  opacity:1;
  transform:translateY(0);
}

/* ============================================================
   SW1 REVIEW STATE — HIDE QUIZ CONTROLS
   Feedback panel should stand alone
============================================================ */
.dre-sw1-review.show ~ .dre-sw1-nav,
.dre-sw1-review.show ~ .dre-sw1-check,
.dre-sw1-review.show ~ .dre-sw1-check-msg{
  display:none;
}


/* ============================================================
   ARROWS — FORCE NO BUTTON STYLING (SAFETY)
============================================================ */
.dre-sw1-prev,
.dre-sw1-next{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.dre-sw1-prev .dre-arrow,
.dre-sw1-next .dre-arrow{
  background:transparent !important;
}
/* ============================================================
   SW1 ARROWS — HOVER COLOUR (BLUE)
============================================================ */
.dre-sw1-prev:hover .dre-arrow,
.dre-sw1-next:hover .dre-arrow{
  color: var(--dre-blue);
}

/* SVG arrows */
.dre-sw1-prev:hover .dre-arrow svg,
.dre-sw1-next:hover .dre-arrow svg{
  fill: var(--dre-blue);
  stroke: var(--dre-blue);
}


/* ============================================================
   FOOTER SPACING — SINGLE SOURCE OF TRUTH
   Controls distance between options ↔ arrows ↔ check
   IMPORTANT:
   - Keep horizontal centring by using auto left/right margins
============================================================ */

/* Desktop default rhythm */
@media (min-width:641px){
  .dre-sw1-nav{
    margin:8px auto 2px;   /* keep centred */
  }

  .dre-sw1-check{
    margin:4px auto 0;
  }
}

/* Mobile default rhythm */
@media (max-width:640px){
  .dre-sw1-nav{
    margin:6px auto 2px;   /* keep centred */
    width:190px;           /* MORE separation on mobile (your request) */
  }

  .dre-sw1-check{
    margin:2px auto 0;
  }
}


/* ============================================================
   MOBILE — STRIP LAYOUT
   Intentional: desktop and mobile are different
============================================================ */
@media (max-width:640px){

  .dre-sw1-quiz{
    padding-left:0;
    padding-right:0;
    max-width:none;
    overflow:visible;
  }

  .dre-sw1-card{
    margin:0;
    border-radius:0;
    border-left:none;
    border-right:none;
    border-top:none;
    border-bottom:1px solid #e4e4e4;
    padding:0;
  }

  /* Question alignment micro-adjustment (ONLY THIS) */
  .dre-sw1-question{
    transform:
      translateX(calc(-1 * var(--dre-disc-size) + 10px))
      translateY(-2px);
  }

  .dre-sw1-option{
    border-radius:0;
    margin-bottom:0;
    border-left:none;
    border-right:none;
    padding-left:46px;
    padding-right:18px;
  }

  .dre-sw1-option + .dre-sw1-option{
    border-top:1px solid #e4e4e4;
  }

  /* Disc positioning only (mobile) */
  .dre-sw1-option::before{
    left:12px;
    top:12px;
  }

  .dre-sw1-feedback{
    margin:12px 18px 0;
    border-radius:12px;
  }

  /* Arrow optical alignment (mobile) */
  .dre-sw1-prev .dre-arrow,
  .dre-sw1-next .dre-arrow{
    transform:translateY(-2px);
  }
}


/* ============================================================
   DESKTOP — ARROW OPTICAL ALIGNMENT ONLY
============================================================ */
@media (min-width:641px){
  .dre-sw1-prev .dre-arrow,
  .dre-sw1-next .dre-arrow{
    display:inline-block;
    line-height:1;
    transform:translateY(-1px);
  }
}