/* 16 · Programação — areia, cena fixada. A grade de TV do slide 13: cinco dias (qua 13 → dom 17) × cinco
   frentes, no placar do núcleo (.board: cabeçalho navy com fio terracota). Um cursor-sol anda pelos dias
   pulando o arco de cada um; as barras se desenham atrás dele. Geometria do cursor: JS, medida no refresh. */
#programacao .prg-stage { background: transparent; }
#programacao .prg-wrap { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(12px, 2.2vh, 26px); padding-top: calc(var(--hud-h) + clamp(18px, 4vh, 48px)); padding-bottom: calc(var(--tide) + clamp(8px, 2vh, 20px)); }
#programacao .prg-head { display: grid; gap: 6px; }
#programacao .prg-title { font-size: calc((clamp(30px, 3.1vw, 56px)) * var(--ts, 1)); } /* o mesmo h2 do 13, 14 e 15 */

/* ---------- a grade ---------- */
#programacao .prg-grid { position: relative; align-self: center; min-height: 0; }
#programacao .prg-board { table-layout: fixed; }
#programacao .prg-col-lab { width: 21%; } /* % puro: o Chrome ignora clamp()/calc() com % na largura de <col> (as seis colunas saíam iguais e "14, 15 e 16/01" quebrava em 1440) */
#programacao .prg-board thead th { position: relative; top: auto; padding: clamp(10px, 1.5vh, 16px) 8px clamp(10px, 1.4vh, 14px); vertical-align: bottom; }
#programacao .prg-day { text-align: center; }
#programacao .prg-arc { display: block; width: min(84%, 120px); height: auto; aspect-ratio: 120 / 32; margin: 0 auto clamp(10px, 1.3vh, 16px); overflow: visible; } /* folga: o brilho do sol do arco não encosta no dia da semana */
#programacao .prg-arc path { fill: none; stroke: rgba(244, 239, 229, .34); stroke-width: 1.4; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; transition: stroke .5s; }
#programacao .prg-arc circle { fill: var(--flare); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.3); transition: opacity .45s, transform .6s var(--ease-out); filter: drop-shadow(0 0 4px rgba(255, 200, 138, .9)); }
#programacao .prg-day.is-lit .prg-arc path { stroke: rgba(242, 151, 109, .78); }
#programacao .prg-day.is-lit .prg-arc circle { opacity: 1; transform: scale(1); }
#programacao .prg-dow { display: block; font-family: var(--f-mono); font-weight: 700; font-size: calc((clamp(14.6px, .5vw + 8.2px, 18px)) * var(--ts, 1)); line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); transition: color .5s; }
#programacao .prg-date { display: block; font-family: var(--f-display); font-stretch: 125%; font-weight: 900; font-size: calc((clamp(22px, 2.2vw, 40px)) * var(--ts, 1)); line-height: 1.02; letter-spacing: -.02em; color: rgba(244, 239, 229, .5); transition: color .5s; }
#programacao .prg-day.is-lit .prg-dow { color: var(--sun); }
#programacao .prg-day.is-lit .prg-date { color: var(--sand); }
#programacao .prg-corner { text-align: left; }
#programacao .prg-corner span { display: block; font-size: calc((clamp(14.6px, .5vw + 8.2px, 18px)) * var(--ts, 1)); letter-spacing: .16em; color: var(--sun); }
#programacao .prg-corner b { display: block; font-stretch: 125%; font-weight: 900; font-size: calc((clamp(18px, 1.6vw, 28px)) * var(--ts, 1)); letter-spacing: 0; line-height: 1.05; }

/* linhas das frentes */
#programacao .prg-board tbody th, #programacao .prg-board tbody td { height: clamp(46px, 8.6vh, 108px); vertical-align: middle; }
#programacao .prg-lab { padding: 8px clamp(12px, 1.3vw, 20px); }
#programacao .prg-lab b { display: block; font-family: var(--f-display); font-stretch: 118%; font-weight: 800; font-size: calc((clamp(14px, .6vw + 8.6px, 22px)) * var(--ts, 1)); line-height: 1.12; letter-spacing: .01em; text-transform: uppercase; color: var(--ink-text); }
#programacao .prg-lab span { display: block; margin-top: 4px; font-family: var(--f-mono); font-weight: 500; font-size: calc((clamp(14.6px, .5vw + 8.2px, 18px)) * var(--ts, 1)); line-height: 1.3; /* ≥ 16 px em 1280; entrelinha curta: a grade não cresce e não sobe no título em 1280 × 720 */ letter-spacing: .08em; color: var(--ink-text-2); font-variant-numeric: tabular-nums; }
/* a célula desenha os fios de dia dela (colspan inclusive): um fio na borda esquerda de cada dia */
#programacao .prg-cell { --n: 1; padding: 0 clamp(6px, .6vw, 10px); background: linear-gradient(90deg, var(--ink-line) 1px, transparent 1px) 0 0 / calc(100% / var(--n)) 100% repeat-x; }
/* a barra se desenha só com transform: a janela (.prg-win, recorte arredondado) anda para a direita e a tinta
   (.prg-fill) anda o mesmo tanto para a esquerda — a tinta fica parada, a ponta da frente sai arredondada */
#programacao .prg-bar { position: relative; display: block; height: clamp(16px, 3vh, 34px); filter: drop-shadow(0 4px 6px rgba(16, 38, 51, .16)); }
/* o que o cursor ainda não percorreu fica impresso apagado (.2): a barra inteira por baixo e os marcadores que
   faltam. Na parada 0,47 (sol na sexta) a grade não lê "Elite até o dia 15" com o rótulo dizendo 14 a 17/01 */
#programacao .prg-bar::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--prg-ink); opacity: .2; }
#programacao .prg-win { display: block; height: 100%; border-radius: 999px; overflow: hidden; transform: translateX(-100%); will-change: transform; }
#programacao .prg-fill { display: block; height: 100%; border-radius: 999px; background: var(--prg-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset; transform: translateX(100%); will-change: transform; }
#programacao .prg-row { --prg-ink: var(--navy); }
#programacao .prg-row--open { --prg-ink: linear-gradient(90deg, var(--clay-2), var(--clay)); }
#programacao .prg-row--master { --prg-ink: linear-gradient(90deg, #ea875b, var(--sun)); }
#programacao .prg-row--elite { --prg-ink: linear-gradient(90deg, var(--navy), var(--navy-3)); }
#programacao .prg-pin { display: grid; place-items: center; opacity: 0; will-change: transform, opacity; }
#programacao .prg-pin .ball, #programacao .prg-ghost .ball { --ball: clamp(26px, 3.6vh + 4px, 48px); }
/* a sombra do marcador no dia dele, antes de o cursor chegar (o marcador cai por cima, no mesmo centro) */
#programacao .prg-cell:has(> .prg-ghost) { position: relative; }
#programacao .prg-ghost { position: absolute; inset: 0; display: grid; place-items: center; opacity: .2; pointer-events: none; }
#programacao .prg-medal svg { width: clamp(28px, 3.8vh + 4px, 50px); height: auto; aspect-ratio: 40 / 48; overflow: visible; filter: drop-shadow(0 4px 8px rgba(16, 38, 51, .22)); }
#programacao .prg-medal__rib { fill: var(--clay); }
#programacao .prg-medal__disc { fill: url(#g-sun); }
#programacao .prg-medal__ring { fill: none; stroke: var(--navy); stroke-width: 1.6; opacity: .55; }

/* ---------- o cursor-sol ---------- */
#programacao .prg-over { position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 4; pointer-events: none; }
#programacao .prg-cur { position: absolute; left: 0; top: 0; bottom: 0; width: 0; will-change: transform, opacity; }
#programacao .prg-cur__line { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--flare) 0%, var(--sun) 45%, rgba(242, 151, 109, .15) 100%); box-shadow: 0 0 14px rgba(242, 151, 109, .55); }
#programacao .prg-sun { position: absolute; left: 0; top: 0; width: clamp(20px, 2.2vh + 6px, 32px); aspect-ratio: 1; margin: calc(clamp(20px, 2.2vh + 6px, 32px) / -2) 0 0 calc(clamp(20px, 2.2vh + 6px, 32px) / -2); border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(circle, #fff6e8 0%, #ffe2b8 26%, var(--flare) 44%, var(--sun) 64%, rgba(203, 87, 45, .4) 80%, transparent 100%);
  box-shadow: 0 0 20px 6px rgba(255, 200, 138, .5), 0 0 60px 14px rgba(242, 151, 109, .25); }

#programacao .prg-foot { justify-self: start; }

@media (orientation: portrait) {
  #programacao .prg-board tbody th, #programacao .prg-board tbody td { height: clamp(56px, 6.6vh, 112px); }
  #programacao .prg-col-lab { width: 26%; } /* "14, 15 e 16/01" numa linha até 768 em pé */
}
/* tablet em pé: título, grade e rodapé formam um bloco só, centrado na altura */
@media (orientation: portrait) {
  #programacao .prg-wrap { grid-template-rows: auto auto auto; align-content: center; gap: clamp(20px, 3vh, 40px); }
  #programacao .prg-title { font-size: calc((clamp(34px, 4.8vw, 60px)) * var(--ts, 1)); }
  #programacao .prg-date { font-size: calc((clamp(24px, 3.2vw, 44px)) * var(--ts, 1)); }
}