/* --------------------------------------------------------------- telegram
 * templates/telegram_connect.html (tg-*, WEB-KOM-02). Moved unchanged from
 * corum.css (K-47); loaded after ui/holding.css, and no rule between its
 * old and new place reaches the Telegram page. */
@layer ui {
/* Daily in Telegram (templates/telegram_connect.html): the portal's own
   furniture - porcelain card, red step numerals like the KPI rule, the QR
   code framed as a figure, one quiet status line. */
.tg-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6, 2rem);
  align-items: start; max-width: 60rem; padding: var(--s-6, 2rem);
  background: var(--porcelain); border: 1px solid var(--mist);
}
.tg-card--done { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.tg-card__text { margin: var(--s-3) 0 0; }
.tg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.tg-step { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.tg-step__no {
  font-size: var(--t-figure); line-height: 1; font-weight: 300; color: var(--corum);
  border-bottom: 2px solid var(--corum); padding-bottom: .25rem; text-align: center;
}
.tg-step__title { display: block; font-size: var(--t-h3); color: var(--ink); }
.tg-step__hint { display: block; font-size: var(--t-small); color: var(--graphite); margin-top: var(--s-1); }
.tg-qr { margin: 0; text-align: center; }
.tg-qr__code { background: var(--paper); border: 1px solid var(--mist); padding: var(--s-3); }
/* prf-ignore PRF-WEB-11: Grösse des QR-Codes, ein Bildmass zum Scannen, kein Abstand */
.tg-qr__code svg { display: block; width: 190px; height: 190px; }
.tg-qr figcaption { font-size: var(--t-micro); color: var(--graphite); margin-top: var(--s-2); }
/* «Verbunden» is a tag (ui/tag.html, WEB-KOM-12): the word alone, no
   check mark before it (WEB-MIK-08). */
/* The wait for Telegram is a lamp at rest (ui/lamp.css, WEB-KOM-13). */
.tg-wait { display: flex; margin: var(--s-4) 0 var(--s-2); color: var(--graphite); }
@media (max-width: 720px) {
  .tg-card { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); }
  .tg-qr { display: none; }
}
}  /* @layer ui */