@charset "UTF-8";
/* Episode vocabulary glossary — shared across all episodes.
   Source convention (stored in VideoCourseEpisode.Vocabulary):
     <h3>NAME <span class="gloss">(gloss)</span></h3>   section header
     <h4>NAME</h4>                                        sub-heading (verb infinitive)
     <table><thead>…</thead><tbody>…</tbody></table>      glossary table
     <em> in a cell                                       English translation
     <strong><u>x</u></strong> in a cell                  grammatical ending (coral)
     <u> (bare) in a cell                                 adverb emphasis (green marker)
   Approved in the brainstorming visual-companion preview. */
/* ── card chrome (rendered by WatchCourse.razor) ── */
.vocabulary-card .vocabulary-card__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  border-radius: 9px;
  background: #008e76;
  color: #fff;
  font-size: 15px;
}

.vocabulary-card .card-header {
  cursor: pointer;
}

/* ── rendered content ── */
.vocabulary-content {
  color: #33403b;
  font-size: 15px;
  line-height: 1.5;
}

.vocabulary-content > :first-child {
  margin-top: 0;
}

/* LESSICO — top-level vocabulary divider: a filled green band, above the section <h3>s */
.vocabulary-content h2 {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: #008e76;
  border-radius: 10px;
  margin: 36px 0 16px;
  padding: 11px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.vocabulary-content h2 .gloss {
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.82);
}

.vocabulary-content h3 {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #008e76;
  margin: 30px 0 12px;
  padding-bottom: 7px;
  border-bottom: 2px solid #d7ece4;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.vocabulary-content h3 .gloss {
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: #8a948f;
}

.vocabulary-content h4 {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #04aa8a;
  margin: 18px 0 8px;
}

.vocabulary-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 0 18px;
  border: 1px solid #d7ece4;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  /* content-independent column widths so every same-shape table aligns
     (e.g. all 2-col conjugation tables get a uniform 50/50 split) */
  table-layout: fixed;
}

.vocabulary-content td {
  overflow-wrap: break-word;
}

.vocabulary-content thead th {
  background: #eef8f4;
  color: #008e76;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid #d7ece4;
  vertical-align: top;
}

.vocabulary-content tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid #eef1f0;
  vertical-align: top;
  line-height: 1.4;
}

.vocabulary-content td p, .vocabulary-content th p {
  margin: 0;
}

.vocabulary-content tbody tr:last-child td {
  border-bottom: 0;
}

.vocabulary-content tbody tr:nth-child(even) td {
  background: #fafcfb;
}

.vocabulary-content tbody tr:hover td {
  background: #eef8f4;
}

.vocabulary-content td:first-child {
  color: #2f3a36;
}

.vocabulary-content em {
  font-style: italic;
  color: #7b857f;
}

/* grammatical ending: <strong><u>o</u></strong> inside a cell → coral */
.vocabulary-content td strong u,
.vocabulary-content td u strong {
  color: #ff797d;
  font-weight: 700;
  text-decoration: none;
}

/* adverb emphasis: bare <u> in a cell → green marker */
.vocabulary-content td u {
  text-decoration: none;
  color: #008e76;
  font-weight: 600;
  background: linear-gradient(transparent 62%, rgba(82, 216, 158, 0.35) 0);
}

.vocabulary-content sup {
  font-size: 0.7em;
}