/* Hérnia de Disco · rodada 03 · a PROGRAMAÇÃO EM TODA PÁGINA DA COMUNIDADE.
   Carregado pelo layout (comunidade.layout), então SÓ CLASSES PRÓPRIAS — nada que mude
   o feed ou as notícias:
     1. o painel suspenso do sino (COMPONENTS §11 do pacote 03, `.bellw`/`.bellp`);
     2. a folha MARCAR SHOW do criar post (COMPONENTS §15 do pacote 01, `.chipx`/`.showl`),
        que o feed-v1.css não trouxe porque a programação ainda não existia.
   As telas da programação (grade, detalhe, atração, avisos) ficam no prog-v1.css, só
   nelas. Tamanhos em rem (escalam com "Esqueci os óculos"). Nenhuma cor, raio ou sombra
   fora dos tokens. ⚠️ Arquivo com cache imutável: mudou, vira -v2. */

/* ---------- o sino e o painel suspenso ---------- */
.bellw { position: relative; }
.bellp { position: absolute; z-index: 9; right: -.5rem; top: calc(100% + .75rem); width: 26rem; max-width: calc(100vw - 2rem); display: grid; background: var(--surface-sheet); border: 1px solid var(--vin); outline: 1px solid var(--red); outline-offset: -6px; box-shadow: 8px 8px 0 var(--vin); padding: .5rem 0 .25rem; text-align: left; }
.bellp[hidden] { display: none; }
.bellp__h { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .625rem 1.125rem .5rem; }
.bellp__h h2 { margin: 0; }
.bellp__h [hidden] { display: none; }
.bellp ul { list-style: none; margin: 0; padding: 0; }
.bellp li a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .5rem; padding: .625rem 1.125rem; color: var(--text-heading); text-decoration: none; border-top: 1px solid var(--divider); }
.bellp li a:hover { background: var(--surface-raised); }
.bellp li a:focus-visible { outline-offset: -3px; }
.bellp li .gl { width: 1rem; height: 1rem; margin-top: .2rem; }
.bellp li b { display: block; font: 700 1.0625rem/1.25 var(--sans); overflow-wrap: anywhere; }
.bellp li small { display: block; margin-top: .125rem; font: var(--label-weight) var(--label)/1.2 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--text-muted); }
.bellp li.is-new a { background: var(--highlight); }
.bellp__g { color: var(--text-meta); }
.bellp__g--ora { color: var(--ora); }
.bellp__g--red { color: var(--red-hi); }
.bellp__g--pet { color: var(--pet-hi); }
.bellp__g--mus { color: var(--mus); }
.bellp__g--ink { color: var(--text-heading); }
.bellp__vazio { margin: 0; padding: .625rem 1.125rem 1rem; border-top: 1px solid var(--divider); font-size: 1rem; line-height: 1.4; color: var(--text-body); }
.bellp__all { display: flex; align-items: center; justify-content: center; gap: .375rem; min-height: var(--hit-site); margin: .25rem 1.125rem .5rem; border: 2px solid var(--ink); color: var(--ink); text-decoration: none;
  font: var(--label-weight) var(--label)/1 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; }
.bellp__all:hover { background: var(--ink); color: var(--bg); }

/* ---------- a folha MARCAR SHOW do criar post (feed) ---------- */
.markbtn[hidden], .chipx[hidden] { display: none; }
.chipx { display: flex; align-items: stretch; max-width: 100%; }
.chipx .chip { flex: 1; min-width: 0; border-right: 0; }
.chipx .chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chipx button { display: grid; place-items: center; width: 3rem; min-height: var(--hit-app); border: 1.5px solid var(--line); color: var(--text-heading); }
.chipx button:hover { border-color: var(--red); }
.chipx button .ico { width: 1.25rem; height: 1.25rem; }
.dlg .showl { justify-self: stretch; width: 100%; text-align: left; }
.showl { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--divider); }
.showl li + li { border-top: 1px solid var(--divider); }
.showl button { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; width: 100%; min-height: 4rem; padding: .5rem .25rem; text-align: left; color: var(--text-heading); }
.showl button:hover, .showl button[aria-pressed="true"] { background: var(--highlight); }
.showl time { font: 400 1.375rem/1 var(--disp); color: var(--mus); }
.showl b { display: block; font: 700 1.125rem/1.2 var(--sans); color: var(--text-heading); }
.showl small { display: block; margin-top: .125rem; font: var(--label-weight) var(--label)/1.2 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--text-meta); }
.showl .gl { color: var(--text-meta); width: 1rem; height: 1rem; }
.dlg:has(.showl) { max-height: 88vh; overflow: auto; }