/**
 * 时间标志词 · 紧凑多列流式（非一词一行）
 */

body.grammar-handout-page .time-lexicon {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem 0.55rem;
  margin: 0.65rem 0 1rem;
  padding: 0;
  background: transparent;
  border: none;
}

body.grammar-handout-page .time-lexicon .tw {
  position: relative;
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  display: inline-block;
  box-sizing: border-box;
  min-height: 2rem;
  margin: 0;
  padding: 0.38rem 0.55rem 0.38rem 0.68rem;
  border: 1px solid #b8c9d6;
  border-left: 4px solid #0d9488;
  border-radius: 8px;
  background: #f0f7fa;
  font-family: var(--lesson-font-sans, system-ui, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.38;
  color: #0f5c55;
  white-space: normal;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body.grammar-handout-page .time-lexicon .tw::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg, #0d9488, #4a7c9b, #7eb8d4);
  pointer-events: none;
}

body.grammar-handout-page .time-lexicon--now .tw {
  border-left-color: #4a90d9;
  background: #f3f8fd;
  color: #1a4a6b;
}

body.grammar-handout-page .time-lexicon--now .tw::before {
  background: linear-gradient(180deg, #4a90d9, #7eb8d4);
}

body.grammar-handout-page .time-lexicon--trend .tw {
  border-left-color: #0d9488;
  background: #f0faf8;
}

body.grammar-handout-page .time-lexicon--now .tw.hot,
body.grammar-handout-page .time-lexicon--trend .tw.hot {
  border-left-color: #1565c0;
  background: #e8f4fc;
  color: #1565c0;
}

body.grammar-handout-page .time-lexicon--now .tw.hot::before,
body.grammar-handout-page .time-lexicon--trend .tw.hot::before {
  background: linear-gradient(180deg, #1565c0, #4a90d9);
}

/* 带中文注释的略宽，仍参与流式排列（不占满整行） */
body.grammar-handout-page .time-lexicon .tw.tw-note-inline {
  flex: 1 1 14rem;
  max-width: 100%;
}

body.grammar-handout-page .time-lexicon .tw-note {
  flex: 1 1 100%;
  width: 100%;
  display: block;
  margin: 0.1rem 0 0;
  padding: 0.45rem 0.55rem 0.5rem;
  border: 1px dashed #b8c9d6;
  border-radius: 8px;
  background: #f7fafc;
  font-size: 0.76rem;
  line-height: 1.55;
  color: #64748b;
  font-weight: 400;
}

body.grammar-handout-page .time-lexicon .tw-note strong {
  color: #0f766e;
  font-weight: 700;
}

@media print {
  body.grammar-handout-page .time-lexicon {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 1.6mm 2mm !important;
    margin: 2mm 0 2.5mm !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  body.grammar-handout-page .time-lexicon .tw {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 47% !important;
    display: inline-block !important;
    position: relative !important;
    min-height: 5mm !important;
    margin: 0 !important;
    padding: 1.2mm 1.5mm 1.2mm 2.8mm !important;
    border: 0.4pt solid #a8b8c8 !important;
    border-left: 2.5pt solid #0d9488 !important;
    border-radius: 1.6mm !important;
    background: #eef4f8 !important;
    font-size: 8.5pt !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #0f3d3a !important;
    white-space: normal !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
  }

  body.grammar-handout-page .time-lexicon .tw::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2.5pt !important;
    background: #0d9488 !important;
    border-radius: 1.6mm 0 0 1.6mm !important;
  }

  body.grammar-handout-page .time-lexicon--now .tw {
    border-left-color: #4a7c9b !important;
    background: #f2f7fb !important;
    color: #1a3d5c !important;
  }

  body.grammar-handout-page .time-lexicon--now .tw::before {
    background: #4a7c9b !important;
  }

  body.grammar-handout-page .time-lexicon--trend .tw {
    background: #edf7f5 !important;
  }

  body.grammar-handout-page .time-lexicon--now .tw.hot,
  body.grammar-handout-page .time-lexicon--trend .tw.hot {
    border-left-color: #2a5f9e !important;
    background: #e3eff8 !important;
    color: #1a4a7a !important;
  }

  body.grammar-handout-page .time-lexicon--now .tw.hot::before,
  body.grammar-handout-page .time-lexicon--trend .tw.hot::before {
    background: #2a5f9e !important;
  }

  body.grammar-handout-page .time-lexicon .tw.tw-note-inline {
    flex: 1 1 42% !important;
    max-width: 100% !important;
  }

  body.grammar-handout-page .time-lexicon .tw-note {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-top: 1mm !important;
    padding: 1.2mm 1.6mm !important;
    border: 0.4pt dashed #a8b8c8 !important;
    border-radius: 1.6mm !important;
    background: #f5f8fa !important;
    font-size: 8.1pt !important;
    line-height: 1.42 !important;
    color: #444 !important;
  }
}