/* ══════════════════════════════════════════════════════════════════════
   pojecia.css — słowniczek panelu (pojecia.js, partia 2 planu uproszczenia)
   Podkreślenie kropkowane pod pojęciem, jeden wspólny dymek i tabela
   ekranu „Pojęcia”. Tokeny wyłącznie z paleta.css.
   ══════════════════════════════════════════════════════════════════════ */
.poj{cursor:help;text-decoration:underline dotted;text-decoration-color:var(--t3);text-decoration-thickness:1px;text-underline-offset:3px;border-radius:2px}
.poj:hover{text-decoration-color:var(--gold-d)}
.poj:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px}
.poj-dymek{position:fixed;z-index:200;max-width:min(320px,calc(100vw - 16px));padding:10px 12px;border-radius:var(--r-kontrolka);
  background:var(--ink);color:var(--paper);font-family:var(--f);font-size:var(--fs-1);font-weight:400;line-height:1.45;letter-spacing:0;
  text-transform:none;text-align:left;white-space:normal;box-shadow:var(--cien-menu);pointer-events:none}
.poj-dymek[hidden]{display:none}
.poj-dymek b{display:block;margin-bottom:2px;font-weight:600;color:var(--gold-l)}

.poj-tab{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
.poj-tab th,.poj-tab td{padding:12px 14px;text-align:left;vertical-align:top;border-top:var(--bw) solid var(--line)}
.poj-tab thead th{border-top:0;font-size:var(--fs-0);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.poj-tab tbody th{width:22%;font-weight:600;color:var(--t1)}
.poj-tab td{color:var(--t2)}
.poj-tab .poj-gdzie{width:24%;font-size:var(--fs-1)}
.poj-tab .poj-gdzie a{color:var(--gold-d);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:720px){
  .poj-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .poj-tab,.poj-tab tbody,.poj-tab tr,.poj-tab th,.poj-tab td{display:block;width:auto}
  .poj-tab tbody th{width:auto;padding:14px 0 2px;border-top:var(--bw) solid var(--line)}
  .poj-tab tbody tr:first-child th{border-top:0}
  .poj-tab td{padding:0 0 4px;border-top:0}
  .poj-tab .poj-gdzie{width:auto;padding-bottom:12px}
}