/*
  Relational Cartography (rcft): ficha de uma palavra no site.
  Mesmo registo da tabela das últimas entradas: cabeçalho em maiúsculas com
  filete, linhas de rótulo e valor, sem fundo (as palavras veem-se por baixo).
  js/ui.js põe a ficha junto da palavra e desenha a linha de chamada.
*/

.w-card {
  position: fixed;
  z-index: 3;
  width: 236px;
  padding: 8px 12px 6px;
  border: 1px solid var(--line);
  font-size: var(--t-s);
  line-height: 1.8;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.w-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.w-word { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.w-close {
  flex: none;
  width: 14px;
  height: 14px;
  padding: 2px;
  margin-right: -2px;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}

.w-close svg { display: block; width: 100%; height: 100%; }
.w-close path { stroke: currentColor; stroke-width: 1.2; fill: none; }
.w-close:hover, .w-close:focus-visible { opacity: 0.6; outline: none; }

.w-row { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; }
.w-row span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.w-sub { margin-top: 8px; }

/* Linha de chamada, na mesma camada da moldura. */
#sheet .leader { stroke: #fff; stroke-width: 1; }

/* Telemóvel: a ficha ocupa o lugar da tabela (só no site; a instalação não tem tabela de leitura). */
@media (max-width: 767px) {
  :where(html:not([data-mode="install"])) .w-card {
    left: auto !important;
    top: calc(var(--m) + 34px) !important;
    right: calc(var(--m) + var(--in));
    width: 170px;
    padding: 0;
    border: 0;
    font-size: 8px;
    line-height: 1.7;
  }
  :where(html:not([data-mode="install"])).has-card .readout { visibility: hidden; }
  /* A regra do telemóvel em ui.css troca o primeiro cabeçalho por "Latest". */
  :where(html:not([data-mode="install"])) .w-card .w-head .w-word { font-size: var(--t-s); }
  :where(html:not([data-mode="install"])) .w-card .w-head .w-word::before { content: none; }
}