/* News Portal: the public site (phase 5: masthead, tip form; phase 6: the site, R13). Mobile first: 390 px and up,
   one column below 720 px; three themes by body class (news-theme-classic | -magazine | -local); --news-accent and
   --news-font come from the theme settings (App\News\Site\Theme::cssVars). Motion is reduced when the reader asks. */
.news-site { --news-accent: #b91c1c; }
.news-site .news-article, .news-site .news-home, .news-site .news-list-page { font-family: var(--news-font, inherit); }
.news-masthead { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .75rem; }
.news-masthead li { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; padding: .75rem 0; border-bottom: 1px solid var(--border, #e5e7eb); }
.news-policies { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 1.5rem 0; }
.news-policies ul { padding-left: 1.1rem; }
.news-tip-form .field { margin-bottom: 1rem; }
.news-tip-note { font-size: .9rem; }

/* Section bar */
.news-sections { border-bottom: 3px solid var(--news-accent); background: var(--surface, #fff); }
.news-sections-inner { display: flex; gap: .25rem 1rem; overflow-x: auto; white-space: nowrap; padding: .5rem 0; scrollbar-width: thin; }
.news-sections a { color: inherit; text-decoration: none; padding: .35rem .25rem; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; }
.news-sections a[aria-current="page"], .news-sections a:hover { color: var(--news-accent); }
.news-sections a:focus-visible, .news-card a:focus-visible, .news-tools .btn:focus-visible { outline: 3px solid var(--news-accent); outline-offset: 2px; }

/* Blocks and cards */
.news-block { margin: 1.5rem 0; }
.news-block-title { font-size: 1.15rem; border-left: 4px solid var(--news-accent); padding-left: .5rem; margin: 0 0 .75rem; }
.news-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.news-list { display: grid; gap: .75rem; }
.news-lead { display: grid; gap: 1rem; }
.news-card { display: grid; gap: .5rem; align-content: start; min-width: 0; }
.news-list .news-card { grid-template-columns: 7rem 1fr; align-items: start; border-bottom: 1px solid var(--border, #e5e7eb); padding-bottom: .75rem; }
.news-card-media img, .news-card-media picture { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--surface-2, #f3f4f6); }
.news-card-title { font-size: 1.05rem; line-height: 1.35; margin: 0; }
.news-card-title a { color: inherit; text-decoration: none; }
.news-card-title a:hover { color: var(--news-accent); text-decoration: underline; }
.news-card-lead .news-card-title { font-size: 1.5rem; }
.news-card-deck { margin: 0; color: var(--text-muted, #4b5563); }
.news-card-time { font-size: .8rem; color: var(--text-muted, #4b5563); }
.news-kicker { color: var(--news-accent); font-weight: 700; font-size: .85rem; margin: 0; }
.news-label { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--news-accent); color: #fff; padding: .1rem .4rem; border-radius: 3px; }
.news-city-form { margin-bottom: .75rem; }
.news-pager { margin: 1.5rem 0; }

/* Article */
.news-article { max-width: 760px; }
.news-headline { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.2; margin: .25rem 0 .5rem; }
.news-deck { margin: 0 0 .75rem; }
.news-byline { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; margin: .5rem 0; }
.news-byline-item { display: inline-flex; gap: .35rem; align-items: center; }
.news-byline-photo { border-radius: 50%; }
.news-tools { margin: .75rem 0 1rem; gap: .5rem; flex-wrap: wrap; }
.news-tools .btn { min-height: 44px; }
.news-lead-media { margin: 0 0 1rem; }
.news-lead-media img { width: 100%; height: auto; }
.news-body { font-size: 1.1rem; line-height: 1.75; }
.news-article[data-size="s"] .news-body { font-size: 1rem; }
.news-article[data-size="l"] .news-body { font-size: 1.25rem; }
.news-article[data-size="xl"] .news-body { font-size: 1.4rem; }
.news-article:lang(hi) .news-body { line-height: 1.9; }
.news-corrections { border-left: 4px solid #d97706; padding: .5rem 1rem; margin: 1rem 0; background: var(--surface-2, #fffbeb); }
.news-tags { margin: 1rem 0; gap: .5rem; }
.news-author-box { margin: 1rem 0; }
.news-author-head { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.news-author-photo { border-radius: 50%; object-fit: cover; }
.news-author-facts { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .25rem; }
.news-next { margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; }
.news-timeline { padding-left: 1.2rem; }
.news-days { columns: 2; padding-left: 1.1rem; }
.news-footer { border-top: 1px solid var(--border, #e5e7eb); margin-top: 2rem; padding: 1rem 0; }
.news-footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .5rem 0; }

@media (min-width: 720px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-list .news-card { grid-template-columns: 12rem 1fr; }
  .news-days { columns: 4; }
}
@media (min-width: 1024px) {
  .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Magazine: big pictures, a wide lead with the rest beside it, serif headlines. */
.news-theme-magazine .news-card-title, .news-theme-magazine .news-headline { font-family: Georgia, "Noto Serif Devanagari", serif; }
@media (min-width: 1024px) {
  .news-theme-magazine .news-lead { grid-template-columns: 2fr 1fr; }
  .news-theme-magazine .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Local / mobile-first: one column everywhere, compact cards, the section bar sticks. */
.news-theme-local .news-grid { grid-template-columns: 1fr; }
.news-theme-local .news-grid .news-card { grid-template-columns: 7rem 1fr; }
.news-theme-local .news-sections { position: sticky; top: 0; z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  .news-site *, .news-site *::before, .news-site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .news-sections, .news-tools, .news-footer, .news-related, .site-header, .site-footer { display: none !important; }
}
/* Phase 9 (R13.4): search — the link in the section bar, the form (one column at 390 px), filters in a grid. */
.news-search-link { margin-left: auto; }
.news-search-form .cluster { flex-wrap: nowrap; }
.news-search-form input[type="search"] { flex: 1 1 auto; min-width: 0; }
.news-search-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); margin-top: .75rem; }
.news-search-all { align-self: end; min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; }
.news-search-alt { font-size: 1.05rem; }
/* Phase 10 (R8): live blogs, the breaking ticker and banner, data boards. Moving text only when the reader allows motion (R13.6). */
.news-live-badge { display: inline-block; background: var(--news-accent); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .45rem; border-radius: .25rem; }
.news-live { margin-top: 1.5rem; }
.news-live-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.news-live-update { border-left: 3px solid var(--border, #e5e7eb); padding: .25rem 0 .25rem .9rem; scroll-margin-top: 4rem; }
.news-live-update.is-key { border-left-color: var(--news-accent); }
.news-live-update.is-pinned { background: var(--surface-2, #f8fafc); }
.news-live-new { position: sticky; top: .5rem; z-index: 4; margin: .5rem 0; min-height: 44px; }
.news-live-keys ol { padding-left: 1.2rem; }
.news-ticker { background: var(--surface-2, #f8fafc); border-bottom: 1px solid var(--border, #e5e7eb); font-size: .95rem; }
.news-ticker .container { flex-wrap: nowrap; overflow: hidden; padding: .4rem 0; }
.news-ticker-label { color: var(--news-accent); white-space: nowrap; }
.news-ticker-lines { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.news-ticker-lines a, .news-ticker-lines span { color: inherit; min-height: 44px; display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: no-preference) and (min-width: 820px) {
  .news-ticker-lines { overflow: visible; animation: news-ticker 40s linear infinite; }
  .news-ticker:hover .news-ticker-lines, .news-ticker:focus-within .news-ticker-lines { animation-play-state: paused; }
}
@keyframes news-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.news-banner { background: var(--news-accent); color: #fff; padding: .6rem 0; font-size: 1.05rem; }
.news-banner a { color: #fff; text-decoration: underline; }
.news-board { border: 1px solid var(--border, #e5e7eb); border-radius: .5rem; padding: .75rem; margin: 1rem 0; }
.news-board-table tr.is-majority th { color: var(--news-accent); }
.news-board-bar { width: 6rem; max-width: 30vw; height: .6rem; vertical-align: middle; accent-color: var(--news-accent); }
.news-board-scores { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: 1.1rem; }
/* Phase 12: the soft prompt for push notifications (a bar at the bottom; wraps at 390 px). */
.news-push-prompt { position: sticky; bottom: 0; z-index: 30; background: var(--surface, #fff); border-top: 1px solid var(--border, #d0d5dd); box-shadow: 0 -2px 10px rgba(0,0,0,.08); }
.news-push-prompt-inner { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding-block: .6rem; }
.news-push-prompt-inner p { margin: 0; flex: 1 1 18rem; }
.news-push-topic { display: flex; gap: .5rem; align-items: center; padding: .35rem 0; }

/* Phase 14: the e-paper reader (R20.5) — one column at 390 px, the page as wide as the screen, areas on hover/tap. */
.news-epaper { display: grid; gap: 1rem; }
.news-epaper-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; justify-content: space-between; }
.news-epaper-head h1 { margin: 0; }
.news-epaper-tools { flex-wrap: wrap; }
.news-epaper-stage { overflow: hidden; touch-action: pan-y; background: var(--surface-2, #f2f4f7); border: 1px solid var(--border, #d0d5dd); border-radius: .5rem; }
.news-epaper.is-clipping .news-epaper-stage, .news-epaper-frame.is-zoomed { touch-action: none; cursor: crosshair; }
.news-epaper-frame { position: relative; margin: 0 auto; max-width: 960px; width: 100%; transform-origin: center top; transition: transform .12s ease-out; }
.news-epaper-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.news-epaper-area { position: absolute; display: block; border-radius: 2px; outline-offset: 0; }
.news-epaper-area:hover, .news-epaper-area:focus-visible, .news-epaper-area.is-shown { background: rgba(37, 99, 235, .14); outline: 2px solid rgba(37, 99, 235, .7); }
.news-epaper-area[data-area-kind="ad"]:hover, .news-epaper-area[data-area-kind="ad"].is-shown { background: rgba(217, 119, 6, .14); outline-color: rgba(217, 119, 6, .8); }
.news-epaper-selection { position: absolute; border: 2px dashed #111827; background: rgba(255, 255, 255, .25); pointer-events: none; }
.news-epaper-strip { list-style: none; margin: 0; padding: 0 0 .5rem; display: flex; gap: .5rem; overflow-x: auto; }
.news-epaper-strip-public a { display: grid; gap: .25rem; justify-items: center; font-size: .8rem; text-decoration: none; padding: .25rem; border-radius: .35rem; }
.news-epaper-strip-public a[aria-current="page"] { outline: 2px solid var(--accent, #2563eb); }
.news-epaper-strip img { display: block; height: auto; border: 1px solid var(--border, #d0d5dd); }
.news-epaper-side { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; }
.news-epaper-calendar-head { justify-content: space-between; }
.news-epaper-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.news-epaper-days li { min-height: 2rem; display: grid; place-items: center; font-size: .85rem; }
.news-epaper-days a { display: grid; place-items: center; width: 100%; height: 2rem; border-radius: .3rem; background: var(--surface-2, #eef2ff); font-weight: 600; text-decoration: none; }
.news-epaper-days a[aria-current="date"] { background: var(--accent, #2563eb); color: #fff; }
.news-epaper-dow { font-weight: 600; color: var(--muted, #667085); }
.news-epaper-clip-img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border, #d0d5dd); }
:fullscreen.news-epaper { background: #fff; overflow: auto; padding: .5rem; }
@media (max-width: 480px) { .news-epaper-tools .btn span { display: none; } }

/* Phase 15: reactions, save / follow, comments, polls, quizzes (one column at 390 px). */
.news-engage { display: grid; gap: .5rem; margin-block: 1rem; padding-block: .75rem; border-block: 1px solid var(--border, #d0d5dd); }
.news-engage .cluster { flex-wrap: wrap; }
.news-reaction[aria-pressed="true"], .news-engage [aria-pressed="true"] { background: var(--surface-2, #eef2ff); outline: 2px solid var(--news-accent, #2563eb); }
.news-comments-slot { margin-block: 1.5rem; }
.news-comments { display: grid; gap: 1rem; }
.news-comment { padding: .75rem 0; border-bottom: 1px solid var(--border, #e4e7ec); }
.news-comment-reply { margin-inline-start: 1.5rem; padding-inline-start: .75rem; border-inline-start: 3px solid var(--border, #e4e7ec); }
.news-comment-body { margin: .35rem 0; overflow-wrap: anywhere; white-space: normal; }
.news-comment details summary { cursor: pointer; }
.news-poll { margin-block: 1rem; padding: 1rem; border: 1px solid var(--border, #d0d5dd); border-radius: .5rem; display: grid; gap: .5rem; }
.news-poll-question { font-weight: 700; margin: 0; }
.news-poll-option { display: flex; gap: .5rem; align-items: center; padding: .4rem 0; }
.news-poll-result, .news-poll-result progress { width: 100%; }
.news-quiz-card { display: block; max-width: 100%; height: auto; border-radius: .5rem; }
.news-right { color: #067647; font-weight: 600; }
.news-wrong { color: #b42318; font-weight: 600; }
@media (max-width: 480px) { .news-comment-reply { margin-inline-start: .5rem; } }

/* Phase 16 (R23.1): ad boxes keep their reserved size (min-height per breakpoint from the page's nonced stylesheet),
   so nothing moves when an ad arrives; labelled; one column at 390 px; the sticky phone ad can be closed. */
.np-ad { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; margin: 1rem auto; max-width: 100%; overflow: hidden; contain: layout; }
.np-ad-label { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); line-height: 18px; }
.np-ad-box { max-width: 100%; }
.np-ad-box img, .np-ad-box iframe { display: block; max-width: 100%; height: auto; border: 0; }
.np-ad-native { display: flex; flex-direction: column; gap: .25rem; padding: .75rem; border: 1px solid var(--border); border-radius: .5rem; color: inherit; text-decoration: none; }
.np-ad-inline { clear: both; }
.np-ad-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface); box-shadow: 0 -2px 8px rgb(0 0 0 / .08); display: flex; justify-content: center; }
.np-ad-sticky .np-ad { margin: 0; }
.np-ad-close { position: absolute; top: 0; right: 0; min-width: 44px; min-height: 44px; }
@media (min-width: 768px) { .np-ad-sticky { display: none; } }
.news-ad-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--surface); border-top: 1px solid var(--border); padding: .75rem 0; }
.news-ad-consent .cluster { justify-content: space-between; }