/* HUB do Grupo ITIBAN: tela YouTube (T-0778). Usa os tokens e as pecas de app.css (card, canal, rule, pill, tabs, btn, label.f);
   sem estilo inline (CSP). Computador: estado do canal numa faixa de 3 itens; envio e comentarios lado a lado (.wrap ate 1360 px), cada
   coluna na largura de leitura. Ate 1100 px: uma coluna. Ate 900 px (celular e tablet, 360/390/768): sem rolagem lateral, alvos de
   44 px (48 px ate 700) e campos de 16 px, como no app.css. */
.ytb [hidden]{display:none!important}
.ytb-estado{margin-bottom:20px}
.ytb-estado .rule{margin-bottom:14px}
.ytb-itens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ytb-it{display:flex;flex-direction:column;gap:4px;background:var(--bg);border-radius:10px;padding:12px 14px;min-width:0}
.ytb-val{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.ytb-val b{font-weight:650;overflow-wrap:anywhere}
.ytb-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650;color:var(--ink2);margin-top:2px;min-height:32px}

.ytb-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.ytb-centro{justify-content:center;margin-top:0}

/* envio */
.ytb-res{margin-bottom:16px}
.ytb-res:focus{outline:none}
.ytb-res .rule{margin-bottom:8px}
.ytb-res .rule a{font-weight:650;display:inline-flex;align-items:center;gap:4px}
.ytb-dados{background:var(--bg);border-radius:10px;padding:2px 14px;margin-bottom:8px;overflow-wrap:anywhere}
.ytb-campos{border:0;margin:0;padding:0;min-width:0}
.ytb-campos legend.f{padding:0;margin-top:0}
.ytb-v{cursor:pointer;align-items:flex-start}
.ytb-v .qm{align-items:flex-start}
.ytb-v input[type=radio]{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--ink)}
.ytb-v .qm svg{margin-top:2px;flex:none}
.ytb-v .qm>span{min-width:0}
.ytb-off{cursor:default;opacity:.75}
.ytb-legenda{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:13.5px;color:var(--txt2);white-space:pre-line;overflow-wrap:anywhere}
.ytb-envio input[type=datetime-local]{width:100%;font:inherit;font-size:15px;padding:10px 12px;min-height:44px;border:1px solid var(--bc,#8a8678);border-radius:9px;background:var(--surf);color:var(--txt);min-width:0}
.ytb-envio input[type=datetime-local]:focus{outline:none;border-color:#142e4f;box-shadow:0 0 0 3px rgba(20,46,79,.25)}

/* comentarios */
.ytb-filtro{max-width:260px}
.ytb-filtro .f{margin-top:0}
.ytb-lista{display:flex;flex-direction:column;margin-top:8px}
.ytb-co{padding:14px 0;border-bottom:1px solid var(--line);min-width:0}
.ytb-co:first-child{padding-top:2px}
.ytb-co:last-child{border-bottom:0}
.ytb-co:focus{outline:none}
.ytb-co:focus-visible{outline:2px solid #142e4f;outline-offset:2px}
.ytb-co-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.ytb-co-cab b{font-weight:650;overflow-wrap:anywhere}
.ytb-txt{margin:6px 0 0;font-size:14.5px;white-space:pre-line;overflow-wrap:anywhere;max-width:72ch}
.ytb-meta{margin:6px 0 0}
.ytb-meta a{font-weight:650;display:inline-flex;align-items:center;gap:4px;min-height:32px}
.ytb-co .rule{margin:10px 0 0}
.ytb-co .btns{margin-top:10px}
.ytb-co .canal-form{margin-top:10px}

@media(max-width:1100px){.ytb-cols{grid-template-columns:minmax(0,1fr)}}

@media(max-width:900px),(pointer:coarse){
  .ytb-envio input[type=datetime-local]{font-size:16px}
  .ytb-link,.ytb-meta a{min-height:44px}
}
@media(max-width:900px){
  .ytb-itens{grid-template-columns:minmax(0,1fr)}
  .ytb-it{padding:10px 12px}
  .ytb-filtro{max-width:none}
}
@media(max-width:700px){
  .ytb-envio input[type=datetime-local]{min-height:48px}
  .ytb-v input[type=radio]{width:22px;height:22px}
}