/* ==========================================================================
   marking-feedback.css

   Shared visual chrome for AI marking results, used by:
     - Pages/Practice/PracticeResults.aspx
     - Pages/Multiplayer/EndScreen.aspx

   Mirrors the brand "peek" demo from the redesign landing page
   (IB Marker Website Redesign/index.html lines 87-289). The renderer at
   Scripts/markingFeedbackRenderer.js builds the markup; this file styles it.

   Uses --brand-green / --status-* / --ink-* tokens from _tokens.css so the
   student portal's themable accent applies automatically. Do NOT hard-code
   the demo's #50e6c3 emerald - that's the credentials shell accent, not the
   student accent, and would conflict with the C1 theme presets.

   ASCII anatomy:

     +--------------------------------------------------+
     | passage with <mark>highlighted spans</mark> ...  |  .mf-passage
     +--------------------------------------------------+
     | Knowledge   ===========.....   5/6               |  .mf-rubric
     | Application ============....   5/6               |
     | Evaluation  ========........   4/8               |
     +--------------------------------------------------+
     | [STRENGTH] strong grasp of transmission lag      |  .mf-notes
     | [APPLY]    extend example beyond 2022            |
     | [DEVELOP]  weighting effectiveness vs limits     |
     +--------------------------------------------------+
     | AI MARKER                14 / 20    [LEVEL 6]    |  .mf-score
     +--------------------------------------------------+
   ========================================================================== */

.mf-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================ PASSAGE + HIGHLIGHTS =========================
   The student's answer rendered with <mark> wraps around verbatim spans the
   AI marker flagged. Single highlight tone for v1; per-kind colour mapping
   would land here (.mf-passage mark[data-kind="weakness"] { ... }). */
.mf-passage {
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid rgba(var(--brand-green-rgb), 0.35);
    padding: 14px 16px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--ink-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}
.mf-passage mark {
    background: rgba(var(--brand-green-rgb), 0.18);
    color: var(--ink-bright);
    padding: 1px 4px;
    border-radius: 2px;
}

.mf-passage-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
    font-weight: 600;
    margin-bottom: 6px;
}

/* ============================ RUBRIC BARS ================================== */
.mf-rubric {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mf-rubric-row {
    display: grid;
    grid-template-columns: minmax(90px, 140px) 1fr 48px;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-xs);
}
.mf-rubric-name {
    color: var(--ink-muted);
    font-family: var(--font-body);
    font-weight: 500;
}
.mf-rubric-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}
.mf-rubric-bar > i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--brand-green), var(--brand-green-hover));
    border-radius: 2px;
}
.mf-rubric-val {
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: var(--font-size-2xs);
    font-weight: 500;
    text-align: right;
}

/* ============================ CATEGORISED NOTES ============================
   Three colour-coded pills. Strength = green, Apply = blue. The third pill is
   either Develop = amber (a weakness, when marks were lost) or Stretch = violet
   (a next challenge, when full marks were awarded) - the marker swaps category
   so it never has to invent a flaw on a perfect answer.
   Border tint shows on the card; tag pill carries the saturated colour. */
.mf-notes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mf-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--ink-secondary);
}
.mf-note-tag {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-3xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    align-self: flex-start;
}
.mf-note-text {
    flex: 1;
    min-width: 0;
}

.mf-note--strength            { border-color: rgba(var(--brand-green-rgb), 0.28); }
.mf-note--strength .mf-note-tag { background: rgba(var(--brand-green-rgb), 0.18); color: var(--brand-green-light); }

.mf-note--apply              { border-color: rgba(var(--brand-blue-rgb), 0.28); }
.mf-note--apply .mf-note-tag { background: rgba(var(--brand-blue-rgb), 0.18); color: var(--brand-blue-light); }

.mf-note--develop              { border-color: rgba(240, 136, 62, 0.28); }
.mf-note--develop .mf-note-tag { background: rgba(240, 136, 62, 0.18); color: var(--status-warning); }

.mf-note--stretch              { border-color: rgba(163, 113, 247, 0.28); }
.mf-note--stretch .mf-note-tag { background: rgba(163, 113, 247, 0.18); color: var(--status-elevate); }

/* ============================ FALLBACK NOTE ===============================
   Rendered in place of the .mf-notes list when the marking response is
   missing categorised feedback (historical rows pre-MarkingDetailJson, or
   model omission). Sits inside the same chrome to keep visual consistency
   with new sessions. */
.mf-fallback-note {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--ink-secondary);
    white-space: pre-wrap;
}
.mf-fallback-note-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-3xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
    font-weight: 600;
    margin-bottom: 6px;
}

/* ============================ SCORE FOOTER ================================= */
.mf-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    gap: 14px;
    flex-wrap: wrap;
}
.mf-score-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-2xs);
    color: var(--ink-dim);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 600;
}
.mf-score-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.mf-score-value b {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--font-size-5xl);
    color: var(--brand-green);
    line-height: 1;
    font-weight: 400;
}
.mf-score-value span {
    font-family: var(--font-mono);
    font-size: var(--font-size-2xs);
    color: var(--ink-dim);
}
.mf-band {
    background: rgba(var(--brand-green-rgb), 0.12);
    border: 1px solid rgba(var(--brand-green-rgb), 0.32);
    color: var(--brand-green-light);
    font-family: var(--font-mono);
    font-size: var(--font-size-3xs);
    font-weight: 700;
    letter-spacing: 0.10em;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
}

/* Compact responsive: stack score row on narrow viewports.
   Remapped from 520 -> 720 to fold into the shared small-phone tier
   (chrome breakpoint family 1280 / 1024 / 720). */
@media (max-width: 720px) {
    .mf-score { flex-direction: column; align-items: flex-start; }
    .mf-rubric-row { grid-template-columns: 1fr 60px 48px; gap: 8px; }
}

/* ---------- signals row (flag / thumbs, migration 181) ----------
   Deliberately recessive: small, muted, right-aligned; must not compete
   with the marking card content above it. */
.mf-signals {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: var(--font-size-xs);
}

/* Holds inline SVG icons (previously emoji glyphs), so it needs a flex box and a
   currentColor inheritance path rather than a font size. */
.mf-signal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    line-height: 1;
    color: #52514e;
    opacity: 0.45;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.mf-signal-btn svg { display: block; }

.mf-signal-btn:hover:not(:disabled) { opacity: 0.9; transform: scale(1.1); }
.mf-signal-btn:disabled { cursor: default; }
.mf-signal-btn--chosen { opacity: 1; }

.mf-signal-report {
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: #8a8a86;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mf-signal-report:hover { color: #52514e; }

.mf-signal-done { color: #8a8a86; font-style: italic; }

/* Category picker for "Report question". Replaces the trigger button in place
   rather than opening a dialog: the row is a quiet footer and a modal would give
   a throwaway action far more weight than it deserves. Wraps on narrow screens
   because four labels do not fit a phone width in one line. */
.mf-signal-picker {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

.mf-signal-cat {
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 0;
    padding: 3px 8px;
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: #52514e;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.mf-signal-cat:hover {
    border-color: rgba(0, 0, 0, 0.34);
    color: #26251f;
}

.mf-signal-cat--cancel {
    border-color: transparent;
    color: #8a8a86;
    text-decoration: underline;
    text-underline-offset: 2px;
}