/* Patri components, Sabz look.
 * Spec: docs/COMPONENTS.md. Tokens: public/css/tokens.css (generated by `npm run ds`).
 * - One block per component, in registry order, using classes only: p- prefix, BEM.
 * - Tokens only: no raw colours, font sizes or font names. Layout lengths and var(--tap) are fine.
 * - Type: font: var(--t-<style>); letter-spacing: var(--t-<style>-tracking);
 *   The label style is uppercase in English. Under [lang="ur"] it becomes urdu-label:
 *   font: var(--t-urdu-label); letter-spacing: normal; text-transform: none;
 * - Logical properties only, so right-to-left mirrors.
 * Copied to design-system/components/bundle.css by `npm run ds`. */

/* ---------- Base ---------- */
:where([class^="p-"], [class*=" p-"]),
:where([class^="p-"], [class*=" p-"])::before,
:where([class^="p-"], [class*=" p-"])::after { box-sizing: border-box; }

/* Urdu is Nastaliq everywhere. Zero specificity, so a component's own font (times, numbers) wins. */
:where([lang="ur"]) :where([class^="p-"], [class*=" p-"]) { font-family: var(--font-urdu); }

[class^="p-"]:focus-visible,
[class*=" p-"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Icons that point along the reading direction (back, chevronEnd). */
[dir="rtl"] .p-flip { transform: scaleX(-1); }

/* Text for screen readers only. */
.p-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  :where([class^="p-"], [class*=" p-"]),
  :where([class^="p-"], [class*=" p-"])::before,
  :where([class^="p-"], [class*=" p-"])::after {
    transition-duration: 0.01ms !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 1. AppBar ---------- */
.p-appbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 56px;
  padding-block: 0;
  padding-inline: var(--space-4);
  background: var(--surface);
  border-block-end: var(--border-rule) solid var(--rule);
}
.p-appbar__brand,
.p-appbar__back {
  display: flex;
  align-items: center;
  flex: none;
  min-block-size: var(--tap);
  color: var(--ink);
  text-decoration: none;
}
/* The bilingual lockup (560×180) at about 137×44. It never mirrors; only its position moves to inline-start. */
.p-appbar__logo { display: block; block-size: 44px; inline-size: auto; max-inline-size: 140px; }
.p-appbar__back { gap: var(--space-1); font: var(--t-label); letter-spacing: var(--t-label-tracking); text-transform: uppercase; }
.p-appbar__back:hover { color: var(--sabz-700); }
.p-appbar__end { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; margin-inline-start: auto; }
[lang="ur"] .p-appbar__back { font: var(--t-urdu-label); letter-spacing: normal; text-transform: none; }
/* On narrow phones the live word gives way first, so the language toggle never leaves the bar. */
.p-appbar__end .p-liveindicator { flex: 0 1 auto; min-inline-size: 0; }
.p-appbar__end .p-liveindicator__text { min-inline-size: 0; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; }

/* ---------- 2. LanguageToggle ---------- */
.p-languagetoggle {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  border: var(--border-key) solid var(--sabz-700);
  border-radius: var(--radius-md);
}
.p-languagetoggle__btn {
  min-block-size: var(--tap);
  min-inline-size: var(--tap);
  margin: 0;
  padding-block: 0;
  padding-inline: var(--space-3);
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.p-languagetoggle__btn:hover { background: var(--sabz-100); }
.p-languagetoggle__btn[aria-pressed="true"],
.p-languagetoggle__btn[aria-pressed="true"]:hover { background: var(--sabz-700); color: var(--ink-on-dark); }
/* The inner focus ring would be clipped by the frame, so draw it inside. */
.p-languagetoggle__btn:focus-visible { outline-offset: -3px; }
/* The Urdu button is always Nastaliq, on an English page too. The EN button stays condensed on an Urdu page,
   so there is deliberately no [lang="ur"] .p-languagetoggle__btn rule. */
.p-languagetoggle__btn[lang="ur"] { font: var(--t-urdu-label); letter-spacing: normal; text-transform: none; }

/* ---------- 3. LiveIndicator ---------- */
.p-liveindicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--ink);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}
.p-liveindicator[hidden] { display: none; }
.p-liveindicator__dot { flex: none; inline-size: 8px; block-size: 8px; border-radius: var(--radius-round); background: var(--sabz-700); }
.p-liveindicator--reconnecting .p-liveindicator__dot { background: var(--zard-500); }
[lang="ur"] .p-liveindicator { font: var(--t-urdu-label); letter-spacing: normal; text-transform: none; }

/* ---------- 4. Panel ---------- */
/* The host must be position: relative; container-type: inline-size; with a definite height. */
.p-panel {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border-block-start: var(--border-rule) solid var(--rule);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: var(--shadow-sheet);
  transition: block-size 0.25s ease;
}
.p-panel[data-snap="down"] { block-size: 150px; }
.p-panel[data-snap="half"] { block-size: 55%; }
.p-panel[data-snap="full"] { block-size: calc(100% - 8px); }
.p-panel--dragging { transition: none; }
.p-panel__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 100%;
  block-size: var(--tap);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.p-panel__handle:active { cursor: grabbing; }
.p-panel__handle:focus-visible { outline-offset: -3px; }
.p-panel__bar {
  inline-size: 40px;
  block-size: 4px;
  border-radius: var(--radius-round);
  background: color-mix(in srgb, var(--ink-muted) 55%, var(--line));
}
.p-panel__body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; }

@container (min-width: 940px) {
  .p-panel,
  .p-panel[data-snap] {
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    inline-size: 440px;
    block-size: auto;
    border-block-start: 0;
    border-radius: 0;
    border-inline-end: var(--border-key) solid var(--line);
    box-shadow: none;
    transition: none;
  }
  .p-panel__handle { display: none; }
  .p-panel .p-appbar { min-block-size: 64px; padding-inline: var(--space-5); }
}

/* ---------- 5. SearchField ---------- */
.p-searchfield {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}
.p-searchfield__field {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 52px;
  gap: var(--space-2);
  padding-inline: var(--space-3) var(--space-1);
  border: var(--border-key) solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  cursor: text;
}
.p-searchfield__field:has(.p-searchfield__input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.p-searchfield__field > svg { flex: none; }
.p-searchfield__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: var(--t-body);
  letter-spacing: var(--t-body-tracking);
  appearance: none;
}
.p-searchfield__field .p-searchfield__input:focus-visible { outline: none; }
.p-searchfield__input::placeholder { color: var(--ink-muted); opacity: 1; }
.p-searchfield__input::-webkit-search-cancel-button,
.p-searchfield__input::-webkit-search-decoration { appearance: none; display: none; }
.p-searchfield__clear[hidden] { display: none; }
.p-searchfield__route {
  flex: none;
  min-block-size: 52px;
  white-space: nowrap;
}

[lang="ur"] .p-searchfield__input {
  font: var(--t-urdu-body);
  letter-spacing: normal;
  padding-block: var(--space-1);
}

/* ---------- 6. SegmentedControl ---------- */
.p-segmentedcontrol {
  display: flex;
  min-block-size: var(--tap);
  border: var(--border-key) solid var(--sabz-700);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.p-segmentedcontrol__option {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-inline-size: 0;
  margin: 0;
  padding-block: 0;
  padding-inline: var(--space-2);
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--sabz-700);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.p-segmentedcontrol__option + .p-segmentedcontrol__option { border-inline-start: var(--border-key) solid var(--sabz-700); }
.p-segmentedcontrol__option:hover { background: var(--sabz-100); }
.p-segmentedcontrol__option[aria-pressed="true"],
.p-segmentedcontrol__option[aria-current] { background: var(--sabz-700); color: var(--ink-on-dark); }
.p-segmentedcontrol__option[aria-pressed="true"]:hover,
.p-segmentedcontrol__option[aria-current]:hover { background: var(--sabz-800); }
/* The control clips its corners, so the focus ring sits inside the option. */
.p-segmentedcontrol__option:focus-visible { outline-offset: -4px; }
.p-segmentedcontrol__option[aria-pressed="true"]:focus-visible,
.p-segmentedcontrol__option[aria-current]:focus-visible { outline-color: var(--ink-on-dark); }

[lang="ur"] .p-segmentedcontrol__option {
  font: var(--t-urdu-label);
  letter-spacing: normal;
  text-transform: none;
}

/* ---------- 7. StationFields ---------- */
.p-stationfields {
  position: relative;
  border: var(--border-key) solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.p-stationfields__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 52px;
  margin: 0;
  /* Leaves room for the swap button at inline-end. */
  padding-block: var(--space-1);
  padding-inline: var(--space-3) calc(var(--tap) + var(--space-2) * 2);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.p-stationfields__field:first-child { border-start-start-radius: var(--radius-md); border-start-end-radius: var(--radius-md); }
.p-stationfields__field:nth-child(2) {
  border-block-start: var(--border-key) solid var(--line);
  border-end-start-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}
.p-stationfields__field:hover { background: var(--ground); }
.p-stationfields__field:focus-visible { outline-offset: -3px; }
.p-stationfields__label {
  color: var(--ink-muted);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
}
.p-stationfields__name {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  font: var(--t-body-strong);
  letter-spacing: var(--t-body-strong-tracking);
}
.p-stationfields__name--empty {
  color: var(--ink-muted);
  font: var(--t-body);
  letter-spacing: var(--t-body-tracking);
}
/* Centred on the divider between the two fields. */
.p-stationfields__swap {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--space-2);
  transform: translateY(-50%);
}

/* Nastaliq's tall marks need air between the label and the name. */
[lang="ur"] .p-stationfields__field { gap: var(--space-1); padding-block: var(--space-2); }
[lang="ur"] .p-stationfields__label {
  font: var(--t-urdu-label);
  letter-spacing: normal;
  text-transform: none;
}
[lang="ur"] .p-stationfields__name,
[lang="ur"] .p-stationfields__name--empty {
  font: var(--t-urdu-body);
  letter-spacing: normal;
}

/* ---------- 8. IconButton ---------- */
.p-iconbutton {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--tap);
  block-size: var(--tap);
  margin: 0;
  padding: 0;
  border: var(--border-key) solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.p-iconbutton svg { display: block; }
.p-iconbutton:hover { background: var(--ground); }
.p-iconbutton--outline { border-color: var(--line); background: var(--surface); }
.p-iconbutton--float { background: var(--surface); box-shadow: var(--shadow-float); }
.p-iconbutton--outline:hover,
.p-iconbutton--float:hover { background: var(--sabz-100); }
.p-iconbutton[aria-pressed="true"] { color: var(--sabz-700); }

/* ---------- 9. FollowButton ---------- */
.p-followbutton { color: var(--ink-muted); }
.p-followbutton[aria-pressed="true"] { color: var(--sabz-700); }

/* ---------- 10. MapToggle ---------- */
.p-maptoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--tap);
  margin: 0;
  padding-block: 0;
  padding-inline: var(--space-4);
  border: var(--border-key) solid transparent;
  border-radius: var(--radius-md);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.p-maptoggle--on { background: var(--sabz-700); color: var(--ink-on-dark); }
.p-maptoggle--on:hover { background: var(--sabz-800); }
.p-maptoggle--off { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); }
.p-maptoggle--off:hover { background: var(--sabz-100); }

[lang="ur"] .p-maptoggle {
  font: var(--t-urdu-label);
  letter-spacing: normal;
  text-transform: none;
}

/* ---------- 11. TrainBadge ---------- */
.p-trainbadge {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--sabz-900);
  text-align: center;
}
.p-trainbadge--sm { inline-size: 40px; block-size: 40px; }
.p-trainbadge--md { inline-size: 54px; block-size: 54px; }
.p-trainbadge--lg { inline-size: 64px; block-size: 64px; gap: var(--space-1); }
.p-trainbadge__number {
  color: var(--zard-500);
  font: var(--t-number);
  letter-spacing: var(--t-number-tracking);
  font-variant-numeric: tabular-nums;
}
.p-trainbadge__dir {
  color: var(--ink-on-dark);
  font: var(--t-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding-inline-start: 0.3em; /* balances the trailing letter-space so UP/DN sit centred */
}
/* Small badge: the 17px time style for the number so three digits fit in 40px. */
.p-trainbadge--sm .p-trainbadge__number { font: var(--t-time); letter-spacing: var(--t-time-tracking); font-variant-numeric: tabular-nums; }
.p-trainbadge--sm .p-trainbadge__dir { font: var(--t-time-sm); letter-spacing: 0.3em; }
/* Urdu: Nastaliq is tall, so a tight line box keeps اپ / ڈاؤن inside the square. */
[lang="ur"] .p-trainbadge__dir {
  font: var(--t-urdu-label);
  font-size: 0.8em;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
  padding-inline-start: 0;
}
[lang="ur"] .p-trainbadge--sm .p-trainbadge__dir { font: var(--t-urdu-label); font-size: 0.75em; line-height: 1.1; letter-spacing: normal; }

/* ---------- 12. StatusChip ---------- */
.p-statuschip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}
.p-statuschip--ontime { background: var(--status-ontime-bg); color: var(--status-ontime-fg); }
.p-statuschip--late { background: var(--status-late-bg); color: var(--status-late-fg); }
.p-statuschip--early { background: var(--status-early-bg); color: var(--status-early-fg); }
.p-statuschip--nogps { background: var(--status-nogps-bg); color: var(--status-nogps-fg); }
.p-statuschip--neutral { padding: 0; background: none; color: var(--ink-muted); }
.p-statuschip__dot {
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--radius-round);
  background: currentColor;
}
[lang="ur"] .p-statuschip {
  padding-block: 0;
  font: var(--t-urdu-label);
  letter-spacing: normal;
  text-transform: none;
}

/* StatusStrip: [● running][delay] in one sabz-700 frame, then "updated". */
.p-statusstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}
.p-statusstrip__frame {
  display: flex;
  min-inline-size: 0;
  max-inline-size: 100%;
  border: var(--border-key) solid var(--sabz-700);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.p-statusstrip__running,
.p-statusstrip__delay {
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
}
.p-statusstrip__running {
  gap: var(--space-2);
  background: var(--sabz-100);
  color: var(--sabz-700);
}
.p-statusstrip__dot {
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-round);
  background: var(--sabz-700);
}
.p-statusstrip__delay { border-inline-start: var(--border-key) solid var(--sabz-700); }
.p-statusstrip__delay--ontime { background: var(--status-ontime-bg); color: var(--status-ontime-fg); }
.p-statusstrip__delay--late { background: var(--status-late-bg); color: var(--status-late-fg); }
.p-statusstrip__delay--early { background: var(--status-early-bg); color: var(--status-early-fg); }
.p-statusstrip__delay--nogps { background: var(--status-nogps-bg); color: var(--status-nogps-fg); }
.p-statusstrip__updated {
  color: var(--ink-muted);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
}
[lang="ur"] .p-statusstrip__running,
[lang="ur"] .p-statusstrip__delay,
[lang="ur"] .p-statusstrip__updated {
  font: var(--t-urdu-label);
  letter-spacing: normal;
  text-transform: none;
}
[lang="ur"] .p-statusstrip__running,
[lang="ur"] .p-statusstrip__delay { padding-block: 0; }

/* ---------- 13. TrainCard ---------- */
.p-traincard {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.p-traincard:hover { border-color: var(--sabz-700); }
.p-traincard__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-inline-size: 0;
}
.p-traincard__name { font: var(--t-heading); letter-spacing: var(--t-heading-tracking); }
.p-traincard__position { color: var(--ink-muted); font: var(--t-caption); letter-spacing: var(--t-caption-tracking); }
.p-traincard__stop {
  margin-block-start: var(--space-1);
  font: var(--t-time-sm);
  letter-spacing: var(--t-time-sm-tracking);
  font-variant-numeric: tabular-nums;
}
.p-traincard__stoplabel { color: var(--ink-muted); }
.p-traincard__stop bdi { white-space: nowrap; }
.p-traincard__status { flex: none; align-self: flex-start; }
[lang="ur"] .p-traincard__name { font: var(--t-urdu-body); letter-spacing: var(--t-urdu-body-tracking); }
[lang="ur"] .p-traincard__position { font: var(--t-urdu-label); letter-spacing: normal; }
[lang="ur"] .p-traincard__stop { font: var(--t-urdu-label); letter-spacing: normal; }
[lang="ur"] .p-traincard__stop bdi { font: var(--t-time-sm); letter-spacing: var(--t-time-sm-tracking); font-variant-numeric: tabular-nums; }

/* ---------- 14. TrainRow ---------- */
.p-trainrow {
  display: flex;
  align-items: center;
  border-block-end: var(--border-thin) solid var(--line-soft);
}
.p-trainrow__link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  min-block-size: 56px;
  padding-block: var(--space-2);
  color: var(--ink);
  text-decoration: none;
}
.p-trainrow__main { display: flex; flex: 1; flex-direction: column; min-inline-size: 0; }
.p-trainrow__name { font: var(--t-body-strong); letter-spacing: var(--t-body-strong-tracking); }
.p-trainrow__sub { color: var(--ink-muted); font: var(--t-caption); letter-spacing: var(--t-caption-tracking); }
.p-trainrow__status { flex: none; }
.p-trainrow mark { background: var(--zard-100); color: inherit; }
[lang="ur"] .p-trainrow__name { font: var(--t-urdu-body); letter-spacing: var(--t-urdu-body-tracking); }
[lang="ur"] .p-trainrow__sub { font: var(--t-urdu-label); letter-spacing: normal; }

/* ---------- 15. DepartureRow ---------- */
.p-departurerow {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-block-size: 56px;
  padding-block: var(--space-3);
  border-block-end: var(--border-thin) solid var(--line-soft);
  color: var(--ink);
  text-decoration: none;
}
.p-departurerow__time {
  display: flex;
  flex: none;
  flex-direction: column;
  inline-size: 76px;
}
.p-departurerow__caption {
  color: var(--ink-muted);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
}
.p-departurerow__expected {
  font: var(--t-time);
  letter-spacing: var(--t-time-tracking);
  font-variant-numeric: tabular-nums;
}
.p-departurerow__sched {
  color: var(--ink-muted);
  font: var(--t-time-sm);
  letter-spacing: var(--t-time-sm-tracking);
  font-variant-numeric: tabular-nums;
}
.p-departurerow__main { display: flex; flex: 1; flex-direction: column; align-items: flex-start; min-inline-size: 0; }
.p-departurerow__num {
  color: var(--ink-muted);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
}
.p-departurerow__name { font: var(--t-body-strong); letter-spacing: var(--t-body-strong-tracking); }
.p-departurerow__sub { color: var(--ink-muted); font: var(--t-caption); letter-spacing: var(--t-caption-tracking); }
.p-departurerow__status { margin-block-start: var(--space-1); }
[lang="ur"] .p-departurerow__caption { font: var(--t-urdu-label); letter-spacing: normal; text-transform: none; }
[lang="ur"] .p-departurerow__num { font: var(--t-urdu-label); letter-spacing: normal; text-transform: none; }
[lang="ur"] .p-departurerow__num bdi { font: var(--t-label); letter-spacing: var(--t-label-tracking); }
[lang="ur"] .p-departurerow__name { font: var(--t-urdu-body); letter-spacing: var(--t-urdu-body-tracking); }
[lang="ur"] .p-departurerow__sub { font: var(--t-urdu-label); letter-spacing: normal; }

/* ---------- 16. StopTimeline ---------- */
.p-stoptimeline {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-stoptimeline__row {
  --rail-a: var(--line);
  --rail-b: var(--line);
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: stretch;
  min-block-size: 46px;
  padding-inline: var(--space-2);
  border-block-end: var(--border-thin) solid var(--line-soft);
  color: var(--ink);
}
.p-stoptimeline__row:last-child { border-block-end: 0; }

/* The rail: a 2px line through the row, and the marker centred on it. */
.p-stoptimeline__rail {
  position: relative;
  display: grid;
  place-items: center;
}
.p-stoptimeline__rail::before {
  content: "";
  position: absolute;
  inset-block: 0 -1px;
  inset-inline-start: 50%;
  inline-size: 2px;
  margin-inline-start: -1px;
  background: linear-gradient(to bottom, var(--rail-a) 50%, var(--rail-b) 50%);
}
.p-stoptimeline__row:first-child .p-stoptimeline__rail::before,
.p-stoptimeline__legend + .p-stoptimeline__row .p-stoptimeline__rail::before { inset-block-start: 50%; }
.p-stoptimeline__row:last-child .p-stoptimeline__rail::before { inset-block-end: 50%; }
.p-stoptimeline__dot {
  position: relative;
  z-index: 1;
  inline-size: 12px;
  block-size: 12px;
  border: 2px solid var(--ink-muted);
  border-radius: var(--radius-round);
  background: var(--surface);
}

.p-stoptimeline__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-inline-size: 0;
  padding-block: var(--space-2);
  padding-inline: var(--space-2);
}
.p-stoptimeline__name {
  color: inherit;
  font: var(--t-body-strong);
  letter-spacing: var(--t-body-strong-tracking);
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* A linked name stretches its hit area over the whole row, so the row is the tap target. */
.p-stoptimeline__name[href]::after { content: ""; position: absolute; inset: 0; }
.p-stoptimeline__name[href]:hover { text-decoration: underline; text-underline-offset: 3px; }
.p-stoptimeline__name[href]:focus-visible { outline: none; }
.p-stoptimeline__row:has(.p-stoptimeline__name:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.p-stoptimeline__sub {
  color: var(--ink-muted);
  font: var(--t-caption);
  letter-spacing: var(--t-caption-tracking);
}
.p-stoptimeline .p-stoptimeline__change {
  align-self: flex-start;
  font: var(--t-caption);
  letter-spacing: var(--t-caption-tracking);
  font-weight: 700;
}

.p-stoptimeline__time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-inline-size: 76px;
  padding-block: var(--space-2);
  padding-inline-start: var(--space-2);
  text-align: end;
  white-space: nowrap;
}
.p-stoptimeline__expected {
  font: var(--t-time);
  letter-spacing: var(--t-time-tracking);
  font-variant-numeric: tabular-nums;
}
.p-stoptimeline__scheduled,
.p-stoptimeline__countdown {
  font: var(--t-time-sm);
  letter-spacing: var(--t-time-sm-tracking);
  font-variant-numeric: tabular-nums;
}
.p-stoptimeline__scheduled { color: var(--ink-muted); text-decoration: line-through; }
.p-stoptimeline__countdown { color: var(--ink-muted); }

/* The expected / scheduled key: at the end edge, over the time column. */
.p-stoptimeline__legend {
  display: block;
  padding-block: var(--space-2) var(--space-1);
  padding-inline: var(--space-2);
  border-block-end: var(--border-thin) solid var(--line-soft);
  color: var(--ink);
  font: var(--t-time-sm);
  letter-spacing: var(--t-time-sm-tracking);
  text-align: end;
  white-space: nowrap;
}
.p-stoptimeline__legend-scheduled { color: var(--ink-muted); text-decoration: line-through; }

/* Modes. Compact (the Right now card) is tighter; full (All stops) is roomier and shows sub. */
.p-stoptimeline--full .p-stoptimeline__main,
.p-stoptimeline--full .p-stoptimeline__time { padding-block: var(--space-3); }
.p-stoptimeline--full .p-stoptimeline__row { min-block-size: 56px; }

/* Kinds. */
.p-stoptimeline__row--passed { --rail-a: var(--ink-passed); --rail-b: var(--ink-passed); color: var(--ink-passed); }
.p-stoptimeline__row--passed .p-stoptimeline__dot { inline-size: 10px; block-size: 10px; border-color: var(--ink-passed); background: var(--ink-passed); }
.p-stoptimeline__row--passed .p-stoptimeline__sub,
.p-stoptimeline__row--passed .p-stoptimeline__scheduled,
.p-stoptimeline__row--passed .p-stoptimeline__countdown { color: var(--ink-passed); }

.p-stoptimeline__row--train { --rail-a: var(--ink-passed); --rail-b: var(--line); }
.p-stoptimeline__row--train .p-stoptimeline__name {
  color: var(--sabz-700);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
}
.p-stoptimeline__row--train .p-stoptimeline__dot {
  inline-size: 16px;
  block-size: 16px;
  border: 3px solid var(--sabz-900);
  background: var(--zard-500);
}

.p-stoptimeline__row--next { background: var(--zard-100); }
.p-stoptimeline__row--next .p-stoptimeline__dot { inline-size: 14px; block-size: 14px; border: 3px solid var(--sabz-700); }
.p-stoptimeline__row--next .p-stoptimeline__countdown { color: var(--ink); }

.p-stoptimeline__row--yourstop {
  --rail-a: color-mix(in srgb, var(--ink-on-dark) 35%, transparent);
  --rail-b: color-mix(in srgb, var(--ink-on-dark) 35%, transparent);
  border-block-end-color: var(--sabz-900);
  background: var(--sabz-900);
  color: var(--ink-on-dark);
}
.p-stoptimeline__row--yourstop .p-stoptimeline__dot { inline-size: 14px; block-size: 14px; border: 3px solid var(--zard-500); background: var(--sabz-900); }
.p-stoptimeline__row--yourstop .p-stoptimeline__sub,
.p-stoptimeline__row--yourstop .p-stoptimeline__scheduled,
.p-stoptimeline__row--yourstop .p-stoptimeline__countdown { color: var(--ink-on-dark-muted); }
.p-stoptimeline__row--yourstop .p-stoptimeline__expected,
.p-stoptimeline__row--yourstop .p-stoptimeline__change { color: var(--zard-500); }

/* A collapsed run of stops: no marker, a dotted rail, and a link for a name. */
.p-stoptimeline__row--more .p-stoptimeline__dot { display: none; }
.p-stoptimeline__row--more .p-stoptimeline__rail::before {
  background: repeating-linear-gradient(to bottom, var(--ink-passed) 0 3px, transparent 3px 7px);
}
.p-stoptimeline__row--more .p-stoptimeline__name {
  color: var(--sabz-700);
  text-decoration: underline;
  text-decoration-thickness: var(--border-key);
  text-underline-offset: 3px;
}

.p-stoptimeline__row--final .p-stoptimeline__dot {
  inline-size: 12px;
  block-size: 12px;
  border: 0;
  border-radius: 2px;
  background: var(--ink);
}

/* Urdu: names in urdu-body, the train label and sub lines in urdu-label; times stay condensed Latin. */
[lang="ur"] .p-stoptimeline__name { font: var(--t-urdu-body); letter-spacing: normal; }
[lang="ur"] .p-stoptimeline__row--train .p-stoptimeline__name { font: var(--t-urdu-label); letter-spacing: normal; text-transform: none; }
[lang="ur"] .p-stoptimeline__sub,
[lang="ur"] .p-stoptimeline .p-stoptimeline__change { font: var(--t-urdu-label); letter-spacing: normal; }
[lang="ur"] .p-stoptimeline__countdown,
[lang="ur"] .p-stoptimeline__legend { font: var(--t-urdu-label); letter-spacing: normal; }
[lang="ur"] .p-stoptimeline .p-stoptimeline__change { font-weight: 700; }

/* ---------- 17. JourneyProgress ---------- */
.p-journeyprogress { display: block; }
.p-journeyprogress__track {
  block-size: 8px;
  border-radius: var(--radius-round);
  background: var(--sabz-100);
  overflow: hidden;
}
/* Grows from inline-start, so it runs right to left in Urdu without any extra rule. */
.p-journeyprogress__fill {
  display: block;
  inline-size: var(--p, 0%);
  block-size: 100%;
  border-radius: var(--radius-round);
  background: var(--sabz-700);
}
.p-journeyprogress__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
  color: var(--ink-muted);
  font: var(--t-time-sm);
  letter-spacing: var(--t-time-sm-tracking);
}
.p-journeyprogress__end { text-align: end; }

[lang="ur"] .p-journeyprogress__labels {
  font: var(--t-urdu-label);
  letter-spacing: normal;
}

/* ---------- 18. SectionHeader ---------- */
.p-sectionheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.p-sectionheader--ruled { padding-block-end: var(--space-2); border-block-end: var(--border-rule) solid var(--rule); }
.p-sectionheader__label { margin: 0; color: var(--ink); font: var(--t-label); letter-spacing: var(--t-label-tracking); text-transform: uppercase; }
.p-sectionheader__action {
  position: relative;
  flex: none;
  color: var(--sabz-700);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
  text-decoration: none;
}
/* The ::before gives a 44px hit area without growing the row. */
.p-sectionheader__action::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  left: 50%;
  inline-size: max(100%, var(--tap));
  block-size: var(--tap);
  transform: translate(-50%, -50%);
}
.p-sectionheader__action:hover { color: var(--sabz-800); text-decoration: underline; text-underline-offset: 3px; }
[lang="ur"] .p-sectionheader__label,
[lang="ur"] .p-sectionheader__action { font: var(--t-urdu-label); letter-spacing: normal; text-transform: none; }

/* ---------- 19. DetailGrid ---------- */
.p-detailgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
.p-detailgrid__item { min-inline-size: 0; }
.p-detailgrid__label {
  margin: 0;
  color: var(--ink-muted);
  font: var(--t-caption);
  letter-spacing: var(--t-caption-tracking);
}
.p-detailgrid__value {
  margin: 0;
  overflow-wrap: anywhere;
  font: var(--t-body-strong);
  letter-spacing: var(--t-body-strong-tracking);
}
/* An Urdu value on an English page keeps the label's side: the box shrinks to its text and sits at the grid's start. */
.p-detailgrid__value[lang="ur"] {
  inline-size: fit-content;
  max-inline-size: 100%;
  font: var(--t-urdu-body);
  letter-spacing: normal;
}

[lang="ur"] .p-detailgrid__label {
  font: var(--t-urdu-label);
  letter-spacing: normal;
}
[lang="ur"] .p-detailgrid__value {
  font: var(--t-urdu-body);
  letter-spacing: normal;
}

/* ---------- 20. LinkRow ---------- */
.p-linkrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 56px;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: var(--border-key) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.p-linkrow:hover { background: var(--ground); }
.p-linkrow > svg { flex: none; color: var(--ink-muted); }
.p-linkrow__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-inline-size: 0;
}
.p-linkrow__eyebrow {
  color: var(--ink-muted);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
}
.p-linkrow__label {
  overflow-wrap: anywhere;
  font: var(--t-body-strong);
  letter-spacing: var(--t-body-strong-tracking);
}

[lang="ur"] .p-linkrow__eyebrow {
  font: var(--t-urdu-label);
  letter-spacing: normal;
  text-transform: none;
}
[lang="ur"] .p-linkrow__label {
  font: var(--t-urdu-body);
  letter-spacing: normal;
}

/* ---------- 21. SpeedChart ---------- */
.p-speedchart { display: block; }
.p-speedchart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
}
.p-speedchart__title {
  color: var(--sabz-700);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
}
.p-speedchart__avg {
  color: var(--ink);
  font: var(--t-number);
  letter-spacing: var(--t-number-tracking);
  font-variant-numeric: tabular-nums;
}
.p-speedchart__avg small {
  color: var(--ink-muted);
  font: var(--t-time-sm);
  letter-spacing: var(--t-time-sm-tracking);
  text-transform: none;
}
.p-speedchart__top {
  color: var(--ink-muted);
  font: var(--t-caption);
  letter-spacing: var(--t-caption-tracking);
}
.p-speedchart__empty {
  margin: var(--space-2) 0;
  color: var(--ink-muted);
  font: var(--t-caption);
  letter-spacing: var(--t-caption-tracking);
}

/* The plot. The SVG stretches to the box; the dot, marks and tip are HTML so they stay crisp and round. */
.p-speedchart__plot {
  position: relative;
  block-size: 84px;
  margin-block-start: var(--space-5);
  touch-action: none;
}
.p-speedchart__svg { display: block; inline-size: 100%; block-size: 100%; }
[dir="rtl"] .p-speedchart__svg { transform: scaleX(-1); }
.p-speedchart__grid { fill: none; stroke: var(--line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-speedchart__area { fill: var(--sabz-100); }
.p-speedchart__line {
  fill: none;
  stroke: var(--sabz-700);
  stroke-width: 2.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.p-speedchart__mark {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--x);
  border-inline-start: var(--border-key) dashed var(--line);
  pointer-events: none;
}
.p-speedchart__now {
  position: absolute;
  inset-block-start: var(--y);
  inset-inline-start: var(--x);
  inline-size: 14px;
  block-size: 14px;
  margin-block-start: -7px;
  margin-inline-start: -7px;
  border: 3px solid var(--sabz-900);
  border-radius: var(--radius-round);
  background: var(--zard-500);
  pointer-events: none;
}
.p-speedchart__cursor {
  position: absolute;
  inset-block: 0;
  border-inline-start: var(--border-key) solid var(--ink);
  pointer-events: none;
}
.p-speedchart__tip {
  position: absolute;
  inset-block-start: -22px;
  padding-block: 1px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--sabz-900);
  color: var(--ink-on-dark);
  font: var(--t-time-sm);
  letter-spacing: var(--t-time-sm-tracking);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: var(--shadow-float);
  transform: translateX(-50%);
  pointer-events: none;
}
[dir="rtl"] .p-speedchart__tip { transform: translateX(50%); }
.p-speedchart__cursor[hidden],
.p-speedchart__tip[hidden] { display: none; }

/* The axis: station names under their marks, then the start time and "Now". */
.p-speedchart__axis { padding-block-start: var(--space-1); color: var(--ink-muted); }
.p-speedchart__stations { position: relative; block-size: 18px; }
.p-speedchart__station {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--x);
  color: var(--sabz-700);
  font: var(--t-time-sm);
  letter-spacing: var(--t-time-sm-tracking);
  white-space: nowrap;
  transform: translateX(-50%);
}
[dir="rtl"] .p-speedchart__station { transform: translateX(50%); }
.p-speedchart__ticks { display: flex; justify-content: space-between; }
.p-speedchart__tick {
  font: var(--t-time-sm);
  letter-spacing: var(--t-time-sm-tracking);
  font-variant-numeric: tabular-nums;
}

[lang="ur"] .p-speedchart__title,
[lang="ur"] .p-speedchart__top,
[lang="ur"] .p-speedchart__avg small,
[lang="ur"] .p-speedchart__tick--end,
[lang="ur"] .p-speedchart__tip { font: var(--t-urdu-label); letter-spacing: normal; text-transform: none; }
[lang="ur"] .p-speedchart__tip { padding-block: 0; }
[lang="ur"] .p-speedchart__station { font: var(--t-urdu-label); letter-spacing: normal; }
[lang="ur"] .p-speedchart__stations { block-size: 32px; }
[lang="ur"] .p-speedchart__plot { margin-block-start: var(--space-8); }
[lang="ur"] .p-speedchart__tip { inset-block-start: -34px; }

/* ---------- 22. MapMarkers ---------- */
/* The root is the 22px dot, so a map marker anchored at its centre sits on the train; the label overflows to the side. */
.p-trainmarker {
  display: flex;
  align-items: center;
  inline-size: 22px;
  block-size: 22px;
}
.p-trainmarker__dot {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  border: 3px solid var(--sabz-900);
  border-radius: var(--radius-round);
  background: var(--zard-500);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--zard-500) 40%, transparent);
}
.p-trainmarker__label {
  flex: none;
  margin-inline-start: var(--space-3);
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--sabz-900);
  color: var(--zard-500);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: var(--shadow-float);
}
[lang="ur"] .p-trainmarker__label { font: var(--t-urdu-label); letter-spacing: normal; text-transform: none; padding-block: 0; }

.p-maplabel {
  display: inline-flex;
  flex-direction: column;
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border: var(--border-key) solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-float);
  white-space: nowrap;
}
.p-maplabel__title { font: var(--t-body-strong); letter-spacing: var(--t-body-strong-tracking); }
.p-maplabel__sub { font: var(--t-caption); letter-spacing: var(--t-caption-tracking); font-variant-numeric: tabular-nums; }
.p-maplabel--next,
.p-maplabel--hover { border-color: var(--sabz-700); background: var(--surface); color: var(--ink); }
.p-maplabel--next .p-maplabel__sub,
.p-maplabel--hover .p-maplabel__sub { color: var(--ink-muted); }
.p-maplabel--yourstop,
.p-maplabel--selected { border-color: var(--sabz-900); background: var(--sabz-900); color: var(--zard-500); }
.p-maplabel--yourstop .p-maplabel__sub,
.p-maplabel--selected .p-maplabel__sub { color: var(--ink-on-dark-muted); }
[lang="ur"] .p-maplabel__title { font: var(--t-urdu-body); letter-spacing: normal; }
[lang="ur"] .p-maplabel__sub { font: var(--t-urdu-label); letter-spacing: normal; }

/* ---------- 23. Button ---------- */
.p-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.p-button--primary,
.p-button--secondary {
  min-block-size: 48px;
  padding-block: 0;
  padding-inline: var(--space-5);
  border: var(--border-key) solid var(--sabz-700);
  border-radius: var(--radius-md);
  font: var(--t-label);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
}
.p-button--primary { background: var(--sabz-700); color: var(--ink-on-dark); }
.p-button--primary:hover { background: var(--sabz-800); border-color: var(--sabz-800); }
.p-button--secondary { background: var(--surface); color: var(--sabz-700); }
.p-button--secondary:hover { background: var(--sabz-100); }
.p-button--full { display: flex; inline-size: 100%; }
.p-button svg { flex: none; }

/* Inline underlined text; the ::before gives a 44px hit area without changing the layout. */
.p-button--link {
  position: relative;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--sabz-700);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: var(--border-key);
  text-underline-offset: 3px;
}
.p-button--link::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  left: 50%;
  inline-size: max(100%, var(--tap));
  block-size: var(--tap);
  transform: translate(-50%, -50%);
}
.p-button--link:hover { color: var(--sabz-800); }

[lang="ur"] .p-button--primary,
[lang="ur"] .p-button--secondary {
  font: var(--t-urdu-label);
  letter-spacing: normal;
  text-transform: none;
}

/* ---------- 24. Card ---------- */
.p-card {
  container-type: inline-size;
  background: var(--surface);
  border-radius: var(--radius-md);
}
.p-card--plain { border: var(--border-thin) solid var(--line); }
.p-card--key { border: var(--border-key) solid var(--sabz-700); }
.p-card > .p-sectionheader { margin-block-start: var(--space-3); margin-inline: var(--space-3); }
.p-card__body { padding: var(--space-3); }
@container (min-width: 480px) {
  .p-card > .p-sectionheader { margin-block-start: var(--space-4); margin-inline: var(--space-4); }
  .p-card__body { padding: var(--space-4); }
}

/* ---------- 25. PageHeader ---------- */
.p-pageheader {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
}
.p-pageheader__back,
.p-pageheader > .p-trainbadge,
.p-pageheader__mark,
.p-pageheader__actions { flex: none; }
/* The station mark: a 50px circle with a zard-500 ring, the pin in sabz-700. */
.p-pageheader__mark {
  display: inline-grid;
  place-items: center;
  inline-size: 50px;
  block-size: 50px;
  border: var(--border-rule) solid var(--zard-500);
  border-radius: 50%;
  background: var(--surface);
  color: var(--sabz-700);
}
.p-pageheader__mark svg { display: block; inline-size: 22px; block-size: 22px; }
/* Long names wrap inside the text block; the actions never shrink. */
.p-pageheader__text { display: flex; flex: 1; flex-direction: column; min-inline-size: 0; }
.p-pageheader__title { margin: 0; font: var(--t-title); letter-spacing: var(--t-title-tracking); overflow-wrap: anywhere; }
/* The second line: the Urdu name under an English title. The inline span inside keeps it at the title's start edge. */
.p-pageheader__alt { margin: 0; font: var(--t-urdu-body); letter-spacing: var(--t-urdu-body-tracking); overflow-wrap: anywhere; }
/* The English name under an Urdu title: Latin type again. */
.p-pageheader__alt--latin { font: var(--t-body-strong); letter-spacing: var(--t-body-strong-tracking); }
.p-pageheader__subtitle { margin: 0; color: var(--ink-muted); font: var(--t-caption); letter-spacing: var(--t-caption-tracking); overflow-wrap: anywhere; }
.p-pageheader__actions { display: flex; align-items: center; }
[lang="ur"] .p-pageheader__title { font: var(--t-urdu-title); letter-spacing: var(--t-urdu-title-tracking); }
[lang="ur"] .p-pageheader__subtitle { font: var(--t-urdu-label); letter-spacing: normal; }