/* Masjid TV page, added sections: app downloads, year timetables (any city / Sri Lanka ACJU), three ways onto the TV.
   Uses the tokens of home.css (emerald night, gold leaf). */
.brand .sub{font:500 .95rem var(--sans);color:var(--sage);margin-left:2px;padding-left:10px;border-left:1px solid var(--rule)}

/* downloads: picture of the TV's About screen, then two big choices */
.dl2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:34px;align-items:start}
.howto{margin:0}
.tvpic{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 50px rgba(0,0,0,.45))}
.howto figcaption,.pick2{display:flex;gap:14px;align-items:flex-start;margin:0 0 16px;color:var(--ivory);font-size:1.02rem;line-height:1.55}
.stepno{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#1d1503;font:700 1.05rem var(--sans)}
.choices{display:grid;gap:14px}
.choice{display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:20px;padding:20px 22px;border-radius:18px;text-decoration:none;color:var(--ivory);
  border:1.5px solid var(--rule);background:linear-gradient(180deg,rgba(18,121,90,.18),rgba(3,38,28,.5));transition:border-color .2s,transform .2s,background .2s}
.choice:hover,.choice:focus-visible{border-color:var(--gold);transform:translateY(-2px);background:linear-gradient(180deg,rgba(18,121,90,.28),rgba(3,38,28,.55))}
.choice .num{font:700 1.9rem/1.05 var(--serif);color:var(--gold-pale);text-align:center;padding:10px 8px;border-radius:14px;background:rgba(226,191,102,.08);border:1px solid var(--rule)}
.choice .num small{display:block;font:600 .74rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:4px}
.choice.new .num{font-size:1.4rem}
.choice .txt b{display:block;font:600 1.3rem var(--serif);color:var(--gold-pale)}
.choice .txt .ver{display:block;color:var(--sage);font-size:.95rem;margin:2px 0}
.choice .txt em{font-style:normal;font-size:.88rem;color:var(--gold)}
.choice .go{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;font:600 1rem var(--sans);background:linear-gradient(180deg,var(--gold-pale),var(--gold) 60%,var(--gold-deep));color:#1d1503;white-space:nowrap}
.choice .go svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.choice.here{border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,191,102,.25)}
.thisdev{margin:0;padding:10px 14px;border-radius:12px;background:rgba(226,191,102,.1);color:var(--gold-pale);font-size:.95rem}
.notsure{border:1px dashed rgba(226,191,102,.45);border-radius:16px;padding:16px 18px;background:rgba(3,38,28,.35)}
.notsure b{color:var(--gold-pale)}
.notsure p{margin:6px 0 0;color:var(--sage);font-size:.95rem}
.notsure a{color:var(--gold-pale);font-weight:600}
.install{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.install div{border-top:1px solid var(--rule);padding-top:16px}
.install h4{font:600 1.02rem var(--serif);color:var(--gold-pale);margin:0 0 6px}
.install p{color:var(--sage);font-size:.95rem;margin:0}
.install code{font:600 .95rem var(--sans);color:var(--gold-pale);background:rgba(226,191,102,.1);border-radius:6px;padding:2px 7px;white-space:nowrap}
@media (max-width:900px){
  .dl2{grid-template-columns:1fr;gap:22px}
  .choice{grid-template-columns:104px minmax(0,1fr);gap:14px;padding:16px}
  .choice .num{font-size:1.45rem}.choice.new .num{font-size:1.15rem}
  .choice .go{grid-column:1 / -1;justify-content:center;padding:13px}
  .install{grid-template-columns:1fr}
}

/* timetables */
.ttgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ttbox{border:1px solid var(--rule);border-radius:18px;padding:28px;background:rgba(3,38,28,.45)}
.ttbox h3{font-size:1.35rem;color:var(--gold-pale)}
.ttbox p.muted{margin-bottom:18px}
.ttrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.ttrow.one{grid-template-columns:1fr}
.ttbox label{display:block;font-size:.84rem;color:var(--sage);margin:0 0 6px}
.ttbox select,.ttbox .tcity input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--rule);border-radius:10px;color:var(--ivory);font:500 .98rem var(--sans);padding:11px 14px;min-height:46px}
.ttbox select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.ttbox select option{background:#05291f}
.ttbox select:focus,.ttbox .tcity input:focus{outline:none;border-color:var(--gold)}
.tcity{position:relative}
.tcity .res{top:calc(100% + 4px)}
.tsel{font-size:.95rem;color:var(--sage);margin:-4px 0 14px}
.tsel b{color:var(--ivory)}
.ttact{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.ttact .btn{flex:1 1 160px;justify-content:center}
.ttprev{margin-top:16px;font-size:.9rem;color:var(--sage);font-variant-numeric:tabular-nums;min-height:1.4em}

/* three ways onto the TV */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--rule);border-radius:18px;overflow:hidden}
.ways>div{padding:28px;border-left:1px solid var(--rule-soft);background:rgba(3,38,28,.35)}
.ways>div:first-child{border-left:0}
.ways .tag{display:inline-block;font-size:.85rem;color:var(--gold-pale);border:1px solid var(--rule);border-radius:999px;padding:2px 12px;margin-bottom:14px}
.ways h3{font-size:1.25rem;color:var(--gold-pale)}
.ways ol{margin:0 0 18px;padding-left:20px;color:var(--ivory)}
.ways li{margin:6px 0}
.ways p{color:var(--sage);font-size:.95rem}

@media (max-width:900px){
  .dlgrid,.ttgrid{grid-template-columns:1fr}
  .install{grid-template-columns:1fr}
  .ways{grid-template-columns:1fr}
  .ways>div{border-left:0;border-top:1px solid var(--rule-soft)}
  .ways>div:first-child{border-top:0}
  .ttrow{grid-template-columns:1fr}
  .brand .sub{display:none}
}