/* view-study.css — study session (focus mode), flashcard, grading area, summary, active recall, typing, confetti. Owner: Phase 5.
   Focus mode: body[data-view="study"] hides the shell (layout-shell.css). No inline styles anywhere: state via [hidden], data-*, aria-*. */

/* ---------- Session frame ---------- */
.session-container {
    max-width: var(--reading-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.session-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
}

.session-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 0;
}

.deck-title-session {
    font-family: var(--font-ui);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Session mode badge: SRS = young/teal palette, free study = brand-soft (spec §3.8). Always text, never color-only. */
.badge-mode { flex-shrink: 0; margin-right: 0; background: var(--state-young-soft); color: var(--state-young); }
.badge-mode[data-mode="custom"] { background: var(--brand-soft); color: var(--text-brand); }
.badge-mode[data-mode="all"] { background: var(--state-new-soft); color: var(--state-new); }

.progress-container { display: flex; flex-direction: column; gap: var(--space-2); }

.progress-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
    font-size: var(--fs-sm);
    color: var(--text-2);
}

.session-counts .count.is-current { font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 3px; }
.count-new { color: var(--state-new); }
.count-learning { color: var(--state-learning); }
.count-review { color: var(--state-review); }

.progress-bar-bg {
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--surface-3);
    overflow: hidden;
}

.progress-bar-fill {
    --pct: 0;
    width: calc(var(--pct) * 1%);
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--gradient-brand);
    transition: width var(--dur-base) var(--ease-out);
}

.recall-note { text-align: center; font-size: var(--fs-sm); color: var(--text-2); }

/* ---------- Flashcard ---------- */
.card-container {
    perspective: 1200px;
    height: clamp(360px, 52vh, 460px);
    width: 100%;
    cursor: pointer;
    position: relative;
}

.flashcard {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform var(--dur-flip) var(--ease-out);
    border-radius: var(--radius-xl);
}

.flashcard.flipped { transform: rotateY(180deg); }

.card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--surface-1);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-10) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    align-items: center;
    gap: var(--space-2);
    box-shadow: var(--shadow-2);
    overflow-y: auto;
}

.card-content { width: 100%; }

.card-face:not(.back) { transform: rotateY(0deg) translateZ(1px); z-index: 2; }
.card-face.back { transform: rotateY(180deg) translateZ(1px); border-color: color-mix(in srgb, var(--text-brand) 35%, var(--border)); z-index: 1; }

/* WebKit overlap/bleed fix: only the face that is showing is visible and clickable */
.flashcard:not(.flipped) .card-face.back,
.flashcard.flipped .card-face:not(.back) { opacity: 0; pointer-events: none; }
.flashcard:not(.flipped) .card-face:not(.back),
.flashcard.flipped .card-face.back { opacity: 1; pointer-events: auto; }

/* Reduced motion: no rotation, the faces swap with a short fade (spec §3.8) */
@media (prefers-reduced-motion: reduce) {
    .flashcard, .flashcard.flipped { transform: none; transition: none; }
    .card-face, .card-face.back { transform: none; transition: opacity 150ms linear; }
}

.card-label {
    position: absolute;
    top: var(--space-4);
    font-size: var(--fs-sm); /* Vietnamese in sentence case: capitals + tracking stack the diacritics */
    font-weight: var(--fw-semibold);
    color: var(--text-2);
}

.deck-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-bottom: var(--space-2);
    padding: 0 var(--space-2);
    height: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Card content ---------- */
.word-title {
    font-family: var(--font-display);
    font-size: var(--fs-word);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--text-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    text-align: center;
    width: 100%;
    overflow-wrap: anywhere;
}

.example-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    color: var(--text-2);
    font-size: var(--fs-md);
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
}

.vietnamese-translation {
    font-family: var(--font-ui);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    background: var(--gradient-brand-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--space-3);
    text-align: center;
}

.english-definition { color: var(--text-2); font-size: var(--fs-md); text-align: center; max-width: 90%; margin: 0 auto; }

.card-section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.card-section-label.is-example { color: var(--text-brand); }
.card-section-label.is-definition { color: var(--state-young); }

.badge-leech { margin-left: var(--space-2); }

/* Pronunciation buttons: .audio-btn (44px, components-controls.css) · -sm 28 (44 on touch) · -lg 48; icons sized by classes */
.audio-btn-sm { width: 28px; height: 28px; padding: 2px; }
@media (pointer: coarse) {
    .audio-btn-sm { width: 44px; height: 44px; padding: 2px; }
}
.audio-btn-lg { width: 48px; height: 48px; margin: 0 auto; }
.audio-btn-lg svg { width: 24px; height: 24px; }
.icon { width: 20px; height: 20px; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; flex-shrink: 0; }
.icon-xs { width: 14px; height: 14px; flex-shrink: 0; }
.audio-btn .icon, .audio-btn .icon-sm, .audio-btn .icon-xs { width: 60%; height: 60%; }

/* ---------- Typing answer ---------- */
.typing-box-container { margin-top: var(--space-4); width: 100%; }
.typing-audio-hint { text-align: center; margin-bottom: var(--space-3); }
.typing-audio-label { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--space-2); }
.typing-ipa { font-family: var(--font-ipa); color: var(--text-brand); margin-top: var(--space-2); }
.typing-row { display: flex; gap: var(--space-2); }
.typing-input { flex: 1; font-size: var(--fs-md); padding: 10px 14px; border: 1px solid var(--border-strong); }

.answer-feedback { margin-top: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.answer-feedback[data-result="correct"], .recall-feedback[data-result="correct"] { color: var(--success); }
.answer-feedback[data-result="wrong"], .recall-feedback[data-result="wrong"] { color: var(--warn); } /* calm: a miss is information, not an alarm */
.answer-feedback[data-result="empty"] { color: var(--text-2); }
.fb-mark { margin-right: var(--space-1); font-weight: var(--fw-bold); }

/* Per-letter typing feedback: never colour alone. wrong = underline, missing = dashed box, extra = strike-through. */
.diff-line {
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    letter-spacing: 0.08em;
    color: var(--text-1);
    overflow-wrap: anywhere;
}
.diff-wrong { color: var(--warn); font-weight: var(--fw-bold); text-decoration: underline wavy; text-underline-offset: 4px; }
.diff-missing { color: var(--text-2); border-bottom: 2px dashed var(--text-2); }
.diff-extra { color: var(--warn); text-decoration: line-through; }
.diff-reason { margin-top: var(--space-1); color: var(--text-2); font-weight: var(--fw-regular); }
.typing-reveal { margin-top: var(--space-3); }
.typing-input[data-result="correct"], .search-input[data-result="correct"] { border-color: var(--success); box-shadow: 0 0 0 2px var(--success-soft); }
.typing-input[data-result="wrong"], .search-input[data-result="wrong"] { border-color: var(--warn); box-shadow: 0 0 0 2px var(--warn-soft); }

/* ---------- Action area ---------- */
.action-area { display: flex; flex-direction: column; gap: var(--space-3); min-height: 88px; justify-content: center; }
.reveal-btn { width: 100%; min-height: var(--control-h-lg); }
.reveal-btn .kbd, .btn-lg .kbd { margin-left: var(--space-1); }

.exposure-actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.exposure-note { color: var(--text-2); font-size: var(--fs-sm); }

.srs-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }

.btn-grade { position: relative; min-height: 72px; }
.btn-grade .grade-key { position: absolute; top: var(--space-1); right: var(--space-1); }
.btn-grade .grade-interval { font-size: var(--fs-sm); opacity: 1; color: var(--text-2); font-variant-numeric: tabular-nums; }
.btn-grade:active:not([aria-disabled="true"]) { transform: scale(0.97); }

/* Gated rating (typed result limits the honest answers): kept focusable for its tooltip; never opacity on text (contrast) */
.btn-grade[aria-disabled="true"] {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-3);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.btn-grade[aria-disabled="true"] .grade-interval { color: var(--text-3); }

.gate-note, .rubric-note { font-size: var(--fs-sm); color: var(--text-2); text-align: center; }
.gate-note { font-weight: var(--fw-semibold); }

.custom-study-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }

.card-tools { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); }

@media (max-width: 479px) {
    .srs-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .session-topbar { grid-template-columns: auto auto; }
    .session-title { grid-column: 1 / -1; order: 3; }
    .card-face { padding: var(--space-10) var(--space-4) var(--space-4); }
}

/* ---------- Summary ---------- */
.summary-container {
    max-width: var(--reading-max);
    margin: var(--space-8) auto;
    text-align: center;
    background: var(--surface-1);
    border: 1px solid var(--border);
    padding: var(--space-10) var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2);
}

.summary-icon {
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-4);
    color: var(--success);
    animation: scaleUp var(--dur-slow) var(--ease-spring) both;
}

@keyframes scaleUp {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.summary-container h2 { font-family: var(--font-ui); font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.summary-container h2:focus { outline: none; }
.summary-desc { color: var(--text-2); margin-bottom: var(--space-6); }

.summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }

.summary-stat, .stat-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: var(--space-4) var(--space-2);
    border-radius: var(--radius-md);
}

.summary-stat-val, .stat-val {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.summary-stat-label, .stat-label { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--space-1); }
.summary-daily { color: var(--text-2); margin-bottom: var(--space-4); }

/* Summary highlights: "Cần chú ý" / "Lên cấp" */
.summary-list { margin-bottom: var(--space-5); padding: var(--space-4); text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.summary-list-title { margin-bottom: var(--space-3); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-1); }
.summary-words { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.summary-list .btn { margin-top: var(--space-1); }
.summary-word { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 32px; }
.summary-word-text { font-family: var(--font-display); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.summary-word-more { justify-content: flex-start; color: var(--text-2); font-size: var(--fs-sm); }
.summary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }

.recall-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }

@media (max-width: 599px) { .recall-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Confetti (end of day only; skipped entirely under reduced motion by xp-system.js) ---------- */
.confetti-layer { position: fixed; inset: 0; z-index: var(--z-confetti); pointer-events: none; overflow: hidden; }

.confetti-piece {
    --x: 50; --size: 8px; --dur: 1.2s; --delay: 0s; --rot: 0deg;
    position: absolute;
    top: -20px;
    left: calc(var(--x) * 1vw);
    width: var(--size);
    height: calc(var(--size) * 1.8);
    border-radius: 2px;
    opacity: 0.95;
    transform: rotate(var(--rot));
    animation: confettiFall var(--dur) ease-out var(--delay) forwards;
}

.confetti-piece.is-round { border-radius: 50%; height: var(--size); }
.confetti-piece.c-1 { background: var(--brand-1); }
.confetti-piece.c-2 { background: var(--brand-2); }
.confetti-piece.c-3 { background: var(--brand-3); }
.confetti-piece.c-4 { background: var(--state-new); }
.confetti-piece.c-5 { background: var(--success); }
.confetti-piece.c-6 { background: var(--warn); }

@keyframes confettiFall {
    0% { transform: translateY(0) rotate(var(--rot)); opacity: 1; }
    100% { transform: translateY(105vh) rotate(calc(var(--rot) + 540deg)); opacity: 0; }
}

/* ---------- Active Recall ---------- */
.recall-front, .recall-exposure { width: 100%; text-align: center; }

.recall-meta { display: flex; gap: var(--space-3); align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-3); font-size: var(--fs-sm); color: var(--text-2); }
.recall-mode-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-brand); }
.recall-prompt { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin: var(--space-2) 0; color: var(--text-1); overflow-wrap: anywhere; }
.recall-hint { color: var(--state-learning); margin-top: var(--space-2); font-size: var(--fs-md); }
.recall-feedback { margin-top: var(--space-2); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.recall-fallback { margin-top: var(--space-3); color: var(--text-2); font-style: italic; }
.recall-typed { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.recall-typed .search-input { flex: 1; }
.recall-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); justify-content: center; flex-wrap: wrap; }
.recall-recorder-controls { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-3); flex-wrap: wrap; }
.recall-override { margin-top: var(--space-2); }
.recall-answer { margin-bottom: var(--space-3); }
.recall-answer-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--state-young); }
.recall-answer-text { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }

.recall-badge { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-bold); border: 1px solid var(--text-brand); color: var(--text-brand); }
.recall-level-receptive { border-color: var(--state-young); color: var(--state-young); }
.recall-level-recall { border-color: var(--info); color: var(--info); }
.recall-level-produce { border-color: var(--state-learning); color: var(--state-learning); }
.recall-level-automatic { border-color: var(--success); color: var(--success); }

.recall-promoted { color: var(--success); font-weight: var(--fw-bold); }
.recall-demoted { color: var(--text-2); font-weight: var(--fw-semibold); } /* a level-down is a hint to practise, not a penalty: neutral colour */

.recall-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--space-2); }
/* Quiet, filled tags: they inform, they are not buttons (no border that mimics a control). */
.recall-chip { font-size: var(--fs-xs); line-height: 1.4; padding: 2px var(--space-2); border-radius: var(--radius-full); white-space: nowrap; }
.recall-chip.on { color: var(--text-brand); background: var(--brand-soft); }

/* ---------- Shortcuts dialog content ---------- */
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.shortcut-groups { display: grid; gap: var(--space-4); }
.shortcut-group-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); margin-bottom: var(--space-2); }

/* ---------- First-run coach marks (native <dialog>) ---------- */
.coach-progress { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--space-1); }
.coach-text { margin: var(--space-3) 0; color: var(--text-1); line-height: var(--lh-body); }
.coach-levels { margin: 0 0 var(--space-4) var(--space-5); color: var(--text-1); line-height: var(--lh-body); }
.coach-levels li + li { margin-top: var(--space-1); }
.coach-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.coach-body .dialog-title:focus { outline: none; }
.shortcut-table { width: 100%; border-collapse: collapse; }
.shortcut-table th, .shortcut-table td { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.shortcut-table th { width: 38%; font-weight: var(--fw-regular); padding-right: var(--space-3); }
.shortcut-table .kbd { display: inline-flex; }
.shortcut-note { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--text-2); }
.shortcut-note a { color: var(--text-brand); }