/*
  German in Context — "Good to know" box, Warm Night V2
  Fixes: in night mode the global rule recolors the text but the box keeps a light background.
  Scope: .tip inside lessons, NIGHT MODE ONLY. Day mode and other boxes (.rule, .ex, .cmp, .lvl) untouched.
  Needs CSS nesting (Chrome 120+).
*/

:is(
  html[data-gic-theme="dark"],
  html[data-gic-warm-night-notify="dark"],
  html[data-theme="dark"],
  html.dark,
  html.dark-mode,
  html.night-mode,
  html.gic-dark
) body .tip{
  background:linear-gradient(135deg,#1d2b22 0%,#16241d 100%)!important;
  color:#e9e1cc!important;
  -webkit-text-fill-color:#e9e1cc!important;
  border:1px solid rgba(201,162,74,.22)!important;
  border-left:3px solid #d6b25a!important;
  border-radius:16px!important;
  box-shadow:0 6px 16px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.05) inset!important;

  /* every text node inside follows the box */
  & :is(div,p,span,small,li){
    color:#e9e1cc!important;
    -webkit-text-fill-color:#e9e1cc!important;
  }
  /* the bold title line */
  & b,
  & strong{
    color:#f6efdc!important;
    -webkit-text-fill-color:#f6efdc!important;
  }
  & a{
    color:#d6b25a!important;
    -webkit-text-fill-color:#d6b25a!important;
    text-underline-offset:3px;
  }
}

/*
  V2 addition — flashcard note box:
  <div class="box gold"><div class="note"><strong>Good to know:</strong> ...</div></div>
  (also <p class="note"> variant). In night mode the global rule turned the text light
  while the box stays cream. This keeps the cream card and makes ALL its text dark and readable.
  Background is intentionally NOT changed (it may be set inline with !important).
*/
:is(
  html[data-gic-theme="dark"],
  html[data-gic-warm-night-notify="dark"],
  html[data-theme="dark"],
  html.dark,
  html.dark-mode,
  html.night-mode,
  html.gic-dark
) body .box.gold{
  color:#3a2f14!important;

  & .note,
  & .note :is(p,span,em,i,small,li,div){
    color:#3a2f14!important;
    -webkit-text-fill-color:#3a2f14!important;
    opacity:1!important;
  }
  & .note :is(strong,b){
    color:#7a5a12!important;
    -webkit-text-fill-color:#7a5a12!important;
    font-weight:700!important;
  }
  & .note a{
    color:#7a5a12!important;
    -webkit-text-fill-color:#7a5a12!important;
    text-underline-offset:3px;
  }
}