/* ==========================================================================
   Shared practice feedback layout.

   Single source of truth: the shared visual *atoms* (key-idea callout, skill
   tags, score pill) are Reading's existing GLOBAL classes — .methodical-tip-callout,
   .methodical-section-label, .methodical-tags/.methodical-tag, .score-badge — which
   are already global in reading-practice.css and reused verbatim by Writing, so the
   look can't diverge and Reading is untouched. (Relocating those atoms into a
   neutrally-named file is a later cosmetic step.)

   This file only adds what's genuinely new/shared-layout: the two-column result
   grid, the per-criterion breakdown, the model-answer block, the strategy-tip
   callout (Reading has no separate one) and the outcome word.
   ========================================================================== */

/* SWT feedback two-column shell — reuses the shared .methodical-layout--split /
   .methodical-column / .methodical-column-divider classes (Reading's single-answer
   look: left | 1px divider | right). Scoped to #writingResult because the grid
   width is per-context; the base .methodical-* behaviours come from the globals. */
#writingResult .methodical-layout--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--border-width-default) minmax(0, 1fr);
    gap: var(--space-28);
    align-items: start;
    /* Breathing room above (result row → feedback) and below (feedback → the
       "Your history" divider), matching Reading's looser spacing. */
    margin-top: var(--space-24);
    margin-bottom: var(--space-24);
}

#writingResult .methodical-column-divider {
    display: block;
    align-self: stretch;
    background: var(--border-subtle);
}

@media (max-width: 767px) {
    #writingResult .methodical-layout--split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-16);
    }
    #writingResult .methodical-column-divider {
        display: none;
    }
}

/* ==========================================================================
   Shared ResultRow header — single source for the feedback result-row visual
   (editorial left dash + top/bottom border + outcome summary line). These are
   Reading's long-standing "result row abstraction" values lifted to neutral
   classes so Writing inherits the exact same look (not a redraw); Reading will
   converge onto these next. State is carried either by an ancestor
   (.{state}-state — Reading's #result) or by the row itself
   (.result-header-row.{state}-state — Writing).
   ========================================================================== */
.result-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-12) 0;
    padding-left: var(--space-14);
    margin-bottom: var(--space-16);
    border-left: var(--space-3) solid transparent;
    border-top: var(--border-width-default) solid var(--border-subtle);
    border-bottom: var(--border-width-default) solid var(--border-subtle);
}

.correct-state .result-header-row,
.result-header-row.correct-state { border-left-color: var(--success-text); }
.partial-state .result-header-row,
.result-header-row.partial-state { border-left-color: var(--warning-accent); }
.incorrect-state .result-header-row,
.result-header-row.incorrect-state { border-left-color: var(--danger-text); }

.result-status-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.result-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    margin: 0;
    font-size: 0.90625rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
    white-space: normal;
}

.result-summary::before { content: none; display: none; }

.result-summary .result-summary-icon {
    display: block;
    width: var(--space-22);
    height: var(--space-22);
    padding: 4px;
    border-radius: var(--radius-pill-soft);
    flex: 0 0 auto;
    overflow: visible;
}

.result-summary.correct { color: var(--success-text); }
.result-summary.correct .result-summary-icon { background: var(--success-fill); }
.result-summary.partial { color: var(--warning-accent); }
.result-summary.partial .result-summary-icon { background: var(--warning-fill); }
.result-summary.incorrect { color: var(--danger-text); }
.result-summary.incorrect .result-summary-icon { background: var(--danger-fill); }

/* Inline breakdown line under the outcome label — compact per-item summary
   (Reading: "1 correct · 1 missed"; for SWT: the scoring criteria). */
.result-inline-breakdown {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    letter-spacing: -0.005em;
}

.result-breakdown-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.result-breakdown-dot {
    width: var(--space-6);
    height: var(--space-6);
    border-radius: 50%;
    flex: 0 0 auto;
}

.result-breakdown-dot--correct { background: var(--success-text); }
.result-breakdown-dot--incorrect { background: var(--danger-text); }
.result-breakdown-dot--missed { background: var(--warning-accent); }
.result-breakdown-separator { color: var(--text-muted); }

/* Plain "Score X / Y" — grey, no pill/border (Reading's result-row score line). */
.result-score-line {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--space-4);
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.84375rem;
    font-weight: var(--font-weight-regular);
    font-variant-numeric: tabular-nums;
}

.result-score-line .score-inline-label,
.result-score-line .score-inline-value {
    color: var(--text-secondary);
    font-weight: var(--font-weight-regular);
}

.result-score-line .score-inline-value {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Shared feedback atom — Key Idea / tip callout.
   Editorial green left-accent callout (icon + bold label + text), the ONE
   source for both Reading and Writing. Canonical = Reading's result callout
   (was duplicated across 5 layout scopes; those scoped copies are removed so
   this neutral atom governs everywhere). Reused for the Strategy tip too
   (same callout, different icon + label).
   ========================================================================== */
.methodical-tip-callout {
    margin: 0;
    border: 0;
    border-left: var(--space-2) solid var(--success-text);
    border-radius: 0 var(--space-6) var(--space-6) 0;
    padding: var(--space-12) var(--space-15);
    background: var(--success-fill);
}

.methodical-tip-row {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-9);
    color: var(--success-text-dark);
    font-size: var(--font-size-0905);
    font-weight: var(--font-weight-regular);
    line-height: 1.65;
}

.methodical-tip-row .methodical-inline-icon {
    width: var(--space-16);
    height: var(--space-16);
    color: var(--success-text);
    flex: 0 0 var(--space-16);
    margin-top: var(--space-1);
}

.methodical-tip-inline-content {
    color: inherit;
    flex: 1 1 auto;
    min-width: 0;
}

.methodical-tip-label,
.methodical-tip-inline-content strong {
    color: var(--success-text);
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   Shared feedback atom — Skills section.
   "Skills" label (regular weight, muted — NOT bold; the bold came from the old
   base being 700 with the regular look locked inside per-type scopes) + pill
   tags. One source for Reading + Writing. (The .methodical-tag--quiet /
   .question-skill-tag variant used for question-list skill chips stays put.)
   ========================================================================== */
.methodical-skill-section {
    display: grid;
    gap: var(--space-6);
}

.methodical-section-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
    font-size: 0.71875rem;
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    text-transform: none;
}

.methodical-section-label .methodical-inline-icon {
    width: var(--space-10);
    height: var(--space-10);
    color: var(--text-muted);
}

.methodical-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-7);
}

.methodical-tag {
    display: inline-flex;
    align-items: center;
    line-height: 1.25;
    padding: var(--space-3) var(--space-9);
    border: 0;
    border-radius: var(--radius-pill-soft);
    background: var(--warm-gray-soft);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
}

/* ==========================================================================
   Shared feedback atom — main explanation text. One source for the feedback
   body paragraph (Reading's "Explanation"; SWT has no main-text). Canonical =
   Reading's grouped value.
   ========================================================================== */
.methodical-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--space-15);
    font-weight: var(--font-weight-regular);
    line-height: 1.7;
    letter-spacing: -0.005em;
}

/* Strategy tip now reuses the shared .methodical-tip-callout atom (route icon +
   "Strategy tip" label) — see the Key Idea atom above. The bespoke .pf-strategy-tip
   styles were removed to avoid drift. */

/* Model answer — frameless: a section title (.methodical-title) + the summary on
   the shared .methodical-text atom; no box/border. */
.pf-model-answer {
    display: grid;
    gap: var(--space-4);
}

.pf-model-answer-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* SWT "Breakdown by criteria" right column — mirrors single-answer "Why others
   are wrong" (border-bottom rows + chip + uppercase label + grey text), scoped to
   #writingResult (item style is per-type: single = rows, multi = different).
   Reuses the shared .methodical-option-* / .methodical-title atoms; the chip and
   name colour by score (full→green / partial→amber / zero→red). */
#writingResult .methodical-title {
    margin: 0 0 var(--space-12);
    color: var(--text-secondary);
    font-size: 0.71875rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#writingResult .methodical-option-list {
    display: grid;
    gap: 0;
}

#writingResult .methodical-option-item {
    display: flex;
    gap: var(--space-9);
    align-items: flex-start;
    width: 100%;
    padding: var(--space-8) 0;
    border: 0;
    border-bottom: var(--border-width-default) solid var(--border-subtle);
    border-radius: 0;
    background: transparent;
}

#writingResult .methodical-option-item:first-child { padding-top: 0; }
#writingResult .methodical-option-item:last-child { padding-bottom: 0; border-bottom: 0; }

#writingResult .methodical-option-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    height: var(--space-20);
    margin-top: var(--space-1);
    padding: 0 var(--space-6);
    border: 0;
    border-radius: var(--radius-pill-soft);
    font-size: var(--font-size-0719);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

#writingResult .methodical-option-content {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

#writingResult .methodical-option-status {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-0719);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#writingResult .methodical-option-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--space-14);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
}

#writingResult .swt-criterion--full .methodical-option-chip { background: var(--success-fill); color: var(--success-text); }
#writingResult .swt-criterion--full .methodical-option-status { color: var(--success-text); }
#writingResult .swt-criterion--partial .methodical-option-chip { background: var(--warning-fill); color: var(--warning-accent); }
#writingResult .swt-criterion--partial .methodical-option-status { color: var(--warning-accent); }
#writingResult .swt-criterion--zero .methodical-option-chip { background: var(--danger-fill); color: var(--danger-text); }
#writingResult .swt-criterion--zero .methodical-option-status { color: var(--danger-text); }

/* Criterion awaiting AI scoring (FORM_ONLY): neutral "—" chip + muted note; name
   stays readable but un-coloured, so it reads as "pending", not "scored zero". */
#writingResult .swt-criterion--awaiting .methodical-option-chip {
    background: var(--warm-gray-soft);
    color: var(--text-muted);
}
#writingResult .swt-criterion--awaiting .methodical-option-status { color: var(--text-secondary); }
#writingResult .methodical-option-text.is-awaiting {
    color: var(--text-muted);
    font-style: italic;
}

/* ==========================================================================
   FORM_ONLY (AI-unavailable) feedback — friendly "instant check" treatment.
   ========================================================================== */

/* Info-toned banner above the result row (speed, not failure). */
.pf-instant-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
    padding: var(--space-10) var(--space-12);
    border-left: var(--space-2) solid var(--accent-action);
    border-radius: 0 var(--space-6) var(--space-6) 0;
    background: var(--accent-action-soft);
}

.pf-instant-banner-icon {
    width: var(--space-16);
    height: var(--space-16);
    flex: 0 0 var(--space-16);
    margin-top: var(--space-1);
    color: var(--accent-action);
}

.pf-instant-banner-text {
    margin: 0;
    font-size: var(--font-size-0905, 0.90625rem);
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Lead-in phrase — darker than the body copy but NOT bold. */
.pf-instant-banner-label {
    color: var(--text-primary);
    font-weight: var(--font-weight-regular);
}

/* Worked-example preview banner — mirrors the instant-check banner's accent rail, with a sign-up
   CTA. Pinned above the graded feedback to mark the sample as read-only and invite registration. */
.writing-example-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8) var(--space-12);
    margin-bottom: var(--space-16);
    padding: var(--space-10) var(--space-12);
    border-left: var(--space-2) solid var(--accent-action);
    border-radius: 0 var(--space-6) var(--space-6) 0;
    background: var(--accent-action-soft);
}

/* Reused instant-check bolt (speed, not failure) — same look as .pf-instant-banner-icon. */
.writing-example-banner-icon {
    width: var(--space-16);
    height: var(--space-16);
    flex: 0 0 var(--space-16);
    color: var(--accent-action);
}

.writing-example-banner-text {
    margin: 0;
    flex: 1 1 16rem;
    font-size: var(--font-size-0905, 0.90625rem);
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Plain grey underlined text link (matches the "Sign in" affordance), not a heavy button. */
.writing-example-banner-link {
    flex: 0 0 auto;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: var(--font-size-0905, 0.90625rem);
    font-weight: var(--font-weight-regular);
    text-decoration: underline;
    text-underline-offset: var(--space-2);
    cursor: pointer;
}

.writing-example-banner-link:hover {
    color: var(--text-link-hover);
}

.writing-example-banner-link:focus-visible {
    outline: var(--border-width-strong) solid var(--accent-action-soft-border);
    outline-offset: var(--space-2);
}

/* ── Shared "free AI feedback used up" limit banner (js/shared/ai-feedback-limit-banner.js) ──────
   Section-agnostic. Neutral editorial card where the AI feedback would render + a footnote below.
   No red (the user didn't err), no green; the only accent is the sparkles icon. */
/* No card outline (we don't use hard boxes) — just a solid subtle top divider like the one
   before "Your history", then centred content, with generous space before the next section. */
.ai-limit {
    text-align: center;
    margin-top: var(--space-24);
    padding-top: var(--space-24);
    padding-bottom: var(--space-28);
    border-top: var(--border-width-default) solid var(--border-subtle);
}

.ai-limit-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-16); /* breathing room between icon / title / body / actions */
    max-width: 44rem; /* wider so it doesn't look lost on large desktops */
    margin: 0 auto;
    padding: var(--space-8) var(--space-20) var(--space-4);
}

.ai-limit-banner-icon {
    width: var(--space-40, 2.5rem);
    height: var(--space-40, 2.5rem);
    color: var(--accent-action); /* light accent — the one spot of colour */
}

/* Same weight/colour as the dashboard "Good afternoon" heading — medium, never bold. */
.ai-limit-banner-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tightest);
    color: var(--text-primary);
}

.ai-limit-banner-body {
    margin: 0;
    max-width: 42rem; /* keeps the body to ~2 lines, not 3 */
    font-size: var(--font-size-0905, 0.90625rem);
    line-height: 1.6;
    color: var(--text-secondary);
}

.ai-limit-banner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: var(--space-4);
}

/* Quiet grey underlined links (same affordance as "Sign in"), never heavy buttons. */
.ai-limit-banner-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: var(--font-size-0905, 0.90625rem);
    font-weight: var(--font-weight-regular);
    text-decoration: underline;
    text-underline-offset: var(--space-2);
    cursor: pointer;
}

.ai-limit-banner-link:hover:not(:disabled) {
    color: var(--text-link-hover);
}

.ai-limit-banner-link:disabled {
    color: var(--text-faint);
    text-decoration: none;
    cursor: default;
}

.ai-limit-banner-link:focus-visible {
    outline: var(--border-width-strong) solid var(--accent-action-soft-border);
    outline-offset: var(--space-2);
}

/* "·" separator between links — wider spacing so the two actions sit further apart. */
.ai-limit-banner-link:not(:first-child)::before {
    content: "·";
    display: inline-block;
    margin: 0 var(--space-20);
    color: var(--text-faint);
    text-decoration: none;
}

.ai-limit-footnote {
    margin: var(--space-20) auto 0; /* more space above the secondary line */
    max-width: 34rem;
    font-size: var(--font-size-085, 0.85rem);
    line-height: 1.5;
    color: var(--text-faint);
}

/* Mobile: the two links are too long to share a row, so stack them vertically and drop the
   "·" separator (inline it would dangle at the start of the wrapped line). */
@media (max-width: 767px) {
    .ai-limit-banner-actions {
        flex-direction: column;
        gap: var(--space-12);
    }

    .ai-limit-banner-link:not(:first-child)::before {
        content: none;
    }
}

/* "Form checked" result row — neutral grey dash + grey label; hourglass icon
   (scoring in progress), neutral/muted, NOT a green "correct" check. */
.result-header-row.form-only-state { border-left-color: var(--border-strong); }
.result-summary.form-checked { color: var(--text-secondary); }
.result-summary.form-checked .result-summary-icon {
    color: var(--text-muted);
    background: var(--warm-gray-soft);
}

.pf-evaluating {
    font-size: 0.875rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* === Shared feedback loading placeholder (AI evaluation in progress) ===
   One editorial card reused wherever AI feedback is computed; built by
   js/shared/practice-feedback-loading.js. Sits where the feedback will render. */
.practice-feedback-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-10);
    min-height: 168px;
    padding: var(--space-28) var(--space-20);
    border: var(--border-default-width) solid var(--border-default);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
}

.practice-feedback-loading-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2.5px solid var(--border-default);
    border-top-color: var(--accent-action);
    animation: practice-feedback-spin 0.8s linear infinite;
}

.practice-feedback-loading-title {
    /* Same treatment as the Welcome-page hero title: medium weight + ink-850 navy
       (var(--text-primary)) — never bold, never black. */
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: var(--text-hero-weight);
    line-height: var(--text-hero-line-height);
    letter-spacing: var(--text-hero-tracking);
}

.practice-feedback-loading-subtitle {
    /* Same style/colour as the Welcome-page hero message; current (smaller) size kept. */
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: var(--text-body-large-line-height);
}

@keyframes practice-feedback-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .practice-feedback-loading-spinner {
        animation-duration: 2.4s;
    }
}


/* ------------------------------------------------------------------ *
 * Spell/issue highlights (shared renderer js/shared/annotated-text.js).
 * A study aid over a reviewed answer — independent of the AI score.
 * ------------------------------------------------------------------ */
.spellmark {
    background: transparent; /* override the <mark> default yellow */
    color: inherit;
    text-decoration: underline wavy var(--danger-text);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    cursor: pointer;
    border-radius: 2px;
}

.spellmark:hover,
.spellmark:focus-visible {
    background: var(--bg-danger-subtle);
    outline: none;
}

.spellmark-popover {
    position: absolute;
    z-index: 1000;
    max-width: var(--size-spell-popover-width);
    padding: var(--space-10) var(--space-12);
    background: var(--bg-surface);
    border: var(--border-width-hairline) solid var(--border-default);
    border-radius: var(--radius-field);
    box-shadow: var(--shadow-dropdown-soft);
    font-size: var(--font-size-08125);
    line-height: var(--line-height-140);
    color: var(--text-primary);
}

/* Eyebrow — matches the app-wide eyebrow labels (BREAKDOWN BY CRITERIA, SKILLS…). */
.spellmark-popover-label {
    display: block;
    margin-bottom: var(--space-6);
    font-size: var(--font-size-072);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-eyebrow);
}

/* The flagged word — danger colour alone marks it as the error; no underline needed
   (the learner already clicked the wavy-marked word, so re-decorating here is noise). */
.spellmark-popover-word {
    display: block;
    font-weight: var(--font-weight-regular);
    color: var(--danger-text);
}

/* Corrections stacked one-per-line, separated from the word by a hairline rule. */
.spellmark-popover-list {
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: var(--space-8) 0 0;
    border-top: var(--border-width-hairline) solid var(--border-default);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.spellmark-popover-item {
    font-size: var(--font-size-090);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.spellmark-popover-empty {
    display: block;
    margin-top: var(--space-6);
    color: var(--text-muted);
}