/* portalplus.css: opt-in polish layer for portal-family sites (brand.json "portalPlus": true + this file in sharedStyles).
   Every rule sits under .pt-plus, which only those sites carry; nayi/fusion sites never load it. Logo and masthead are not touched.
   Aims (critic + owner, 2026-10-05): larger, darker text; clean photo frames without tape/tilt gimmicks; face-friendly crops;
   video rows that end on a whole card; widgets that never collide; the phone tab bar never covering the first screen. */

/* ---- reading: darker, larger list headlines and meta ---- */
:where(.pt-site.pt-plus:not(.ny-site):not(.fx-site)){--ptp-meta:color-mix(in srgb,var(--ink) 72%,var(--muted))}
.pt-plus .nf-h-sm{font-size:16.5px;line-height:1.45}
.pt-plus .nf-list li a,.pt-plus .nf-rel a,.pt-plus .nf-latest li a,.pt-plus .pt-trendlist li a{font-size:16px;line-height:1.5;color:var(--ink);font-weight:600}
.pt-plus .pt-tl-side .nf-h-sm{font-size:15.5px;line-height:1.45}
.pt-plus .pt-rail .nf-latest li a{font-size:15.5px}
.pt-plus time,.pt-plus .nf-meta,.pt-plus .nf-meta *{color:var(--ptp-meta)}
.pt-plus .nf-meta{font-size:13.5px}
.pt-plus .nf-dek{color:color-mix(in srgb,var(--ink) 82%,var(--muted));font-size:16px}
.pt-plus .nf-lh{letter-spacing:-.005em}

/* ---- article page: 18px text, strong contrast, a photo that leaves room for the story ---- */
.pt-plus .article-body p,.pt-plus .article-body li{font-size:18.5px;line-height:1.8;color:var(--ink)}
@media(max-width:760px){
  .pt-plus .article-body p,.pt-plus .article-body li{font-size:18px;line-height:1.78}
  .pt-plus main figure img,.pt-plus main .k-figure img{max-height:46vh;width:100%;object-fit:cover;object-position:50% 28%}
}

/* ---- photos: one clean frame per skin, crops that keep faces (upper third) ---- */
.pt-plus .pt-center .nf-ph img,.pt-plus .pt-vfig img,.pt-plus .pt-ws img,.pt-plus .pt-rail .nf-ph img{object-position:50% 30%}
.pt-plus.pt-sk-img-polaroid .pt-center .nf-ph-mid::before,.pt-plus.pt-sk-img-polaroid .pt-center .nf-ph-lead::before{display:none}
.pt-plus.pt-sk-img-polaroid .pt-center .nf-mid .nf-ph-mid,.pt-plus.pt-sk-img-polaroid .pt-fcard .pt-yt,
.pt-plus.pt-sk-img-tilt .pt-center .nf-ph-mid,.pt-plus.pt-sk-img-tilt .pt-center .nf-ph-lead,.pt-plus.pt-sk-img-tilt .pt-fcard .pt-yt,.pt-plus.pt-sk-img-tilt .pt-ws{transform:none !important}
.pt-plus.pt-sk-img-brutal .pt-center .nf-ph,.pt-plus.pt-sk-img-brutal .pt-fcard .pt-yt,.pt-plus.pt-sk-img-brutal .pt-vfig,.pt-plus.pt-sk-img-brutal .pt-ws{border:0;border-radius:10px;box-shadow:inset 0 -5px 0 var(--acc),0 8px 20px #0000001f}
.pt-plus.pt-sk-img-brutal .pt-center .nf-ph-thumb{box-shadow:inset 0 -3px 0 var(--acc)}
.pt-plus .nf-ph{background:color-mix(in srgb,var(--acc) 10%,var(--card))}

/* ---- video and themed-video rows: whole cards only, no half card at the edge on desktop ---- */
@media(min-width:900px){
  .pt-plus .pt-vrow,.pt-plus .pt-frow{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible}
  .pt-plus .pt-vrow>:nth-child(n+7),.pt-plus .pt-frow>:nth-child(n+7){display:none}
  .pt-plus.pt-L-feed .pt-vrow,.pt-plus .pt-norail .pt-vrow{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.pt-plus .pt-vh,.pt-plus .pt-fh{font-size:16px;line-height:1.45}
.pt-plus .pt-vrow:empty{display:none}

/* ---- widgets: headings and their links never run into each other ---- */
.pt-plus .pt-rail .k-sh{flex-wrap:wrap;row-gap:4px;align-items:center}
.pt-plus .pt-rail .k-sh .k-shh{min-width:0;flex:1 1 auto}
.pt-plus .pt-rail .k-sh .k-more{white-space:nowrap;margin-left:auto}

/* ---- phones: the tab bar slides in once the reader scrolls (portalplus.js), so it never covers the first screen ---- */
@media(max-width:760px){
  .pt-plus .pt-tabs{transition:transform .25s ease,visibility .25s}
  .pt-plus.ptp-js:not(.ptp-scrolled) .pt-tabs{transform:translateY(110%);visibility:hidden;box-shadow:none}
  .pt-plus .pt-under-row:has(>:only-child){grid-template-columns:1fr}
}
@media(min-width:761px){
  .pt-plus .pt-under-row:has(>:only-child){grid-template-columns:1fr}
  .pt-plus .pt-under-row>.nf-mid:only-child:not(.nf-noimg){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:start}
}

/* ---- section heads: a filled head (slash, pill, tab, stamp) keeps light text inside a light video block ---- */
.pt-plus.pt-sk-v-light .pt-video .k-sh .k-shh{color:var(--ink)}
.pt-plus.pt-sk-h-slash.pt-sk-v-light .pt-video .k-sh .k-shh{color:var(--bg,#fff)}
.pt-plus.pt-sk-h-pill .pt-video .k-sh .k-shh,.pt-plus.pt-sk-h-tab .pt-video .k-sh .k-shh{color:var(--on-acc,#fff)}
.pt-plus.pt-sk-h-stamp .pt-video .k-sh .k-shh{color:var(--acc)}

/* ---- phone first screen: the lead photo, its headline and two related headlines (instead of a lone headline) ---- */
@media(max-width:760px){
  .pt-plus .pt-center .nf-lead .nf-rel{display:block;margin-top:10px}
  .pt-plus .pt-center .nf-lead .nf-rel li:nth-child(n+3){display:none}
  .pt-plus .pt-center .nf-lead-tab{display:flex;flex-direction:column}
  .pt-plus .pt-center .nf-lead-tab>.nf-ph{order:-1;margin-bottom:12px}
}
.pt-plus .pt-tab-row:empty,.pt-plus .pt-under-row:empty,.pt-plus .pt-hero-row:empty{display:none}
/* tabloid lead: the photo spans its column (it sat at two-thirds width beside an empty strip) */
.pt-plus .pt-tab-lead .nf-ph-lead{width:100%;max-height:none;aspect-ratio:16/9;display:block}
.pt-plus .pt-tab-lead .nf-ph-lead img{width:100%;height:100%;object-fit:cover}
/* a lead block whose side column came out empty spans the full width: photo beside its headline */
.pt-plus .pt-top:has(>.pt-top-side:empty){grid-template-columns:minmax(0,1fr)}
.pt-plus .pt-top>.pt-top-side:empty{display:none}

/* ---- web/photo stories: whole cards on desktop, captions on a firm dark band (critic: cramped white text over busy photos) ---- */
@media(min-width:900px){
  .pt-plus .pt-ws-row{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:auto;overflow:visible}
  .pt-plus .pt-ws-row>:nth-child(n+5){display:none}
  .pt-plus .pt-ws-row .pt-ws{aspect-ratio:3/4}
}
.pt-plus .pt-ws::after{background:linear-gradient(transparent 30%,#000000b3 58%,#000000f2)}
.pt-plus .pt-ws b{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:15.5px;text-shadow:0 1px 2px #000}

/* ---- no English source line under the air-quality box (owner: no source labels on pages) ---- */
.pt-plus .pt-aqi .p-note{display:none}
/* very long lead headlines (as issued) get a calmer size so the lead keeps its photo and summary on screen */
.pt-plus .nf-lead.ptp-long .nf-lh{font-size:clamp(23px,2.3vw,31px);line-height:1.28}
@media(max-width:760px){.pt-plus .nf-lead.ptp-long .nf-lh{font-size:20px;line-height:1.36}}

/* ---- rail "ticket" skin: a solid accent edge instead of a dashed one (critic: dashed dividers look unfinished) ---- */
.pt-plus.pt-sk-w-ticket .pt-rail .pt-box,.pt-plus.pt-sk-w-ticket .pt-rail .p-box{border-left-style:solid}

/* ---- district hub: cards flow in columns, so a short card never leaves a hole beside a tall one ---- */
@media(min-width:761px){
  .pt-plus .pt-dcards{display:block;columns:2;column-gap:12px}
  .pt-plus .pt-dcards>.pt-dcard{break-inside:avoid;margin:0 0 12px}
}
.pt-plus .pt-dcard li{font-size:15px}
.pt-plus .pt-hub-map text{font-weight:700}

/* ---- phone: the side lists beside the lead show their first four items, so photo stories follow sooner ---- */
@media(max-width:760px){
  .pt-plus .pt-top-side.pt-tl-side li:nth-child(n+5),.pt-plus .pt-trendlist li:nth-child(n+5){display:none}
}

/* ---- phone: no blank band between the lead's headlines and the next stories ---- */
@media(max-width:760px){.pt-plus .pt-top{gap:4px}}

/* ---- story thumbnails big enough to show a face (critic: tiny, muddy thumbnails) ---- */
.pt-plus .pt-center .nf-row .nf-ph-thumb{width:132px;flex-basis:132px}
.pt-plus.pt-L-leftmenu .pt-top-side .nf-ph-thumb{width:112px;flex-basis:112px}
@media(max-width:760px){.pt-plus .pt-center .nf-row .nf-ph-thumb{width:116px;flex-basis:116px}}

/* ---- desktop video/fun rows: no lone card stranded on a second row ---- */
@media(min-width:900px){
  .pt-plus .pt-vrow>:nth-child(3n+1):nth-child(n+4):last-child,
  .pt-plus .pt-vrow>:nth-child(3n+1):nth-child(n+4):nth-last-child(2),.pt-plus .pt-vrow>:nth-child(3n+2):nth-child(n+5):last-child,
  .pt-plus .pt-frow>:nth-child(3n+1):nth-child(n+4):last-child,
  .pt-plus .pt-frow>:nth-child(3n+1):nth-child(n+4):nth-last-child(2),.pt-plus .pt-frow>:nth-child(3n+2):nth-child(n+5):last-child{display:none}
}

/* ---- first screen: only strong photos up top, so a row with one or two of them lets each card grow ---- */
.pt-plus .pt-hero-row,.pt-plus .pt-tab-row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pt-plus .pt-top-side .nf-row.nf-noimg{padding-top:10px;padding-bottom:10px}
.pt-plus .pt-top-side .nf-row.nf-noimg .nf-h-sm{font-size:17px}

/* ---- dark video blocks: a filled slash head stands out in the accent colour, card text readable on dark ---- */
.pt-plus.pt-sk-h-slash:not(.pt-sk-v-light) .pt-video .k-sh .k-shh{background:var(--acc);color:var(--on-acc,#fff)}
.pt-plus.pt-sk-h-slash:not(.pt-sk-v-light) .pt-video .k-sh .k-shh .pt-i{color:var(--on-acc,#fff)}
.pt-plus.pt-sk-h-slash:not(.pt-sk-v-light) .pt-video .k-sh{border-bottom-color:var(--acc)}
.pt-plus:not(.pt-sk-v-light) .pt-video .pt-vch,.pt-plus:not(.pt-sk-v-light) .pt-video .pt-vch time,.pt-plus:not(.pt-sk-v-light) .pt-video .pt-vd{color:#e7e2d8;font-size:13.5px}
.pt-plus:not(.pt-sk-v-light) .pt-fun .pt-fch{font-size:13.5px}

/* ---- identity: a second desi accent (--ptp-acc2, per site in site_fixes) used deliberately beside the brand colour ---- */
.pt-plus .pt-nav{box-shadow:inset 0 -4px 0 var(--ptp-acc2,var(--acc3))}
.pt-plus .nf-rank,.pt-plus .pt-trendlist .pt-n{color:var(--ptp-acc2,var(--acc))}
.pt-plus .pt-center .nf-kick{display:inline-block;padding-left:8px;border-left:3px solid var(--ptp-acc2,var(--acc3))}
.pt-plus .nf-lead-tab .nf-kick,.pt-plus .nf-tab .nf-kick{border-left:0;padding-left:8px}
.pt-plus .pt-rail .pt-box,.pt-plus .pt-rail .p-box{border-top:4px solid var(--ptp-acc2,var(--acc3))}
.pt-plus.pt-sk-w-block .pt-rail .pt-box,.pt-plus.pt-sk-w-block .pt-rail .p-box{border-top-color:var(--ptp-acc2,var(--acc3))}
.pt-plus .pt-chips a:hover,.pt-plus .pt-trend-in a:hover{border-color:var(--ptp-acc2,var(--acc3))}
.pt-plus .pt-tl-dot{background:var(--ptp-acc2,var(--red))}

/* ---- clarity: section boxes flow in two columns, so a short box never leaves a hole beside a tall one ---- */
@media(min-width:761px){
  .pt-plus .pt-boxes{display:block;columns:2;column-gap:22px}
  .pt-plus .pt-boxes>.pt-sbox{break-inside:avoid;display:block;margin:0 0 22px}
}

/* ---- small rail text: forecast temperatures, dates and notes at 13px+ in full ink ---- */
.pt-plus .pt-rail .p-wx-days li,.pt-plus .pt-rail .p-wx-days span,.pt-plus .pt-rail .p-wx-hl span{font-size:13px;color:var(--ink)}
.pt-plus .pt-rail time{font-size:13px}

/* ---- phone section strip: a soft fade at the right edge says it scrolls ---- */
@media(max-width:760px){
  .pt-plus .pt-nav{position:relative}
  .pt-plus .pt-nav::after{content:"";position:absolute;top:0;right:0;bottom:4px;width:34px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--nav-bg,var(--acc)))}
}

/* ---- section labels sit straight (critic: tilted sticker labels read as a scrapbook) ---- */
.pt-plus.pt-sk-h-stamp .pt-main .k-shh{transform:none}
@media(max-width:760px){.pt-plus .pt-trendlist li:nth-child(n+4){display:none}}
@media(max-width:760px){.pt-plus .pt-under-row{grid-template-columns:minmax(0,1fr)}}

/* ---- "board" game skin: the cards keep their own colour gradients (inline), so their text must be light ---- */
.pt-plus.pt-sk-g-board .pt-game-row a:nth-child(n),.pt-plus.pt-sk-g-board .pt-game-row a:nth-child(n) b,.pt-plus.pt-sk-g-board .pt-game-row a:nth-child(n) small{color:#fff;text-shadow:0 1px 2px #0008}

/* ---- बड़ी खबरें: a small photo beside each headline that has one (critic: 'grey wall of text') ---- */
.pt-plus .ptp-big li{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.pt-plus .ptp-big li>div{min-width:0;flex:1}
.pt-plus .ptp-big li>div time{display:block}
.pt-plus .ptp-big .nf-ph-thumb{flex:0 0 104px;width:104px;aspect-ratio:4/3;border-radius:8px;overflow:hidden;margin-top:4px}
.pt-plus .ptp-big .nf-ph-thumb img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.pt-plus .ptp-big .nf-ph-thumb{flex-basis:96px;width:96px}}

/* ---- phone: no near-empty utility strip above the masthead (critic: 'the video pill floats alone in the top bar') ---- */
@media(max-width:760px){.pt-plus .pt-util{display:none}}

/* ---- identity: a desi toran (festoon) edge under the section menu, in the site's own second accent ---- */
.pt-plus .pt-nav{box-shadow:none;position:relative;z-index:2}
.pt-plus .pt-nav::before{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;pointer-events:none;
  background:linear-gradient(-45deg,transparent 6.5px,var(--ptp-acc2,var(--acc3,var(--acc))) 0) 0 0/13px 9px repeat-x,
             linear-gradient(45deg,transparent 6.5px,var(--ptp-acc2,var(--acc3,var(--acc))) 0) 0 0/13px 9px repeat-x}
.pt-plus .pt-head+*{padding-top:9px}

/* ---- phone section menu: every section in one row that scrolls sideways (owner 2026-10-07: "just 3-4 items and no scroll"),
   whole items snap into place and the fade at the right edge says there is more ---- */
@media(max-width:760px){
  .pt-plus .pt-nav-in{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-left:8px;gap:0 2px;justify-content:flex-start;padding-left:8px;padding-right:34px}
  .pt-plus .pt-nav a{padding:7px 9px;font-size:14.5px;flex:none;scroll-snap-align:start}
  .pt-plus .pt-nav .pt-more{display:none}
}

/* ---- phone video and themed-video rows: a 2-column grid of whole cards, no card cut off at the right edge ---- */
@media(max-width:760px){
  .pt-plus .pt-vrow,.pt-plus .pt-frow{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;gap:12px}
  .pt-plus .pt-vrow>:nth-child(n+5),.pt-plus .pt-frow>:nth-child(n+5){display:none}
  .pt-plus .pt-vrow .pt-vh,.pt-plus .pt-frow .pt-fh{font-size:14.5px;line-height:1.4}
  .pt-plus .pt-vrow .pt-vd,.pt-plus .pt-frow .pt-fd{display:none}
}

/* ---- identity: a kesariya thread above the toran, so every site carries an MP warm accent beside its own colours ---- */
.pt-plus .pt-nav{border-bottom:3px solid #e8731a}
.pt-plus .pt-nav::before{bottom:-12px}
.pt-plus .pt-head+*{padding-top:12px}

/* ---- identity: a soft Gond-style dot motif behind the masthead (the site's second accent) and a kesariya rule under section heads ---- */
.pt-plus .pt-head{background-image:radial-gradient(color-mix(in srgb,var(--ptp-acc2,var(--acc)) 30%,transparent) 1.4px,transparent 1.6px),radial-gradient(color-mix(in srgb,#e8731a 22%,transparent) 1.4px,transparent 1.6px);
  background-size:18px 18px,18px 18px;background-position:0 0,9px 9px}
.pt-plus .pt-head .pt-search{background:var(--card,#fff)}
.pt-plus .pt-center .k-sh{box-shadow:0 3px 0 -1px #e8731a}

/* ---- multimedia corners right under the lead: live TV, video, Shorts, rashifal, games, districts ---- */
.pt-plus .ptp-qstrip{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 22px}
.pt-plus .ptp-qstrip a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:99px;font:700 14.5px var(--t);
  background:color-mix(in srgb,var(--ptp-acc2,var(--acc)) 16%,var(--card,#fff));color:var(--ink);border:1.5px solid color-mix(in srgb,var(--ptp-acc2,var(--acc)) 55%,transparent)}
.pt-plus .ptp-qstrip a:first-child{background:var(--red,#d7261e);color:#fff;border-color:transparent}
.pt-plus .ptp-qstrip .pt-i{color:inherit}
@media(max-width:760px){.pt-plus .ptp-qstrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:4px 0 16px}
  .pt-plus .ptp-qstrip a{padding:7px 10px;font-size:14px;justify-content:center;min-width:0;white-space:nowrap;overflow:hidden}
  .pt-plus .ptp-qstrip a:nth-child(n+5){display:none}}

/* ---- article page: a lighter खास बातें box (critic: 'heavy beige box fills the phone's first screen'), two points on phones ---- */
.pt-plus .k-keybox{background:color-mix(in srgb,var(--ptp-acc2,var(--acc)) 8%,var(--card,#fff));border:0;border-left:4px solid var(--ptp-acc2,var(--acc));border-radius:0 10px 10px 0;padding:10px 14px;box-shadow:none}
.pt-plus .k-keybox h2{font-size:15px;margin:0 0 4px;color:var(--acc)}
.pt-plus .k-keybox li{font-size:15.5px;line-height:1.55;margin:2px 0}
@media(max-width:760px){.pt-plus .k-keybox li:nth-child(n+3){display:none}.pt-plus .k-keybox{margin:10px 0}}

/* ---- article byline: place, date and the save/share/अ−/अ+ tools on one row (critic: 'a lone font-size row') ---- */
.pt-plus .k-by{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.pt-plus .k-by-tools{margin-left:auto;display:inline-flex;align-items:center;gap:4px}
.pt-plus .k-by-tools button{min-width:34px;min-height:34px;padding:4px 7px;font-size:13.5px}

/* ---- first screen (critic 2026-10-08): a video box tops the rail in place of the pill row under the lead ---- */
.pt-plus .ptp-rvid .pt-vcard{margin:0}
.pt-plus .ptp-rvid .pt-vfig{border-radius:10px}
.pt-plus .ptp-rvid .pt-vch,.pt-plus .ptp-rvid .pt-vch time{color:var(--ptp-meta,var(--muted));margin:8px 0 2px}
.pt-plus .ptp-rvid .pt-vh{margin:8px 0 0;font-size:16px;line-height:1.45}.pt-plus .ptp-rvid .pt-vch+.pt-vh{margin-top:0}
.pt-plus .ptp-rvid .pt-vh a{color:var(--ink)}
.pt-plus .ptp-rvid .pt-vd{display:none}
.pt-plus .ptp-rvlinks{display:flex;flex-wrap:wrap;margin:10px 0 0;padding-top:8px;border-top:1px solid var(--line);font:700 14px var(--t)}
.pt-plus .ptp-rvlinks a{color:var(--acc);padding:2px 0}
.pt-plus .ptp-rvlinks a+a::before{content:'·';color:var(--muted);margin:0 8px;font-weight:400}
.pt-plus .ptp-rvlinks a:hover{text-decoration:underline}
/* AQI: the home city once, three more in one row */
.pt-plus .pt-aqi ul{display:flex;flex-wrap:wrap;gap:4px 14px}
.pt-plus .pt-aqi li{display:flex;align-items:center;gap:5px;font-size:13.5px;border-bottom:0;padding:2px 0;white-space:nowrap}
/* district hub: the map takes two columns of the first row beside two cards, so no tall empty cell around it */
@media(min-width:901px){.pt-plus .pt-hub-flow>.pt-hub-map{grid-row:auto;grid-column:span 2;align-self:stretch;display:flex;flex-direction:column;justify-content:center}}
/* 'blob' photos: one even corner (a single big rounded corner read as a cropping glitch) */
.pt-plus.pt-sk-img-blob .pt-center .nf-ph-lead{border-radius:16px}
.pt-plus.pt-sk-img-blob .pt-center .nf-ph-mid,.pt-plus.pt-sk-img-blob .pt-fcard .pt-yt,.pt-plus.pt-sk-img-blob .pt-vfig,.pt-plus.pt-sk-img-blob .pt-ws{border-radius:12px}
.pt-plus.pt-sk-img-blob .pt-center .nf-ph-thumb{border-radius:10px}
/* tabloid lead: a wide crop on desktop, so the picture strip under it reaches the first screen (critic: 'the lead photo fills the first screen') */
@media(min-width:901px){.pt-plus .pt-tab-lead .nf-ph-lead{aspect-ratio:16/7}}
/* phone: the lead photo sits inside the column (the -16px bleed reached the left edge only, so one side looked cut and one corner rounded) */
@media(max-width:760px){.pt-plus .pt-center .nf-ph-lead{margin-left:0;margin-right:0}}