/* U Tiger v1.6.2 — mobile-first task order and feedback flow */
.answer-feedback{
  grid-column:1/-1;
  margin:.15rem 0 .4rem;
  padding:1rem 1.05rem;
  border:1px solid var(--ut-line,var(--line));
  border-left:7px solid var(--ut-orange,var(--accent));
  background:var(--ut-paper,var(--paper));
  color:var(--ut-ink,var(--ink));
  scroll-margin-top:1rem;
}
.answer-feedback[hidden]{display:none!important}
.answer-feedback.is-correct{border-left-color:var(--good)}
.answer-feedback.is-wrong{border-left-color:var(--bad)}
.answer-feedback.is-pending{border-left-color:var(--ut-orange,var(--accent));padding:.8rem 1rem}
.answer-feedback-heading{display:flex;align-items:center;gap:.65rem;margin:0 0 .55rem}
.answer-feedback-heading h2{font-family:Georgia,"Times New Roman",serif;font-size:1.45rem;line-height:1.1;margin:0}
.answer-feedback-mark{display:grid;place-items:center;width:2rem;height:2rem;flex:0 0 2rem;border:1px solid currentColor;font-weight:900;font-size:1.2rem}
.answer-feedback.is-correct .answer-feedback-mark{color:var(--good)}
.answer-feedback.is-wrong .answer-feedback-mark{color:var(--bad)}
.answer-feedback-key,.answer-feedback-explanation,.answer-feedback-method p{margin:.45rem 0;line-height:1.5}
.answer-feedback-key{font-size:1.02rem}
.answer-feedback-method{margin:.8rem 0 0;padding-top:.7rem;border-top:1px solid var(--ut-line,var(--line))}
.answer-feedback-method summary{cursor:pointer;font-weight:900;color:var(--ut-forest,var(--teal));list-style-position:outside;margin-left:1rem}
.answer-feedback-method[open] summary{margin-bottom:.55rem}
.feedback-continue{margin-top:1rem;min-height:46px}
.answer-feedback-status{display:flex;align-items:center;gap:.65rem;margin:0}
.feedback-spinner{width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:utiger-spin .75s linear infinite}
@keyframes utiger-spin{to{transform:rotate(360deg)}}

/* Avoid the old empty feedback area once the inline card is shown. */
.question-hint[hidden]{display:none!important}

@media(max-width:700px){
  body.game-active{overflow-x:hidden}
  .game-header{scroll-margin-top:0}
  .game-layout{margin:.65rem auto 1.25rem;padding:0 .55rem;gap:.65rem}
  .passage-panel,.question-panel{padding:.9rem;min-height:0}
  .panel-label{margin-bottom:.85rem}
  .passage-text{font-size:max(1rem,var(--passage-size));line-height:1.62}
  .question-prompt{font-size:clamp(1.38rem,6.2vw,1.72rem);line-height:1.16;margin:.1rem 0 1rem}
  .answer-area{gap:.55rem}
  .answer-button{min-height:54px;padding:.72rem .68rem;grid-template-columns:32px 1fr;gap:.65rem;line-height:1.35}
  .answer-button .key{width:28px;height:28px}
  .answer-feedback{margin:.05rem 0 .2rem;padding:.9rem;border-left-width:6px;box-shadow:0 8px 22px rgba(2,45,41,.08)}
  .answer-feedback-heading h2{font-size:1.35rem}
  .answer-feedback-explanation{font-size:.97rem}
  .feedback-continue{display:block;width:100%;min-height:50px;margin-top:.9rem}
  .question-actions{margin-top:.85rem;padding-top:.85rem}
  .shortcut-note{display:none}
  .coach-panel{margin-bottom:.75rem}
  .statement-row{scroll-margin-top:.8rem}
}

@media(min-width:701px){
  .feedback-continue{width:auto}
}

@media(pointer:coarse){
  .answer-button,.secondary-button,.primary-button{min-height:48px}
}

@media(prefers-reduced-motion:reduce){
  .feedback-spinner{animation:none}
}

/* Keep the outcome visible despite the editorial button background rules. */
.answer-area .answer-button.correct{
  background:#d6eadf!important;
  border-color:var(--good)!important;
  color:var(--ut-ink,var(--ink))!important;
}
.answer-area .answer-button.wrong{
  background:#f2d5cf!important;
  border-color:var(--bad)!important;
  color:var(--ut-ink,var(--ink))!important;
}
.answer-area .answer-button.selected:not(.correct):not(.wrong){
  background:var(--ut-forest-soft,#dbe9e4)!important;
  border-color:var(--ut-forest,var(--teal))!important;
  color:var(--ut-ink,var(--ink))!important;
}


/* v1.6.2: instructions appear before the controls they govern. */
.question-hint{
  min-height:0;
  margin:0 0 .85rem;
  padding:.78rem .9rem;
  border:1px solid var(--ut-line,var(--line));
  border-left:5px solid var(--ut-orange,var(--accent));
  background:var(--ut-paper,var(--paper));
  line-height:1.45;
}
.question-hint:empty{display:none}
.question-hint strong{display:block;margin:0 0 .2rem;color:var(--ut-forest,var(--teal));font-size:.9rem;letter-spacing:.02em}
.question-hint span{display:block}
.evidence-task{
  margin:0 0 1rem!important;
  padding:.72rem .8rem;
  border-left:5px solid var(--ut-orange,var(--accent));
  background:var(--ut-paper,var(--paper));
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.95rem;
  line-height:1.45!important;
}
.evidence-task strong{display:block;color:var(--ut-forest,var(--teal));margin-bottom:.12rem}
.answer-area.is-locked .answer-button{
  opacity:.48;
  border-style:dashed!important;
  cursor:not-allowed;
}
.answer-area.is-locked .answer-button:hover{background:var(--ut-paper-light,var(--surface))!important}

@media(max-width:900px){
  .passage-panel,.question-panel{scroll-margin-top:.45rem}
  .evidence-task{font-size:.93rem;margin-bottom:.8rem!important}
  .question-hint{margin-bottom:.7rem;padding:.7rem .75rem}
}


.mobile-evidence-claim{display:none}
@media(max-width:900px){
  .mobile-evidence-claim:not([hidden]){
    display:block;
    margin:0 0 .8rem;
    padding:0 0 .75rem;
    border-bottom:1px solid var(--ut-line,var(--line));
  }
  .mobile-evidence-claim span{
    display:block;
    margin-bottom:.25rem;
    color:var(--ut-orange,var(--accent));
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.13em;
    text-transform:uppercase;
  }
  .mobile-evidence-claim p{
    margin:0!important;
    font-family:Georgia,"Times New Roman",serif;
    font-size:1.25rem;
    line-height:1.25!important;
  }
}

/* v1.6.3: optional guidance must occupy no space when it has no content. */
.question-hint[hidden],
.question-hint:empty,
.coach-panel[hidden],
.runtime-notice[hidden],
.mobile-evidence-claim[hidden],
.answer-feedback[hidden]{
  display:none!important;
  min-height:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
