/* Kit de telas: o desenho de Conexões (cartão com tabela, página de detalhe
   com "Configurações", barra de salvar) feito uma vez, para as outras
   listagens (Disparos, Fluxos, Quadros, Templates, Listas) usarem igual.
   Só layout e tipografia -- cada controle é do Tucano (tuc-btn, tuc-input,
   tuc-table, tuc-badge, tuc-switch...) e o tema vem dos tokens de app.css. */

/* ---------- Cartão ---------- */
.k-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.k-stack { display: flex; flex-direction: column; gap: var(--s-16); }
.k-page { display: flex; flex-direction: column; gap: var(--s-16); width: 100%; min-width: 0; }
.k-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: var(--s-16) var(--s-24) var(--s-16); }
.k-sub { margin-top: var(--s-4); }
.k-count { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); background: var(--canvas); border-radius: var(--r-xs); padding: var(--s-4) var(--s-8); }

/* ---------- Tabela dentro do cartão ---------- */
.k-card .tuc-table-wrap { border: 0; border-radius: 0; }
.k-table th { font-size: var(--fs-xs); }
.k-table td { font-size: var(--fs-md); color: var(--ink); }
.k-table .tuc-table__user { gap: var(--s-12); }
.k-table .tuc-table__user > span:last-child { min-width: 0; }
.k-name { font-weight: 600; color: var(--ink); }
.k-table .tuc-table__sub { font-size: var(--fs-xs); }
.k-table tr.k-rowlink { position: relative; cursor: pointer; }
.k-table tr.k-rowlink:hover td { background: var(--brand-wash); }
/* Link esticado: a linha inteira abre o item, e o nome continua sendo um
   <a> de verdade (teclado, abrir em outra aba, leitor de tela). */
.k-table a.k-stretch { color: inherit; text-decoration: none; }
.k-table a.k-stretch::after { content: ""; position: absolute; inset: 0; }
.k-table .k-chev { width: 36px; color: var(--faint); text-align: right; }
/* Uma ação da linha (ex.: "Duplicar" nos disparos): fica acima do link
   esticado, então o clique nela não abre o item. */
.k-table .k-act-col { width: 44px; text-align: right; }
.k-table td.k-act-col { position: relative; z-index: 1; }
.k-table .k-chev svg { width: 16px; height: 16px; }
.k-table .is-muted { color: var(--muted); }
.k-empty { padding: var(--s-32) var(--s-24) var(--s-32); text-align: center; color: var(--muted); font-size: var(--fs-md); }

/* ---------- Adicionar canal ---------- */
.k-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-16); padding: 0 var(--s-24) var(--s-24); }
.k-chan { display: flex; flex-direction: column; gap: var(--s-16); padding: var(--s-16); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.k-chan:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); color: inherit; }
.k-chan-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); }
.k-chan-desc { margin-top: var(--s-4); }
.k-chan-go { margin-top: auto; display: inline-flex; align-items: center; gap: var(--s-8); font-size: var(--fs-sm); font-weight: 600; color: var(--brand); }
.k-chan-go svg { width: 14px; height: 14px; }

/* ---------- Página de detalhe ---------- */
.k-entity { display: flex; align-items: center; gap: var(--s-16); padding: var(--s-16) var(--s-24); flex-wrap: wrap; }
.k-avatar { position: relative; flex: none; display: inline-flex; }
.k-avatar .avatar-xl { width: 56px; height: 56px; font-size: var(--fs-lg); }
.k-avatar > .n-chip { width: 56px; height: 56px; border-radius: var(--r-md); }
.k-avatar > .n-chip > svg { width: 24px; height: 24px; }
.k-entity-main { flex: 1; min-width: 200px; }
.k-entity-name { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.k-entity-name h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.k-meta { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; margin-top: var(--s-4); }

.k-entity-actions { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }

/* Linha de configuração: o que é (e a ajuda) à esquerda, o controle à direita. */
.k-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); padding: var(--s-16) var(--s-24); border-top: 1px solid var(--line); }
.k-row-text { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; flex: 1 1 280px; max-width: 460px; }
.k-row-control { flex: 1 1 320px; min-width: 0; max-width: 460px; display: flex; flex-direction: column; gap: var(--s-8); }
.k-row-control.is-end { align-items: flex-end; flex: 0 0 auto; max-width: none; }
.k-row.is-stack { flex-direction: column; align-items: stretch; gap: var(--s-12); }
.k-row.is-stack .k-row-text, .k-row.is-stack .k-row-control { max-width: none; flex: none; }
.k-row.is-first { border-top: 0; padding-top: var(--s-4); }
.k-row-control .tuc-input, .k-row-control select { width: 100%; }
.k-row-control .field, .k-row-control p.field { margin: 0; }
.k-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); }
/* Três campos curtos numa linha (ex.: o que, onde, quantos). */
.k-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-12); }
@media (max-width: 640px) { .k-pair, .k-trio { grid-template-columns: 1fr; } }
.k-copy { display: flex; gap: var(--s-8); }
.k-copy .tuc-input { flex: 1; min-width: 0; }

/* Opção com rótulo e descrição (rádio/caixa), uma abaixo da outra. */
.k-opts { display: flex; flex-direction: column; gap: var(--s-8); }
.k-opt { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-12) var(--s-16); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.k-opt:hover { border-color: var(--line-strong); }
.k-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-wash); }
.k-opt input { margin: 0; flex: none; }
.k-opt .n-chip { flex: none; }
.k-opt-text { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.k-opt-text b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.k-opt-text span { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-base); }
/* Uma opção que não dá para escolher agora (conta inativa). */
.k-opt.is-disabled { cursor: not-allowed; opacity: .55; }
.k-opt.is-disabled:hover { border-color: var(--line); }
/* Muitas opções curtas (conexões, listas): em colunas, uma só no celular. */
.k-opts.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.k-opts > [hidden] { display: none; }

/* Excluir: linha de perigo, sem repetir o aviso (o modal é a proteção). */
.k-danger { display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); padding: var(--s-16) var(--s-24); flex-wrap: wrap; }
.k-danger .k-row-label { color: var(--ink); }
.k-danger .tuc-btn, .k-danger-btn { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }

/* Barra "alterações não salvas": aparece na primeira mudança do formulário. */
.k-savebar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: var(--s-24); padding: var(--s-8) var(--s-8) var(--s-8) var(--s-16); border-radius: var(--r-md); background: var(--ink-invert); color: var(--ink-invert-fg); box-shadow: var(--shadow-lg); font-size: var(--fs-md); max-width: calc(100vw - 24px); }
.k-savebar[hidden] { display: none; }
.k-savebar-actions { display: flex; gap: var(--s-8); }
.k-savebar .tuc-btn { background: transparent; border-color: transparent; color: inherit; opacity: .8; }
.k-savebar .tuc-btn:hover { opacity: 1; }
.k-savebar .tuc-btn.is-save { background: var(--surface); color: var(--ink); opacity: 1; }
@media (max-width: 640px) { .k-savebar { left: 12px; right: 12px; transform: none; justify-content: space-between; gap: var(--s-12); } }

@media (max-width: 640px) { .k-hide-sm { display: none; } }

/* A tabela dentro do cartão alinha com o título do cartão (22px). */
.k-table th:first-child, .k-table td:first-child { padding-left: var(--s-24); }
.k-table th:last-child, .k-table td:last-child { padding-right: var(--s-24); }

/* ---------- Assistente por etapas (conectar um canal) ----------
   O trilho de etapas, o cartão da etapa e o rodapé Voltar/Continuar. As
   etapas de uma página ficam todas no HTML e kit.js mostra uma por vez. */
.k-steps { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.k-step { display: flex; align-items: center; gap: var(--s-8); flex: 1 1 0; min-width: 0; color: var(--faint); font-size: var(--fs-md); font-weight: 600; }
.k-step:last-child { flex: 0 0 auto; }
.k-step-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); background: var(--surface); }
.k-step-dot svg { width: 14px; height: 14px; stroke-width: 2.4; }
.k-step-label { white-space: nowrap; }
.k-step-line { flex: 1 1 24px; height: 1px; background: var(--line); margin: 0 var(--s-8); min-width: 16px; }
.k-step.is-current { color: var(--ink); font-weight: 600; }
.k-step.is-current .k-step-dot { background: var(--tuc-accent); border-color: var(--tuc-accent); color: var(--tuc-accent-fg); box-shadow: var(--ring); }
.k-step.is-done { color: var(--ink); }
.k-step.is-done .k-step-dot { background: var(--tuc-accent); border-color: var(--tuc-accent); color: var(--tuc-accent-fg); }
.k-step.is-done .k-step-line { background: var(--tuc-accent); }
@media (max-width: 720px) { .k-step-label { display: none; } .k-step.is-current .k-step-label { display: inline; } }

.k-wiz[hidden] { display: none; }
.k-wiz-head { padding: var(--s-24) var(--s-32) 0; }
.k-wiz-eyebrow { font-size: var(--fs-xs); font-weight: 600; color: var(--brand); }
.k-wiz-head h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin-top: var(--s-8); line-height: var(--lh-tight); }
.k-wiz-head p { font-size: var(--fs-md); color: var(--muted); margin-top: var(--s-8); line-height: var(--lh-base); max-width: 62ch; }
.k-wiz-body { padding: var(--s-24) var(--s-32) var(--s-24); display: flex; flex-direction: column; gap: var(--s-16); }
.k-wiz-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: var(--s-16) var(--s-32); border-top: 1px solid var(--line); }
.k-wiz-foot .k-wiz-side { display: flex; gap: var(--s-8); }
@media (max-width: 640px) { .k-wiz-head, .k-wiz-body, .k-wiz-foot { padding-left: var(--s-16); padding-right: var(--s-16); } }

/* Lista numerada de instruções. */
.k-howto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-16); counter-reset: howto; }
.k-howto > li { display: flex; gap: var(--s-16); align-items: flex-start; counter-increment: howto; }
.k-howto > li::before { content: counter(howto); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-wash); color: var(--brand-ink); font-size: var(--fs-xs); font-weight: 700; margin-top: 1px; }
.k-howto-text { display: flex; flex-direction: column; gap: var(--s-8); min-width: 0; font-size: var(--fs-md); color: var(--ink); line-height: var(--lh-base); }
.k-howto-text > span:not(:first-child) { font-size: var(--fs-sm); color: var(--muted); }
/* O texto ocupa a linha: um campo de copiar dentro dele vai até o fim. */
.k-howto > li > .k-howto-text { flex: 1; }
.k-howto-actions { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.k-code { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm); background: var(--canvas); border-radius: var(--r-sm); padding: var(--s-8) var(--s-8); color: var(--ink); }
.k-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-32); align-items: start; }
@media (max-width: 900px) { .k-split { grid-template-columns: 1fr; } }

/* A conversa de exemplo com o BotFather. */
.k-chat { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.k-chat-head { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-12) var(--s-16); border-bottom: 1px solid var(--line); }
.k-chat-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--ch-telegram); color: var(--ink-invert-fg); font-size: var(--fs-xs); font-weight: 700; }
.k-chat-who b { display: block; font-size: var(--fs-md); color: var(--ink); line-height: var(--lh-tight); }
.k-chat-who span { font-size: var(--fs-xs); color: var(--muted); }
.k-chat-body { display: flex; flex-direction: column; gap: var(--s-8); padding: var(--s-16); background: var(--canvas); }
.k-bubble { max-width: 86%; padding: var(--s-8) var(--s-12); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: var(--lh-base); background: var(--surface); color: var(--ink); }
.k-bubble.is-me { align-self: flex-end; background: #E3F7D6; color: #1B2B12; }
[data-theme="dark"] .k-bubble.is-me { background: #25402A; color: #E5F5DA; }
.k-bubble-token { display: block; margin-top: var(--s-8); padding: var(--s-8) var(--s-8); border: 1px solid var(--brand); border-radius: var(--r-sm); background: var(--brand-wash); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); word-break: break-all; }
.k-bubble-hint { display: block; margin-top: var(--s-8); font-size: var(--fs-xs); font-weight: 600; color: var(--brand); }

/* Resultado de uma conferência (token válido, erro). */
.k-check { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-12) var(--s-16); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-md); }
.k-check[hidden] { display: none; }
.k-check.is-ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); background: var(--ok-wash); }
.k-check.is-error { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); color: var(--danger); }
.k-check b { display: block; color: var(--ink); font-weight: 600; }
.k-check small { font-size: var(--fs-xs); color: var(--muted); }
.k-check-ok { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-8); color: var(--ok-ink); font-weight: 600; font-size: var(--fs-sm); }
.k-check-ok svg { width: 16px; height: 16px; stroke-width: 2.4; }
.k-paste { display: flex; gap: var(--s-8); }
.k-paste .tuc-input { flex: 1; min-width: 0; }

/* Lista de requisitos (marcar tudo para seguir). */
.k-checks { display: flex; flex-direction: column; gap: var(--s-8); }

/* Provedores prontos do SMTP. */
.k-presets { display: flex; gap: var(--s-8); flex-wrap: wrap; }

/* Página "Pronto". */
.k-done { text-align: center; padding: var(--s-32) var(--s-32) var(--s-8); }
.k-done .k-done-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ok-wash); color: var(--ok); margin-bottom: var(--s-16); }
.k-done .k-done-icon svg { width: 26px; height: 26px; stroke-width: 2.4; }
.k-next { display: flex; flex-direction: column; gap: var(--s-8); }
.k-next a { display: flex; align-items: center; gap: var(--s-16); padding: var(--s-16) var(--s-16); border: 1px solid var(--line); border-radius: var(--r-md); color: inherit; text-decoration: none; }
.k-next a:hover { border-color: var(--line-strong); }
.k-next .n-chip { flex: none; }
.k-next b { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.k-next span.k-next-text span { font-size: var(--fs-sm); color: var(--muted); }
.k-qr { display: flex; flex-direction: column; align-items: center; gap: var(--s-12); padding: var(--s-8) 0; }
.k-qr img { border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; }

/* ---------- Barra de filtros e busca de uma listagem ---------- */
.k-filters { display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; }
.k-filters .tuc-btn-group { flex: none; max-width: 100%; overflow-x: auto; }
.k-filters .tuc-btn { gap: var(--s-8); font-size: var(--fs-md); }
.k-filter-n { font-size: var(--fs-xs); font-weight: 600; opacity: .6; }
.k-filters .tuc-btn:has(input:checked) .k-filter-n { opacity: .85; }
.k-search { width: 320px; max-width: 100%; margin-left: auto; }
@media (max-width: 720px) { .k-search { width: 100%; margin-left: 0; } }

/* ---------- Andamento e números ---------- */
.k-progress { height: 6px; border-radius: var(--r-full); background: var(--canvas); overflow: hidden; }
.k-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .3s; }
.k-progress.is-sm { height: 4px; margin-top: var(--s-8); }
.k-progress.is-danger > span { background: var(--danger); }
.k-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-12); }
.k-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-16) var(--s-16); display: flex; flex-direction: column; gap: var(--s-4); }
.k-stat b { font-size: var(--fs-2xl); font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.k-stat span { font-size: var(--fs-sm); color: var(--muted); }
.k-stat.is-ok b { color: var(--ok); }
.k-stat.is-danger b { color: var(--danger); }
.k-progress-card { padding: var(--s-16) var(--s-24); display: flex; flex-direction: column; gap: var(--s-8); }
.k-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-12); }
.k-progress-top span { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.k-result { display: flex; flex-direction: column; min-width: 140px; }
.k-result .is-danger { color: var(--danger); font-size: var(--fs-xs); }

/* O "não tem nada aqui" dentro de um cartão: só o ícone e o texto, sem a
   moldura tracejada (o cartão já é a moldura). */
.k-card > .empty-hero { border: 0; border-radius: 0; background: transparent; min-height: 0; padding: var(--s-32) var(--s-24) 48px; }

/* O assistente é um cartão só: o trilho no alto, a etapa embaixo. */
.k-wizcard { overflow: visible; }
.k-wiz-rail { padding: var(--s-16) var(--s-32); border-bottom: 1px solid var(--line); }
.k-wiz { display: block; }
.k-wiz[hidden] { display: none; }
.k-wiz-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-16); flex-wrap: wrap; }
.k-wiz-help a { font-weight: 600; }
.k-wiz-head { padding: var(--s-24) var(--s-32) 0; }
.k-howto-text { font-size: var(--fs-lg); }
.k-howto-text > span:not(:first-child) { font-size: var(--fs-md); }
@media (max-width: 640px) { .k-wiz-rail { padding: var(--s-16) var(--s-16); } }

/* Sem os botões de filtro, a busca fica à esquerda. */
.k-filters > .k-search:first-child { margin-left: 0; }
.k-tags { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }

/* A chave "Ativo" de uma linha: acima do link que estica pela linha, para
   mexer nela não abrir o item. */
.k-switch-col { width: 90px; text-align: right; }
.k-table td.k-switch-col { position: relative; z-index: 1; }

/* No celular a tabela vira lista: sem cabeçalho, cada linha um bloco com a
   primeira coluna (o nome) em cima e as outras lado a lado embaixo, em vez
   de colunas cortadas que pedem rolagem para o lado. Vale para toda
   listagem feita com .k-table, sem nada por tela. */
@media (max-width: 640px) {
  .k-table thead { display: none; }
  .k-table, .k-table tbody { display: block; }
  .k-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-12); padding: var(--s-12) var(--s-16); border-top: 1px solid var(--line); }
  .k-table tr:first-child { border-top: 0; }
  .k-table td { display: block; padding: 0 !important; border: 0; background: none; font-size: var(--fs-sm); }
  .k-table td:first-child { flex: 1 1 100%; min-width: 0; font-size: var(--fs-md); }
  .k-table td.k-chev { display: none; }
  .k-table td.k-switch-col, .k-table td.k-act-col { margin-left: auto; }
  .k-table tr.k-rowlink:hover td { background: none; }
  .k-card .tuc-table-wrap { overflow: visible; }
}
.k-switch { display: inline-flex; margin: 0; vertical-align: middle; } /* sem isto o formulário senta na linha do texto e o interruptor fica ~4px acima do centro da linha */

/* "Como usar...": acordeão do Tucano num cartão. O espaço do texto fica em
   .k-help-body (dentro do que o Tucano anima), nunca no próprio conteúdo
   animado -- padding ali impede a altura de fechar em zero e trava a
   animação. */
.k-help .tuc-accordion__item { border-bottom: 0; }
.k-help .tuc-accordion__trigger, .k-help > details > summary { padding: var(--s-16) var(--s-16); gap: var(--s-12); justify-content: flex-start; }
.k-help .tuc-accordion__arrow { margin-left: auto; }
.k-help .help-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--ok-wash); color: var(--ok); display: flex; align-items: center; justify-content: center; }
.k-help .help-icon svg { width: 17px; height: 17px; }
.k-help-text { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; flex: 1; text-align: left; }
.k-help-text .t-strong { font-size: var(--fs-md); }
.k-help-body { padding: var(--s-4) var(--s-16) var(--s-16) 64px; }
.k-help-body p { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-base); }
.k-help-body p + p { margin-top: var(--s-8); }
@media (max-width: 640px) { .k-help-body { padding-left: var(--s-16); } }

/* A seleção do grupo de botões tem z-index próprio (para ficar sobre as
   bordas dos vizinhos): sem isolar, ela passava por cima do topo da página
   ao rolar. */
.tuc-btn-group { isolation: isolate; }

/* Prospecção (leads.templ): os selos do telefone, os links da empresa e o
   endereço, que pode ser longo, numa coluna de largura limitada. */
.ld-badges { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-4); }
.ld-badges:empty { display: none; }
.ld-address { max-width: 280px; font-size: var(--fs-sm); }
.ld-links { display: flex; flex-direction: column; gap: var(--s-4); font-size: var(--fs-sm); max-width: 240px; }
.ld-links a { display: inline-flex; align-items: center; gap: var(--s-4); color: var(--ink); text-decoration: none; min-width: 0; }
.ld-links a:hover { text-decoration: underline; }
.ld-links a svg { width: 14px; height: 14px; flex: none; }
.ld-links a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }