/* Pakistan in Numbers beside an article (includes/aside.php): an ink rule, the name, then one row per tracker:
   its name and number on one line, its recent path and last move under them. */
.ttn-a { border-top: 3px solid currentColor; padding-top: 14px; }
.ttn-a *, .ttn-a *::before, .ttn-a *::after { box-sizing: border-box; }
.ttn-a a { color: inherit; text-decoration: none; }
.ttn-a a:focus-visible { outline: 3px solid var(--tt-orange, #ff4200); outline-offset: 2px; }

.ttn-a__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.ttn-a__label { font-family: var(--font-display, "Chivo", Arial, sans-serif); font-weight: 900; font-size: 13px; line-height: 1; }
.ttn-a__label b { color: var(--tt-orange, #ff4200); }
.ttn-a h2 { margin: 0; font-family: var(--font-display, "Chivo", Arial, sans-serif); font-weight: 900; font-size: 26px; line-height: 28px; letter-spacing: -0.02em; }

.ttn-a__list { list-style: none; margin: 0; padding: 0; }
.ttn-a__list li { margin: 0; border-bottom: 1px solid var(--tt-rule, rgba(0, 0, 0, 0.14)); }
.ttn-a__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name num" "line move"; column-gap: 16px; row-gap: 4px; align-items: baseline; padding: 12px 0; }
.ttn-a__row:hover .ttn-a__name { text-decoration: underline; text-decoration-color: var(--tt-orange, #ff4200); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.ttn-a__name { grid-area: name; font-family: var(--font-ui, "Alegreya Sans", Arial, sans-serif); font-weight: 700; font-size: 16px; line-height: 20px; }
.ttn-a__off { margin-inline-start: 4px; padding: 0 4px; font-style: normal; font-weight: 700; font-size: 11px; line-height: 16px; vertical-align: 1px; box-shadow: inset 0 0 0 1px currentColor; opacity: 0.7; white-space: nowrap; }
.ttn-a__num { grid-area: num; justify-self: end; font-family: var(--font-display, "Chivo", Arial, sans-serif); font-weight: 900; font-size: 22px; line-height: 24px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the path: the same line the front page draws, in ink here, its newest point in orange */
.ttn-a .ttn-f__line { grid-area: line; position: relative; display: block; height: 20px; margin-inline-end: 6px; direction: ltr; align-self: center; }
.ttn-a .ttn-f__line svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ttn-a .ttn-f__line path { fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.55; }
.ttn-a .ttn-f__line i { position: absolute; right: -3.5px; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--tt-orange, #ff4200); }

.ttn-a__move { grid-area: move; justify-self: end; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui, "Alegreya Sans", Arial, sans-serif); font-size: 13px; line-height: 18px; color: var(--tt-text-secondary, rgba(0, 0, 0, 0.62)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ttn-a__move i { flex: none; width: 0; height: 0; border-inline: 4px solid transparent; }
.ttn-a__move.is-up i { border-bottom: 7px solid currentColor; }
.ttn-a__move.is-down i { border-top: 7px solid currentColor; }
.ttn-a__move.is-flat i { width: 8px; height: 2px; border: 0; background: currentColor; }

.ttn-a__all { display: inline-block; margin-top: 14px; font-family: var(--font-ui, "Alegreya Sans", Arial, sans-serif); font-weight: 700; font-size: 15px; line-height: 20px; border-bottom: 2px solid var(--tt-orange, #ff4200); }

/* Urdu */
.ttn-a[lang="ur"] .ttn-a__name, .ttn-a[lang="ur"] .ttn-a__move, .ttn-a[lang="ur"] .ttn-a__all, .ttn-a[lang="ur"] .ttn-a__off { font-family: var(--font-urdu, "IBM Plex Sans Arabic", sans-serif); }
.ttn-a[lang="ur"] .ttn-a__name { line-height: 26px; }
.ttn-a[lang="ur"] .ttn-a__move { line-height: 22px; }
.ttn-a[lang="ur"] .ttn-f__line { margin-inline-end: 0; margin-inline-start: 6px; }