/* ════════════════════════════════════════════════════════════════
   Skill Result UI — AI-graded shared styles (Writing TR/CC/LR/GRA +
   Speaking FC/LR/GRA/PRO). Dùng chung 4-criterion cards + AI feedback
   panel + fallback min/max card.

   Loaded by: writing-main / speaking-main (via Reading enqueue cho
   parent page support cross-skill popup history).
   Dùng CSS variables --ar-* định nghĩa trong reading.css (loaded
   trước nên kế thừa được). Tự động hỗ trợ dark mode qua
   html.ae-dark-mode toggle.

   Class scope (shared Writing + Speaking):
   • .ar-criteria-grid      → grid container 4 criterion cards
   • .ar-criterion-card     → mỗi card per criterion
                              (Writing: TR/CC/LR/GRA · Speaking: FC/LR/GRA/PRO)
   • .ar-criterion-*        → các sub-elements (head/icon/meta/band/bar)
   • .ar-ai-feedback-content → render HTML từ Gemini grader
                               (mona_history_writing_content / speaking_content)
   • .ar-ai-comp-*          → fallback min/max card khi chưa có AI per-criterion
   ════════════════════════════════════════════════════════════════ */

/* ─── Task/Part block — progress bar + 4 criterion cards interleaved ─── */
.ar-task-blocks{display:flex;flex-direction:column;gap:24px;}
.ar-task-block{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:18px;
    border:1px solid var(--ar-border);
    border-radius:14px;
    background:var(--ar-bg-soft);
    transition:border-color .15s ease;
}
.ar-task-block.perf-high{border-left:3px solid var(--ar-green);}
.ar-task-block.perf-mid{border-left:3px solid var(--ar-blue);}
.ar-task-block.perf-low{border-left:3px solid var(--ar-amber);}
.ar-task-block.perf-zero{border-left:3px solid var(--ar-red);}
.ar-task-block .ar-passage-row{padding:0;background:transparent;border:none;margin:0;}

/* ─── 4-criterion cards (shared Writing + Speaking) ─── */
.ar-criteria-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
    margin-top:6px;
}
/* Compact variant — dùng trong .ar-task-block, ít padding/gap hơn */
.ar-criteria-grid--compact{
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:4px;
}
.ar-criteria-grid--compact .ar-criterion-card{padding:12px;gap:8px;}
.ar-criteria-grid--compact .ar-criterion-icon{font-size:18px;}
.ar-criteria-grid--compact .ar-criterion-name{font-size:11.5px;line-height:1.25;}
.ar-criteria-grid--compact .ar-criterion-band{font-size:20px;}
.ar-criteria-grid--compact .ar-criterion-band span{font-size:12px;}

@media (max-width:720px){
    .ar-criteria-grid--compact{grid-template-columns:repeat(2,1fr);}
}
.ar-criterion-card{
    background:var(--ar-bg);
    border:1px solid var(--ar-border);
    border-radius:14px;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ar-criterion-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--ar-shadow-md);
    border-color:var(--ar-border-strong);
}
.ar-criterion-card.perf-high{
    border-color:var(--ar-green);
    background:linear-gradient(135deg,var(--ar-green-soft) 0%,var(--ar-bg) 100%);
}
.ar-criterion-card.perf-mid{
    border-color:var(--ar-blue);
    background:linear-gradient(135deg,var(--ar-blue-soft) 0%,var(--ar-bg) 100%);
}
.ar-criterion-card.perf-low{
    border-color:var(--ar-amber);
    background:linear-gradient(135deg,var(--ar-amber-soft) 0%,var(--ar-bg) 100%);
}
.ar-criterion-card.perf-zero{
    border-color:var(--ar-red);
    background:linear-gradient(135deg,var(--ar-red-soft) 0%,var(--ar-bg) 100%);
}
.ar-criterion-head{display:flex;align-items:center;gap:10px;}
.ar-criterion-icon{font-size:22px;line-height:1;}
.ar-criterion-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.ar-criterion-short{font-size:11px;font-weight:700;color:var(--ar-text-mute);letter-spacing:.5px;}
.ar-criterion-name{font-size:13px;font-weight:600;color:var(--ar-text);line-height:1.3;}
.ar-criterion-band{font-size:24px;font-weight:700;color:var(--ar-text);}
.ar-criterion-band span{font-size:14px;font-weight:500;color:var(--ar-text-faint);margin-left:2px;}
.ar-criterion-bar{
    position:relative;
    height:8px;
    background:var(--ar-bg-elev);
    border-radius:6px;
    overflow:hidden;
}
.ar-criterion-bar > span{
    position:absolute;
    inset:0 auto 0 0;
    background:linear-gradient(90deg,var(--ar-blue) 0%,var(--ar-green) 100%);
    border-radius:6px;
    transition:width .6s ease;
}
.ar-criterion-card.perf-low .ar-criterion-bar > span{
    background:linear-gradient(90deg,var(--ar-amber) 0%,#fb923c 100%);
}
.ar-criterion-card.perf-zero .ar-criterion-bar > span{
    background:linear-gradient(90deg,var(--ar-red) 0%,#f87171 100%);
}

/* ─── AI feedback content panel (mona_history_writing_content HTML) ─── */
.ar-ai-feedback-content{
    background:var(--ar-bg-soft);
    border:1px solid var(--ar-border);
    border-radius:12px;
    padding:18px 20px;
    line-height:1.7;
    color:var(--ar-text);
    font-size:14.5px;
}
.ar-ai-feedback-content h3,
.ar-ai-feedback-content h4{margin:18px 0 10px;color:var(--ar-text);font-weight:600;}
.ar-ai-feedback-content p{margin:0 0 12px;color:var(--ar-text);}
.ar-ai-feedback-content strong{color:var(--ar-text);}
.ar-ai-feedback-content em{color:var(--ar-text-mute);}
.ar-ai-feedback-content ul,
.ar-ai-feedback-content ol{padding-left:22px;margin:0 0 12px;}
.ar-ai-feedback-content li{margin:4px 0;color:var(--ar-text);}
.ar-ai-feedback-content code{
    background:var(--ar-bg-elev);
    color:var(--ar-text);
    padding:2px 6px;
    border-radius:4px;
    font-size:13px;
}
.ar-ai-feedback-content blockquote{
    border-left:3px solid var(--ar-blue);
    background:var(--ar-blue-soft);
    margin:12px 0;
    padding:8px 14px;
    color:var(--ar-text);
    border-radius:0 8px 8px 0;
}

/* ─── Fallback min/max card (khi chưa có per-criterion AI data) ─── */
.ar-ai-comp-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.ar-ai-comp-card{
    background:var(--ar-bg);
    border:1px solid var(--ar-border);
    border-radius:14px;
    padding:18px 20px;
    text-align:center;
}
.ar-ai-comp-min{border-color:var(--ar-amber);}
.ar-ai-comp-max{border-color:var(--ar-green);}
.ar-ai-comp-lbl{
    font-size:11px;font-weight:700;letter-spacing:.5px;
    color:var(--ar-text-mute);
    text-transform:uppercase;
    margin-bottom:8px;
}
.ar-ai-comp-num{
    font-size:32px;font-weight:700;color:var(--ar-text);
    letter-spacing:-.02em;
}
.ar-ai-comp-num span{
    font-size:14px;font-weight:500;color:var(--ar-text-faint);margin-left:2px;
}

/* ─── Dark mode tweaks ─── perf-tinted gradient quá rực ở dark mode
   (vì --ar-bg là xám đậm, gradient tới đó không tương phản đủ với border
   tinted). Dùng tint nhẹ hơn để card vẫn đọc được trên nền tối. */
html.ae-dark-mode .ar-criterion-card.perf-high{
    background:linear-gradient(135deg,rgba(16,185,129,.12) 0%,var(--ar-bg) 60%);
}
html.ae-dark-mode .ar-criterion-card.perf-mid{
    background:linear-gradient(135deg,rgba(59,130,246,.12) 0%,var(--ar-bg) 60%);
}
html.ae-dark-mode .ar-criterion-card.perf-low{
    background:linear-gradient(135deg,rgba(245,158,11,.12) 0%,var(--ar-bg) 60%);
}
html.ae-dark-mode .ar-criterion-card.perf-zero{
    background:linear-gradient(135deg,rgba(239,68,68,.12) 0%,var(--ar-bg) 60%);
}

/* ─── Mobile responsive ─── */
@media (max-width:640px){
    .ar-criteria-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .ar-criterion-card{padding:12px;}
    .ar-criterion-icon{font-size:18px;}
    .ar-criterion-name{font-size:12px;}
    .ar-criterion-band{font-size:20px;}
    .ar-ai-comp-row{grid-template-columns:1fr;gap:10px;}
    .ar-ai-comp-card{padding:14px 16px;}
    .ar-ai-comp-num{font-size:26px;}
}