.story-translation { margin-block: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); }
.story-translation p { font-size: 1.05rem; line-height: 1.9; }
.story-translation h3 { font-size: 1.1rem; }
.gloss-word { cursor: help; text-decoration: underline dotted var(--mint-deep); text-underline-offset: .25em; border-radius: 3px; }
.gloss-word:hover,.gloss-word:focus-visible { background: var(--mint); outline: 2px solid var(--mint-deep); outline-offset: 2px; }
.word-translation-popover { position: fixed; z-index: 1000; max-width: min(340px,calc(100vw - 16px)); padding: 12px 18px; border: 1px solid var(--mint-deep); border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 4px 16px #17363a33; font-size: 1.1rem; line-height: 1.8; overflow-wrap: anywhere; }
.word-inline-meaning { flex-basis: 100%; display: block; font-size: .95rem; line-height: 1.6; text-align: center; color: var(--muted); }
.workshop-form-example .word-inline-meaning { grid-column: 1 / -1; }
.sentence-list li > .sentence-translation { display: block; min-width: 0; grid-column: 1 / -1; grid-row: 2; margin-top: 2px; padding-top: 7px; border-top: 1px dashed #d7e2dc; color: var(--muted); font-family: Arial,sans-serif; font-size: .78rem; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
.sentence-list li { flex-wrap: wrap; }
.gloss-help { color: var(--muted); font-size: .9rem !important; }
.vocabulary-controls { display: grid; grid-template-columns: auto minmax(100px,1fr); gap: 12px; align-items: center; margin-block: 24px; }
.vocabulary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.vocabulary-card { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); min-width: 0; }
.vocabulary-card h2 { font-size: 1.8rem; }
.vocabulary-card img { float: inline-end; object-fit: contain; }
.vocabulary-card label { display: block; margin-block: 16px 8px; line-height: 1.8; }
#vocabulary p { line-height: 1.9; }
#vocabulary :is(input,select) { width: 100%; min-width: 0; min-height: 46px; padding: 10px; font: inherit; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--paper); }
#vocabulary :is(button,summary) { min-height: 44px; padding: 10px 14px; font: inherit; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); color: var(--ink); }
#vocabulary :is(input,select,button,summary):focus-visible { outline: 3px solid var(--peach-deep); outline-offset: 3px; }
.vocabulary-card details { margin-top: 16px; }
.bilingual-question { display: block; line-height: 1.9; margin-block: 4px 12px; font-family: Vazirmatn,Tahoma,sans-serif; }
.word-translation-popover[hidden], .vocabulary-card[hidden], .story-translation[hidden] { display: none !important; }
@media(max-width:900px) { .vocabulary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .vocabulary-grid { grid-template-columns: 1fr; } .vocabulary-controls { grid-template-columns: 1fr; } }