/* Generated by W4 homepage-debloat run 2026-08-21. Study-app CSS extracted from inline <style> in resources/views/anki/index.blade.php. */

    .flip-card { perspective: 1000px; height: 100%; }
    .flip-card-inner { transition: transform 0.4s; transform-style: preserve-3d; position: relative; min-height: 320px; max-height: 70vh; height: 100%; } /* FIX_STUDY_CARD_FLEX_HEIGHT_2026_07_14: was height:70vh unconditionally on >=640px widths, could exceed available flex space and squeeze the header/mode-pills rows instead of the card. Now fills whatever height #study-tap-area actually computes. */
    @media (min-width: 640px) { .flip-card-inner { min-height: 420px; } }
    @media (max-width: 639px) { .flip-card-inner { height: 48vh; max-height: 48vh; min-height: 200px; } } /* FIX_MOBILE_STUDY_NAV_2026_07_12 */
    .flip-card-inner.flipped { transform: rotateY(180deg); }
    .flip-card-front, .flip-card-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow-y: auto; }
    .flip-card-front { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .flip-card-back { transform: rotateY(180deg); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    /* FIX_STUDY_CARD_FLEX_HEIGHT_2026_07_14: header + mode-pills never shrink; card area is the flexible one and scrolls internally if content still doesn't fit */
    .study-header-row, .study-mode-pills { flex-shrink: 0; }
    #study-tap-area { min-height: 0; overflow-y: auto; }
    .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; }
    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; background: #f0f0f0; } }
    #topic-list::-webkit-scrollbar { width: 4px; }
    #topic-list::-webkit-scrollbar-track { background: transparent; }
    #topic-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
    /* Focus mode */
    @keyframes focusReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    .focus-answer-reveal { animation: focusReveal 0.22s ease-out both; }
    /* Quiz animations */
    @keyframes quizCorrect { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
    @keyframes quizWrong { 0%,100% { transform: translateX(0); } 15% { transform: translateX(-6px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
    @keyframes quizFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes quizFlash { 0% { opacity: 0.45; } 100% { opacity: 0; } }
    @keyframes scorePop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
    @keyframes scoreFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    .quiz-correct-anim { animation: quizCorrect 0.35s ease-out; }
    .quiz-wrong-anim { animation: quizWrong 0.4s ease-out; }
    .quiz-fadein { animation: quizFadeIn 0.3s ease-out both; }
    .quiz-flash { position: absolute; inset: 0; pointer-events: none; border-radius: 12px; animation: quizFlash 0.5s ease-out both; }
    .score-pop { animation: scorePop 0.5s ease-out both; }
    .score-fade-up { animation: scoreFadeUp 0.4s ease-out both; }
    @media (prefers-reduced-motion: reduce) {
        .quiz-correct-anim, .quiz-wrong-anim, .quiz-fadein, .quiz-flash, .score-pop, .score-fade-up { animation: none !important; }
    }
    /* Mobile bottom nav */
    .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: var(--color-lca-cream, #FBF4E6); border-top: 2px solid var(--color-lca-ink, #241D15); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 8px rgba(36,29,21,.1); }
    @media (max-width: 767px) { .mobile-bottom-nav:not(.nav-hidden) { display: flex; } }
    .mobile-bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-lca-muted-2, #6B5E4C); background: transparent; border: none; transition: color 0.15s; cursor: pointer; }
    .mobile-bottom-nav button.active { color: var(--color-lca-terra-dark, #9C3F29); }
    .mobile-bottom-nav button svg { width: 22px; height: 22px; }
    /* Onboarding spotlight */
    .onboarding-overlay { position: fixed; inset: 0; background: rgba(36,29,21,.55); z-index: 9998; transition: opacity 0.2s; }
    .onboarding-highlight { position: relative; z-index: 9999; box-shadow: 0 0 0 4px rgba(193,84,58,.6), 0 0 0 9999px rgba(36,29,21,.45); border-radius: 12px; }
    .onboarding-tooltip { position: fixed; z-index: 10000; background: var(--color-lca-cream, #FBF4E6); border: 2.5px solid var(--color-lca-ink, #241D15); border-radius: 14px; padding: 16px 20px; box-shadow: 10px 14px 0 rgba(36,29,21,0.14); max-width: 300px; width: calc(100vw - 32px); }
    .onboarding-tooltip .step-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
    .onboarding-tooltip .step-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-lca-border, #E4D9BE); transition: background 0.2s; }
    .onboarding-tooltip .step-dot.active { background: var(--color-lca-terra, #C1543A); }
    /* FIX_STUDY_CODE_MARKDOWN_2026_07_30: fenced code blocks + inline code in study/browse cards */
    .lca-code-block { background: #2B2119; color: #F3E7D2; border: 1px solid rgba(193,84,58,.38); border-radius: 10px; padding: 0.7rem 0.85rem; margin: 0.55rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; font-size: 0.8rem; line-height: 1.5; text-align: left; }
    .lca-code-block code.lca-code { display: block; white-space: pre; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background: none; padding: 0; margin: 0; color: inherit; font-size: inherit; }
    .lca-inline-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(193,84,58,.12); color: var(--color-lca-terra-dark, #9C3F29); padding: .08em .35em; border-radius: 5px; font-size: .88em; word-break: break-word; }
    @media (max-width: 640px) { .lca-code-block { font-size: 0.72rem; padding: 0.6rem 0.65rem; } }
    /* Card preview modal */
    .preview-card { background: var(--color-lca-cream-alt, #F1E4C8); border: 1.5px solid var(--color-lca-border, #E4D9BE); border-radius: 12px; padding: 14px 16px; }
    .preview-card .preview-q { font-weight: 700; color: var(--color-lca-ink, #241D15); margin-bottom: 6px; font-size: 14px; }
    .preview-card .preview-a { color: var(--color-lca-muted, #4A4034); font-size: 13px; border-top: 1px dashed var(--color-lca-border, #E4D9BE); padding-top: 6px; }
    [data-theme="dark"] .preview-card .preview-q { color: #f1f5f9; }
    [data-theme="dark"] .preview-card .preview-a { color: #94a3b8; border-color: #334155; }
    /* Study time estimate */
    .study-time { font-size: 10px; color: #9ca3af; white-space: nowrap; }
    /* Safe area bottom padding for mobile nav */
    @supports (padding-bottom: env(safe-area-inset-bottom)) { body { padding-bottom: env(safe-area-inset-bottom); } }
    @media (max-width: 767px) { #sticky-study-cta { bottom: 56px !important; } }
    @media (max-width: 767px) { body { padding-bottom: 60px; } }
    /* Code block styling for cards with code samples */
    pre { margin: 0.75em 0 0.5em; padding: 0; }
    pre code { display: block; background: #1e293b; color: #e2e8f0; padding: 0.85em 1em; border-radius: 0.5em; font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.85em; line-height: 1.55; overflow-x: auto; white-space: pre; -webkit-overflow-scrolling: touch; }
    code:not(pre code) { background: var(--color-lca-tag, #E4E8DA); color: var(--color-lca-ink, #241D15); padding: 0.15em 0.35em; border-radius: 0.25em; font-size: 0.9em; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }