/* The real note type CSS from addon/tarkib/notetypes.py, every selector scoped
   to .ankiscreen so the preview matches Anki without affecting the rest of the page.
   Regenerate with site/_tools/make-preview.py after changing the note types. */

/* ---- main card ---- */
.ankiscreen{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  font-size: 20px; text-align: center; line-height: 1.6; padding: 20px; max-width: 640px; margin: 0 auto;
}
.ankiscreen .level-chip{ display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1px; padding: 2px 8px; border-radius: 999px; color: #fff; vertical-align: middle; position: relative; top: -2px; }
.ankiscreen .lvl-a1{ background: #16a34a; }
.ankiscreen .lvl-a2{ background: #22c55e; }
.ankiscreen .lvl-b1{ background: #ca8a04; }
.ankiscreen .lvl-b2{ background: #ea580c; }
.ankiscreen .lvl-c1{ background: #dc2626; }
.ankiscreen .lvl-native{ background: #6d28d9; }
.ankiscreen .card-translation{ text-align: center; font-size: 22px; margin-bottom: 8px; font-weight: 500; }
.ankiscreen .morph{ text-align: center; font-size: 14px; color: #aaa; margin: 0 0 16px 0; }
.ankiscreen .morph .g-der{ color: #3b82f6; font-weight: 700; }
.ankiscreen .morph .g-die{ color: #ef4444; font-weight: 700; }
.ankiscreen .morph .g-das{ color: #22c55e; font-weight: 700; }
.ankiscreen .card-image{ text-align: center; margin: 0 0 20px 0; line-height: 0; }
.ankiscreen .card-image img{ max-width: 320px; max-height: 240px; width: auto; height: auto; border-radius: 14px; }
.ankiscreen .section{ margin-bottom: 24px; text-align: left; }
.ankiscreen .section-label{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #888; margin-bottom: 10px; padding-left: 3px; }
.ankiscreen .sentence{ padding: 12px 14px; border-radius: 10px; margin-bottom: 8px; font-size: 16px; line-height: 1.5; text-align: left; }
.ankiscreen .sentence .emoji{ font-size: 20px; margin-right: 10px; }
.ankiscreen .sentence.casual{ background: rgba(255, 217, 61, 0.08); border-left: 3px solid #ffd93d; }
.ankiscreen .sentence.formal{ background: rgba(160, 196, 255, 0.08); border-left: 3px solid #a0c4ff; }
.ankiscreen .patterns-box{ margin: 22px 0; padding: 14px 16px; background: linear-gradient(135deg, #2d3561 0%, #3d4a8a 100%); border-radius: 12px; border: 1px solid rgba(138, 164, 255, 0.25); text-align: left; }
.ankiscreen .patterns-label{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #a8b4ff; margin-bottom: 10px; }
.ankiscreen .pattern-badge{ display: inline-block; background: rgba(255, 255, 255, 0.14); color: #fff; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 14px; margin: 3px 6px 3px 0; border: 1px solid rgba(255, 255, 255, 0.15); }
.ankiscreen .explanation{ padding: 14px 16px; background: rgba(255, 186, 120, 0.08); border-left: 3px solid #ffba78; border-radius: 10px; font-size: 14px; line-height: 1.6; margin-top: 20px; margin-bottom: 32px; font-style: italic; text-align: left; }
.ankiscreen .arabic .sentence{ direction: rtl; text-align: right; border-left: none; border-right: 3px solid; }
.ankiscreen .arabic .sentence.casual{ border-right-color: #ffd93d; border-left: none; }
.ankiscreen .arabic .sentence.formal{ border-right-color: #a0c4ff; border-left: none; }
.ankiscreen .arabic .sentence .emoji{ margin-right: 0; margin-left: 10px; }
.ankiscreen .arabic .section-label{ direction: ltr; text-align: left; }
.ankiscreen .secondary-word{ display: flex; justify-content: center; align-items: center; gap: 10px; padding: 14px; background: rgba(46, 160, 100, 0.1); border-radius: 10px; font-size: 22px; font-weight: 700; color: #2d8f5e; margin: 20px 0; direction: rtl; }
.ankiscreen .nightMode .secondary-word, .ankiscreen .night_mode .secondary-word{ color: #64dca0; }
.ankiscreen .register-hint{ background: linear-gradient(90deg, rgba(248,113,113,0.10), rgba(250,204,21,0.10)); border-left: 3px solid #f87171; border-radius: 8px; padding: 10px 14px; margin: 8px 0; font-size: 13px; line-height: 1.55; }
.ankiscreen .register-hint .formal-mark{ color: #f87171; font-weight: 600; }
.ankiscreen .register-hint .arrow{ color: #8a94b3; margin: 0 6px; }
.ankiscreen .register-hint .casual-alt{ color: #facc15; font-weight: 600; }
.ankiscreen .register-hint .alt-list{ color: #e2e6f0; font-style: italic; }



/* ---- cloze card ---- */
.ankiscreen{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; padding: 20px; background-color: #0a0e1a; color: #e4e4e7; }
.ankiscreen .cloze-card{ max-width: 640px; margin: 0 auto; padding: 24px; background: #171923; border-radius: 12px; border: 1px solid rgba(99, 102, 241, 0.15); }
.ankiscreen .cloze-image img{ max-width: 260px; max-height: 200px; border-radius: 8px; margin: 0 auto 16px auto; display: block; }
.ankiscreen .cloze-sentence{ font-size: 22px; line-height: 1.6; margin: 16px 0; color: #e4e4e7; font-weight: 500; }
.ankiscreen .cloze{ color: #818cf8; font-weight: 700; background: rgba(99, 102, 241, 0.15); padding: 2px 10px; border-radius: 4px; border-bottom: 2px solid #6366f1; font-style: normal; }
.ankiscreen .cloze-revealed .cloze{ color: #34d399; background: rgba(16, 185, 129, 0.12); border-bottom-color: #10b981; }
.ankiscreen .cloze-translation{ font-size: 15px; color: #a1a1aa; margin-top: 16px; padding: 12px; background: rgba(255,255,255,0.03); border-radius: 6px; line-height: 1.5; }
.ankiscreen .cloze-grammar{ font-size: 13px; color: #fbbf24; margin-top: 12px; padding: 10px 12px; background: rgba(251,191,36,0.08); border-radius: 6px; border-left: 3px solid #fbbf24; font-weight: 500; text-align: left; }
.ankiscreen .cloze-audio{ margin-top: 14px; }
.ankiscreen .card:not(.nightMode){ background-color: #f8fafc; color: #1e293b; }
.ankiscreen .card:not(.nightMode) .cloze-card{ background: #fff; border-color: rgba(99,102,241,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.ankiscreen .card:not(.nightMode) .cloze-sentence{ color: #1e293b; }
.ankiscreen .card:not(.nightMode) .cloze{ color: #4f46e5; background: rgba(99,102,241,0.08); border-bottom-color: #4f46e5; }
.ankiscreen .card:not(.nightMode) .cloze-revealed .cloze{ color: #059669; background: rgba(16,185,129,0.08); border-bottom-color: #059669; }
.ankiscreen .card:not(.nightMode) .cloze-translation{ color: #64748b; background: rgba(0,0,0,0.03); }
.ankiscreen .cloze-type-wrapper{ margin: 14px auto 4px auto; text-align: center; }
.ankiscreen .cloze-type-wrapper input[type="text"]{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 17px; padding: 10px 14px; border: 2px solid rgba(99,102,241,0.4); background: rgba(99,102,241,0.08); color: #e4e4e7; border-radius: 8px; min-width: 260px; max-width: 80%; text-align: center; }
.ankiscreen .cloze-type-wrapper input[type="text"]:focus{ outline: none; border-color: #818cf8; background: rgba(99,102,241,0.14); }
.ankiscreen .cloze-type-wrapper input[type="text"]{ -webkit-user-select: text; user-select: text; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ankiscreen .keyboard-hint{ font-size: 12px; color: #9ca3af; margin-top: 8px; line-height: 1.4; }
.ankiscreen .card:not(.nightMode) .cloze-type-wrapper input[type="text"]{ color: #1e293b; border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.04); }
.ankiscreen .check-row{ margin-top: 10px; }
.ankiscreen .check-btn{ padding: 8px 18px; background: #6366f1; color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
.ankiscreen .check-btn:hover{ background: #818cf8; }
.ankiscreen .check-feedback{ margin-top: 10px; min-height: 20px; font-size: 14px; padding: 8px 12px; border-radius: 6px; text-align: center; }
.ankiscreen .check-feedback:empty{ display: none; }
.ankiscreen .check-feedback.good{ color: #34d399; background: rgba(16,185,129,0.1); }
.ankiscreen .check-feedback.bad{ color: #f87171; background: rgba(248,113,113,0.1); }
.ankiscreen .check-feedback.warn{ color: #fbbf24; background: rgba(251,191,36,0.1); }
.ankiscreen .char-diff{ font-family: ui-monospace, Menlo, monospace; font-size: 17px; letter-spacing: 1px; margin-left: 6px; }
.ankiscreen .char-diff .ok{ color: #34d399; }
.ankiscreen .char-diff .bad{ color: #f87171; text-decoration: line-through; }
.ankiscreen .char-diff .missing{ color: #fbbf24; }
.ankiscreen .char-diff .extra{ color: #f87171; font-style: italic; }