/* Only German word details inside student book translation. */
.german-word-popover.cz-grammar-popover {
  z-index: 1605;
  width: min(460px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(560px, calc(100dvh - 26px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ui-border, #d9e2f3);
  border-radius: 17px;
  box-shadow: 0 17px 45px rgba(21, 39, 89, .20);
  background: var(--ui-surface, #fff);
  color: var(--ui-text, #172d52);
  direction: rtl;
}
.cz-grammar-popover .german-word-popover-head {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-shrink: 0;
  padding: 13px 15px;
  border-bottom: 1px solid var(--ui-border, #dae4f6);
}
.cz-grammar-popover .german-word-popover-head strong { font-size: 17px; color: var(--ui-text, #172d52); }
.cz-grammar-popover .german-word-pos {
  font-weight: 750;
  border-radius: 16px;
  background: var(--ui-accent-soft, #e9edfc);
  color: var(--ui-accent, #4b60c1);
  padding: 5px 9px;
  font-size: 12px;
}
.cz-grammar-popover .cz-grammar-close {
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  border: 1px solid var(--ui-border, #dae4f6);
  border-radius: 10px;
  background: var(--ui-surface-2, #f4f7ff);
  color: var(--ui-text, #172d52);
  cursor: pointer;
}
.cz-grammar-popover .cz-grammar-content { overflow-y: auto; overflow-x: hidden; padding: 15px; min-height: 0; }
.cz-grammar-popover .cz-grammar-summary { display: grid; gap: 10px; margin-bottom: 14px; }
.cz-grammar-popover .cz-grammar-summary > div,
.cz-grammar-popover .cz-grammar-detail {
  display: grid;
  grid-template-columns: minmax(125px, 44%) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  line-height: 1.8;
  font-size: 13px;
}
.cz-grammar-popover .cz-grammar-summary > div { padding-bottom: 8px; border-bottom: 1px solid var(--ui-border, #e2eaf6); }
.cz-grammar-popover .cz-grammar-summary span,
.cz-grammar-popover .cz-grammar-detail dt { color: var(--ui-text-2, #586b8e); font-weight: 650; }
.cz-grammar-popover .cz-grammar-summary strong,
.cz-grammar-popover .cz-grammar-detail dd { margin: 0; color: var(--ui-text, #172d52); font-weight: 800; overflow-wrap: anywhere; }
.cz-grammar-popover .cz-grammar-section {
  background: var(--ui-surface-2, #f7f9ff);
  border: 1px solid var(--ui-border, #e2e9f7);
  border-radius: 13px;
  padding: 12px;
}
.cz-grammar-popover .cz-grammar-section h4 {
  font-size: 14px;
  font-weight: 900;
  margin: 0 0 10px;
  color: var(--ui-accent, #465dcc);
}
.cz-grammar-popover .cz-grammar-section dl { display: grid; gap: 9px; margin: 0 0 11px; }
.cz-grammar-popover .cz-grammar-detail { padding-bottom: 7px; border-bottom: 1px dashed var(--ui-border, #dae4f6); }
.cz-grammar-popover .cz-grammar-section small { color: var(--ui-text-2, #637592); line-height: 1.8; }
.cz-grammar-popover .cz-grammar-loading { color: var(--ui-accent, #4b60c1); }
.translation-page .german-hover-token { cursor: pointer; }
.translation-page .german-hover-token:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) {
  .cz-grammar-popover .cz-grammar-summary > div,
  .cz-grammar-popover .cz-grammar-detail { grid-template-columns: minmax(98px, 40%) minmax(0, 1fr); font-size: 12px; gap: 7px; }
}