/* «Програма»: денят като пътека от горски табели. Всеки период е дъсчена
   табела (як, flat-shaded силует в езика на low-poly света, никоя дъска
   не е еднаква), дирята с точките минава отстрани, сцената диша между
   дъските. Вътре в дъската текстът е чист (тъмен фон гарантира контраста),
   извън нея остава субтитърният контур. */

#screen-programa{color:var(--ink);text-shadow:var(--text-glow)}

/* ---------- висящият указател ----------
   Заглавието е предмет от света: дъсчена табела със заострени краища,
   виси на две върви и се полюшва едва доловимо. Носи името на екрана,
   подписа и дните от седмицата. */
.sign{position:relative;width:min(100%, 352px);margin:34px auto 30px;text-shadow:none;
  transform-origin:50% -44px;animation:signSway 7s ease-in-out infinite;
  filter:drop-shadow(0 12px 18px rgba(4,10,6,.42))}
@keyframes signSway{0%,100%{transform:rotate(.5deg)}50%{transform:rotate(-.5deg)}}
@media (prefers-reduced-motion:reduce){.sign{animation:none}}
/* вървите, на които виси (извън кройката, за да не ги реже clip-path) */
.sign::before,.sign::after{content:'';position:absolute;top:-44px;height:48px;width:2px;
  background:linear-gradient(180deg, rgba(120,94,58,.0), rgba(104,80,48,.9) 30%, rgba(66,50,30,.95))}
.sign::before{left:25%;transform:rotate(7deg)}
.sign::after{right:25%;transform:rotate(-7deg)}
.sign-board{padding:15px 22px 12px;text-align:center;
  background:
    linear-gradient(180deg, rgba(226,238,192,.18) 0, rgba(226,238,192,.18) 2px, rgba(226,238,192,0) 2px),
    linear-gradient(107deg, rgba(255,240,200,.07) 0 24%, rgba(255,240,200,0) 24% 60%, rgba(0,0,0,.17) 60%),
    linear-gradient(174deg, rgba(44,60,35,.92), rgba(24,38,23,.88) 52%, rgba(13,25,15,.92));
  clip-path:polygon(2.5% 0, 97% 2px, 100% 50%, 97.5% 100%, 2% calc(100% - 3px), 0 53%)}
/* издълбани букви върху дървото */
.sign h2{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:27px;color:var(--ivory);
  text-shadow:0 -1px 0 rgba(0,0,0,.55), 0 1px 0 rgba(255,250,220,.14)}
.sign p{margin-top:4px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory50)}

/* дните от седмицата: резки по долния ръб на табелата */
.days{display:flex;gap:clamp(8px,3vw,16px);align-items:baseline;justify-content:center;
  margin-top:10px;padding-top:9px;border-top:1px solid rgba(248,245,232,.1)}
.days button{background:none;border:0;cursor:pointer;font-family:var(--font-ui);font-size:10px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory50);
  padding:4px 1px 5px;position:relative;transition:color .25s ease}
.days button:active{color:var(--ivory70)}
.days button.on{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:15px;
  letter-spacing:.01em;text-transform:none;color:var(--ivory)}
.days button.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(248,245,232,.8),transparent)}

/* дирята на деня */
.day-flow{position:relative;padding-left:20px;padding-bottom:8px}
.day-flow::before{content:'';position:absolute;left:3px;top:10px;bottom:10px;
  border-left:2px dotted var(--ink-faint)}

.df-sec{position:relative;padding:2px 0 18px}
.df-sec::before{content:'';position:absolute;left:-20px;top:16px;width:8px;height:8px;
  border-radius:50%;background:var(--ink-dim);box-shadow:0 1px 4px rgba(8,20,10,.5)}
.df-sec--now::before{background:var(--accent);box-shadow:0 0 10px var(--accent)}

/* ---------- дъската ---------- */
.df-board{position:relative;padding:15px 17px 17px;text-shadow:none;
  background:
    linear-gradient(180deg, rgba(226,238,192,.18) 0, rgba(226,238,192,.18) 2px, rgba(226,238,192,0) 2px),
    linear-gradient(113deg, rgba(255,240,200,.06) 0 22%, rgba(255,240,200,0) 22% 62%, rgba(0,0,0,.16) 62%),
    linear-gradient(170deg, rgba(41,57,33,.9), rgba(24,38,23,.86) 48%, rgba(13,25,15,.9));
  clip-path:polygon(0 5px, 32% 1px, 100% 0, 99.6% 46%, 100% calc(100% - 6px), 68% 100%, 0 calc(100% - 2px));
  filter:drop-shadow(0 12px 20px rgba(4,10,6,.4))}
.df-sec:nth-child(2n) .df-board{
  clip-path:polygon(0 1px, 52% 0, 100% 4px, 100% calc(100% - 2px), 42% 100%, .5% calc(100% - 6px))}
.df-sec:nth-child(3n) .df-board{
  clip-path:polygon(0 3px, 44% 0, 100% 2px, 99.5% 58%, 100% calc(100% - 4px), 22% 100%, 0 calc(100% - 5px))}

.df-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.df-head h3{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:21px;color:var(--ivory)}
.df-head span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory50)}

/* рубрика: време + име + домакин + ред описание */
.df-rub{padding:8px 0 3px;border-top:1px solid rgba(248,245,232,.08)}
.df-rub:first-of-type{border-top:0}
.df-rub-head{display:flex;align-items:baseline;gap:10px;min-width:0}
.df-rub-head time{flex:0 0 auto;font-size:11.5px;color:var(--ivory50);font-variant-numeric:tabular-nums}
.df-rub-head .name{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:17.5px;
  color:var(--ivory);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.df-rub-head .soon{flex:0 0 auto;font-size:9px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber)}
.df-rub .host{margin-top:1px;padding-left:44px;font-size:11.5px;color:var(--ivory50)}
.df-rub .desc{margin-top:3px;padding-left:44px;font-size:12.5px;line-height:1.45;
  color:var(--ivory70);max-width:38ch}
/* рубрика с няколко часа: часовете на отделен ред (eyebrow), името остава цяло */
.df-rub-times{font-size:11.5px;color:var(--ivory50);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;margin-bottom:2px}
.df-rub.multi .df-rub-head .name{white-space:normal;overflow:visible;text-overflow:clip}
.df-rub.multi .host,.df-rub.multi .desc{padding-left:0}

/* живият слой: история / следва */
.df-row{display:flex;gap:10px;align-items:baseline;padding:6px 0;font-size:12.5px;
  border-top:1px solid rgba(248,245,232,.07)}
.df-row time{flex:0 0 auto;font-size:11px;color:var(--ivory50);font-variant-numeric:tabular-nums}
.df-row span{min-width:0;color:var(--ivory70);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.df-next time{color:var(--amber)}
.df-next span{color:var(--ivory)}

/* «сега в ефира»: кехлибарена жилка върху дъската */
.df-now{margin:10px 0 8px;padding:3px 0 5px 12px;border-left:2px solid var(--amber)}
.df-live{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--amber)}
.df-flame{display:inline-flex}
.df-flame svg{width:10px;height:12px;color:var(--amber)}
.df-now-title{margin-top:7px;font-family:var(--font-display);font-weight:800;font-size:19px;
  line-height:1.25;color:var(--ivory)}
.df-now-artist{margin-top:3px;font-size:12.5px;color:var(--ivory70)}
.df-now-pl{margin-top:4px;font-size:11px;letter-spacing:.08em;color:var(--ivory50)}