/* ============================================================
   The Balochistan Post — live coverage (live-blog) template
   Enqueued on pages using the "Live coverage" template.
   Depends on tokens.css + app.css.
   ============================================================ */

.live-band { background: var(--ink-900); color: var(--white); padding: 26px 0 22px; border-bottom: 3px solid var(--live-bg); position: relative; }
.live-band[data-status="ended"] { border-bottom-color: var(--ink-600); }
.live-band::before { display: none; }
/* The live article's featured image renders as a clear hero below the header
   (see .live-hero-img), like a normal post — not as a dimmed band background. */
.live-band-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.live-band-badge { display: inline-flex; align-items: center; gap: 9px; background: var(--live-bg); color: var(--white); font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; padding: 7px 14px; border-radius: 5px; flex-shrink: 0; }
.live-band-badge .big-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--white); flex-shrink: 0; animation: livepulse 1.3s ease-in-out infinite; }
.live-band-title { flex: 1; min-width: 200px; }
.live-band-title h1 { font-family: var(--font-urdu); font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.45; margin: 0 0 8px; color: var(--white); }
.live-band-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* No forced direction: the words are the edition's now ("آخری اپڈیٹ"), and the
   stamp inside carries its own dir. `direction: ltr` was for "Updated 2d ago". */
.live-band-meta .updated { font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; color: rgba(255,255,255,.65); display: flex; align-items: center; gap: 8px; }
.live-band-meta .updated .mins { font-weight: 700; color: var(--white); }
.live-band-counter { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; flex-shrink: 0; padding: 10px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; min-width: 100px; }
.live-band-counter .n { font-size: 28px; font-weight: 700; color: rgba(255,255,255,.9); display: block; line-height: 1; }

/* RTL reading order: the feed starts at the inline-start (right), the side
   panel sits at the inline-end (left) — mirrors LTR automatically. */
.live-page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; padding: 28px 0 56px; align-items: start; }
.live-main { order: 1; }
.live-sidebar { order: 2; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 76px; max-height: calc(100vh - 90px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; }
.live-sidebar::-webkit-scrollbar { width: 4px; }
.live-sidebar::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 10px; }
.sidebar-card { background: var(--tbp-card); border: 1px solid var(--tbp-line); border-radius: var(--r-card-lg); overflow: hidden; }
.sidebar-card-header { padding: 14px 18px 12px; border-bottom: 1px solid var(--tbp-line); display: flex; align-items: center; gap: 10px; }
.sidebar-card-header h3 { font-family: var(--font-urdu); font-weight: 800; font-size: 17px; margin: 0; color: var(--tbp-text); }
.sidebar-card-body { padding: 14px 18px 16px; }
/* Key facts — the sidebar's anchor piece: a dark fact box in the house ink,
   mono labels in the lifted red, values in bold Naskh. Mode-stable literals
   (a dark box should stay dark in dark mode too). */
.kf-card { background: #101010; color: var(--white); border-radius: 12px; padding: 18px 20px 8px; }
.kf-card h3 { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0 0 6px; }
.kf-row { display: flex; flex-direction: column; gap: 3px; padding: 11px 0 12px; border-bottom: 1px solid rgba(255,255,255,.09); }
.kf-row:last-child { border-bottom: 0; }
.kf-label { font-family: var(--font-mono); font-size: 9.5px; color: var(--red-lift); letter-spacing: 0.12em; text-transform: uppercase; }
.kf-value { font-family: var(--font-urdu); font-weight: 700; font-size: 15.5px; line-height: 1.7; color: var(--white); text-align: start; }
.kf-live { display: inline-flex; align-items: center; gap: 8px; }
.kf-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-lift); flex: none; animation: livepulse 1.4s ease-in-out infinite; }
/* Multi-place incident: each location is its own tag. */
.kf-tags { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 3px; }
.kf-tag { font-family: var(--font-urdu); font-weight: 600; font-size: 13px; line-height: 1; color: var(--white); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 13px 7px; }
.kf-tag:first-child { background: rgba(255,255,255,.1); }
html.dark .kf-card { border: 1px solid #262626; }

/* Mobile companion: swipeable fact chips riding inside the live band. */
.kf-strip { display: none; }
@media (max-width: 768px) {
  .kf-card { display: none; }
  .kf-strip { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .kf-strip::-webkit-scrollbar { display: none; }
  .kf-strip .chip { flex: none; display: inline-flex; align-items: baseline; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 7px 14px; white-space: nowrap; }
  .kf-strip .chip b { font-family: var(--font-mono); font-weight: 700; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--red-lift); }
  .kf-strip .chip { font-family: var(--font-urdu); font-weight: 600; font-size: 13.5px; color: var(--white); }
}
/* Sidebar sections — quiet, no widget boxes: strong Urdu head over a 2px ink
   rule, hairline-separated content (matches the article page's side rail). */
.reporter-card { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--tbp-line); }
.reporter-card:last-child { border-bottom: 0; }
.reporter-av { width: 40px; height: 40px; border-radius: 50%; background: var(--ink-900); display: flex; align-items: center; justify-content: center; font-family: var(--font-urdu); font-weight: 700; font-size: 16px; color: var(--white); flex-shrink: 0; }
html.dark .reporter-av { background: var(--ink-700); }
.reporter-info { flex: 1; min-width: 0; }
.reporter-name { font-family: var(--font-urdu); font-weight: 700; font-size: 14.5px; color: var(--tbp-text); line-height: 1.4; }
.reporter-role { font-family: var(--font-urdu); font-size: 12px; color: var(--ink-400); margin-top: 2px; }

.live-main { min-width: 0; }
.feed-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--tbp-line); }
.feed-header h2 { font-family: var(--font-urdu); font-weight: 800; font-size: 18px; margin: 0; color: var(--tbp-text); }
.feed-header .update-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); letter-spacing: 0.04em; }
.live-feed { display: flex; flex-direction: column; }
.pinned-update { background: var(--white); border: 1px solid var(--tbp-line); border-radius: 12px; padding: 20px 22px 16px; margin-bottom: 22px; }
html.dark .pinned-update { background: #181818; }
.pinned-update .pin-label { display: inline-block; background: var(--red); color: var(--white); font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 4px; margin-bottom: 10px; }
.pinned-update .update-rail { margin: 0 0 8px; }
.pinned-update .update-text { font-family: var(--font-urdu); font-weight: 400; font-size: 16px; line-height: 1.85; color: var(--tbp-text); margin: 0; }

/* Timeline rail + clean bordered cards (Al Jazeera live-blog style). */
.live-feed-items { position: relative; }
/* Rail center must equal node center: the node box is 16px wide (12px content
   + 2px borders — pseudo-elements miss the border-box reset), center 8px, so
   the 2px rail starts at 7px. */
.live-feed-items::before { content: ""; position: absolute; inset-inline-start: 7px; top: 8px; bottom: 14px; width: 2px; background: var(--tbp-line); }
.update-item { position: relative; padding-inline-start: 18px; padding-bottom: 34px; }
/* Timeline nodes — house palette only (ink / brand red / paper), no foreign hues:
   plain update = quiet ink, breaking = solid brand red, developing = solid ink,
   verified = paper dot ringed in brand red. */
.update-item::before { content: ""; position: absolute; inset-inline-start: 0; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-300); border: 2px solid var(--paper, #fff); box-shadow: 0 0 0 2px var(--ink-150); z-index: 1; }
.update-item.breaking::before { background: var(--red); box-shadow: 0 0 0 2px rgba(var(--red-rgb), .16); }
.update-item.developing::before { background: var(--ink-900); box-shadow: 0 0 0 2px var(--ink-150); }
.update-item.verified::before { background: var(--paper, #fff); border: 2px solid var(--red); box-shadow: 0 0 0 2px rgba(var(--red-rgb), .12); }
/* Newest update reads as "live": its node pulses (opacity/scale, colour-agnostic
   so it works on any badge colour) — matches the homepage hero feed. */
.live-feed-items > .update-item:first-child::before { animation: livepulse 1.4s ease-in-out infinite; }

/* One time statement, AJ-style: bold relative age, absolute clock in quiet parens. */
/* The rail reads in the page's direction and starts where the timeline dot
   is (inline-start): the stamp first, the clock after it. It was ltr + flex-end,
   which put an English "2d ago" on the right; with the edition's words that
   painted the clock before the stamp for an Urdu reader. */
.update-rail { display: flex; align-items: baseline; gap: 6px; margin: 0 0 9px; justify-content: flex-start; }
[dir="ltr"] .update-rail { justify-content: flex-start; }
.update-ago { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--ink-900); }
html.dark .update-ago { color: var(--tbp-text); }
.update-time { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; color: var(--ink-400); }
.update-time::before { content: "("; }
.update-time::after { content: ")"; }

.update-card { position: relative; background: var(--white); border: 1px solid var(--tbp-line); border-radius: 10px; padding: 20px 22px 16px; box-shadow: none; }
html.dark .update-card { background: #181818; border-color: #2a2a2a; }
.update-badges { margin-bottom: 11px; }
/* Badge chips — same house palette as the nodes they sit beside. */
.badge-breaking, .badge-developing, .badge-verified { display: inline-flex; align-items: center; gap: 5px; color: var(--white); font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.07em; padding: 3px 9px; border-radius: 4px; }
.badge-breaking { background: var(--red); }
.badge-breaking::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--white); animation: livepulse 1.3s ease-in-out infinite; }
.badge-developing { background: var(--ink-900); color: var(--paper, #fff); }
.badge-verified { background: transparent; border: 1px solid var(--tbp-line-2); color: var(--tbp-text); }
.badge-verified::before { content: "✓"; font-size: 10px; color: var(--red); }
/* Per-update headline — every update is a news item, not an image caption.
   Clear two-step hierarchy: big ink headline, calmer grey body (the AJ read). */
.update-h { font-family: var(--font-urdu); font-weight: 700; font-size: 19.5px; line-height: 1.7; color: var(--ink-900); margin: 0 0 7px; }
html.dark .update-h { color: var(--tbp-text); }
.update-text { font-family: var(--font-urdu); font-weight: 400; font-size: 15.5px; line-height: 1.9; color: var(--ink-600); margin: 0; }
html.dark .update-text { color: var(--tbp-text-2); }
.update-text strong { font-weight: 700; color: var(--ink-900); }
html.dark .update-text strong { color: var(--tbp-text); }
.update-text p { margin: 0 0 10px; }
.update-text p:last-child { margin-bottom: 0; }
/* Social embeds = QUOTED third-party material (AJ live-blog style): a sunken
   source card with platform label + original link. Clearly not our reporting. */
.update-text iframe { max-width: 100%; border: 0; }
/* AJ-style flat inset: platform mark centered on the sunken field, post below,
   quiet centered link to the original underneath. No border chrome. */
.tbp-embed { margin: 16px 0 6px; border: 0; border-radius: 8px; background: var(--paper-sunken); padding: 24px 18px 16px; text-align: center; }
.tbp-embed-mark { display: flex; justify-content: center; margin-bottom: 14px; color: var(--ink-800); }
.tbp-embed-mark svg { width: 30px; height: 30px; fill: currentColor; }
.tbp-embed-body { display: flex; flex-wrap: wrap; justify-content: center; }
.tbp-embed-body > p { margin: 0; display: flex; justify-content: center; width: 100%; }
.tbp-embed-body > p:empty { display: none; }
/* widgets.js turns the blockquote into a flex wrapper; default flex-start
   reads as the RIGHT edge in RTL — pin it to center at every level. */
.tbp-embed .twitter-tweet { margin: 0 auto !important; justify-content: center !important; }
.tbp-embed-orig { display: inline-block; margin-top: 14px; font-family: var(--font-urdu); font-weight: 600; font-size: 13px; color: var(--ink-500); text-decoration: underline; text-underline-offset: 3px; }
.tbp-embed-orig:hover { color: var(--red); }
/* Privacy click-to-load prompt: no contact with x.com until the reader opts in. */
.tbp-embed-load { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; margin: 10px auto 2px; padding: 10px 20px; background: var(--white); border: 1px solid var(--tbp-line-2); border-radius: var(--btn-radius, 20px); cursor: pointer; font-family: var(--font-urdu); font-weight: 700; font-size: 13px; color: var(--ink-700); transition: all .15s; }
.tbp-embed-load:hover { border-color: var(--red); color: var(--red); }
.tbp-embed-host { font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: .03em; color: var(--ink-500); }
html.dark .tbp-embed-load { background: #181818; border-color: #333; color: var(--tbp-text-2); }
.tbp-embed-frame[hidden] { display: none; }
.tbp-embed.is-youtube { padding: 20px 18px 14px; }
.tbp-embed.is-youtube iframe { display: block; width: 100%; height: auto; aspect-ratio: 16/9; border-radius: 6px; margin: 0; }
html.dark .tbp-embed { background: #161616; }
html.dark .tbp-embed-mark { color: var(--tbp-text-2); }
.update-figure { margin: 14px 0 0; }
.update-figure .update-img { margin-top: 0; }
.update-cap { font-family: var(--font-urdu); font-size: 12.5px; line-height: 1.6; color: var(--ink-500); margin-top: 7px; }
/* Footer stripped to almost nothing (the AJ quiet): the share button is a small
   circle STRADDLING the card's bottom corner — half in, half out, like AJ —
   and a small grey byline appears only when a real reporter signed the update. */
.update-foot { margin: 0; }
.update-byline { font-family: var(--font-urdu); font-size: 12.5px; color: var(--ink-400); margin-top: 10px; }
.update-share { position: absolute; bottom: -14px; inset-inline-end: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 29px; height: 29px; background: var(--white); border: 1px solid var(--tbp-line-2); border-radius: 999px; padding: 0; cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; color: var(--ink-600); box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: all .15s; }
.update-share svg { width: 13px; height: 13px; }
.update-share:hover { border-color: var(--red); color: var(--red); }
html.dark .update-share { background: #181818; border-color: #333; color: var(--tbp-text-3); }
/* Deep-linked update (…#update-123) — draw the eye to it */
.update-item:target .update-card, .update-item.is-target .update-card { border-color: var(--red); box-shadow: 0 0 0 3px rgba(var(--red-rgb), .1); }

@media (max-width: 768px) {
  .live-page-layout { grid-template-columns: 1fr; }
  .live-sidebar { position: static; max-height: none; overflow-y: visible; order: 2; }
  .live-main { order: 1; }
  .live-band-title h1 { font-size: 20px; }
  .live-band-badge { font-size: 16px; padding: 8px 14px; }
  .live-band-counter { display: none; }
  /* Same omission as .op-lead on the homepage: never collapsed. At 1.4fr 1fr a
     412px phone gives the body track ~145px, and .live-hero .body spends 56px of
     that on its own padding — 89px for a headline and standfirst. */
  .live-hero { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .live-band-meta { gap: 8px; } .update-text { font-size: 15px; } .gallery-item { width: 150px; } }
/* Live badge pill (used on cards + nav) */
.tbp-live-pill{display:inline-flex;align-items:center;gap:6px;background:var(--live-bg);color:var(--white);font-family:var(--font-urdu);font-weight:700;font-size:11px;padding:3px 9px;border-radius:4px}
.tbp-live-pill .dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--white)}
/* Pulse ring as a scaled, fading ::after (composited) — the box-shadow it replaced repainted every frame. */
.tbp-live-pill .dot::after,.page-head .count .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:.6;animation:tbp-pulse 1.6s infinite;will-change:transform,opacity}
@keyframes tbp-pulse{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.tbp-live-pill .dot::after,.page-head .count .dot::after{animation:none;opacity:0}}
/* Newly-arrived update highlight + "new updates" pill */
.live-feed-items .update-item.is-new{animation:tbp-flash 2.2s ease-out}
@keyframes tbp-flash{0%{background:#fff6d8}100%{background:transparent}}
.tbp-newpill{display:block;margin:0 auto 14px;background:var(--live-bg);color:var(--white);border:0;border-radius:var(--btn-radius, 20px);padding:7px 18px;font-family:var(--font-urdu);font-weight:700;font-size:13px;cursor:pointer}
.live-ended-banner{background:var(--paper-sunken);color:var(--ink-700);text-align:center;font-family:var(--font-urdu);font-size:14px;padding:10px;border-radius:6px;margin-top:8px}
.live-band-badge.ended{background:var(--ink-500)}
.update-img{aspect-ratio:16/9;background-size:cover;background-position:center;border-radius:6px;margin-top:8px}
.live-hero-img{margin:0 0 18px}
.live-hero-img img{width:100%;height:auto;display:block;border-radius:12px}
/* Lead = standfirst, not a boxed card — bigger, quieter, reads as the deck. */
.live-lead{font-family:var(--font-urdu);font-size:17.5px;line-height:2;color:var(--ink-600);margin:2px 0 26px;max-width:72ch}
.live-lead p{margin:0 0 12px}
.live-lead p:last-child{margin-bottom:0}
html.dark .live-lead{color:var(--tbp-text-2)}
/* Live masthead band: its base background is var(--ink-900) — a FOREGROUND token
   that (correctly) flips to near-white in dark mode. As a background that inverts
   the band to white-on-white. Pin it to the elevated dark surface in dark mode so
   it stays a dark masthead; the existing white/opacity text then reads fine. */
html.dark .live-band{background:var(--tbp-card)}
.page-head{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink-900);padding-bottom:16px;margin:6px 0 26px}
.page-head h1{font-family:var(--font-urdu);font-size:clamp(26px,3vw,34px);font-weight:700;margin:0;color:var(--ink-900)}
html.dark .page-head{border-color:var(--tbp-text)}
html.dark .page-head h1{color:var(--tbp-text)}
.page-head .count{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--white);background:var(--live-bg);padding:7px 14px;border-radius:999px;font-weight:700;direction:ltr}
.page-head .count .dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--white)}
/* The card surface is the theme's, not --white: --white stays #fff in dark
   mode while the page's text goes light, so the hero and the event cards
   were white boxes with white-on-white titles for a dark-mode reader. */
.live-hero{display:grid;grid-template-columns:1.4fr 1fr;background:var(--tbp-card);border:1px solid var(--tbp-line,var(--tbp-line));border-radius:12px;overflow:hidden;text-decoration:none;color:inherit}
.live-hero .img{position:relative;min-height:320px;background:linear-gradient(135deg,var(--ink-300),var(--ink-600));background-size:cover;background-position:center}
.live-hero .img .badge{position:absolute;top:16px;inset-inline-start:16px}
.live-hero .body{padding:26px 28px;display:flex;flex-direction:column;gap:14px}
.live-hero h2{font-family:var(--font-urdu);font-size:26px;font-weight:700;line-height:1.5}
.live-hero .latest{padding:10px 14px;border-radius:8px;background:var(--paper-sunken);font-family:var(--font-urdu);color:var(--ink-700)}
.live-hero .meta{margin-top:auto;font-family:var(--font-urdu);font-size:12px;color:var(--ink-500)}
.live-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.live-evcard{background:var(--tbp-card);border:1px solid var(--tbp-line,var(--tbp-line));border-radius:10px;padding:18px 20px;text-decoration:none;color:inherit}
/* Card thumbnail preview (the live event's featured image). */
.live-evcard.has-img{padding:0;overflow:hidden}
.live-evcard .evcard-img{aspect-ratio:16/9;background-size:cover;background-position:center}
.live-evcard.has-img .evcard-body{padding:16px 20px 18px}
.live-evcard .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.live-evcard .cnt{font-family:var(--font-urdu);font-size:12px;color:var(--ink-500);font-weight:700}
.live-evcard h3{font-family:var(--font-urdu);font-size:18px;font-weight:700;line-height:1.5;margin-bottom:8px}
.live-evcard .latest{font-family:var(--font-urdu);font-size:14px;color:var(--ink-700)}
.sec-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);margin:34px 0 4px;padding-bottom:10px}
.live-pastrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 2px;border-bottom:1px solid var(--tbp-line);text-decoration:none;color:inherit;transition:transform .16s}
.live-pastrow:hover{transform:translateX(-3px)}
.live-pastrow h4{font-family:var(--font-urdu);font-size:16.5px;font-weight:600;line-height:1.7;color:var(--ink-800);margin:0;transition:color .15s}
.live-pastrow:hover h4{color:var(--red)}
.live-pastrow .side{display:inline-flex;align-items:center;gap:12px;flex:none}
.live-pastrow .m{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--ink-400)}
.live-pastrow .ended{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--ink-500);border:1px solid var(--tbp-line-2);padding:4px 10px;border-radius:999px;white-space:nowrap}
.live-none{font-family:var(--font-urdu);font-size:15.5px;color:var(--ink-600);padding:8px 0 20px}
html.dark .live-pastrow h4{color:var(--tbp-text-2)}