/* ================================================================
   sql-feedback.css: "why is my answer wrong" feedback + Common SQL
   Mistakes panel. Markup comes from /assets/js/sql-grader.js.
   Uses challenge.css theme tokens (light + [data-theme="dark"]) with
   fallbacks, so it also works on pages that don't load challenge.css.
   ================================================================ */

.fb {
    --fb-extra: var(--error, #ef4444);
    --fb-dup: #f97316;
    --fb-missing: var(--success, #10b981);
    --fb-changed: var(--warning, #f59e0b);
    --fb-moved: var(--info, #3b82f6);
    --fb-border: var(--border, #e2e8f0);
    --fb-text: var(--text-primary, #1e293b);
    --fb-muted: var(--text-secondary, #475569);
    --fb-card: var(--card-bg, #ffffff);
    color: var(--fb-text);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

/* ---------- headline ---------- */
.fb-head {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm, 8px);
    border-left: 4px solid var(--fb-extra);
    background: rgba(239, 68, 68, 0.08);
    line-height: 1.5;
}
.fb-head > i {
    color: var(--fb-extra);
    font-size: 1.15rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}
.fb-head > div { min-width: 0; overflow-wrap: anywhere; }
.fb--error .fb-head {
    border-left-color: var(--fb-changed);
    background: rgba(245, 158, 11, 0.1);
}
.fb--error .fb-head > i { color: var(--fb-changed); }

.fb-sqlite {
    margin: 0;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm, 8px);
    background: var(--code-bg, #1e293b);
    color: #fca5a5;
    font: 0.82rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------- diagnoses ---------- */
.fb-diagnoses {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.fb-diag {
    padding: 0.8rem 1rem;
    border: 1px solid var(--fb-border);
    border-radius: var(--radius-sm, 8px);
    background: var(--fb-card);
}
.fb-diag--primary {
    border-color: rgba(139, 92, 246, 0.45);
    box-shadow: 0 1px 0 rgba(139, 92, 246, 0.15);
}
.fb-diag-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}
.fb-diag p {
    margin: 0;
    color: var(--fb-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}
.fb-diag code,
.fb-note code {
    font: 0.84em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: 0.08em 0.35em;
    border-radius: 4px;
    background: rgba(139, 92, 246, 0.1);
    color: var(--fb-text);
    white-space: nowrap;
}
.fb-learn {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary, #8b5cf6);
    text-decoration: none;
}
.fb-learn:hover,
.fb-learn:focus-visible { text-decoration: underline; }
.fb-also {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fb-muted);
    margin-bottom: -0.3rem;
}
.fb-diagnoses--more .fb-diag { padding: 0.65rem 0.9rem; }
.fb-diagnoses--more .fb-diag-title { font-size: 0.88rem; }

/* ---------- chips ---------- */
.fb-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fb-chip {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--fb-border);
    color: var(--fb-muted);
    background: var(--fb-card);
}
.fb-chip--extra   { color: var(--fb-extra);   border-color: currentColor; }
.fb-chip--dup     { color: var(--fb-dup);     border-color: currentColor; }
.fb-chip--missing { color: var(--fb-missing); border-color: currentColor; }
.fb-chip--changed { color: #b45309;           border-color: var(--fb-changed); }
[data-theme="dark"] .fb-chip--changed { color: var(--fb-changed); }

.fb-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--fb-muted);
}

/* ---------- side-by-side compare ---------- */
.fb-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}
.fb-pane {
    min-width: 0;
    border: 1px solid var(--fb-border);
    border-radius: var(--radius-sm, 8px);
    background: var(--fb-card);
    overflow: hidden;
}
.fb-pane h4 {
    margin: 0;
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 700;
    border-bottom: 1px solid var(--fb-border);
    background: var(--bg-secondary, #f8fafc);
}
.fb-pane--expected h4 { color: var(--fb-missing); }

.fb-table-wrap {
    overflow-x: auto;
    max-height: 420px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.fb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.fb-table th,
.fb-table td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--fb-border);
    white-space: nowrap;
}
.fb-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-weight: 700;
    color: var(--fb-muted);
    background: var(--fb-card);
}
.fb-rownum {
    width: 1%;
    color: var(--text-light, #94a3b8);
    font-size: 0.75rem;
}
.fb-tagcol { width: 1%; text-align: right !important; }
.fb-null { color: var(--text-light, #94a3b8); font-style: italic; }
.fb-empty { color: var(--fb-muted); font-style: italic; text-align: center !important; padding: 1rem !important; }
.fb-more { padding: 0.45rem 0.7rem; font-size: 0.78rem; color: var(--fb-muted); }

.fb-row--extra   { background: rgba(239, 68, 68, 0.1);  box-shadow: inset 3px 0 0 var(--fb-extra); }
.fb-row--dup     { background: rgba(249, 115, 22, 0.12); box-shadow: inset 3px 0 0 var(--fb-dup); }
.fb-row--missing { background: rgba(16, 185, 129, 0.1); box-shadow: inset 3px 0 0 var(--fb-missing); }
.fb-row--changed { box-shadow: inset 3px 0 0 var(--fb-changed); }
.fb-row--moved   { background: rgba(59, 130, 246, 0.08); box-shadow: inset 3px 0 0 var(--fb-moved); }
.fb-cell--diff {
    background: rgba(245, 158, 11, 0.22);
    font-weight: 700;
    outline: 1px solid rgba(245, 158, 11, 0.55);
    outline-offset: -1px;
}

.fb-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.08rem 0.4rem;
    border-radius: 4px;
    color: #fff;
}
.fb-tag--extra   { background: var(--fb-extra); }
.fb-tag--dup     { background: var(--fb-dup); }
.fb-tag--missing { background: var(--fb-missing); }
.fb-tag--changed { background: var(--fb-changed); color: #1f2937; }
.fb-tag--moved   { background: var(--fb-moved); }

.fb-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.76rem;
    color: var(--fb-muted);
}
.fb-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.fb-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.fb-sw--extra   { background: var(--fb-extra); }
.fb-sw--dup     { background: var(--fb-dup); }
.fb-sw--missing { background: var(--fb-missing); }
.fb-sw--changed { background: var(--fb-changed); }
.fb-sw--moved   { background: var(--fb-moved); }

.fb-sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* challenge.css caps .results-content at 400px (300px mobile) with its
   own scroll; with feedback showing, let it grow instead of nesting
   a scroll inside a scroll. */
.results-panel .results-content.has-feedback {
    max-height: none;
    overflow: visible;
}

/* success extras */
.fb-pass-notes {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #475569);
}
.fb-pass-notes i { color: var(--success, #10b981); margin-right: 0.35rem; }

@media (max-width: 900px) {
    .fb-compare { grid-template-columns: minmax(0, 1fr); }
    .fb-table-wrap { max-height: 320px; }
}

/* ================================================================
   Common SQL Mistakes panel
   ================================================================ */
.mistakes-panel {
    margin-top: 1.25rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 12px);
    background: var(--card-bg, #fff);
    color: var(--text-primary, #1e293b);
}
.mistakes-panel > details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.15rem;
    font-weight: 700;
    font-size: 1rem;
}
.mistakes-panel > details > summary::-webkit-details-marker,
.mistake > summary::-webkit-details-marker { display: none; }
.mistakes-panel > details > summary > i:first-child { color: var(--warning, #f59e0b); }
.mistakes-panel > details > summary::after,
.mistake > summary::after {
    content: '';
    margin-left: auto;
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.mistakes-panel > details[open] > summary::after,
.mistake[open] > summary::after { transform: rotate(-135deg); }
.mistakes-count {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}
[data-theme="dark"] .mistakes-count { color: var(--warning, #f59e0b); }
.mistakes-intro {
    margin: 0 1.15rem 0.75rem;
    font-size: 0.88rem;
    color: var(--text-secondary, #475569);
}
.mistakes-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border, #e2e8f0);
}
.mistake { border-bottom: 1px solid var(--border, #e2e8f0); scroll-margin-top: 90px; }
.mistake:last-child { border-bottom: 0; }
.mistake > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.75rem;
    padding: 0.75rem 1.15rem;
}
.mistake > summary::after { align-self: center; }
.mistake-title { font-weight: 650; font-size: 0.92rem; }
.mistake-symptom { font-size: 0.82rem; color: var(--text-secondary, #475569); flex: 1 1 260px; }
.mistake-body { padding: 0 1.15rem 1rem; }
.mistake-body p {
    margin: 0.65rem 0 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary, #475569);
}
.mistake-code {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}
.mistake-code > div { min-width: 0; }
.mistake-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}
.mistake-bad .mistake-label { color: var(--error, #ef4444); }
.mistake-good .mistake-label { color: var(--success, #10b981); }
.mistake-code pre {
    margin: 0;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-sm, 8px);
    background: var(--code-bg, #1e293b);
    color: #e2e8f0;
    font: 0.8rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-x: auto;
    border-left: 3px solid transparent;
}
.mistake-bad pre { border-left-color: var(--error, #ef4444); }
.mistake-good pre { border-left-color: var(--success, #10b981); }
.mistake.is-flash > summary {
    animation: mistakeFlash 1.6s ease;
}
@keyframes mistakeFlash {
    0%, 40% { background: rgba(139, 92, 246, 0.18); }
    100% { background: transparent; }
}
@media (max-width: 700px) {
    .mistake-code { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .mistake.is-flash > summary { animation: none; background: rgba(139, 92, 246, 0.12); }
    .mistakes-panel > details > summary::after,
    .mistake > summary::after { transition: none; }
}