/* Two-language text and the language switch.
   Both languages are in the page; html[data-lang] decides which one shows. */
html[data-lang="ur"] .le { display: none !important; }
html[data-lang="en"] .lu { display: none !important; }
.lu { font-family: var(--f-urdu); line-height: 1.9; font-size: 1.1em; }

/* Urdu reads right to left. Only blocks that are fully bilingual opt in with .bi, so pages that are
   still English-only keep their layout. The header and tab bar keep one order on every page. */
html[data-lang="ur"] .bi { direction: rtl; }
html[data-lang="ur"] .bi .le { direction: ltr; }

/* switch: اردو | English */
.lang { flex: none; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.lang button { font: inherit; font-size: 0.85rem; color: var(--moon); background: transparent; border: 0; border-radius: 999px; min-height: 2.1rem; padding: 0 0.8rem; cursor: pointer; transition: background .2s, color .2s; }
.lang button[lang="ur"] { font-family: var(--f-urdu); font-size: 1rem; line-height: 1.7; }
.lang button[aria-pressed="true"] { background: var(--moon); color: var(--night); font-weight: 600; }
.lang button:not([aria-pressed="true"]):hover { color: var(--lamp); }

/* quieter hairlines: one thin line, slightly brighter on the lower edge */
.top { border-bottom-color: color-mix(in srgb, var(--moon) 14%, transparent); }
.top nav { border-top-color: color-mix(in srgb, var(--moon) 14%, transparent); }

/* phones: the tab bar carries the label in the chosen language, with five tabs */
@media (max-width: 600px) {
  .top nav { grid-template-columns: repeat(5, 1fr); }
  .top nav a { font-size: 0.78rem; line-height: 1.25; }
  .top nav .short .lu { font-size: 1.02rem; line-height: 1.55; }
  .lang { order: 2; margin-left: auto; }
  .lang button { min-height: 2.4rem; padding: 0 0.65rem; }
  .sbtn { margin-left: 0; }
}
@media (max-width: 380px) {
  .mark small { display: none; }
}

/* solid dark surfaces (next-gathering band, active chips and pills, the language switch).
   One value to change: --band. Dark theme keeps its own night surfaces. */
:root { --band: var(--night-3); --band-ink: var(--moon); --chip: var(--moon); --chip-ink: var(--night); --band-accent: var(--lamp); }
:root[data-theme="light"] { --band: #6b4a32; --band-ink: #fbf6ea; --chip: #6b4a32; --chip-ink: #fbf6ea; --band-accent: #ffd28f; }
.lang button[aria-pressed="true"] { background: var(--chip); color: var(--chip-ink); }

/* ---- glass edges ----
   Cards, chips and pills get a hairline border that is brightest at the top-left and fades toward the
   bottom-right, over a frosted fill. The gradient is the border (a second background clipped to the border box),
   so it follows the rounded corners with no extra markup. One border per surface, no shadow stacked on it. */
:root {
  --glass-fill: rgba(255, 253, 248, 0.72);
  --edge-hi: rgba(255, 255, 255, 0.95);
  --edge-lo: rgba(28, 36, 49, 0.17);
}
:root:not([data-theme="light"]) {
  --glass-fill: rgba(24, 35, 58, 0.62);
  --edge-hi: rgba(236, 230, 214, 0.26);
  --edge-lo: rgba(236, 230, 214, 0.05);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pg .sched, .sc .g.big, .sc .jump a:not([aria-current]), .sc .note:not(.on):not(.hot), .lang, .pg .sched .nextg, .list a small.nextline {
    border: 1px solid transparent !important;
    background: linear-gradient(var(--glass-fill), var(--glass-fill)) padding-box, linear-gradient(145deg, var(--edge-hi), var(--edge-lo) 60%) border-box !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
  }
  /* the solid dark band: same edge, lit from the top-left */
  .nextband .wrap, .sc .nextup {
    border: 1px solid transparent !important;
    background: linear-gradient(var(--band), var(--band)) padding-box, linear-gradient(145deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.06) 60%) border-box !important;
  }
  /* small solid pills and the active chip stay flat: one colour, no sheen */
  .sc .note.on, .sc .jump a[aria-current="date"] { border: 1px solid transparent !important; background: var(--chip) !important; }
  .sc .note.hot { border: 1px solid transparent !important; background: var(--lamp) !important; }
}

/* primary buttons on the programme pages: a lighter caramel with dark text (cream on it would fall under 4.5:1) */
[data-theme="light"] .pg .btn:not(.ghost), [data-theme="light"] .sc .acts-top .btn { background: #c98a2e; color: #2a1a0c; }
[data-theme="light"] .pg .btn:not(.ghost):hover, [data-theme="light"] .sc .acts-top .btn:hover { background: #d99a3e; }