/*
 * grammatik.css — the marking colours usual in the Unterstufe, layered on trainers/lib/trainer.css.
 *
 * The hues are matched by eye, not sampled: what matters is that a child who knows them from
 * school recognises them. EDIT COLOURS HERE AND NOWHERE ELSE — one closed table per system.
 *
 * Two facts of that convention that shape this file:
 *   - All Objekte share ONE colour (green); only the label tells O4 from O3 from O2. So a
 *     painted unit always carries its label as a tag (trainer.css), and a question that
 *     asks for O3 against O4 is genuinely about the Fall, not about the colour.
 *   - Satzglieder and Wortarten are two systems that reuse hues (Prädikat and Verb are
 *     both red, Subjekt and Nomen both dark blue). That matches school usage and is harmless:
 *     no screen shows both systems at once.
 */

:root {
  /* Satzglieder */
  --gr-p:   #c62828;  --gr-p-bg:   #fdecea;   /* Prädikat — red                      */
  --gr-s:   #3949ab;  --gr-s-bg:   #e8eaf6;   /* Subjekt — dark blue                 */
  --gr-o:   #2e7d32;  --gr-o-bg:   #e8f5e9;   /* Objekt (O4/O3/O2) — green           */
  --gr-po:  #d86f00;  --gr-po-bg:  #fff3e0;   /* Präpositionalobjekt — orange        */
  --gr-ab:  #7c7a12;  --gr-ab-bg:  #f7f7dc;   /* Adverbialbestimmung — olive         */
  --gr-gn:  #5c6bc0;  --gr-gn-bg:  #eef0fb;   /* Gleichsetzungsnominativ — steel blue,
                                                 beside the Subjekt's dark blue       */

  /* Wortarten — used from phase 2 on */
  --gr-verb:  #c62828;  --gr-verb-bg:  #fdecea;
  --gr-nomen: #3949ab;  --gr-nomen-bg: #e8eaf6;
  --gr-adj:   #43a047;  --gr-adj-bg:   #edf7ec;
  --gr-art:   #5f7f70;  --gr-art-bg:   #eef3f0;   /* grey-green */
  --gr-pro:   #4f7fb8;  --gr-pro-bg:   #eaf1f9;   /* light steel blue */
  --gr-adv:   #bf4a2a;  --gr-adv-bg:   #fbece7;   /* brick */
  --gr-praep: #d9822b;  --gr-praep-bg: #fdf1e4;   /* light orange */
  --gr-konj:  #a88600;  --gr-konj-bg:  #fdf8dc;   /* yellow (text darkened to read) */
}

/* A badge and a painted unit share one class, so they share one look: a chip,
   a tinted fill with a coloured frame and coloured text. */
.gr-P  { color: var(--gr-p);  border-color: var(--gr-p)  !important; background: var(--gr-p-bg); }
.gr-S  { color: var(--gr-s);  border-color: var(--gr-s)  !important; background: var(--gr-s-bg); }
.gr-O  { color: var(--gr-o);  border-color: var(--gr-o)  !important; background: var(--gr-o-bg); }
.gr-PO { color: var(--gr-po); border-color: var(--gr-po) !important; background: var(--gr-po-bg); }
.gr-AB { color: var(--gr-ab); border-color: var(--gr-ab) !important; background: var(--gr-ab-bg); }
.gr-GN { color: var(--gr-gn); border-color: var(--gr-gn) !important; background: var(--gr-gn-bg); }

/* The painted unit keeps the sentence's text colour for readability; only frame, fill and
   tag take the badge colour. */
.mt-unit.is-painted { color: var(--css-text); }
.mt-unit.is-painted.gr-P::before  { color: var(--gr-p); }
.mt-unit.is-painted.gr-S::before  { color: var(--gr-s); }
.mt-unit.is-painted.gr-O::before  { color: var(--gr-o); }
.mt-unit.is-painted.gr-PO::before { color: var(--gr-po); }
.mt-unit.is-painted.gr-AB::before { color: var(--gr-ab); }
.mt-unit.is-painted.gr-GN::before { color: var(--gr-gn); }

/* --- The static Satzbild shown in solutions and in choice questions --- */

.gr-sentence {
  font-size: 1.15rem;
  line-height: 2.5;
  text-align: left;
}
.gr-chip {
  position: relative;
  display: inline;
  padding: .12em .35em;
  border: 2px solid var(--css-border-strong);
  border-radius: var(--css-radius-md);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: var(--css-text);
}
.gr-chip[data-tag]::before {
  content: attr(data-tag);
  position: absolute;
  top: -1.05em; left: .3em;
  font-size: .6rem; font-weight: 700; line-height: 1.2;
  padding: 0 .3em;
  border-radius: 3px;
  background: var(--css-surface);
  border: 1px solid currentColor;
}
.gr-chip.gr-P[data-tag]::before  { color: var(--gr-p); }
.gr-chip.gr-S[data-tag]::before  { color: var(--gr-s); }
.gr-chip.gr-O[data-tag]::before  { color: var(--gr-o); }
.gr-chip.gr-PO[data-tag]::before { color: var(--gr-po); }
.gr-chip.gr-AB[data-tag]::before { color: var(--gr-ab); }
.gr-chip.gr-GN[data-tag]::before { color: var(--gr-gn); }
.gr-chip.gr-P, .gr-chip.gr-S, .gr-chip.gr-O, .gr-chip.gr-PO, .gr-chip.gr-AB, .gr-chip.gr-GN { color: var(--css-text); }

/* „nicht" belongs to no Satzglied, so it gets no frame and no label — it stands between
   the Satzglieder unframed. Muted, so that the
   missing frame reads as deliberate rather than as a gap. */
.gr-neg {
  display: inline;
  padding: .12em .2em;
  color: var(--css-text-muted, #6b7280);
  font-style: italic;
}

/* The one Satzglied a choice question asks about. */
.gr-focus {
  padding: .1em .3em;
  border-radius: var(--css-radius-sm);
  background: var(--mt-accent-soft);
  box-shadow: inset 0 -3px 0 var(--mt-accent);
  font-weight: 600;
}

/* Attribut marking as usual in school: Bezugswort solid underline,
   Attribut dotted underline. */
.gr-bezug { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gr-attr  { text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.gr-probe { display: block; margin-top: .35em; }
.gr-probe b { font-weight: 600; }
.gr-why { display: block; margin-top: .35em; font-style: italic; }

/* --- Wortarten as badge / unit / solution classes --- */
.gr-W-N    { color: var(--gr-nomen); border-color: var(--gr-nomen) !important; background: var(--gr-nomen-bg); }
.gr-W-V    { color: var(--gr-verb);  border-color: var(--gr-verb)  !important; background: var(--gr-verb-bg); }
.gr-W-Adj  { color: var(--gr-adj);   border-color: var(--gr-adj)   !important; background: var(--gr-adj-bg); }
.gr-W-Art  { color: var(--gr-art);   border-color: var(--gr-art)   !important; background: var(--gr-art-bg); }
.gr-W-Pro  { color: var(--gr-pro);   border-color: var(--gr-pro)   !important; background: var(--gr-pro-bg); }
.gr-W-Adv  { color: var(--gr-adv);   border-color: var(--gr-adv)   !important; background: var(--gr-adv-bg); }
.gr-W-Praep{ color: var(--gr-praep); border-color: var(--gr-praep) !important; background: var(--gr-praep-bg); }
.gr-W-Konj { color: var(--gr-konj);  border-color: var(--gr-konj)  !important; background: var(--gr-konj-bg); }

/* --- Satzbau. School usage marks Haupt- and Gliedsatz with brackets, not colours;
       these two are ours, chosen to stay clear of the Satzglied and Wortart hues. --- */
:root { --gr-hs: #37474f; --gr-hs-bg: #eceff1; --gr-gs: #00838f; --gr-gs-bg: #e0f7fa; }
.gr-HS { color: var(--gr-hs); border-color: var(--gr-hs) !important; background: var(--gr-hs-bg); }
.gr-GS { color: var(--gr-gs); border-color: var(--gr-gs) !important; background: var(--gr-gs-bg); }
/* Attributsatz (AS) — ours, an amber clear of HS slate, GS teal and IG violet. */
:root { --gr-as: #a15c00; --gr-as-bg: #fff4e0; }
.gr-AS { color: var(--gr-as); border-color: var(--gr-as) !important; background: var(--gr-as-bg); }
/* Infinitivgruppe — ours too, a violet clear of HS slate and GS teal. */
:root { --gr-ig: #7b1fa2; --gr-ig-bg: #f3e5f5; }
.gr-IG { color: var(--gr-ig); border-color: var(--gr-ig) !important; background: var(--gr-ig-bg); }

/* --- Wortbildung. The Wortstamm in a rose tint and underlines
       the rest; the other four hues are ours. --- */
:root {
  --gr-wb-v: #1565c0; --gr-wb-v-bg: #e3f2fd;   /* Vorsilbe */
  --gr-wb-s: #ad1457; --gr-wb-s-bg: #fce4ec;   /* Wortstamm — rose */
  --gr-wb-n: #00796b; --gr-wb-n-bg: #e0f2f1;   /* Nachsilbe */
  --gr-wb-e: #6d4c41; --gr-wb-e-bg: #efebe9;   /* Endung */
}
.gr-WB-V { color: var(--gr-wb-v); border-color: var(--gr-wb-v) !important; background: var(--gr-wb-v-bg); }
.gr-WB-S { color: var(--gr-wb-s); border-color: var(--gr-wb-s) !important; background: var(--gr-wb-s-bg); }
.gr-WB-N { color: var(--gr-wb-n); border-color: var(--gr-wb-n) !important; background: var(--gr-wb-n-bg); }
.gr-WB-E { color: var(--gr-wb-e); border-color: var(--gr-wb-e) !important; background: var(--gr-wb-e-bg); }
.gr-WB-B { color: var(--gr-wb-v); border-color: var(--gr-wb-v) !important; background: var(--gr-wb-v-bg); }
.gr-WB-G { color: var(--gr-wb-s); border-color: var(--gr-wb-s) !important; background: var(--gr-wb-s-bg); }

/* Tags on painted units and chips take the badge colour; the word itself stays readable. */
[class*="gr-W-"].mt-unit.is-painted, [class*="gr-WB-"].mt-unit.is-painted,
.gr-HS.mt-unit.is-painted, .gr-GS.mt-unit.is-painted, .gr-AS.mt-unit.is-painted, .gr-IG.mt-unit.is-painted { color: var(--css-text); }
.mt-unit.is-painted.gr-W-N::before, .gr-chip.gr-W-N::before { color: var(--gr-nomen); }
.mt-unit.is-painted.gr-W-V::before, .gr-chip.gr-W-V::before { color: var(--gr-verb); }
.mt-unit.is-painted.gr-W-Adj::before, .gr-chip.gr-W-Adj::before { color: var(--gr-adj); }
.mt-unit.is-painted.gr-W-Art::before, .gr-chip.gr-W-Art::before { color: var(--gr-art); }
.mt-unit.is-painted.gr-W-Pro::before, .gr-chip.gr-W-Pro::before { color: var(--gr-pro); }
.mt-unit.is-painted.gr-W-Adv::before, .gr-chip.gr-W-Adv::before { color: var(--gr-adv); }
.mt-unit.is-painted.gr-W-Praep::before, .gr-chip.gr-W-Praep::before { color: var(--gr-praep); }
.mt-unit.is-painted.gr-W-Konj::before, .gr-chip.gr-W-Konj::before { color: var(--gr-konj); }
.mt-unit.is-painted.gr-HS::before, .gr-chip.gr-HS::before { color: var(--gr-hs); }
.mt-unit.is-painted.gr-GS::before, .gr-chip.gr-GS::before { color: var(--gr-gs); }
.mt-unit.is-painted.gr-IG::before, .gr-chip.gr-IG::before { color: var(--gr-ig); }
.mt-unit.is-painted.gr-AS::before, .gr-chip.gr-AS::before { color: var(--gr-as); }
.mt-unit.is-painted.gr-WB-V::before, .gr-chip.gr-WB-V::before { color: var(--gr-wb-v); }
.mt-unit.is-painted.gr-WB-S::before, .gr-chip.gr-WB-S::before { color: var(--gr-wb-s); }
.mt-unit.is-painted.gr-WB-N::before, .gr-chip.gr-WB-N::before { color: var(--gr-wb-n); }
.mt-unit.is-painted.gr-WB-E::before, .gr-chip.gr-WB-E::before { color: var(--gr-wb-e); }
.mt-unit.is-painted.gr-WB-B::before, .gr-chip.gr-WB-B::before { color: var(--gr-wb-v); }
.mt-unit.is-painted.gr-WB-G::before, .gr-chip.gr-WB-G::before { color: var(--gr-wb-s); }
.gr-chip[class*="gr-W"], .gr-chip.gr-HS, .gr-chip.gr-GS, .gr-chip.gr-AS, .gr-chip.gr-IG { color: var(--css-text); }

/* A single word coloured by Wortart, in solutions. */
.gr-wmark {
  position: relative;
  padding: .08em .3em;
  border: 2px solid transparent;
  border-radius: var(--css-radius-sm);
}
.gr-wmark[data-tag]::before {
  content: attr(data-tag);
  position: absolute; top: -1.05em; left: .2em;
  font-size: .58rem; font-weight: 700; line-height: 1.2;
  padding: 0 .25em; border-radius: 3px;
  background: var(--css-surface); border: 1px solid currentColor;
}
.gr-wmark { color: var(--css-text) !important; }
.gr-wmark.gr-W-N::before { color: var(--gr-nomen); } .gr-wmark.gr-W-V::before { color: var(--gr-verb); }
.gr-wmark.gr-W-Adj::before { color: var(--gr-adj); } .gr-wmark.gr-W-Art::before { color: var(--gr-art); }
.gr-wmark.gr-W-Pro::before { color: var(--gr-pro); } .gr-wmark.gr-W-Adv::before { color: var(--gr-adv); }
.gr-wmark.gr-W-Praep::before { color: var(--gr-praep); } .gr-wmark.gr-W-Konj::before { color: var(--gr-konj); }
.gr-wmark.gr-S::before { color: var(--gr-s); }

.gr-sentence--word { text-align: center; font-size: 1.5rem; }
.gr-sentence--word .gr-chip { border-radius: 0; margin: 0; }
.gr-sentence--quote { font-style: italic; line-height: 1.6; }

/* --- Typed answers on the Grammatik pages are German WORDS -------------------
   The maths engine upper-cases both the input and its field label, which is right
   for a Roman numeral (MCMLXXXIV) and wrong for „Äpfel" or „am tiefsten". These two
   overrides live here, so the maths pages keep their behaviour. */
.mt-input--word { text-transform: none; }
.mt-field__label { text-transform: none; letter-spacing: normal; font-size: .85rem; }