/* Rocksosint · console de achados (dashboard)
 *
 * Camada de layout por cima do dashboard herdado. Não toca na lógica: só reorganiza
 * o que o JS já monta. Tudo é prefixado com body.rk-console pra vencer os <style>
 * inline do template (que vêm depois no documento).
 *
 *   rail de ícones | busca centralizada (campo + chips de tipo)
 *                  | lista de achados | painel de evidência
 *
 * O rail de ícones mora em legacy-rail.css (também usado por investigations).
 *
 * Comportamento (seleção, tipo, auto-detecção) mora em assets/rocks/js/console.js.
 */

/* ============ Busca (mesmo desenho da busca do herói da landing) ============
 * Sem resultado: a caixa fica no meio da tela, sozinha. Com resultado: continua
 * centralizada no topo da coluna, sem virar barra de ponta a ponta.
 * Caixa = campo em cima; embaixo, cinco chips de tipo + setinha "More", o seletor
 * Quick/Deep e o enviar. A setinha abre uma terceira linha com os outros tipos.
 * Tudo montado pelo console.js em cima do markup herdado.
 */

body.rk-console .main-content {
  position: relative;
}

body.rk-console .dash-topbar-actions {
  position: absolute;
  top: 18px;
  right: 28px;
  z-index: 60;
  margin: 0;
  padding: 0;
}

body.rk-console .search-section {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: none;
  margin: 0;
  padding: var(--sp-7) 28px var(--sp-5);
  text-align: center;
  background: none;
  border: 0;
}

/* Sem resultado: centro vertical da tela, com o globo do Higgsfield atrás da caixa */
body.rk-console:not(.rk-has-results) .search-section {
  position: relative;
  isolation: isolate;
  justify-content: center;
  min-height: 100dvh;
  padding-block: var(--sp-8);
  overflow: hidden;
}

/* A caixa do ::before tem a proporção da imagem (900×1206), então a máscara
   esmaece as bordas da própria foto e não sobra corte reto nas laterais */
body.rk-console:not(.rk-has-results) .search-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  height: min(112vh, 1080px);
  aspect-ratio: 900 / 1206;
  background: url("../../img/osint-globe-900.webp") center / cover no-repeat;
  opacity: 0.62;
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  transform: translate(-44%, -50%);
  pointer-events: none;
}

body.rk-console .search-section > .page-enter,
body.rk-console .search-section > .search-sub,
body.rk-console .search-section > .tabs,
body.rk-console .search-section > .mobile-hint {
  display: none !important;
}

body.rk-console .search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "field field field"
    "types deep go"
    "more more more";
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: 46rem;
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: 0 24px 48px color-mix(in oklch, var(--stone-950) 60%, transparent);
  text-align: start;
  transition: border-color var(--dur-short) var(--ease-out);
}

body.rk-console .search-row:hover {
  border-color: var(--text-muted);
}

body.rk-console .search-row:focus-within {
  border-color: var(--focus);
}

body.rk-console .search-field {
  grid-area: field;
  min-width: 0;
  height: auto;
  min-height: 52px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.rk-console .search-field:focus-within {
  border: 0;
  box-shadow: none;
}

body.rk-console .search-field > svg {
  display: none;
}

body.rk-console .search-field input {
  min-width: 0;
  flex: 1 1 0;
  width: 0;
  min-height: 52px !important;
  padding: 0 var(--sp-1) !important;
  font-size: var(--text-md) !important;
  text-align: start;
  caret-color: var(--accent);
}

body.rk-console .image-upload {
  grid-column: 1 / -1;
}

/* Chips de tipo */
body.rk-console .rk-types {
  grid-area: types;
  display: flex;
  gap: var(--sp-2);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

body.rk-console .rk-types::-webkit-scrollbar {
  display: none;
}

body.rk-console .rk-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

body.rk-console .rk-chip:hover {
  color: var(--text-strong);
  border-color: var(--line-strong);
}

body.rk-console .rk-chip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

body.rk-console .rk-chip[aria-pressed="true"] {
  color: var(--text-strong);
  border-color: var(--accent);
  background: var(--surface-2);
}

/* "More": setinha que abre a linha dos outros tipos */
body.rk-console .rk-more {
  gap: var(--sp-1);
  padding-inline-end: var(--sp-2);
}

body.rk-console .rk-more svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-short) var(--ease-out);
}

body.rk-console .search-row.rk-more-open .rk-more svg {
  transform: rotate(180deg);
}

body.rk-console .rk-more.is-picked {
  color: var(--text-strong);
  border-color: var(--accent);
  background: var(--surface-2);
}

body.rk-console .rk-types-more {
  grid-area: more;
  display: none;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

body.rk-console .search-row.rk-more-open .rk-types-more {
  display: flex;
}

/* Quick | Deep: dois lados com um bloco osso que desliza pro escolhido */
body.rk-console .rk-deep {
  grid-area: deep;
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  height: 36px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--stone-950);
  box-shadow: none;
  cursor: pointer;
}

body.rk-console .rk-deep::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--r-xs);
  background: var(--surface-3);
  transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

body.rk-console .rk-deep.on::before {
  transform: translateX(100%);
  background: var(--bone-50);
}

body.rk-console .rk-deep__opt {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  transition: color var(--dur-short) var(--ease-out);
}

body.rk-console .rk-deep:not(.on) .rk-deep__opt--off {
  color: var(--text-strong);
}

body.rk-console .rk-deep.on .rk-deep__opt--on {
  color: var(--stone-950);
}

body.rk-console .rk-deep:hover {
  border-color: var(--line-strong);
}

body.rk-console .rk-deep:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Deep ligado: a caixa inteira vira vinho sólido (mesma folha vinho da landing),
   pra ficar óbvio que a próxima busca é a profunda. O enviar vira osso pra não sumir. */
body.rk-console .search-row {
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

body.rk-console .search-row.rk-deep-on,
body.rk-console .search-row.rk-deep-on:hover,
body.rk-console .search-row.rk-deep-on:focus-within {
  border-color: var(--wine-500);
  background: var(--wine-900);
}

body.rk-console .search-row.rk-deep-on .rk-chip {
  border-color: oklch(40% 0.090 18);
  color: oklch(84% 0.030 20);
}

body.rk-console .search-row.rk-deep-on .rk-chip:hover,
body.rk-console .search-row.rk-deep-on .rk-chip[aria-pressed="true"] {
  border-color: var(--bone-50);
  background: oklch(30% 0.095 18);
  color: var(--bone-50);
}

body.rk-console .search-row.rk-deep-on .rk-types-more {
  border-top-color: oklch(40% 0.090 18);
}

body.rk-console .search-row.rk-deep-on .search-field input::placeholder {
  color: oklch(78% 0.040 20);
}

body.rk-console .search-row.rk-deep-on .rk-deep {
  border-color: oklch(40% 0.090 18);
}

body.rk-console .search-row.rk-deep-on .search-btn,
body.rk-console .search-row.rk-deep-on .search-btn:hover {
  background: var(--bone-50) !important;
  color: var(--wine-900) !important;
}

body.rk-console .search-row.rk-deep-on .search-btn svg {
  color: var(--wine-900);
}

/* Enviar: quadrado vinho, igual ao do herói */
body.rk-console .search-btn {
  grid-area: go;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--accent-fill);
  color: var(--bone-50);
  box-shadow: none;
}

body.rk-console .search-btn:hover {
  background: var(--accent);
}

body.rk-console .search-btn svg {
  color: var(--bone-50);
}

/* block, não flex: o gap do flex separava o ponto final do link */
body.rk-console .terms-line {
  display: block;
  margin: 0;
  color: var(--text-muted);
}

/* Sugestões de primeira busca (showOnboarding): uma linha discreta, sem cartão */
body.rk-console .rk-try {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

body.rk-console .rk-try__gift {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-strong);
}

body.rk-console .rk-try__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
}

body.rk-console .rk-try__label {
  margin-inline-end: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

body.rk-console .rk-try__q {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-height: 36px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: color-mix(in oklch, var(--stone-950) 70%, transparent);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out);
}

body.rk-console .rk-try__q span {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

body.rk-console .rk-try__q:hover {
  border-color: var(--line-strong);
}

/* Com resultado na tela, os blocos de boas-vindas somem */
body.rk-console.rk-has-results .onboard-card {
  display: none !important;
}

/* ============ Resultados: lista + evidência ============ */

body.rk-console .results-section {
  max-width: none;
  padding: var(--sp-5) 28px var(--sp-8);
}

body.rk-console .rk-split {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--sp-5);
}

body.rk-console .rk-list {
  min-width: 0;
}

body.rk-console .rk-split .cards-grid {
  columns: auto;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

body.rk-console .rk-list .cards-grid .card {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}

body.rk-console .rk-list .cards-grid .card:hover {
  background: var(--surface-1);
}

body.rk-console .rk-list .cards-grid .card.rk-sel {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Na lista, card com cabeçalho mostra só o cabeçalho; o resto vai pro painel.
 * Sem painel (≤900px), o card selecionado abre ali mesmo. */
@media (min-width: 901px) {
  body.rk-console .rk-list .cards-grid .card:has(> .card-header) > :not(.card-header) {
    display: none;
  }
}

@media (max-width: 900px) {
  body.rk-console .rk-list .cards-grid .card:not(.rk-sel):has(> .card-header) > :not(.card-header) {
    display: none;
  }
}

body.rk-console .rk-list .card-header {
  margin: 0;
  padding: 10px var(--sp-4);
  gap: var(--sp-3);
  border-left: 0 !important;
}

/* Nome em osso, não na cor da marca: a marca já está no ícone */
body.rk-console .rk-split .card-platform-name {
  color: var(--text-strong) !important;
}

body.rk-console .rk-list .card-platform-name {
  font-size: 0.9375rem;
}

body.rk-console .rk-list .card-platform-cat {
  font-size: 0.75rem;
  color: var(--text-muted);
}

body.rk-console .rk-list .card-icon-img,
body.rk-console .rk-list .card-icon-fallback {
  width: 28px;
  height: 28px;
}

body.rk-console .rk-list .card-idx {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  color: var(--stone-500);
}

body.rk-console .rk-detail .card-header {
  border-left: 0 !important;
}

body.rk-console .rk-detail {
  position: sticky;
  top: var(--sp-5);
  max-height: calc(100vh - var(--sp-7));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

body.rk-console .rk-detail:empty {
  display: none;
}

body.rk-console .rk-detail .card {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: auto;
}

body.rk-console .rk-detail__hint {
  padding: var(--sp-6);
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Timeline, mapa e vínculos ocupam a largura toda: lista e evidência saem */
body.rk-console.rk-view-other .rk-split {
  display: none;
}

/* Mapa de vínculos embutido (era modal de tela cheia) */
body.rk-console #graph-btn {
  display: none !important;
}

body.rk-console #graph-modal.rk-inline.open {
  position: relative;
  inset: auto;
  z-index: 1;
  height: min(74vh, 780px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--stone-950);
}

body.rk-console #graph-modal.rk-inline .graph-close {
  display: none;
}

/* ============ Tablet e celular ============ */

@media (max-width: 900px) {
  body.rk-console .rk-split {
    grid-template-columns: minmax(0, 1fr);
  }

  body.rk-console .rk-detail {
    display: none;
  }
}

@media (max-width: 768px) {
  body.rk-console .dash-topbar-actions {
    position: static;
    padding: 0 1rem;
  }

  body.rk-console .search-section {
    padding: var(--sp-6) 1rem var(--sp-4);
  }

  /* Celular também centraliza; 56px = altura da barra do topo */
  body.rk-console:not(.rk-has-results) .search-section {
    min-height: calc(100dvh - 56px);
    padding-block: var(--sp-6);
  }

  body.rk-console:not(.rk-has-results) .search-section::before {
    height: min(96vh, 760px);
    transform: translate(-50%, -50%);
  }

  /* Celular: nada rola pro lado. A caixa vira um fluxo que quebra linha: campo + seta
     em cima, e embaixo todos os tipos e o "Deep" visíveis, em quantas linhas precisarem.
     .rk-types vira display: contents pra os chips entrarem no mesmo fluxo do "Deep". */
  body.rk-console .search-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3);
  }

  body.rk-console .search-field {
    order: 0;
    flex: 1 1 calc(100% - 60px);
    min-width: 0;
  }

  body.rk-console .search-btn {
    order: 1;
    flex: none;
  }

  body.rk-console .rk-types {
    display: contents;
  }

  body.rk-console .rk-chip {
    order: 2;
    min-height: 36px;
    padding: 0 var(--sp-3);
  }

  body.rk-console .rk-deep {
    order: 3;
  }

  body.rk-console .rk-types-more {
    order: 4;
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  body.rk-console .search-field,
  body.rk-console .search-field input {
    min-height: 48px !important;
  }

  body.rk-console .search-field input {
    font-size: var(--text-base) !important;
  }

  /* Deep vira um botão só ("Deep"), aceso quando ligado */
  body.rk-console .rk-deep {
    grid-template-columns: auto;
    height: 36px;
    padding: 0 var(--sp-3);
    background: transparent;
  }

  body.rk-console .rk-deep::before,
  body.rk-console .rk-deep__opt--off {
    display: none;
  }

  body.rk-console .rk-deep__opt {
    padding: 0;
  }

  body.rk-console .rk-deep:not(.on) .rk-deep__opt--on {
    color: var(--text-muted);
  }

  body.rk-console .rk-deep.on {
    border-color: var(--bone-50);
    background: var(--bone-50);
  }

  body.rk-console .rk-deep.on .rk-deep__opt--on {
    color: var(--wine-900);
  }

  /* Botão do menu: igual aos outros botões de contorno (o herdado tinha sombra e brilho) */
  body.rk-console .sidebar-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    box-shadow: none;
  }

  /* O CSS herdado do celular pinta o botão de claro e largo: volta pro quadrado vinho */
  body.rk-console .search-btn {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px;
    border-radius: var(--r-sm);
    background: var(--accent-fill) !important;
    color: var(--bone-50) !important;
  }

  body.rk-console .search-btn svg {
    color: var(--bone-50);
  }

  body.rk-console .results-section {
    padding-inline: 1rem;
  }
}

/* ============ Faixa acima da lista ============ */

/* As fontes com resultado já são as linhas da lista: o painel de pílulas repetia */
body.rk-console #sources-panel {
  display: none !important;
}

/* Visões (lista, vínculos, linha do tempo, mapa) como abas de verdade, não chips */
body.rk-console .view-tabs.on {
  display: flex;
  gap: var(--sp-5);
  margin: var(--sp-4) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: none;
}

body.rk-console .view-tab {
  margin-bottom: -1px;
  padding: var(--sp-3) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.875rem;
}

body.rk-console .view-tab:hover {
  background: none;
  color: var(--text-strong);
}

body.rk-console .view-tab.active {
  border-bottom-color: var(--accent);
  background: none;
  color: var(--text-strong);
}

body.rk-console .rk-split,
body.rk-console .rk-links {
  margin-top: var(--sp-4);
}

/* ============ Faixa de resultado compacta ============
 * Consulta e ações na mesma linha; resumo de inteligência vira uma faixa horizontal
 * (síntese à esquerda, seções em colunas) em vez de um bloco alto.
 */

@media (min-width: 901px) {
  body.rk-console #results.on {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--sp-4);
    align-items: center;
  }

  body.rk-console #results.on > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  body.rk-console #results.on > #results-header {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  body.rk-console #results.on > #results-actions {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  /* O JS liga o resumo com style.display = 'block' inline: só o !important vence,
     e o :not() mantém o estado escondido (display: none) intacto. */
  body.rk-console .intel-summary:not([style*="none"]) {
    display: grid !important;
    grid-template-columns: minmax(220px, 280px);
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    gap: var(--sp-2) var(--sp-5);
    margin: var(--sp-4) 0 0;
    padding: var(--sp-4) var(--sp-5);
  }

  body.rk-console .intel-summary .is-head {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  body.rk-console .intel-summary .is-caption {
    display: none;
  }

  body.rk-console .intel-summary .is-syn {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }

  body.rk-console .intel-summary .is-sec {
    grid-row: 1 / span 2;
    margin: 0;
    padding-inline-start: var(--sp-5);
    border-inline-start: 1px solid var(--line);
  }
}

body.rk-console .intel-summary {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* Cabeçalho neutro: rótulo pequeno em cinza, sem tinta rosa */
body.rk-console .intel-summary .is-kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

body.rk-console .intel-summary .is-syn b {
  font-family: inherit;
}

/* Rótulos das seções no mesmo tom do cabeçalho (o herdado era mono em caixa alta) */
body.rk-console .intel-summary .is-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

body.rk-console .intel-summary .is-syn b {
  color: var(--text-strong);
}

/* Chips neutros; só o alerta ganha uma borda vinho, sem fundo nem texto colorido */
body.rk-console .intel-summary .is-fact {
  background: color-mix(in oklch, var(--bone-50) 6%, transparent);
  border-color: var(--line-strong);
  color: var(--text-strong);
}

body.rk-console .intel-summary .is-hyp {
  background: transparent;
  border-color: var(--line);
  border-style: dashed;
  color: var(--text-muted);
}

body.rk-console .intel-summary .is-alert {
  background: transparent;
  border-color: var(--line);
  border-inline-start: 2px solid var(--wine-500);
  color: var(--text-strong);
}

body.rk-console .intel-summary .is-pivot {
  border-color: var(--line-strong);
  color: var(--text-strong);
}

body.rk-console .intel-summary .is-pivot:hover {
  background: var(--surface-2);
}

body.rk-console #results-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

body.rk-console .results-toolbar {
  margin-top: var(--sp-4);
}

/* ============ Mapa: controles do Leaflet na paleta (o padrão era caixa branca) ============ */

body.rk-console .leaflet-bar {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: none;
  overflow: hidden;
}

body.rk-console .leaflet-bar a,
body.rk-console .leaflet-bar a:hover {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-bottom-color: var(--line);
  background: var(--surface-2);
  color: var(--text-strong);
}

body.rk-console .leaflet-bar a:hover {
  background: var(--surface-3);
}

body.rk-console .leaflet-control-attribution {
  background: color-mix(in oklch, var(--stone-950) 80%, transparent);
  color: var(--text-muted);
}

body.rk-console .leaflet-control-attribution a {
  color: var(--text);
}

/* ============ Carregando: esqueleto com a forma da lista + evidência ============
 * O esqueleto herdado era a grade de 3 cards do Espectro; o resultado aqui é lista
 * à esquerda e painel à direita. Cards 1 e 2 viram linhas da lista (só o cabeçalho),
 * o 3 vira o painel de evidência. Mesmas colunas do .rk-split, sem pulo na troca.
 */

@media (min-width: 901px) {
  /* O JS mostra o esqueleto com style.display = 'block'; só o !important vence */
  body.rk-console .skel-grid[style*="block"] {
    display: grid !important;
  }

  body.rk-console .skel-grid {
    columns: auto;
    grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr);
    grid-auto-rows: min-content;
    column-gap: var(--sp-5);
    align-items: start;
  }

  body.rk-console .skel-card:nth-child(-n+2) {
    grid-column: 1;
    margin: 0;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
  }

  body.rk-console .skel-card:nth-child(1) {
    border-top: 1px solid var(--line);
  }

  body.rk-console .skel-card:nth-child(-n+2) .skel-row {
    display: none;
  }

  body.rk-console .skel-card:nth-child(-n+2) .skel-head {
    padding: var(--sp-4) var(--sp-4);
  }

  body.rk-console .skel-card:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
    border-color: var(--line);
    border-radius: var(--r-md);
    background: var(--surface-1);
  }
}

body.rk-console .skel-card {
  border-color: var(--line);
  background: var(--surface-1);
}

/* Vidro fosco só em sobreposição (painel lateral, modais). Card, painel de fontes e
   campo de busca ficam sólidos: blur em tudo achata a hierarquia e pesa na rolagem. */
body.rk-console .card,
body.rk-console .sources-panel,
body.rk-console .search-field,
body.rk-console .hint-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Lista vazia (antes do primeiro achado) não desenha o filete de cima solto */
body.rk-console .rk-split .cards-grid:empty {
  border-top: 0;
}