/* ============================================================
   HOME — a grade de painéis.

   O motivo de a home ter deixado de ser `grid-template-columns:2fr 1fr 1fr`
   está no cabeçalho do home.js. Daqui para baixo é só o desenho, e a
   única coisa que este arquivo decide sozinho é o que muda com a largura
   da JANELA (as barras, o rodapé flutuante). Quantas colunas e quantas
   linhas a grade tem vem do JS em `--cols` e `--row-h`, porque isso
   depende da altura da tela e da altura da navbar, e uma media query não
   sabe nem uma coisa nem outra.
   ============================================================ */

/* ---------------- a caixa da página ---------------- */
#home-root{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  overflow:hidden;          /* quem rola é a grade, e a barra dela é a nossa */
}
/* 819px e não 768px: é o mesmo número que o home.js usa para decidir que
   só cabe uma coluna (`colsFor`). Duas contas do mesmo limite em dois
   arquivos é o tipo de coisa que se desencontra depois — quando um dos
   dois mudar, o outro tem de mudar na mesma edição, e é por isso que
   este comentário existe.
   .
   Aqui quem rola é a página (a `.main` do shell), como em qualquer lista
   de celular: a home de uma coluna não é um painel de painéis, e três
   caixas de rolagem numa tela de telefone foi exatamente o defeito que
   este arquivo tinha antes. */
@media (max-width:819.98px){
  #home-root{ height:auto; overflow:visible; }
}

/* A faixa que oferece o desenho novo a quem já tinha um layout. Ver
   `offerBar` no home.js: ela aparece uma vez e some no clique de qualquer um
   dos dois botões. */
.home-offer{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  flex-shrink:0;
  margin:10px 10px 0;
  padding:8px 12px;
  background:var(--amber-soft);
  border:1px solid var(--secondary);
  border-radius:var(--r-md);
  font-size:12.5px; color:var(--ink);
}
.home-offer__t{ min-width:0; }
.home-offer__go, .home-offer__no{
  padding:6px 12px;
  border-radius:var(--r-sm);
  font-family:var(--f-display); font-weight:700; font-size:11.5px;
}
.home-offer__go{ background:var(--secondary); color:var(--on-secondary); }
.home-offer__no{ background:var(--cream-0); color:var(--text-soft); border:1px solid var(--hairline-2); }
.home-offer__no:hover{ color:var(--ink); }
.home-offer__go:hover{ filter:brightness(1.05); }

.home-board{
  display:grid;
  grid-template-columns:repeat(var(--cols,3), minmax(0,1fr));
  grid-auto-rows:var(--row-h,300px);
  gap:10px;
  padding:10px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  align-content:start;
}

/* ---------------- um painel ---------------- */
.panel{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0; min-height:0;
  background:var(--cream-0);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}

/* A faixa do nome é sinalização, não conteúdo: quanto menos altura ela
   toma, mais post cabe no painel. 34px com fonte de 10.5 é o menor tamanho
   em que a palavra ainda se lê de relance — abaixo disso a caixa alta de
   `text-transform` começa a virar borrão. Em quatro painéis empilhados isso
   devolve quase 50px de conteúdo por coluna. */
.panel__head{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  height:34px;
  padding:0 6px 0 9px;
  box-sizing:border-box;
  border-bottom:1px solid var(--hairline);
  background:var(--cream-1);
  font-family:var(--f-display);
  font-weight:700;
  font-size:10.5px;
  color:var(--text-soft);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.panel__icon{ display:flex; flex-shrink:0; color:var(--text-faint-2); }
.panel__icon svg{ width:13px; height:13px; }
.panel__title{
  font:inherit; margin:0;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.panel__tools{
  margin-left:auto;
  display:flex; align-items:center; gap:4px;
  min-width:0;
}
.panel__body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px;
  position:relative;
  /* O que decide o desenho de um cartão é a largura do PAINEL e não a da
     janela: num ultrawide dá para ter uma coluna de 300px ao lado de um
     feed de 1200px, e uma media query não sabe distinguir as duas. */
  container-type:inline-size;
}
/* O feed traz o próprio espaçamento (composer, lista, "carregar mais"),
   e somado ao do painel virava uma moldura de 24px em telas onde a
   coluna toda tem 330px. */
.panel[data-type="feed"] .panel__body,
.panel[data-type="all"] .panel__body{ padding:8px; }

/* A alça, o dropdown de tipo e o X só existem enquanto se arruma a
   home. Fora disso o cabeçalho é o que sempre foi: ícone e nome. */
.panel__grip{ display:none; color:var(--text-faint-2); cursor:grab; flex-shrink:0; }
.panel__grip svg{ width:14px; height:14px; display:block; }
.panel__type{ display:none; }
.panel__rm{ display:none; }
.panel__rz{ display:none; }

.home-board.is-editing .panel{ border-color:var(--hairline-2); }
.home-board.is-editing .panel__head{
  cursor:grab;
  background:var(--amber-soft);
  user-select:none;
  touch-action:none;      /* senão o navegador rola a grade em vez de arrastar */
}
.home-board.is-editing .panel__grip{ display:flex; }
.home-board.is-editing .panel__title{ display:none; }
.home-board.is-editing .panel__icon{ display:none; }
.home-board.is-editing .panel__type{
  display:block;
  min-width:0;
  max-width:100%;
  background:var(--cream-0);
  border:1px solid var(--hairline-2);
  border-radius:var(--r-sm);
  padding:3px 20px 3px 7px;
  font-family:var(--f-display);
  font-weight:700;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink);
  cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat;
  background-position:right 5px center;
}
.home-board.is-editing .panel__rm{
  display:grid; place-items:center;
  width:22px; height:22px;
  border-radius:var(--r-sm);
  color:var(--text-soft);
  flex-shrink:0;
}
.home-board.is-editing .panel__rm:hover{ background:var(--accent-soft); color:var(--accent); }
.home-board.is-editing .panel__rm svg{ width:13px; height:13px; }
/* O conteúdo não recebe clique enquanto se arruma: arrastar um painel
   pelo meio de um feed seria votar num post sem querer. */
.home-board.is-editing .panel__body{ pointer-events:none; opacity:.75; }

/* ---------------- alças de tamanho ---------------- */
.home-board.is-editing .panel__rz{
  display:block;
  position:absolute;
  z-index:6;
  touch-action:none;
}
.panel__rz--e{ top:0; right:0; width:10px; height:100%; cursor:ew-resize; }
.panel__rz--s{ left:0; bottom:0; height:10px; width:100%; cursor:ns-resize; }
.panel__rz--se{ right:0; bottom:0; width:18px; height:18px; cursor:nwse-resize; }
.home-board.is-editing .panel__rz--se::after{
  content:""; position:absolute; right:3px; bottom:3px;
  width:8px; height:8px;
  border-right:2px solid var(--text-faint-2);
  border-bottom:2px solid var(--text-faint-2);
}
.panel__rz:hover{ background:var(--amber-soft); }
.panel__rz--se:hover{ background:none; }

/* ---------------- arrastar ---------------- */
.panel.is-dragging{ display:none; }        /* quem aparece é o fantasma */
.panel--ghost{
  position:fixed; top:0; left:0;
  z-index:200;
  pointer-events:none;
  opacity:.92;
  box-shadow:var(--shadow-hover);
  transform:translate(-9999px,-9999px);
}
.panel--ghost .panel__body{ overflow:hidden; }
.panel--ph{
  border:2px dashed var(--secondary);
  border-radius:var(--r-md);
  background:var(--amber-soft);
  min-height:0;
}
body.is-dragging-panel, body.is-dragging-panel *{ cursor:grabbing !important; }
body.is-resizing-panel, body.is-resizing-panel *{ user-select:none; }

/* ---------------- rodapé flutuante ---------------- */
.home-fab{
  position:absolute;
  right:14px; bottom:14px;
  z-index:50;
  display:flex; gap:8px; align-items:center;
}
.home-fab__btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px;
  border-radius:var(--r-pill, var(--r-sm));
  background:var(--cream-0);
  border:1px solid var(--hairline-2);
  box-shadow:var(--shadow-card);
  font-family:var(--f-display); font-weight:700; font-size:12px;
  color:var(--ink);
  white-space:nowrap;
}
.home-fab__btn svg{ width:15px; height:15px; flex-shrink:0; }
.home-fab__btn:hover{ background:var(--cream-1); border-color:var(--secondary); }
.home-fab__add, .home-fab__reset, .home-fab__done{ display:none; }
/* Com o atalho do painel de escrever na tela, o botão flutuante não precisa
   existir; a barra de edição continua aparecendo por cima disto. */
.home-fab--quiet .home-fab__edit{ display:none; }
.home-fab.is-editing .home-fab__edit{ display:none; }
.home-fab.is-editing .home-fab__add,
.home-fab.is-editing .home-fab__reset,
.home-fab.is-editing .home-fab__done{ display:inline-flex; }
.home-fab__done{ background:var(--secondary); color:var(--on-secondary); border-color:transparent; }
.home-fab__done:hover{ background:var(--secondary); filter:brightness(1.05); }

.home-add-menu{
  position:absolute;
  right:0; bottom:calc(100% + 8px);
  min-width:230px;
  max-height:min(60vh, 420px);
  overflow-y:auto;
  background:var(--cream-0);
  border:1px solid var(--hairline-2);
  border-radius:var(--r-md);
  box-shadow:0 12px 34px rgba(70,45,10,.2);
  padding:6px;
  z-index:60;
}
.home-add-menu button{
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:left;
  padding:9px 10px;
  border-radius:var(--r-sm);
  font-size:13px; font-weight:600; color:var(--ink);
}
.home-add-menu button:hover{ background:var(--cream-2); }
.home-add-menu button:disabled{ opacity:.4; cursor:not-allowed; }
.home-add-menu__ic{ display:flex; color:var(--text-faint-2); }
.home-add-menu__ic svg{ width:16px; height:16px; }

/* ============================================================
   CELULAR — a lista única

   Uma coluna de painéis empilhados eram três caixas de rolagem dentro
   de uma tela, e nenhuma delas chegava ao fim com o polegar. Aqui a
   home é uma lista só: quem rola é a página, o painel não tem altura
   própria e não tem barra nossa nenhuma.
   ============================================================ */
.home-mobile{ display:flex; flex-direction:column; gap:10px; padding:10px 8px 80px; }
.panel--flat{
  border-left:none; border-right:none;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
.panel--flat .panel__head{
  position:sticky; top:0; z-index:12;
  border-radius:0;
  background:var(--cream-1);
  /* No telefone o cabeçalho é o único ponto fixo da lista, e o dedo passa
     por ele o tempo todo: 40px é o mínimo confortável. */
  height:40px;
  font-size:11px;
}
.panel--flat .panel__body{
  overflow:visible;         /* a página rola, não o painel */
  padding:8px 0 0;
}
.panel--pinned .panel__body{ padding-bottom:8px; }

/* ---------------- fichas do feed unificado ---------------- */
.chips{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 2px 10px; }
.chip{
  padding:6px 12px;
  border-radius:var(--r-pill, var(--r-full));
  border:1px solid var(--hairline-2);
  background:var(--cream-0);
  font-family:var(--f-display); font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-soft);
}
.chip.is-on{ background:var(--secondary); color:var(--on-secondary); border-color:transparent; }
.act-slot{ display:block; }
/* Desligar "Posts" na lista única esconde os posts e deixa as
   atualizações — sem recarregar o feed, que continua paginando por
   baixo para o momento em que a ficha voltar. */
.feed-list.is-posts-off .post{ display:none; }

/* ---------------- recados dentro do painel ---------------- */
.panel-msg{ padding:26px 10px; text-align:center; color:var(--text-faint-2); font-size:13px; }
.panel-link{
  font-family:var(--f-body); font-weight:600; font-size:11.5px;
  text-transform:none; letter-spacing:0;
  color:var(--text-soft);
  border-bottom:1px solid var(--hairline-2);
}
.panel-link:hover{ color:var(--secondary); border-color:var(--secondary); }

.feed-sort-select{
  background:var(--cream-3);
  border:none;
  border-radius:var(--r-sm);
  padding:4px 19px 4px 8px;
  font-family:var(--f-display);
  font-weight:700;
  font-size:10px;
  color:var(--ink);
  text-transform:uppercase;
  cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat;
  background-position:right 5px center;
  outline:none;
  transition:.15s ease;
}
.feed-sort-select:hover{ background:var(--cream-4); }


/* O composer do feed-core enquanto o painel de escrever está na tela.
   Ver `hideInlineComposer` no home-panels.js. */
.composer.is-panelled{ display:none; }

/* ============================================================
   ESCREVER — o painel estreito

   Compacto de propósito: ele fica ao lado do feed, numa coluna de
   ~330px, e é uma caixa de escrever e não uma página de escrever.
   Tudo aqui é uma linha mais baixa do que o composer de dentro do
   feed, que continua existindo para quem não tem este painel.
   ============================================================ */
/* O widget ocupa o painel inteiro e é a CAIXA DE TEXTO que absorve a
   diferença: numa célula curta ela encolhe até 56px e os atalhos continuam
   visíveis; num painel de duas ou três linhas ela cresce e vira uma área de
   escrever de verdade. Com altura fixa, a linha de atalhos era a primeira
   coisa a ser cortada — e ela é metade do motivo deste painel existir. */
.cw{ display:flex; flex-direction:column; gap:6px; height:100%; }
.cw.is-drop{ outline:2px dashed var(--secondary); outline-offset:4px; border-radius:var(--r-md); }

/* O bloco no MEIO da coluna, e não colado no alto.
   .
   As duas margens automáticas dividem a sobra do painel igualmente entre o
   topo e o pé. É isto e não `justify-content:center` porque margem automática
   some quando não há sobra — num painel curto o bloco simplesmente encosta no
   topo e rola, em vez de ser centralizado com o começo cortado para fora da
   caixa, que é o que o `center` faz quando o conteúdo não cabe. */
.cw__who{ display:flex; align-items:center; gap:8px; min-width:0; margin-top:auto; }
.cw__av{
  width:34px; height:34px; min-width:34px; min-height:34px;
  border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:var(--cream-4); color:#fff;
  font-family:var(--f-display); font-weight:800; font-size:13px;
}
.cw__av img{ width:100%; height:100%; object-fit:cover; }
.cw__id{ min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.cw__id b{ font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cw__id span{ font-size:11px; font-weight:600; color:var(--text-faint-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cw__title{
  width:100%; box-sizing:border-box;
  background:transparent; border:none; outline:none;
  font-family:var(--f-display); font-weight:700; font-size:14px;
  color:var(--ink); padding:2px 0;
  border-bottom:1px solid var(--hairline);
}
.cw__title::placeholder{ color:var(--text-faint-2); font-weight:600; }
.cw__text{
  width:100%; box-sizing:border-box;
  /* Altura de caixa de escrever, e não de coluna.
     .
     Ela já esticou até o pé do painel: numa coluna inteira isso é uma folha
     de 700px de altura para um post de duas linhas, que pesa mais na tela do
     que qualquer coisa que se escreva dentro dela. Agora tem 120px, encolhe
     até 56 se o painel for curto, e cresce se a pessoa arrastar o canto —
     quem escreve muito arrasta uma vez. A sobra do painel vira espaço em
     branco em volta do bloco (ver as margens automáticas abaixo). */
  flex:0 1 auto; height:120px; min-height:56px; resize:vertical;
  background:var(--cream-1);
  border:1px solid var(--hairline);
  border-radius:var(--r-sm);
  padding:8px 10px;
  font:inherit; font-size:13px; line-height:1.45;
  color:var(--ink); outline:none;
}
.cw__text:focus{ border-color:var(--secondary); }

.cw__preview{ position:relative; }
.cw__preview[hidden]{ display:none; }
.cw__preview img{ width:100%; max-height:180px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--hairline); }
.cw__preview-x{
  position:absolute; top:6px; right:6px;
  width:24px; height:24px; border-radius:50%;
  background:rgba(20,17,12,.72); color:#fff;
  display:grid; place-items:center; font-size:12px;
}

.cw__tools{ display:flex; align-items:center; gap:6px; }
.cw__tool{
  display:grid; place-items:center;
  width:28px; height:28px;
  border-radius:var(--r-sm);
  background:var(--cream-2);
  border:1px solid var(--hairline);
  color:var(--text-soft);
  cursor:pointer;
  font-family:var(--f-display); font-weight:800; font-size:13px;
}
.cw__tool:hover{ background:var(--amber-soft); color:var(--ink); }
.cw__tool svg{ width:15px; height:15px; }
.cw__tool--q{ color:#3f8f3f; }
.cw__count{ margin-left:auto; font-size:10.5px; font-weight:700; color:var(--text-faint-2); font-variant-numeric:tabular-nums; }
.cw__count.is-near{ color:var(--accent); }
.cw__send{
  padding:7px 14px;
  border-radius:var(--r-sm);
  background:var(--secondary); color:var(--on-secondary);
  font-family:var(--f-display); font-weight:800; font-size:12px;
}
.cw__send:disabled{ opacity:.45; cursor:not-allowed; }
.cw__hint{ font-size:11px; color:var(--text-faint-2); min-height:0; }
.cw__hint:empty{ display:none; }

/* Os atalhos: o que a pessoa faz na home fora de postar. "Personalizar"
   mora aqui além do botão flutuante porque é aqui que se olha quando se
   pensa "esta home é minha". */
.cw__links{
  display:flex; flex-wrap:wrap; gap:4px;
  border-top:1px solid var(--hairline);
  padding-top:6px;
  margin-bottom:auto;   /* o par da margem lá de cima: o bloco fica no meio */
}
.cw__link{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 8px;
  border-radius:var(--r-sm);
  font-size:11.5px; font-weight:600;
  color:var(--text-soft);
  background:none; border:none; cursor:pointer;
}
.cw__link svg{ width:13px; height:13px; opacity:.7; }
.cw__link:hover{ background:var(--cream-2); color:var(--ink); }

/* ============================================================
   MEU PERFIL
   ============================================================ */
.pf{ display:flex; flex-direction:column; gap:10px; }
.pf__who{ display:flex; align-items:center; gap:9px; min-width:0; }
.pf__who-m{ min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.pf__who-m b{ font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf__who-m span{ font-size:11px; font-weight:600; color:var(--text-faint-2); }

.pf__nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.pf__num{
  background:var(--cream-1);
  border:1px solid var(--hairline);
  border-radius:var(--r-sm);
  padding:7px 4px; text-align:center; min-width:0;
}
.pf__num b{ display:block; font-family:var(--f-display); font-weight:800; font-size:16px; color:var(--ink); font-variant-numeric:tabular-nums; }
.pf__num span{ display:block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint-2); margin-top:2px; }

.pf__group{ border-top:1px solid var(--hairline); padding-top:8px; }
.pf__group-t{ font-family:var(--f-display); font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint-2); margin-bottom:7px; }

/* A GRADE DE ATIVIDADE.
   Os níveis são os mesmos de public/u/index.html — o CSS de lá mora dentro da
   página, então isto é uma cópia consciente: um dia de 10 mensagens tem de ter
   a mesma cor nas duas telas, e mudar uma sem a outra é o defeito a evitar. */
.pf__act{ overflow:hidden; }
.act-months{ display:flex; font-size:9.5px; font-weight:700; color:var(--text-faint-2); margin-bottom:3px; }
.act-month{ overflow:hidden; }
.act-squares{ display:grid; grid-template-rows:repeat(7,10px); grid-auto-flow:column; grid-auto-columns:10px; gap:3px; }
.act-sq{
  width:10px; height:10px; border-radius:2px;
  background:var(--cream-2); border:1px solid var(--hairline-2);
  box-sizing:border-box; transition:transform .1s;
}
.act-sq[data-level="0"]{ background:var(--cream-2); border-color:var(--hairline); }
.act-sq[data-level="1"]{ background:color-mix(in srgb, var(--secondary) 30%, var(--cream-2)); border-color:transparent; }
.act-sq[data-level="2"]{ background:color-mix(in srgb, var(--secondary) 55%, var(--cream-2)); border-color:transparent; }
.act-sq[data-level="3"]{ background:color-mix(in srgb, var(--secondary) 80%, var(--cream-2)); border-color:transparent; }
.act-sq[data-level="4"]{ background:var(--secondary); border-color:transparent; }
:root[data-theme="dark"] .act-sq[data-level="1"]{ background:#0e4429; }
:root[data-theme="dark"] .act-sq[data-level="2"]{ background:#006d32; }
:root[data-theme="dark"] .act-sq[data-level="3"]{ background:#26a641; }
:root[data-theme="dark"] .act-sq[data-level="4"]{ background:#39d353; }
.act-squares .act-sq:hover{ transform:scale(1.35); }
.act-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; font-size:10.5px; font-weight:600; color:var(--text-faint-2); }
.act-legend{ display:flex; align-items:center; gap:3px; }
.act-legend .act-sq{ width:9px; height:9px; }

.pf__more{ font-weight:600; color:var(--text-faint-2); text-transform:none; letter-spacing:0; }
.pf__post{ display:flex; align-items:center; gap:8px; padding:5px 0; min-width:0; }
.pf__post-th{ width:38px; height:30px; flex-shrink:0; border-radius:var(--r-sm); overflow:hidden; background:var(--cream-2); }
.pf__post-th img{ width:100%; height:100%; object-fit:cover; }
.pf__post-m{ min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.pf__post-m b{ font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf__post-m span{ font-size:10.5px; color:var(--text-faint-2); font-weight:600; }
.pf__post:hover b{ color:var(--secondary); }

.pf__msg{ display:flex; gap:7px; padding:3px 0; font-size:12px; min-width:0; }
.pf__msg-h{ color:var(--text-faint-2); font-variant-numeric:tabular-nums; flex-shrink:0; font-weight:600; }
.pf__msg-t{ color:var(--text-soft); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.pf__call{ background:var(--cream-1); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:10px; }
.pf__call-t{ font-family:var(--f-display); font-weight:800; font-size:13.5px; color:var(--ink); }
.pf__call-d{ font-size:11.5px; color:var(--text-soft); margin:4px 0 9px; line-height:1.4; }
.pf__call-b{
  padding:7px 14px; border-radius:var(--r-sm);
  background:var(--secondary); color:var(--on-secondary);
  font-family:var(--f-display); font-weight:800; font-size:11.5px;
}
.pf__row{ display:flex; align-items:center; gap:7px; padding:4px 0; min-width:0; }
.pf__row:hover .pf__row-n{ color:var(--secondary); }
.pf__pos{ width:14px; font-size:10.5px; font-weight:800; color:var(--text-faint-2); font-variant-numeric:tabular-nums; }
.pf__row-n{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; font-weight:600; color:var(--ink); }
.pf__row-v{ margin-left:auto; font-size:11px; font-weight:700; color:var(--text-faint-2); font-variant-numeric:tabular-nums; flex-shrink:0; }


/* ---------------- Live ---------------- */
/* O player quer 16:9 e a célula nem sempre tem 16:9 de sobra. Ele fica
   com a proporção enquanto ela couber e para de crescer no `max-height`
   — a partir daí a caixa fica mais larga do que 16:9 e quem letterboxa é
   o player da Twitch, que já faz isso. A alternativa era o painel ganhar
   rolagem interna para mostrar o resto de um vídeo, que é o pior dos
   dois: metade da imagem e uma barra. */
.panel[data-type="live"] .panel__body{ display:flex; flex-direction:column; }
.live-box{ display:flex; flex-direction:column; gap:10px; flex:1; min-height:0; }
.home-player{
  background:#000;
  border-radius:var(--r-md);
  overflow:hidden;
  aspect-ratio:16/9;
  flex:0 1 auto;
  min-height:0;
  max-height:100%;
  box-shadow:var(--shadow-card);
}
.panel--flat .home-player{ max-height:none; }
.home-player iframe{ display:block; border:0; width:100%; height:100%; }
.live-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; font-weight:600; color:var(--text-soft); }
.live-on{ display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-weight:800; text-transform:uppercase; font-size:11px; }
.live-off{ color:var(--text-faint-2); }
.live-count{ color:var(--ink); font-variant-numeric:tabular-nums; }
.live-plat{
  padding:2px 7px; border-radius:var(--r-sm);
  background:var(--cream-2); color:var(--text-soft);
  font-size:10px; font-weight:800; text-transform:uppercase;
}

/* ---------------- Estatísticas ---------------- */
.stat-hero{ padding:10px 0 14px; text-align:center; }
.stat-hero__n{ font-family:var(--f-display); font-weight:800; font-size:30px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat-hero--sm .stat-hero__n{ font-size:20px; }
.stat-hero__l{ font-size:11.5px; font-weight:600; color:var(--text-faint-2); text-transform:uppercase; letter-spacing:.05em; margin-top:5px; }
.stat-group{ border-top:1px solid var(--hairline); padding-top:10px; margin-top:6px; }
.stat-group__t{ font-family:var(--f-display); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint-2); margin-bottom:8px; }
.stat-row{ display:flex; align-items:center; gap:10px; padding:5px 0; min-width:0; }
.stat-row__img{ width:30px; height:30px; object-fit:contain; background:var(--cream-2); border-radius:var(--r-sm); flex-shrink:0; }
.stat-row__meta{ min-width:0; line-height:1.2; display:flex; flex-direction:column; }
.stat-row__meta b{ font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat-row__meta span{ font-size:11px; color:var(--text-faint-2); font-weight:600; }
.chat-avatar{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:9px; font-weight:800; color:#fff; flex-shrink:0; object-fit:cover; }

/* ---------------- Música ---------------- */
.mus-now{ margin-bottom:10px; }
.mus-now__tag{ display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--secondary); margin-bottom:6px; }
.mus-row{ display:flex; align-items:center; gap:10px; padding:6px 0; min-width:0; }
.mus-row__img{ width:38px; height:38px; border-radius:var(--r-sm); object-fit:cover; background:var(--cream-2); flex-shrink:0; }
.mus-row--big .mus-row__img{ width:60px; height:60px; }
.mus-row__meta{ min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.mus-row__meta b{ font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mus-row__meta span{ font-size:11.5px; color:var(--text-faint-2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mus-list{ border-top:1px solid var(--hairline); padding-top:6px; }
.mus-row:hover .mus-row__meta b{ color:var(--secondary); }

/* ---------------- LoL ---------------- */
.lol-rank{ display:block; text-align:center; padding:8px 0 14px; }
.lol-rank__tier{ font-family:var(--f-display); font-weight:800; font-size:19px; color:var(--ink); letter-spacing:.02em; }
.lol-rank__lp{ font-family:var(--f-display); font-weight:800; font-size:26px; color:var(--secondary); line-height:1.1; }
.lol-rank__wl{ font-size:11.5px; font-weight:600; color:var(--text-faint-2); margin-top:3px; }
.lol-list{ border-top:1px solid var(--hairline); }
.lol-m{ display:flex; align-items:center; gap:10px; padding:7px 6px; border-bottom:1px solid var(--hairline); border-left:3px solid transparent; min-width:0; }
.lol-m.is-win{ border-left-color:#1f8ecd; }
.lol-m.is-loss{ border-left-color:#e84057; }
.lol-m:hover{ background:var(--cream-1); }
.lol-m__champ{ width:32px; height:32px; border-radius:var(--r-sm); flex-shrink:0; background:var(--cream-2); }
.lol-m__meta{ min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.lol-m__meta b{ font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lol-m__meta span{ font-size:11.5px; color:var(--text-faint-2); font-weight:600; font-variant-numeric:tabular-nums; }
.lol-m__lp{ margin-left:auto; font-family:var(--f-display); font-weight:800; font-size:12.5px; font-variant-numeric:tabular-nums; }
.lol-m__lp.up{ color:#1f8ecd; }
.lol-m__lp.down{ color:#e84057; }

/* ---------------- VODs ---------------- */
.vod-mini-list{ display:flex; flex-direction:column; gap:10px; }
.vod-mini{ display:flex; gap:10px; min-width:0; }
.vod-mini__thumb{ position:relative; width:120px; aspect-ratio:16/9; flex-shrink:0; border-radius:var(--r-sm); overflow:hidden; background:var(--cream-2); }
.vod-mini__thumb img{ width:100%; height:100%; object-fit:cover; }
.vod-mini__dur{ position:absolute; right:4px; bottom:4px; background:rgba(0,0,0,.72); color:#fff; font-size:10px; font-weight:700; padding:1px 5px; border-radius:3px; }
.vod-mini__meta{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.vod-mini__meta b{ font-size:13px; line-height:1.3; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vod-mini__meta span{ font-size:11.5px; color:var(--text-faint-2); font-weight:600; }
.vod-mini:hover b{ color:var(--secondary); }

/* ---------------- Loja ---------------- */
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px; }
.shop-item{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.shop-item__img{ aspect-ratio:1; background:var(--cream-2); border-radius:var(--r-sm); overflow:hidden; }
.shop-item__img img{ width:100%; height:100%; object-fit:cover; }
.shop-item b{ font-size:12.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shop-item span{ font-size:11.5px; font-weight:700; color:var(--secondary); }

/* ---------------- Atualizações ---------------- */
.act-list{ display:flex; flex-direction:column; gap:10px; }

/* ============================================================
   OS CARTÕES DAS ATUALIZAÇÕES
   (os mesmos de antes; agora também aparecem no meio do feed
   unificado, e é por isso que nenhum deles depende da coluna
   em que está)
   ============================================================ */
.kz-card{
  display:flex; flex-direction:column;
  background:var(--cream-0);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  overflow:hidden;
  text-decoration:none; color:inherit;
  box-shadow:var(--shadow-card);
  transition:transform .2s, box-shadow .2s;
  cursor:pointer;
  position:relative;
}
.kz-card:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }

.kz-yt-slim{ flex-direction:row; align-items:center; gap:12px; padding:8px; }
.kz-yt-slim .kz-yt-thumb{ width:140px; aspect-ratio:16/9; flex-shrink:0; border-radius:var(--r-sm); overflow:hidden; background:var(--cream-2); }
.kz-yt-slim .kz-yt-thumb img{ width:100%; height:100%; object-fit:cover; }
.kz-yt-slim .kz-yt-info{ padding:0 8px 0 0; flex:1; min-width:0; display:flex; flex-direction:column; }
.kz-yt-slim .kz-yt-title{ font-size:14px; font-weight:700; line-height:1.3; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kz-yt-slim .kz-yt-meta{ font-size:12px; font-weight:600; color:var(--text-soft); margin-bottom:6px; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.kz-yt-slim .kz-yt-badge{ background:rgba(232,64,87,.15); color:#e84057; font-size:10px; font-weight:800; text-transform:uppercase; padding:2px 6px; border-radius:4px; align-self:flex-start; }

.kz-live{ position:relative; aspect-ratio:16/9; }
.kz-live-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.kz-live-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%); }
.kz-live-content{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:12px; color:#fff; z-index:1; }
.kz-live-badge{ display:inline-flex; align-items:center; gap:6px; background:#53ec22; color:#000; padding:4px 8px; border-radius:var(--r-sm); font-size:11px; font-weight:800; align-self:flex-start; margin-bottom:8px; }
.kz-live-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; animation:kzpulse 1.5s infinite; }
.kz-live-badge .kz-live-dot{ background:#000; }
@keyframes kzpulse{ 0%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.5} 100%{transform:scale(1);opacity:1} }
.kz-live-title{ font-size:14px; font-weight:700; line-height:1.2; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.kz-live-meta{ font-size:12px; opacity:.8; }

.kz-lol{ background:var(--cream-0); }
.kz-lol-win{ background:rgba(31,142,205,.08); border-color:rgba(31,142,205,.3); }
.kz-lol-loss{ background:rgba(232,64,87,.08); border-color:rgba(232,64,87,.3); }
.kz-lol-main{ display:flex; align-items:center; gap:12px; padding:12px; }
.kz-lol-champ{ width:48px; height:48px; border-radius:var(--r-sm); object-fit:cover; }
.kz-lol-info{ flex:1; min-width:0; }
.kz-lol-result-row{ display:flex; align-items:center; gap:6px; }
.kz-lol-result{ font-family:var(--f-display); font-weight:800; font-size:14px; }
.kz-lol-nick{ font-size:12px; font-weight:600; color:var(--text-soft); }
.kz-lol-win .kz-lol-result{ color:#1f8ecd; }
.kz-lol-loss .kz-lol-result{ color:#e84057; }
.kz-lol-kda{ font-size:13px; font-weight:600; color:var(--text-soft); margin-top:2px; }
.kz-lol-items-main{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.kz-lol-item{ width:20px; height:20px; border-radius:4px; background:var(--cream-2); object-fit:cover; }
.kz-lol-vs-main{ width:32px; height:32px; border-radius:50%; overflow:hidden; margin-left:auto; border:2px solid var(--cream-2); }
.kz-lol-vs-main img{ width:100%; height:100%; object-fit:cover; }
.kz-lol-details{ display:none; padding:12px; border-top:1px solid var(--hairline); align-items:center; }
.kz-lol.expanded .kz-lol-details{ display:flex; }
.kz-lol-runes{ display:flex; align-items:center; gap:12px; }
.kz-lol-runes-title{ font-size:11px; font-weight:800; color:var(--text-soft); text-transform:uppercase; }
.kz-lol-runes-icons{ display:flex; gap:6px; }
.kz-lol-rune{ width:24px; height:24px; background:#000; border-radius:50%; }
.kz-lol-rune-secondary{ transform:scale(.8); }
.kz-lol-mode{ font-size:12px; font-weight:600; color:var(--text-soft); }
.kz-lol-spacer{ flex:1; }

/* ---------------- filtro das Atualizações ---------------- */
.kz-feed-filter-wrap{ position:relative; }
.kz-feed-filter-btn{
  background:none; border:none; color:var(--text-soft); cursor:pointer;
  padding:4px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.kz-feed-filter-btn:hover, .kz-feed-filter-btn.active{ background:var(--cream-2); color:var(--ink); }
.kz-feed-filter-menu{
  position:absolute; top:100%; right:0; margin-top:8px;
  background:var(--cream-0);
  border:1px solid var(--hairline);
  box-shadow:0 10px 24px rgba(0,0,0,.2);
  border-radius:var(--r-md);
  padding:8px; z-index:100;
  min-width:200px;
  display:flex; flex-direction:column; gap:4px;
}
.kz-feed-filter-menu[hidden]{ display:none; }
.kz-feed-filter-menu label{
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-size:13px; font-weight:600;
  text-transform:none; letter-spacing:0;
  color:var(--ink);
  padding:6px 8px; cursor:pointer; border-radius:var(--r-sm);
}
.kz-feed-filter-menu label:hover{ background:var(--cream-1); }
.kz-feed-filter-menu input[type="checkbox"]{ accent-color:var(--secondary); width:16px; height:16px; cursor:pointer; }

/* ---------------- larguras pequenas ---------------- */
@media (max-width:600px){
  /* 140px de miniatura deixavam ~150px para um título de duas linhas,
     que corta a maioria deles no meio da primeira palavra. */
  .kz-yt-slim .kz-yt-thumb{ width:108px; }
  .vod-mini__thumb{ width:104px; }
  .panel__head{ height:38px; padding:0 6px 0 8px; }
  .home-mobile{ padding:8px 6px 72px; }
  /* O menu do filtro nasce colado na direita de um botão que já está na
     borda: em tela estreita ele saía por ali. */
  .kz-feed-filter-menu{ min-width:0; width:max-content; max-width:min(240px, calc(100vw - 32px)); }
}

/* Um painel estreito não tem espaço para miniatura e texto lado a lado —
   e "estreito" aqui é o PAINEL, não a janela: no ultrawide dá para ter
   uma coluna de 300px ao lado de um feed de 1200px. */
@container (max-width: 330px){
  .kz-yt-slim{ flex-direction:column; align-items:stretch; }
  .kz-yt-slim .kz-yt-thumb{ width:100%; }
  .kz-yt-slim .kz-yt-info{ padding:0 4px 4px; }
}