/* =========================================================
   NEWS — clean rebuild (v1)
   Depends on site-level vars (from base/layout):
   --panel-bg, --panel-border, --hover-bg, --color-bg, --color-text,
   --color-accent-soft, --font-header
   ========================================================= */

:root{
  /* layout */
  --news-max: 1400px;
  --news-gutter: 1.1rem;

  /* top module */
  --news-top-gap: clamp(1.25rem, 2.4vw, 2.2rem);
  --news-top-col-gap: clamp(0.9rem, 1.6vw, 1.35rem);
  --news-rail-thumb: 56px;

  /* feed */
  --news-card-gap: 1.25rem;

  /* rules */
  --news-rule: color-mix(in srgb, var(--panel-border) 22%, transparent);

  /* story palette */
  --story-grey:   #77767B;
  --story-purple: #583479;
  --story-orange: #D14A00;
  --story-blue:   #1A5FAD;
  --story-teal:   #2F8AAB;
  --story-red:    #9A1A2B;
  --story-pink:   #B83F81;
  --story-green:  #219D64;
  --story-brown:  #583F2B;

  --story-divider: rgba(255,255,255,.18);
}

/* ---------------------------------------------------------
   page container (matches your HTML: #newsListView.news-section)
   --------------------------------------------------------- */

.news-section{
  width: 100%;
  max-width: var(--news-max);
  margin: 0 auto;
  padding: 0 var(--news-gutter);
  display: flex;
  flex-direction: column;
}

.news-status{
  font-size: .9rem;
  opacity: .85;
}

/* Outer content stack (#newsGrid) */
#newsGrid{
  display: flex;
  flex-direction: column;
  gap: var(--news-top-gap);
  max-width: 1100px;
  margin: 0 auto;
}

/* =========================================================
   NEWS TITLEBAR (moved from base.css)
   ========================================================= */

.news-titlebar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start; /* align to top */
  gap: 1rem;
  margin: 0 0 1rem;
}

.news-titlebar-left{
  display:flex;
  align-items:flex-start;
  gap: .6rem;
  min-width: 0;
}

/* borrow mn-subtitle look, but left aligned + slightly larger */
.mn-subtitle.news-titlebar-title{
  margin: 0;
  text-align: left;
  font-size: 3.0rem;
  line-height: 1.05;
}

/* top-right */
.news-titlebar-updated{
  font-size: .9rem;
  opacity: .82;
  margin-top: .2rem;
  white-space: nowrap;
}

@media (max-width: 740px){
  .mn-subtitle.news-titlebar-title{
    font-size: 2.4rem;
  }

  .news-titlebar-updated{
    display: none;
  }
}

.news-update-btn{
  appearance:none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: .2rem .35rem;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.news-update-btn.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@keyframes mnGlowPulse{
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); opacity: .9; }
  50%      { filter: drop-shadow(0 0 6px rgba(255,255,255,.35)); opacity: 1; }
}

.news-update-btn.is-attn{
  animation: mnGlowPulse 1.7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .news-update-btn.is-attn{ animation: none; }
}

/* =========================================================
   NEWS header row — alignment fixes
   ========================================================= */

/* Keep header width aligned with the content grid, not --news-max */
.news-headrow{
  max-width: 1100px;          /* match #newsGrid */
  align-items: center;        /* vertical centering */
}

/* Title + refresh icon should share the same vertical center */
.news-headrow-left{
  align-items: center;
}

/* Timestamp row should vertically center too (remove the manual nudge) */
.news-headrow-right{
  align-items: center;
  padding-top: 0;             /* was .15rem */
}

/* Optional: make title baseline feel less “floaty” */
.news-title{
  line-height: 1.0;           /* was 1.05; tweak to taste */
}

/* =========================================================
   MOBILE — center the title when "last updated" is hidden
   ========================================================= */
@media (max-width: 740px){
  .news-headrow{
    justify-content: center;
  }

  .news-headrow-left{
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------
   shared interactions
   --------------------------------------------------------- */

.news-top-lead,
.news-top-rail-item,
.news-feed-item,
.news-card,
.news-story-compact{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.news-top-lead:focus-visible,
.news-top-rail-item:focus-visible,
.news-feed-item:focus-visible,
.news-card:focus-visible,
.news-story-compact:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--panel-border) 40%, var(--color-accent-soft) 60%);
  outline-offset: 2px;
}

/* underline-on-hover for titles */
.news-top-lead:hover .news-top-hed,
.news-top-lead:focus-visible .news-top-hed,
.news-top-rail-item:hover .news-top-hed-sm,
.news-top-rail-item:focus-visible .news-top-hed-sm,
.news-feed-item:hover .news-card-title,
.news-feed-item:focus-visible .news-card-title,
.news-story-compact:hover .news-story-compact-title,
.news-story-compact:focus-visible .news-story-compact-title{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* brighten media on hover */
.news-top-lead-media img,
.news-top-rail-thumb img,
.news-feed-media img,
.news-card-image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 140ms ease;
}

.news-top-lead-media {
  border-radius: 14px;
}

.news-top-lead:hover .news-top-lead-media img,
.news-top-lead:focus-visible .news-top-lead-media img,
.news-top-rail-item:hover .news-top-rail-thumb img,
.news-top-rail-item:focus-visible .news-top-rail-thumb img,
.news-feed-item:hover .news-feed-media img,
.news-feed-item:focus-visible .news-feed-media img,
.news-card:hover .news-card-image,
.news-card:focus-visible .news-card-image{
  filter: brightness(1.08) contrast(1.02);
}

/* ---------------------------------------------------------
   media fallback (.has-fallback + .is-loaded, wired by JS)
   --------------------------------------------------------- */

.has-fallback{
  position: relative;
  overflow: hidden;
  background: #9a9a9a;
  outline: 1px solid #7f7f7f;
  outline-offset: -1px;
}

.has-fallback::before{
  content: "\f1ea";
  font-family: "Font Awesome 6 Free","Font Awesome 6 Pro","Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #5f5f5f;
  font-size: clamp(26px, 4.2vw, 44px);
  line-height: 1;
  pointer-events: none;
}

.has-fallback.is-loaded::before{ opacity: 0; }

.has-fallback img{
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   TOP module (lead + rail)
   --------------------------------------------------------- */

.news-top{
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(340px, 1fr);
  gap: var(--news-top-col-gap);
  align-items: start;
}

.news-top-lead{
  display: grid;
  gap: .9rem;
}

.news-top-lead-media{
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
}

.news-top-lead-body{
  backdrop-filter: blur(18px);
  padding: 1.05rem 1.1rem 1.15rem;
}

.news-top-kicker{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .85;
  margin: 0 0 .25rem;
}

.news-top-hed{
  font-family: var(--font-header);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1.85rem;
  line-height: 1.05;
  margin: 0;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.news-top-dek{
  margin: .65rem 0 0;
  font-size: 1.02rem;
  line-height: 1.35;
  opacity: .88;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.news-top-rail{
  border-left: 1px solid var(--news-rule);
  padding-left: clamp(.55rem, 1.1vw, .95rem);
  display: flex;
  flex-direction: column;
}

.news-top-rail-item{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--news-rail-thumb);
  gap: .9rem;
  padding: .9rem .75rem;
  align-items: center;
}

.news-top-rail-item + .news-top-rail-item{
  border-top: 1px solid var(--news-rule);
}

.news-top-rail-text{
  min-width: 0;
}

.news-top-hed-sm{
  font-family: var(--font-header);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1.1rem;
  line-height: 1.15;
  margin: 0;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.news-top-rail-thumb{
  width: var(--news-rail-thumb);
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
  border-radius: 14px;
}

/* ---------------------------------------------------------
   FEED (cards in a simple grid)
   --------------------------------------------------------- */

.news-mid-divider{
  border: 0;
  border-top: 1px solid var(--news-rule);
  margin: .8rem 0;
  width: 100%;
  grid-column: 1 / -1;
}

.news-mid-heading{
  grid-column: 1 / -1;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .9;
  margin: -.25rem 0 .5rem;
}

.news-feed{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--news-card-gap);
}

.news-feed-item{
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 0 0 1rem;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--news-rule) 75%, transparent);
}

.news-feed-media{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
  border-radius: 14px;
}

.news-feed-body{
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.news-card-source{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .85;
  margin: 0;
}

.news-card-title{
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 1.0rem;
  line-height: 1.2;
  margin: 0;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-decoration: none;
}

/* ---------------------------------------------------------
   STORY SECTIONS (full-bleed band with inner container)
   --------------------------------------------------------- */

/* LIGHT MODE: pale but still “story-coloured”, and *even* */
body[data-mode="light"] .news-story-section{
  --story-fg: #14131a;

  /* remove hotspot by keeping mix amounts close */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--story-solid) 20%, #fff 80%) 0%,
      color-mix(in srgb, var(--story-solid) 18%, #fff 82%) 45%,
      color-mix(in srgb, var(--story-solid) 22%, #fff 78%) 100%
    );

  /* optional: a tiny edge vignette without “desat borders” */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--story-solid) 18%, transparent),
    0 16px 40px rgba(0,0,0,0.08);
}

.news-story-section[data-color="grey"]   { --story-solid: var(--story-grey); }
.news-story-section[data-color="purple"] { --story-solid: var(--story-purple); }
.news-story-section[data-color="orange"] { --story-solid: var(--story-orange); }
.news-story-section[data-color="blue"]   { --story-solid: var(--story-blue); }
.news-story-section[data-color="teal"]   { --story-solid: var(--story-teal); }
.news-story-section[data-color="red"]    { --story-solid: var(--story-red); }
.news-story-section[data-color="pink"]   { --story-solid: var(--story-pink); }
.news-story-section[data-color="green"]  { --story-solid: var(--story-green); }
.news-story-section[data-color="brown"]  { --story-solid: var(--story-brown); }

.news-story-section{
  --story-solid: var(--story-grey);
  --story-lead-max: 980px;
  --story-divider: color-mix(in srgb, var(--story-fg, #fff) 18%, transparent);
  background: var(--story-solid);
  padding: 1.0rem 0.64rem;
  color: var(--story-fg, #fff);
  background: var(--story-bg, linear-gradient(135deg,
    color-mix(in srgb, var(--story-solid) 92%, #000 8%) 0%,
    color-mix(in srgb, var(--story-solid) 72%, #000 28%) 55%,
    color-mix(in srgb, var(--story-solid) 86%, #fff 14%) 100%
  ));
  border-radius: 18px;
}

.news-story-section-header,
.news-story-section-body{
  max-width: var(--news-max);
  min-height: 0;
  height: auto !important;
}

.news-story-section-header{
  padding: 0 .15rem .25rem;
  flex: 0 0 auto;
}

.news-story-section-body{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.news-story-section-title{
  font-family: var(--font-header);
  font-weight: 900;
  letter-spacing: -0.025em;
  font-size: clamp(1.7rem, 2.35vw, 2.65rem);
  line-height: 1.05;
  margin: 0;
}

.story-live-icon{
  display: inline-flex;
  opacity: .9;
}

.news-story-section .news-top-lead-body,
.news-story-section .news-feed-item{
  box-shadow: none;
}

.news-story-section .news-top-lead-body{
  border: 0;
  background: transparent;
}

.news-story-section .news-top-rail{
  border-left-color: color-mix(in srgb, #fff 22%, transparent);
}

.news-story-section .news-top-rail-item + .news-top-rail-item{
  border-top-color: color-mix(in srgb, #fff 22%, transparent);
}

/* ensure story titles stay white */
.news-story-section .news-top-kicker,
.news-story-section .news-card-source,
.news-story-section .news-top-hed,
.news-story-section .news-top-hed-sm,
.news-story-section .news-card-title{
  color: #fff;
}

/* “Show more” toggle + animated container (matches your JS) */
.news-story-toggle{
  width: 100%;
  margin-top: .9rem;
  padding: .9rem 0 .4rem;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;

  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 800;
  font-size: .78rem;

  display: flex;
  align-items: center;
  gap: .35rem;
  justify-content: center;

  border-top: 1px solid rgba(255,255,255,.22);
}

.news-story-toggle:hover,
.news-story-toggle:focus-visible{
  opacity: .92;
}

.news-story-toggle-icon{
  display: inline-flex;
  width: 1.2em;
  justify-content: center;
  font-weight: 900;
}

.news-story-extra.hidden{ display: none; }

.news-story-extra{
  overflow: clip;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 260ms ease, opacity 200ms ease, transform 260ms ease;
  will-change: max-height, opacity, transform;
}

.news-story-extra.is-open{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .news-story-extra{ transition: none; transform: none; }
}

/* ---------------------------------------------------------
   READER
   --------------------------------------------------------- */

.news-reader{
  max-width: 900px;
  margin: 1.25rem auto 2rem;
  padding: 1.2rem 1.3rem 2rem;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(22px);
}

.back-to-list{
  margin-bottom: 1rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
}

.back-to-list:hover,
.back-to-list:focus-visible{
  background: var(--hover-bg);
}

.news-reader-title{
  font-family: var(--font-header);
  font-size: 1.5rem;
  margin: 0 0 .4rem;
}

.news-reader-meta{
  font-size: .85rem;
  opacity: .75;
}

#readerHero{
  margin: .85rem 0 0;
  overflow: hidden;
  border-radius: 12px;
}

.news-reader-hero{
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}

.news-reader-content{
  font-size: .98rem;
  line-height: 1.7;
  margin-top: 1rem;
}

.news-reader-content p{ margin: .5rem 0; }
.news-reader-content img{ max-width: 100%; height: auto; }

.news-reader-original{
  margin-top: 1.5rem;
  font-size: .9rem;
}

.news-reader-original a,
.news-reader-content a,
#readerContent a{
  color: color-mix(in srgb, var(--color-text) 70%, var(--color-accent-soft) 30%);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.news-reader-original a:hover,
.news-reader-content a:hover,
#readerContent a:hover{
  text-decoration-thickness: 2px;
}

/* Related chips (rendered by JS) */
.news-reader-related{
  margin-top: .6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}

.news-related-label{
  font-size: .85rem;
  opacity: .85;
  margin-right: .25rem;
}

.news-related-chip{
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: .28rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: color-mix(in srgb, var(--panel-bg) 70%, var(--color-bg) 30%);
  font-size: .85rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-related-chip:hover,
.news-related-chip:focus-visible{
  background: var(--hover-bg);
}

/* ---------------------------------------------------------
   RULES MODAL (matches your DOM)
   --------------------------------------------------------- */

.news-rules-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1.25rem;
}

.news-rules-modal{
  height: min(1100px, 92vh);
  width: min(1100px, 96vw);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.news-rules-header,
.news-rules-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--panel-border);
}

.news-rules-footer{
  border-bottom: 0;
  border-top: 1px solid var(--panel-border);
  justify-content: flex-end;
}

.news-rules-title{
  font-family: var(--font-header);
  font-size: 1.05rem;
  margin: 0;
}

.news-rules-body{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 480px 1fr;
  overflow: hidden;
}

.news-rules-left{
  min-height: 0;
  border-right: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
}

.news-rules-left-toolbar{
  padding: .75rem;
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  gap: .5rem;
}

.news-rules-list{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.news-rules-item{
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .65rem;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.news-rules-item:hover,
.news-rules-item:focus-visible{
  background: var(--hover-bg);
}

.news-rules-item.is-active{
  border-color: var(--panel-border);
  background: color-mix(in srgb, var(--panel-bg) 75%, var(--color-bg) 25%);
}

.news-rules-item-label{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-rules-right{
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  gap: 1.2rem;
}

.news-rules-field{
  padding-bottom: .9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 30%, transparent 70%);
}
.news-rules-field:last-child{ border-bottom: 0; padding-bottom: 0; }

.news-rules-field label{
  display: block;
  font-size: .85rem;
  opacity: .85;
  margin-bottom: .5rem;
}

.news-rules-hint{
  font-size: .82rem;
  opacity: .75;
  margin: .1rem 0 .55rem;
}

.news-rules-input{
  width: 100%;
  padding: .55rem .65rem;
  border: 1px solid var(--panel-border);
  background: color-mix(in srgb, var(--panel-bg) 85%, var(--color-bg) 15%);
  color: inherit;
  outline: none;
}

.news-rules-input:focus{
  border-color: color-mix(in srgb, var(--panel-border) 50%, var(--color-accent-soft) 50%);
}

.news-rules-btn{
  padding: .45rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  cursor: pointer;
  color: inherit;
}

.news-rules-btn:hover,
.news-rules-btn:focus-visible{
  background: var(--hover-bg);
}

.news-rules-btn.primary{
  border-color: color-mix(in srgb, var(--panel-border) 40%, var(--color-accent-soft) 60%);
}

.news-rules-busy.hidden{ display: none; }

.news-rules-busy{
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--panel-bg) 55%, transparent 45%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  z-index: 1;
}

.news-rules-spinner{
  width: 26px;
  height: 26px;
  border: 3px solid color-mix(in srgb, var(--panel-border) 70%, transparent 30%);
  border-top-color: currentColor;
  animation: newsRulesSpin .9s linear infinite;
}

@keyframes newsRulesSpin{ to{ transform: rotate(360deg); } }

/* ---------------------------------------------------------
   responsive
   --------------------------------------------------------- */

@media (max-width: 1100px){
  .news-top{ grid-template-columns: 1fr; }
  .news-top-rail{
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--news-rule);
    margin-top: .75rem;
    padding-top: .5rem;
  }
  .news-feed{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px){
  .news-feed{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 740px){
  .news-feed{ grid-template-columns: 1fr; gap: 0; }

  .news-feed-item{
    flex-direction: row;
    align-items: center;
    padding: .75rem .6rem;
    box-shadow: none;
    border-top: 1px solid var(--news-rule);
    gap: .9rem;
  }

  .news-feed-media{
    flex: 0 0 var(--news-rail-thumb);
    width: var(--news-rail-thumb);
    aspect-ratio: 1 / 1;
  }

  .news-feed-body{ padding: 0; }
  .news-card-title{ -webkit-line-clamp: 2; }

  .news-top-hed{ font-size: 1.55rem; }
}

/* =========================================================
   STORY SECTIONS: remove internal row dividers
   (keep only the SHOW MORE cut line)
   ========================================================= */

.news-story-section .news-top-rail-item + .news-top-rail-item{
  border-top: 0 !important;
}

.news-story-section .news-feed-item{
  box-shadow: none !important;  /* kills the inset underline variant */
  border-top: 0 !important;     /* kills mobile row borders */
}

/* Mobile rail “rows” (nth-child 3+) add a border-top — kill it in story sections */
@media (max-width: 740px){
  .news-story-section .news-top-rail-item:nth-child(n + 3){
    border-top: 0 !important;
  }
}

/* =========================================================
   TABLET MID-SIZE: top rail becomes 2-column grid
   (keeps things balanced between desktop and phone)
   ========================================================= */
@media (max-width: 1100px) and (min-width: 741px){
  .news-top{
    grid-template-columns: 1fr;
  }

  .news-top-rail{
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--news-rule);
    margin-top: 0.9rem;
    padding-top: 0.75rem;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .news-top-rail-item{
    border-top: 0 !important;
    padding: 0.7rem 0.7rem;
    grid-template-columns: minmax(0, 1fr) var(--news-rail-thumb);
    border: 1px solid var(--news-rule);
  }
}

/* =========================================================
   STORY SECTIONS — final polish overrides
   Paste at END of news.css
   ========================================================= */

.news-story-section .news-top-rail{
  border-left: 0 !important;
  padding-left: 0 !important;
}

.news-story-section .news-top-lead-media{
  /* cap height so it doesn't balloon on tall/wide viewports */
  max-height: clamp(240px, 36vh, 440px);
}

/* On very wide screens, let it feel more cinematic */
@media (min-width: 1350px){
  .news-story-section .news-top-lead-media{
    aspect-ratio: 21 / 9;
  }
}

@media (max-width: 1100px){
  .news-story-section .news-top{
    gap: 0; /* remove the “floating gap” */
  }

  .news-story-section .news-top-rail{
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--story-divider); /* the only separator you want here */
  }
}

@media (max-width: 1100px){
  .news-story-section .news-top-rail-item{
    background: transparent !important;
    border: 0 !important;
  }

  /* keep thin separators between items if you still want structure */
  .news-story-section .news-top-rail-item + .news-top-rail-item{
    border-top: 1px solid color-mix(in srgb, var(--story-divider) 75%, transparent) !important;
  }

  /* keep thumbs clean on the coloured background */
  .news-story-section .news-top-rail-thumb{
    border: 1px solid color-mix(in srgb, var(--story-divider) 80%, transparent) !important;
  }
}

/* Optional: if you want the lead text block to visually "join" the rail in stacked mode */
@media (max-width: 1100px){
  .news-story-section .news-top-lead-body{
    padding-bottom: 0.9rem;
  }
}

/* =========================================================
   STORY lead alignment on tablet: shared centered measure
   ========================================================= */

/* Tablet-ish: keep lead media + lead body aligned and centered */
@media (min-width: 741px) and (max-width: 1100px){
  .news-story-section .news-top-lead{
    /* remove any implicit stretching weirdness */
    align-items: stretch;
  }

  .news-story-section .news-top-lead-media,
  .news-story-section .news-top-lead-body{
    max-width: var(--story-lead-max);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  /* Optional: make the image feel less “edge-huggy” */
  .news-story-section .news-top-lead-media{
    overflow: clip;
  }

  /* Optional: slightly tighter padding so text aligns nicely under image */
  .news-story-section .news-top-lead-body{
    padding-left: 0;
    padding-right: 0;
  }
}

/* =========================================================
   Lead image ↔ text spacing (story + main)
   ========================================================= */

/* Shared: make the lead module a bit tighter */
.news-top-lead{
  gap: 0.65rem; /* was ~0.9rem; reduces image→text space */
}

/* STORY sections: nudge image down + tighten spacing further */
.news-story-section .news-top-lead{
  gap: 0.5rem;              /* tighter inside coloured story panels */
}

.news-story-section .news-top-lead-media{
  margin-top: 0.35rem;      /* pulls image slightly away from the very top */
}

/* If your story lead body has padding that creates "extra air", trim top */
.news-story-section .news-top-lead-body{
  padding-top: 0.75rem;     /* was ~1.05rem */
}

/* =========================================================
   Apply the same "card image" styling to TOP lead (non-story)
   ========================================================= */

/* Give top lead images the same rounded/clip treatment */
.news-top .news-top-lead-media{
  border-radius: 14px;
  overflow: clip;
}

/* Keep the image + text aligned/centred on tablet, for BOTH story + main */
@media (min-width: 741px) and (max-width: 1100px){
  .news-top .news-top-lead-media,
  .news-top .news-top-lead-body{
    max-width: var(--story-lead-max, 980px);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* =========================================================
   TABLET: 2-col rail grid should not have row separators
   ========================================================= */
@media (min-width: 741px) and (max-width: 1100px){

  /* In tablet we want tiles, not row separators */
  .news-top-rail-item{
    border-top: 0 !important;
    box-shadow: none !important;
  }

  /* If anything is still drawing a line between items */
  .news-top-rail-item + .news-top-rail-item{
    border-top: 0 !important;
  }
}

/* =========================================================
   FIX: stray rail dividers in tablet grid (story sections)
   ========================================================= */
@media (min-width: 741px) and (max-width: 1100px){
  /* Rail is a grid here, so DOM-adjacent borders look random */
  .news-story-section .news-top-rail-item,
  .news-story-section .news-top-rail-item + .news-top-rail-item{
    border-top: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Keep ONLY the single separator between lead block and the rail */
  .news-story-section .news-top-rail{
    border-top: 1px solid var(--story-divider) !important;
  }
}

/* =========================================================
   Main lead hero: match story hero sizing limits
   ========================================================= */

/* cap height so it can't balloon */
.news-top-lead-media{
  max-height: clamp(240px, 36vh, 440px);
}

/* cinematic on very wide screens (same as story) */
@media (min-width: 1350px){
  .news-top-lead-media{
    aspect-ratio: 21 / 9;
  }
}

/* =========================================================
   STORY PALETTES (light: pale w/ dark text, dark: rich w/ light text)
   Gradient background derived from --story-solid
   ========================================================= */

/* Use foreground everywhere inside the story band (kills forced-white) */
.news-story-section .news-top-kicker,
.news-story-section .news-card-source,
.news-story-section .news-top-hed,
.news-story-section .news-top-hed-sm,
.news-story-section .news-card-title{
  color: var(--story-fg, #fff) !important;
}

.news-story-section .news-story-toggle{
  border-top-color: var(--story-divider) !important;
}

/* =========================================================
   STORY SECTIONS — single source of truth for backgrounds
   (prevents the “gleam” / double-override)
   ========================================================= */

.news-story-section{
  /* subtle, even gradient (no bright hotspot) */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--story-solid) 88%, #000 12%) 0%,
      color-mix(in srgb, var(--story-solid) 86%, #000 14%) 45%,
      color-mix(in srgb, var(--story-solid) 84%, #000 16%) 100%
    );
  color: var(--story-fg);
}

/* ensure inner text uses the computed fg */
.news-story-section .news-top-kicker,
.news-story-section .news-card-source,
.news-story-section .news-top-hed,
.news-story-section .news-top-hed-sm,
.news-story-section .news-card-title{
  color: var(--story-fg) !important;
}

.news-story-section{
  --story-divider: color-mix(in srgb, var(--story-fg) 18%, transparent);
}
.news-story-section .news-story-toggle{
  border-top-color: var(--story-divider) !important;
}

/* =========================================================
   NEWS Blocks — hero / busy / 2x2
   (news.css)
   ========================================================= */

/* HERO block */
.news-block-hero .mn-article-media{
  aspect-ratio: 16 / 9;
}
@media (min-width: 1350px){
  .news-block-hero .mn-article-media{ aspect-ratio: 21 / 9; }
}

.news-block-hero .mn-article-title{
  font-size: 1.75rem;
  line-height: 1.05;
  -webkit-line-clamp: 3;
}

.news-block-hero .mn-article-dek{
  font-size: 1.02rem;
  -webkit-line-clamp: 3;
}

/* Mobile: compress hero a bit */
@media (max-width: 740px){
  .news-block-hero .mn-article-title{ font-size: 1.35rem; }
  .news-block-hero .mn-article-dek{ -webkit-line-clamp: 2; }
}

/* BUSY block: 5 stacked rows */
.news-block-busy .news-busy-list{
  display: flex;
  flex-direction: column;
}

.news-block-busy .news-busy-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--mn-thumb);
  gap: .9rem;
  align-items: center;
  padding: .75rem 0;
}

.news-block-busy .news-busy-row + .news-busy-row{
  border-top: 1px solid color-mix(in srgb, var(--panel-border) 22%, transparent);
}

.news-block-busy .mn-article-title{
  font-size: 1.02rem;
  line-height: 1.15;
  -webkit-line-clamp: 4;
}

.news-block-busy .mn-article-media{
  width: var(--mn-thumb);
  aspect-ratio: 1 / 1;
  border-radius: 14px;
}

/* Small screens: rows get tighter + clamp titles */
@media (max-width: 740px){
  .news-block-busy .news-busy-row{ padding: .75rem 0; }
  .news-block-busy .mn-article-title{ -webkit-line-clamp: 3; }
}

/* 2x2 block */
.news-block-grid2x2 .news-2x2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.news-block-grid2x2 .mn-article-media{
  aspect-ratio: 16 / 9;
  border-radius: 14px;
}

.news-block-grid2x2 .mn-article-title{
  font-size: 1.0rem;
  line-height: 1.2;
  -webkit-line-clamp: 3;
}

/* Mobile: squeeze to 1 column */
@media (max-width: 740px){
  .news-block-grid2x2 .news-2x2{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   NEWS blocks — quick corrections
   Paste at END of news.css
   ========================================================= */

/* Remove the border around the blocks */
#newsGrid .mn-block{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* If your global styles give blocks a “panel” background you still want,
   delete this next rule. If you want them to feel borderless + floating, keep it. */
#newsGrid .mn-block{
  background: transparent !important;
}

/* Give hero + 2x2 cards a touch more breathing room */
.news-block-hero .mn-article,
.news-block-grid2x2 .mn-article{
  display: flex;
  flex-direction: column;
  padding: .15rem 0;        /* tiny vertical air without changing layout much */
}

.mn-article-media {
  margin-bottom: 5px !important;
}

/* =========================================================
   MOBILE: treat 2x2 blocks like BUSY rows
   Paste at END of news.css
   ========================================================= */

@media (max-width: 740px){

  /* 2x2 container becomes a vertical list */
  .news-block-grid2x2 .news-2x2{
    display: flex;
    flex-direction: column;
    gap: 0; /* busy rows use separators instead of gaps */
  }

  /* Each card becomes a busy-style row */
  .news-block-grid2x2 .mn-article{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--mn-thumb);
    gap: .9rem;
    align-items: center;

    padding: .65rem 0;
  }

  /* Add separators between rows (match busy block) */
  .news-block-grid2x2 .mn-article + .mn-article{
    border-top: 1px solid color-mix(in srgb, var(--panel-border) 22%, transparent);
  }

  /* Force the media into a busy-style square thumb */
  .news-block-grid2x2 .mn-article-media{
    width: var(--mn-thumb);
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    justify-self: end;
  }

  /* Clamp titles like busy rows */
  .news-block-grid2x2 .mn-article-title{
    -webkit-line-clamp: 3;
  }

  /* Keep the left text compact and aligned */
  .news-block-grid2x2 .mn-article-kicker{
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* =========================================================
   FIX: grid placement for 2x2->busy mobile mode
   (puts ALL text in left column, thumb on right spanning rows)
   ========================================================= */
@media (max-width: 740px){

  /* Explicitly place children into columns/rows */
  .news-block-grid2x2 .mn-article{
    grid-template-columns: minmax(0, 1fr) var(--mn-thumb);
    grid-auto-rows: auto;
  }

  .news-block-grid2x2 .mn-article-media{
    grid-column: 2;
    grid-row: 1 / span 4;   /* span kicker+title(+dek) */
    align-self: center;
    justify-self: end;

    width: var(--mn-thumb);
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: clip;
  }

  .news-block-grid2x2 .mn-article-kicker{
    grid-column: 1;
    grid-row: 1;
  }

  .news-block-grid2x2 .mn-article-title{
    grid-column: 1;
    grid-row: 2;

    /* make it read like busy rows, not a big card */
    font-size: 1.02rem;
    line-height: 1.15;
    -webkit-line-clamp: 2;
  }

  /* If a dek ever appears in 2x2 items, keep it sane */
  .news-block-grid2x2 .mn-article-dek{
    grid-column: 1;
    grid-row: 3;
    display: none; /* busy rows don't show dek; remove if you want it */
  }
}

/* =========================================================
   TABLET: Busy blocks as 2x3 tile grid
   ========================================================= */
@media (min-width: 741px) and (max-width: 1100px){

  /* list becomes a 2-col grid */
  .news-block-busy .news-busy-list{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  /* each row becomes a “tile” (no full-width separators) */
  .news-block-busy .news-busy-row{
    padding: 0.7rem 0.7rem;
    border: 1px solid var(--news-rule);
    border-radius: 14px;
  }

  .news-block-busy .news-busy-row + .news-busy-row{
    border-top: 0; /* kill the stacked separators in grid mode */
  }

  /* thumb matches the story/tile feel */
  .news-block-busy .mn-article-media{
    width: var(--news-rail-thumb);
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    justify-self: end;
  }

  /* keep titles tidy in tiles */
  .news-block-busy .mn-article-title{
    -webkit-line-clamp: 3;
  }
}

.mn-article-kicker{
  margin-top: 6px;
  margin-bottom: 2px;
}

/* Busy rows: extra kicker spacing to match 2x2 grid cards */
.news-block-busy .mn-article-kicker,
.news-story-busy-list .mn-article-kicker{
  margin-top: 0;
  margin-bottom: 5px;
}

.news-story-section .news-busy-list.news-story-busy-list{
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* =========================================================
   STORY LANES: critical vs non-critical columns
   Requires JS wrapper:
   <div class="news-story-lanes">
     <div class="news-story-lane news-story-lane-primary">…critical…</div>
     <div class="news-story-lane news-story-lane-secondary">…non-critical…</div>
   </div>
   ========================================================= */

.news-story-lanes{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--news-top-gap);
}

@media (min-width: 1100px){
  .news-story-lanes{
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
  
  .news-story-lanes.only-primary{
    justify-items: start;
  }
}

/* =========================================================
   STORY SECTION FINAL OVERRIDES (authoritative)
   Keep this at the very end of the file.
   ========================================================= */

/* ensure story text always uses the computed fg */
.news-story-section .news-top-kicker,
.news-story-section .news-card-source,
.news-story-section .news-top-hed,
.news-story-section .news-top-hed-sm,
.news-story-section .news-card-title{
  color: var(--story-fg, #fff) !important;
}

/* Non-critical story: busy list wrapper */
.news-story-busy{
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* Busy list inside story card */
.news-story-busy-list{
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Reuse separators like busy block, but tuned for story bg */
.news-story-section .news-story-busy-list .news-busy-row{
  padding: .7rem 0;
}

.news-story-section .news-story-busy-list .news-busy-row + .news-busy-row{
  border-top: 1px solid var(--story-divider);
}

/* Pager row pinned visually at the bottom of card */
.news-story-pager{
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: .5rem;
  padding-top: .75rem;
  border-top: 1px solid var(--story-divider);
  flex: 0 0 auto;
}

.news-story-page-btn{
  height: 36px;
  width: 44px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--story-divider) 85%, transparent);
  background: color-mix(in srgb, #000 18%, transparent);
  color: var(--story-fg, #fff);
  cursor: pointer;
}

.news-story-page-btn:disabled{
  opacity: .4;
  cursor: default;
}

.news-story-page-meta{
  text-align: center;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

/* If only one lane has cards, don't reserve a second empty column */
.news-story-lanes.only-primary,
.news-story-lanes.only-secondary{
  grid-template-columns: 1fr;
}

/* =========================================================
   LAYOUT: let story cards + blocks flow in a 2-col grid
   ========================================================= */

#newsGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--news-top-gap);
  align-items: start;
}

/* stack on tablet+mobile */
@media (max-width: 1100px){
  #newsGrid{
    grid-template-columns: 1fr;
  }
}

/* Make wrappers not create a box; children become grid items */
#newsGrid .news-story-lanes,
#newsGrid .news-story-lane,
#newsGrid .mn-blocks{
  display: contents;
}

/* Critical story card spans full row */
@media (min-width: 1101px){
  .news-story-section.is-critical{
    grid-column: 1 / -1;
  }
}

/* Allow long content in grid/flex items to shrink instead of forcing overflow */
#newsGrid,
.news-top,
.news-top-lead,
.news-top-rail,
.news-feed,
.news-busy-row{
  min-width: 0;
}

.news-top-hed,
.news-top-hed-sm,
.news-card-title,
.mn-article-title{
  min-width: 0;
  overflow-wrap: anywhere;
}

/* =========================================================
   STORY SECTION — authoritative sizing (LAST IN FILE)
   ========================================================= */

.news-story-section img,
.news-story-section video,
.news-story-section svg,
.news-story-section canvas{
  height: auto;
}

/* =========================================================
   STORY SECTION — SINGLE SOURCE OF TRUTH (put LAST)
   Strategy:
   - Desktop/tablet: normal card (no bleed)
   - Mobile: bleed by cancelling .news-section padding (NO vw)
   ========================================================= */

.news-story-section{
  /* card defaults */
  border-radius: 18px;
}

/* Mobile: edge-to-edge band without viewport units */
@media (max-width: 740px){

  /* The page container adds padding; cancel it */
  .news-story-section{
    margin-left: calc(-1 * var(--news-gutter));
    margin-right: calc(-1 * var(--news-gutter));
    border-radius: 0;
  }

  /* Give content a sensible inset (smaller than gutter if you want) */
  .news-story-section{
    --story-inset: clamp(0.65rem, 3.4vw, 0.95rem);
    padding-left: var(--story-inset);
    padding-right: var(--story-inset);
  }

  /* Undo earlier padding you set on the band */
  /* (If you *want* vertical padding from earlier rules, leave top/bottom alone) */
  .news-story-section{
    /* keep your vertical rhythm */
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
  }
}

/* Hard safety against horizontal scroll sources */
.news-story-section,
.news-story-section *{
  min-width: 0;
}

.news-story-section img,
.news-story-section video,
.news-story-section iframe{
  height: auto;
  display: block;
}

@media (max-width: 740px){
  #newsGrid{
    max-width: none;
    width: 100%;
  }
}

/* =========================================================
   MOBILE STORY SECTIONS — true viewport edge-to-edge (authoritative)
   Put this LAST in news.css. Remove other mobile bleed attempts.
   ========================================================= */

@media (max-width: 740px){
  .news-section{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #newsGrid{
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: var(--news-gutter) !important;
    padding-right: var(--news-gutter) !important;
    box-sizing: border-box;
  }

  #newsGrid .news-story-section{
    margin-left: calc(50% - 50dvw) !important;
    margin-right: calc(50% - 50dvw) !important;

    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #newsGrid .news-story-section .news-story-section-header,
  #newsGrid .news-story-section .news-story-section-body{
    padding-left: var(--news-gutter) !important;
    padding-right: var(--news-gutter) !important;
  }
}

/* Give story inner content a consistent inset on desktop/tablet */
.news-story-section .news-story-section-header,
.news-story-section .news-story-section-body{
  padding-left: var(--news-gutter);
  padding-right: var(--news-gutter);
}

/* NEWS: mobile edge-to-edge shell */
@media (max-width: 740px){
  body[data-section="news"] .news-section{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* keep status/header text aligned if you have any */
  body[data-section="news"] .news-status{
    padding-left: var(--news-gutter);
    padding-right: var(--news-gutter);
  }

  /* keep the main grid from reintroducing centering constraints */
  body[data-section="news"] #newsGrid{
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================================
   MOBILE NEWS — single source of truth (PUT LAST)
   ========================================================= */
@media (max-width: 740px){

  /* 1) Outer page wrapper: do NOT constrain */
  body[data-section="news"] .news-section{
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Normal content gets the gutter */
  body[data-section="news"] #newsGrid{
    max-width: none !important;
    margin: 0 !important;
    width: 100% !important;
    padding-left: var(--news-gutter) !important;
    padding-right: var(--news-gutter) !important;
    box-sizing: border-box;
  }

  /* 3) Story bands go edge-to-edge by cancelling the gutter */
  body[data-section="news"] #newsGrid .news-story-section{
    margin-left: calc(-1 * var(--news-gutter)) !important;
    margin-right: calc(-1 * var(--news-gutter)) !important;
    border-radius: 0 !important;
  }

  /* 4) Inner story content keeps readable inset */
  body[data-section="news"] #newsGrid .news-story-section .news-story-section-header,
  body[data-section="news"] #newsGrid .news-story-section .news-story-section-body{
    padding-left: var(--news-gutter) !important;
    padding-right: var(--news-gutter) !important;
    box-sizing: border-box;
  }
}

.news-story-section{
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: clip;
  overflow-y: visible;
  height: auto !important;
  max-height: none !important;
}

/* 2) Ensure the body doesn’t force a scroll region */
.news-story-section-body{
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto !important;
  min-height: auto !important;
}

/* 3) The busy wrapper/list should NOT be scroll containers */
.news-story-busy{
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto !important;
  min-height: auto !important;
}

.news-story-busy-list{
  flex: 0 0 auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

/* 4) Pager sits after content (not pinned) */
.news-story-pager{
  flex: 0 0 auto;
  margin-top: 0 !important;
}

.news-story-section .news-busy-row .mn-article-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;      /* clamp to 2 */
  overflow: hidden;
  line-height: 1.15;
  max-height: calc(2 * 1.15em); /* ensures identical block height */
}

/* Optional: clamp kicker too if it wraps */
.news-story-section .news-busy-row .mn-article-kicker{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-story-section .news-busy-row .mn-article-media{
  width: var(--news-rail-thumb);
  aspect-ratio: 1 / 1;
}

.news-story-section-header{
  flex: 0 0 auto;
  text-align: left !important;
  justify-content: flex-start !important; /* if it's flex */
  justify-items: start !important;        /* if it's grid */
  align-items: center;                    /* keep vertical neat */
}

.news-story-section-title{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: start !important; /* if inside grid */
}

/* Force fallback imgs to behave like cover-crops */
.has-fallback > img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Make sure the wrapper is the containing block */
.has-fallback{
  position: relative;
  overflow: hidden;
}

/* =========================================================
   TABLET: Non-critical story pages should be 2x3 tiles
   Paste at VERY END of news.css
   ========================================================= */
@media (min-width: 741px) and (max-width: 1100px){

  /* Override the existing flex !important with equal specificity */
  .news-story-section .news-busy-list.news-story-busy-list{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;

    /* neutralise the flex-only stuff that may still be present */
    flex-direction: initial !important;
  }

  .news-story-section .news-busy-list.news-story-busy-list .news-busy-row{
    padding: 0.7rem 0.7rem !important;
    border-radius: 14px;
  }

  .news-story-section .news-busy-list.news-story-busy-list .news-busy-row + .news-busy-row{
    border-top: 0 !important;
  }
}

/* =========================================================
   RULES MODAL — Critical toggle + badge
   Paste at END of news.css
   ========================================================= */

/* Make checkbox rows behave like a row (your .news-rules-field label is block by default) */
.news-rules-field label.news-rules-checkbox{
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  opacity: 1;            /* don't fade checkbox label */
  font-size: .92rem;
}

.news-rules-field label.news-rules-checkbox input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: color-mix(in srgb, var(--color-accent-soft) 65%, var(--panel-border) 35%);
}

/* Badge used in the left list */
.news-rules-badge{
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: .18rem .45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 45%, transparent);
  opacity: .95;
  line-height: 1;
}

/* Critical badge variant */
.news-rules-badge.critical{
  border-color: color-mix(in srgb, #d14a00 45%, var(--panel-border) 55%);
  background: color-mix(in srgb, #d14a00 16%, transparent);
}

/* Ensure badge doesn't shove the meta off-screen */
.news-rules-item .news-rules-badge{
  margin-left: .25rem;
}


/* =========================================================
   Critical story pager layout
   ========================================================= */

.news-critical-body{
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.news-critical-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--news-top-col-gap);
  align-items: start;
}

.news-critical-col{
  min-width: 0;
}

/* First page: hero left should feel “hero-ish” */
.news-critical-col--hero .news-top-lead{
  margin: 0;
}

/* Ensure the right busy list looks like your story busy style */
.news-critical-col--busy .news-story-busy-list{
  overflow: visible !important;
}

/* Tablet/mobile: stack columns */
@media (max-width: 1100px){
  .news-critical-grid{
    grid-template-columns: 1fr;
  }
}

/* Ensure hidden pagers are actually hidden (author CSS overrides UA) */
.news-story-pager[hidden]{
  display: none !important;
}

/* =========================================================
   STORY THEME v2
   - Non-critical:
       light = pale (existing idea)
       dark  = very dark w/ coloured edge sheen + slight lift
   - Critical:
       always punchy (same in light + dark)
   Put this at VERY END of news.css
   ========================================================= */

/* --- Palette: slightly more saturated solids (optional, see section 3) --- */
:root{
  --story-grey:   #7B7A86;
  --story-purple: #6A3FA0;
  --story-orange: #E05710;
  --story-blue:   #2A72D8;
  --story-teal:   #2FA8C8;
  --story-red:    #B0223A;
  --story-pink:   #D04A97;
  --story-green:  #28B870;
  --story-brown:  #7A4A2B;
}

/* Map data-color -> solid (keep as-is if you already have it) */
.news-story-section[data-color="grey"]   { --story-solid: var(--story-grey); }
.news-story-section[data-color="purple"] { --story-solid: var(--story-purple); }
.news-story-section[data-color="orange"] { --story-solid: var(--story-orange); }
.news-story-section[data-color="blue"]   { --story-solid: var(--story-blue); }
.news-story-section[data-color="teal"]   { --story-solid: var(--story-teal); }
.news-story-section[data-color="red"]    { --story-solid: var(--story-red); }
.news-story-section[data-color="pink"]   { --story-solid: var(--story-pink); }
.news-story-section[data-color="green"]  { --story-solid: var(--story-green); }
.news-story-section[data-color="brown"]  { --story-solid: var(--story-brown); }

/* =========================================================
   NON-CRITICAL defaults
   ========================================================= */

/* Non-critical DARK (default): very dark center, edge sheen, plus lift */
.news-story-section:not(.is-critical){

  --story-fg: #fff;

  /* “Lift” the card above page bg a bit without turning it grey */
  --story-base: color-mix(in srgb, var(--panel-bg) 22%, #000 78%);

  background:
    radial-gradient(120% 120% at 50% 50%,
      color-mix(in srgb, var(--panel-bg) 10%, transparent) 0%,
      transparent 60%
    ),
  
    /* left sheen */
    radial-gradient(120% 140% at 0% 50%,
      color-mix(in srgb, var(--story-solid) 26%, transparent) 0%,
      transparent 58%
    ),
    /* right sheen */
    radial-gradient(120% 140% at 100% 50%,
      color-mix(in srgb, var(--story-solid) 22%, transparent) 0%,
      transparent 60%
    ),
    /* subtle top gloss */
    linear-gradient(180deg,
      color-mix(in srgb, #fff 6%, transparent) 0%,
      transparent 34%
    ),
    /* base (slightly lifted so it doesn’t disappear into page bg) */
    linear-gradient(180deg,
      color-mix(in srgb, var(--story-base) 100%, #000 0%) 0%,
      color-mix(in srgb, var(--story-base) 92%, #000 8%) 55%,
      color-mix(in srgb, var(--story-base) 88%, #000 12%) 100%
    );

  color: var(--story-fg);
  --story-divider: color-mix(in srgb, var(--story-fg) 18%, transparent);

  /* a touch more separation from the page */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--story-solid) 10%, transparent),
    0 18px 50px rgba(0,0,0,0.35);
}

/* Non-critical LIGHT: keep your pale muted treatment */
body[data-mode="light"] .news-story-section:not(.is-critical){
  --story-fg: #14131a;

  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--story-solid) 22%, #fff 78%) 0%,
      color-mix(in srgb, var(--story-solid) 18%, #fff 82%) 45%,
      color-mix(in srgb, var(--story-solid) 26%, #fff 74%) 100%
    );

  color: var(--story-fg);
  --story-divider: color-mix(in srgb, var(--story-fg) 18%, transparent);
}

/* =========================================================
   CRITICAL: always punchy (same in dark + light)
   ========================================================= */

.news-story-section.is-critical{
  --story-fg: #fff;

  /* your existing punchy gradient vibe */
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--story-solid) 92%, #000 8%) 0%,
      color-mix(in srgb, var(--story-solid) 72%, #000 28%) 55%,
      color-mix(in srgb, var(--story-solid) 86%, #fff 14%) 100%
    );

  color: var(--story-fg);
  --story-divider: rgba(255,255,255,.18);

  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--story-solid) 18%, transparent),
    0 18px 60px rgba(0,0,0,0.40);
}

/* Belt-and-braces: prevent the light-mode non-critical rule from touching critical */
body[data-mode="light"] .news-story-section.is-critical{
  --story-fg: #fff;
}

/* Ensure inner text follows computed fg (you already do this elsewhere; keep it authoritative) */
.news-story-section .news-top-kicker,
.news-story-section .news-card-source,
.news-story-section .news-top-hed,
.news-story-section .news-top-hed-sm,
.news-story-section .news-card-title{
  color: var(--story-fg) !important;
}

.news-story-section .news-story-toggle{
  color: var(--story-fg, #fff) !important;
  border-top-color: var(--story-divider) !important;
}

/* =========================================================
   NON-CRITICAL DARK — clearer modern stroke (replace old shadow override)
   ========================================================= */
.news-story-section:not(.is-critical){
  /* keep your existing background stack */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 0 0 1px color-mix(in srgb, var(--story-solid) 16%, transparent),
    0 18px 50px rgba(0,0,0,0.35);
}

/* Light mode keeps its softer shadow; optional: slightly clearer line */
body[data-mode="light"] .news-story-section:not(.is-critical){
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--story-solid) 18%, transparent),
    0 16px 40px rgba(0,0,0,0.08);
}

/* =========================================================
   CRITICAL — hard override in BOTH modes
   ========================================================= */
.news-story-section.is-critical,
body[data-mode="light"] .news-story-section.is-critical{
  --story-fg: #fff;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--story-solid) 92%, #000 8%) 0%,
      color-mix(in srgb, var(--story-solid) 72%, #000 28%) 55%,
      color-mix(in srgb, var(--story-solid) 86%, #fff 14%) 100%
    ) !important;
}

/* =========================================================
   CRITICAL TEXT: force key headings/kickers to stay light
   Put LAST
   ========================================================= */

.news-story-section .news-top-hed,
.news-story-section .news-top-kicker,
.news-story-section .news-story-section-title{
  color: var(--story-fg, #fff) !important;
}

/* Belt + braces: critical should always be white in BOTH modes */
.news-story-section.is-critical .news-top-hed,
.news-story-section.is-critical .news-top-kicker,
.news-story-section.is-critical .news-story-section-title,
.news-story-section.is-critical .story-live-icon{
  color: #fff !important;
}

/* If light-mode rules are extra-specific, match them */
body[data-mode="light"] .news-story-section.is-critical .news-top-hed,
body[data-mode="light"] .news-story-section.is-critical .news-top-kicker,
body[data-mode="light"] .news-story-section.is-critical .news-story-section-title,
body[data-mode="light"] .news-story-section.is-critical .story-live-icon{
  color: #fff !important;
}

@media (min-width: 1101px){
  #newsGrid{
    --hero-media-max: 260px;
  }

  #newsGrid .news-block-hero .mn-article-media,
  #newsGrid .news-top-lead-media{
    max-height: var(--hero-media-max);
    overflow: clip;
  }

  #newsGrid .news-block-hero .mn-article-title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  #newsGrid .news-block-hero .mn-article-dek{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  
  #newsGrid .news-top-hed{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* try 2 first */
    overflow: hidden;
  }

  #newsGrid .news-top-dek{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* Give headline more room (less aggressive than before) */
  #newsGrid .news-story-section.is-critical .news-top-lead .news-top-hed{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* Keep kicker compact so it doesn't eat height */
  #newsGrid .news-story-section.is-critical .news-top-lead .news-top-kicker{
    margin-bottom: 6px; /* tune to match your rhythm */
  }

  /* Give the hero title a bit more room now dek is gone */
  #newsGrid .news-block-hero .news-hero-article .mn-article-title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}

/* =========================================================
   NEWS toolbar — persistent "Last updated" row
   ========================================================= */

.news-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;

  max-width: var(--news-max);
  margin: 0 auto;
  padding: .55rem var(--news-gutter);

  border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 22%, transparent);
}

.news-toolbar-left{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  opacity: .9;
  min-width: 0;
}

.news-toolbar-left .news-toolbar-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-toolbar-right{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.news-toolbar-btn{
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--panel-border) 55%, transparent);
  background: color-mix(in srgb, var(--panel-bg) 70%, var(--color-bg) 30%);
  color: inherit;

  height: 34px;
  width: 38px;
  border-radius: 12px;

  display: grid;
  place-items: center;
  cursor: pointer;
}

.news-toolbar-btn:hover,
.news-toolbar-btn:focus-visible{
  background: var(--hover-bg);
}

.news-toolbar-btn[disabled]{
  opacity: .55;
  cursor: default;
}

/* =========================================================
   NEWS header row (title left, last-updated right)
   ========================================================= */

.news-headrow{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;

  max-width: var(--news-max);
  margin: 0 auto;
  padding: 0 var(--news-gutter) .65rem;

  border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 22%, transparent);
}

.news-headrow-left{
  display: inline-flex;
  align-items: flex-start; /* align refresh icon to title top */
  gap: .6rem;
  min-width: 0;
}

.news-title{
  /* "borrow" from .mn-subtitle but slightly larger and left aligned */
  margin: 0;
  font-size: 2.25rem;       /* was 2.0rem in mn-subtitle */
  opacity: 0.86;
  text-transform: lowercase;
  text-align: left;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

.news-headrow-right{
  display: inline-flex;
  align-items: flex-start;
  gap: .45rem;

  font-size: .86rem;
  opacity: .9;
  padding-top: .15rem; /* nudges into top alignment with title cap height */
  white-space: nowrap;
}

.news-last-updated{
  white-space: nowrap;
}

/* --- “update available” refresh icon --- */
.news-update-btn{
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;

  padding: .25rem .35rem;
  border-radius: 12px;
  cursor: pointer;

  opacity: 0;                 /* animate in */
  transform: translateY(2px);  /* subtle */
  transition: opacity 180ms ease, transform 180ms ease;
}

/* when we unhide it, it fades in and starts glowing */
.news-update-btn.is-visible{
  opacity: .95;
  transform: translateY(0);
}

.news-update-btn:hover,
.news-update-btn:focus-visible{
  background: color-mix(in srgb, var(--panel-bg) 70%, var(--color-bg) 30%);
}

/* gentle pulse/glow */
@keyframes newsUpdatePulse{
  0%   { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); opacity: .85; }
  50%  { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-accent-soft) 55%, transparent)); opacity: 1; }
  100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); opacity: .85; }
}

.news-update-btn.is-attn{
  animation: newsUpdatePulse 1.8s ease-in-out infinite;
}

/* =========================================================
   NEWS titlebar — alignment + width sync with content
   ========================================================= */

.news-titlebar{
  align-items: center;     /* was flex-start */
  max-width: 1100px;       /* match #newsGrid */
  margin-left: auto;
  margin-right: auto;
}

/* left group: keep icon + title vertically centered */
.news-titlebar-left{
  align-items: center;     /* was flex-start */
}

/* remove the manual nudge that makes it look crooked */
.news-titlebar-updated{
  margin-top: 0;           /* was .2rem */
}

/* Mobile: when updated is display:none, centre the title */
@media (max-width: 740px){
  .news-titlebar{
    justify-content: center;
  }
  .news-titlebar-left{
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   NEWS titlebar — final authoritative layout
   ========================================================= */

/* Default: desktop/tablet layout */
.news-titlebar{
  display: flex;                 /* ensure it's flex */
  justify-content: space-between;/* LEFT title, RIGHT updated */
  align-items: center;
  max-width: 1100px;             /* match #newsGrid */
  margin-left: auto;
  margin-right: auto;
}

/* Ensure left group hugs left edge */
.news-titlebar-left{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}

/* Ensure updated hugs right edge */
.news-titlebar-updated{
  margin-top: 0;
  margin-left: auto;            /* hard push to the right */
  text-align: right;
  white-space: nowrap;
}

/* Mobile: timestamp hidden, centre title */
@media (max-width: 740px){
  .news-titlebar{
    justify-content: center;
  }
  .news-titlebar-left{
    flex: 0 0 auto;
    justify-content: center;
  }
}

/* =========================================================
   NEWS titlebar — hard override (wins cascade)
   Put at VERY END of news.css
   ========================================================= */

/* Use whichever parent selector you actually have (keep both if unsure) */
#newsListView .news-titlebar,
body[data-section="news"] .news-titlebar{
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;

  justify-content: space-between !important;
  align-items: center !important;

  max-width: 1100px !important;     /* match #newsGrid */
  margin-left: auto !important;
  margin-right: auto !important;
}

#newsListView .news-titlebar-left,
body[data-section="news"] .news-titlebar-left{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0;
}

#newsListView .mn-subtitle.news-titlebar-title,
body[data-section="news"] .mn-subtitle.news-titlebar-title{
  text-align: left !important;
}

#newsListView .news-titlebar-updated,
body[data-section="news"] .news-titlebar-updated{
  margin-left: auto !important;     /* hard push right */
  text-align: right !important;
  white-space: nowrap;
}

/* Mobile: timestamp hidden, title centered */
@media (max-width: 740px){
  #newsListView .news-titlebar,
  body[data-section="news"] .news-titlebar{
    justify-content: center !important;
  }

  #newsListView .news-titlebar-left,
  body[data-section="news"] .news-titlebar-left{
    justify-content: center !important;
  }

  #newsListView .news-titlebar-updated,
  body[data-section="news"] .news-titlebar-updated{
    display: none !important;
  }
}

/* Kicker age “dot + 32min” */
.mn-article-kicker,
.news-top-kicker{
  display: inline-flex;
  align-items: baseline;
  gap: .35rem; /* spacing around the dot */
  white-space: nowrap;
}

.mn-kicker-age{
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  opacity: .82;
}

/* Small dot separator (not a bullet glyph) */
.mn-kicker-age::before{
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
  transform: translateY(-.1em); /* optically center to text */
}

.mn-kicker-breaking{
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 .45rem;

  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;

  /* neutral by default; tweak to taste */
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* =========================================================
   CRITICAL story: 1×4 strip (desktop), 2×2 (tablet), 1×4 stack (mobile)
   ========================================================= */

.news-story-section.is-critical .news-critical-row4{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: .75rem;
}

.news-story-section.is-critical .news-critical-row4-item{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-align: left;
}

.news-story-section.is-critical .news-critical-row4-item .mn-article-media{
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: clip;
}

.news-story-section.is-critical .news-critical-row4-item .mn-article-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.15;
}

@media (min-width: 1101px){
  .news-story-section.is-critical .news-critical-row4{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: .75rem;
  }
}

/* =========================================================
   TABLET: story busy list → hero-left + 3-stacked-right
   ========================================================= */
@media (min-width: 741px) and (max-width: 1100px) {

  /* --- Container --- */
  .news-story-section .news-busy-list.news-story-busy-list,
  .news-busy-list.news-story-busy-list {
    display: grid !important;
    flex-direction: initial !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 0 !important;
    align-content: start !important;
    align-items: start !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Lift max-height cap set elsewhere */
  .news-busy-list.news-story-busy-list .news-busy-row .mn-article-title {
    max-height: none !important;
  }

  /* --- Hero (first child): left column, spans all 3 rows --- */
  .news-story-section .news-busy-list.news-story-busy-list .news-busy-row:first-child,
  .news-busy-list.news-story-busy-list .news-busy-row:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    align-self: start !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0 0.85rem 0 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  .news-story-section .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-media,
  .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-media {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    border-radius: 12px !important;
    order: -1;
    margin-top: 0 !important;
  }

  .news-story-section .news-busy-list.news-story-busy-list .news-busy-row:first-child .news-busy-text,
  .news-busy-list.news-story-busy-list .news-busy-row:first-child .news-busy-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    order: 1;
    width: 100% !important;
  }

  .news-story-section .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-title,
  .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-title {
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 4 !important;
    max-height: none !important;
  }

  /* --- Stacked items 2-4: right column --- */
  .news-story-section .news-busy-list.news-story-busy-list .news-busy-row:nth-child(2),
  .news-busy-list.news-story-busy-list .news-busy-row:nth-child(2) {
    grid-row: 1 !important;
    padding-top: 0 !important;
  }

  .news-story-section .news-busy-list.news-story-busy-list .news-busy-row:nth-child(3),
  .news-busy-list.news-story-busy-list .news-busy-row:nth-child(3) { grid-row: 2 !important; }

  .news-story-section .news-busy-list.news-story-busy-list .news-busy-row:nth-child(4),
  .news-busy-list.news-story-busy-list .news-busy-row:nth-child(4) { grid-row: 3 !important; }

  .news-story-section .news-busy-list.news-story-busy-list .news-busy-row:not(:first-child),
  .news-busy-list.news-story-busy-list .news-busy-row:not(:first-child) {
    grid-column: 2 !important;
    align-self: start !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--news-rail-thumb) !important;
    gap: 0.65rem !important;
    align-items: center !important;

    padding: 0.5rem 0 0.5rem 0.85rem !important;
    border-top: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--story-divider, var(--panel-border)) 30%, transparent) !important;
  }

  .news-story-section .news-busy-list.news-story-busy-list .news-busy-row:last-child,
  .news-busy-list.news-story-busy-list .news-busy-row:last-child {
    border-bottom: 0 !important;
  }

  .news-story-section .news-busy-list.news-story-busy-list .news-busy-row:not(:first-child) .mn-article-media,
  .news-busy-list.news-story-busy-list .news-busy-row:not(:first-child) .mn-article-media {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    width: var(--news-rail-thumb) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 10px !important;
    justify-self: end;
    align-self: center;
  }

  .news-story-section .news-busy-list.news-story-busy-list .news-busy-row:not(:first-child) .news-busy-text,
  .news-busy-list.news-story-busy-list .news-busy-row:not(:first-child) .news-busy-text {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
  }

  .news-story-section .news-busy-list.news-story-busy-list .news-busy-row:not(:first-child) .mn-article-title,
  .news-busy-list.news-story-busy-list .news-busy-row:not(:first-child) .mn-article-title {
    font-size: 1.0rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 3 !important;
    max-height: none !important;
  }

  /* --- Story card spacing --- */
  .news-story-section {
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
  }

  .news-story-section-header {
    padding-bottom: 1.0rem !important;
  }
}

/* =========================================================
   TABLET: expanded "show more" content reverts to 2-col grid
   (not the hero layout)
   ========================================================= */
@media (min-width: 741px) and (max-width: 1100px) {

  .news-story-extra .news-busy-list.news-story-busy-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    align-content: start !important;
    gap: 0 !important;
  }

  /* All items equal — no hero treatment */
  .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child {
    grid-column: 1 !important;
    grid-row: auto !important;

    display: grid !important;
    flex-direction: initial !important;
    grid-template-columns: minmax(0, 1fr) var(--news-rail-thumb) !important;
    gap: 0.65rem !important;
    align-items: center !important;

    padding: 0.5rem 0.75rem 0.5rem 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--story-divider, var(--panel-border)) 30%, transparent) !important;
  }

  /* Reset hero image back to square thumb */
  .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-media {
    width: var(--news-rail-thumb) !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 10px !important;
    order: initial !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    justify-self: end;
    align-self: center;
  }

  /* Reset hero text back to normal */
  .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child .news-busy-text {
    order: initial !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: auto !important;
  }

  /* Reset hero title back to normal size */
  .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-title {
    font-size: 1.0rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 3 !important;
  }

  /* Right column items also become normal — reset explicit grid placement */
  .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:not(:first-child) {
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 0.5rem 0.75rem 0.5rem 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--story-divider, var(--panel-border)) 30%, transparent) !important;
    border-top: 0 !important;
  }

  .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:nth-child(even) {
    padding-left: 0.75rem !important;
    padding-right: 0 !important;
    border-left: 1px solid color-mix(in srgb, var(--story-divider, var(--panel-border)) 30%, transparent) !important;
  }

  .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:last-child,
  .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:nth-last-child(2):nth-child(odd) {
    border-bottom: 0 !important;
  }
}

/* Mobile: show more is just a plain stacked list */
@media (max-width: 740px) {
  .news-story-extra .news-busy-list.news-story-busy-list {
    display: flex !important;
    flex-direction: column !important;
  }

  .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child {
    display: grid !important;
    flex-direction: initial !important;
    grid-template-columns: minmax(0, 1fr) var(--news-rail-thumb) !important;
    gap: 0.65rem !important;
    padding: 0.6rem 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--story-divider, var(--panel-border)) 30%, transparent) !important;
  }

  .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-media {
    width: var(--news-rail-thumb) !important;
    aspect-ratio: 1 / 1 !important;
    order: initial !important;
  }

  .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-title {
    font-size: 1.0rem !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* Fix for dark text being incorrectly shown on coloured background of critical stories when in light mode */

body[data-mode="light"] .news-story-section.is-critical,
body[data-mode="light"] .news-story-section.is-critical .news-story-toggle {
  --story-fg: #fff !important;
  color: #fff !important;
}

/* =========================================================
   SOCIAL POST CARD — inside critical story sections
   Append to END of news.css
   ========================================================= */

/* Card container */
.news-social-card{
  border: 1px solid var(--story-divider, rgba(255,255,255,.18));
  border-radius: 14px;
  padding: .85rem .95rem;
  background: color-mix(in srgb, #000 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: .45rem;
  /* subtle glass effect on story bg */
  backdrop-filter: blur(6px);
}

/* Light mode: lighter bg */
body[data-mode="light"] .news-social-card{
  background: color-mix(in srgb, #fff 14%, transparent);
  border-color: color-mix(in srgb, var(--story-solid, #666) 25%, rgba(0,0,0,.12));
}

/* Header: avatar + author + platform icon */
.social-card-header{
  display: flex;
  align-items: center;
  gap: .6rem;
}

.social-card-avatar-wrap{
  flex: 0 0 auto;
}

.social-card-avatar{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(255,255,255,.15);
}

.social-card-avatar--placeholder{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .85rem;
  background: color-mix(in srgb, #fff 12%, transparent);
  border: 1px solid rgba(255,255,255,.15);
}

.social-card-author{
  flex: 1 1 auto;
  min-width: 0;
}

.social-card-name{
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: .3rem;
  color: var(--story-fg, #fff);
}

.social-card-verified{
  font-size: .72rem;
  opacity: .85;
  color: #3b82f6;
}

.social-card-handle{
  font-size: .76rem;
  opacity: .7;
  color: var(--story-fg, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.social-card-platform{
  flex: 0 0 auto;
  font-size: 1.1rem;
  opacity: .6;
  color: var(--story-fg, #fff);
}

/* Body */
.social-card-body{
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.social-card-text{
  font-size: .9rem;
  line-height: 1.45;
  color: var(--story-fg, #fff);
  word-break: break-word;
  /* Allow up to ~8 lines before clamp */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
  position: relative;
}

/* Links/mentions in text */
.social-card-link,
.social-card-mention{
  color: color-mix(in srgb, var(--story-fg, #fff) 85%, #6bb5ff 15%);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.social-card-link:hover,
.social-card-mention:hover{
  text-decoration-thickness: 2px;
}

.social-card-tag{
  color: color-mix(in srgb, var(--story-fg, #fff) 75%, #6bb5ff 25%);
}

/* Media grid */
.social-card-media{
  border-radius: 10px;
  overflow: clip;
}

.social-card-media--single{
  max-height: 220px;
}

.social-card-media--single .social-card-img{
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
}

.social-card-media--double{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  max-height: 180px;
}

.social-card-media--double .social-card-img{
  width: 100%;
  height: 100%;
  max-height: 180px;
  object-fit: cover;
}

.social-card-media--multi{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  max-height: 240px;
}

.social-card-media--multi .social-card-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video thumbnail overlay */
.social-card-video-thumb{
  position: relative;
}

.social-card-play-icon{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  pointer-events: none;
}

/* External link card */
.social-card-external{
  display: flex;
  border: 1px solid var(--story-divider, rgba(255,255,255,.18));
  border-radius: 10px;
  overflow: clip;
  text-decoration: none;
  color: var(--story-fg, #fff);
  transition: background 120ms ease;
}

.social-card-external:hover{
  background: color-mix(in srgb, #fff 6%, transparent);
}

.social-card-external-thumb{
  width: 90px;
  height: 68px;
  object-fit: cover;
  flex: 0 0 auto;
}

.social-card-external-body{
  flex: 1 1 auto;
  min-width: 0;
  padding: .45rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.social-card-external-title{
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.social-card-external-desc{
  font-size: .76rem;
  opacity: .75;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Quoted post */
.social-card-quote{
  border: 1px solid var(--story-divider, rgba(255,255,255,.18));
  border-radius: 10px;
  padding: .55rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  background: color-mix(in srgb, #000 8%, transparent);
}

.social-card-quote-header{
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
}

.social-card-quote-avatar{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}

.social-card-quote-name{
  font-weight: 700;
}

.social-card-quote-handle{
  opacity: .65;
}

.social-card-quote-text{
  font-size: .82rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Footer: stats + actions */
.social-card-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-top: .35rem;
  border-top: 1px solid color-mix(in srgb, var(--story-divider, rgba(255,255,255,.18)) 60%, transparent);
}

.social-card-stats{
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .78rem;
  opacity: .8;
  color: var(--story-fg, #fff);
}

.social-card-stat{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.social-card-stat .fa-heart{
  color: #e25555;
  font-size: .72rem;
}

.social-card-stat .fa-retweet{
  color: #4caf50;
  font-size: .72rem;
}

.social-card-actions{
  display: flex;
  align-items: center;
  gap: .35rem;
}

.social-card-action-btn{
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--story-divider, rgba(255,255,255,.18)) 75%, transparent);
  background: color-mix(in srgb, #000 14%, transparent);
  color: var(--story-fg, #fff);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: .72rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease;
}

.social-card-action-btn:hover,
.social-card-action-btn:focus-visible{
  background: color-mix(in srgb, #fff 12%, transparent);
}

/* =========================================================
   Responsive adjustments for social card in rail
   ========================================================= */

/* On tablet, the social card should be full-width inside the busy column */
@media (min-width: 741px) and (max-width: 1100px){
  .news-social-card{
    margin-bottom: .6rem;
  }
}

/* On mobile, the social card sits above the busy list */
@media (max-width: 740px){
  .news-social-card{
    margin-bottom: .5rem;
    padding: .75rem .8rem;
  }

  .social-card-avatar{
    width: 32px;
    height: 32px;
  }

  .social-card-text{
    -webkit-line-clamp: 6;
  }

  .social-card-media--single{
    max-height: 180px;
  }

  .social-card-media--single .social-card-img{
    max-height: 180px;
  }
}

/* =========================================================
   Light mode overrides for social card
   ========================================================= */
body[data-mode="light"] .social-card-name{
  color: var(--story-fg, #14131a);
}

body[data-mode="light"] .social-card-handle{
  color: var(--story-fg, #14131a);
}

body[data-mode="light"] .social-card-text{
  color: var(--story-fg, #14131a);
}

body[data-mode="light"] .social-card-stats{
  color: var(--story-fg, #14131a);
}

/* Critical stories always have white fg regardless of mode */
.news-story-section.is-critical .social-card-name,
.news-story-section.is-critical .social-card-handle,
.news-story-section.is-critical .social-card-text,
.news-story-section.is-critical .social-card-stats{
  color: #fff !important;
}

body[data-mode="light"] .news-story-section.is-critical .social-card-name,
body[data-mode="light"] .news-story-section.is-critical .social-card-handle,
body[data-mode="light"] .news-story-section.is-critical .social-card-text,
body[data-mode="light"] .news-story-section.is-critical .social-card-stats{
  color: #fff !important;
}

/* =========================================================
   Mobile busy rows inside critical story columns
   must keep horizontal text|thumb layout (not stack vertically)
   ========================================================= */
 
/* On mobile, critical story busy lists should stay as simple stacked rows */
@media (max-width: 740px){
  .news-critical-col--busy .news-busy-list.news-story-busy-list{
    display: flex !important;
    flex-direction: column !important;
  }
 
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row,
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--news-rail-thumb, 56px) !important;
    flex-direction: initial !important;
    gap: 0.65rem !important;
    align-items: center !important;
    padding: 0.6rem 0 !important;
    grid-row: auto !important;
    grid-column: auto !important;
  }
 
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row + .news-busy-row{
    border-top: 1px solid var(--story-divider, rgba(255,255,255,.18)) !important;
  }
 
  /* Thumb stays as small square on the right */
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row .mn-article-media,
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-media{
    width: var(--news-rail-thumb, 56px) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 10px !important;
    order: initial !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    justify-self: end !important;
    align-self: center !important;
  }
 
  /* Text block stays left */
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row .news-busy-text,
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child .news-busy-text{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    order: initial !important;
    width: auto !important;
  }
 
  /* Title size stays compact */
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row .mn-article-title,
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-title{
    font-size: 1.0rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 2 !important;
    max-height: none !important;
  }
}
 
/* Same fix for tablet — prevent hero treatment on first child inside critical columns */
@media (min-width: 741px) and (max-width: 1100px){
  .news-critical-col--busy .news-busy-list.news-story-busy-list{
    display: flex !important;
    flex-direction: column !important;
  }
 
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row,
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--news-rail-thumb, 56px) !important;
    flex-direction: initial !important;
    gap: 0.65rem !important;
    align-items: center !important;
    padding: 0.5rem 0 !important;
    grid-row: auto !important;
    grid-column: auto !important;
  }
 
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row + .news-busy-row{
    border-top: 1px solid color-mix(in srgb, var(--story-divider, var(--panel-border)) 30%, transparent) !important;
    border-bottom: 0 !important;
  }
 
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row .mn-article-media,
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-media{
    width: var(--news-rail-thumb, 56px) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 10px !important;
    order: initial !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    justify-self: end !important;
    align-self: center !important;
  }
 
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row .news-busy-text,
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child .news-busy-text{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    order: initial !important;
    width: auto !important;
  }
 
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row .mn-article-title,
  .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-title{
    font-size: 1.0rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 3 !important;
    max-height: none !important;
  }
}

/* =========================================================
   "Show more" overflow rows inside critical story sections
   must keep horizontal text|thumb layout on mobile + tablet
   ========================================================= */

@media (max-width: 740px){
  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list{
    display: flex !important;
    flex-direction: column !important;
  }

  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row,
  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--news-rail-thumb, 56px) !important;
    flex-direction: initial !important;
    gap: 0.65rem !important;
    align-items: center !important;
    padding: 0.6rem 0 !important;
    grid-row: auto !important;
    grid-column: auto !important;
  }

  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row + .news-busy-row{
    border-top: 1px solid var(--story-divider, rgba(255,255,255,.18)) !important;
  }

  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row .mn-article-media,
  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-media{
    width: var(--news-rail-thumb, 56px) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 10px !important;
    order: initial !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row .news-busy-text,
  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child .news-busy-text{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    order: initial !important;
    width: auto !important;
  }

  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row .mn-article-title,
  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-title{
    font-size: 1.0rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 2 !important;
    max-height: none !important;
  }
}

@media (min-width: 741px) and (max-width: 1100px){
  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list{
    display: flex !important;
    flex-direction: column !important;
  }

  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row,
  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--news-rail-thumb, 56px) !important;
    flex-direction: initial !important;
    gap: 0.65rem !important;
    align-items: center !important;
    padding: 0.5rem 0 !important;
    grid-row: auto !important;
    grid-column: auto !important;
  }

  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row + .news-busy-row{
    border-top: 1px solid color-mix(in srgb, var(--story-divider, var(--panel-border)) 30%, transparent) !important;
    border-bottom: 0 !important;
  }

  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row .mn-article-media,
  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-media{
    width: var(--news-rail-thumb, 56px) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 10px !important;
    order: initial !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row .news-busy-text,
  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child .news-busy-text{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    order: initial !important;
    width: auto !important;
  }

  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row .mn-article-title,
  .news-story-section.is-critical .news-story-extra .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-title{
    font-size: 1.0rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 3 !important;
    max-height: none !important;
  }
}

/* =========================================================
   Social card: relative timestamp in footer actions
   ========================================================= */

.social-card-age{
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .7;
  color: var(--story-fg, #fff);
  margin-right: .15rem;
}

/* Ensure critical stories keep it white */
.news-story-section.is-critical .social-card-age{
  color: #fff !important;
}

body[data-mode="light"] .social-card-age{
  color: var(--story-fg, #14131a);
}

body[data-mode="light"] .news-story-section.is-critical .social-card-age{
  color: #fff !important;
}

/* =========================================================
   TABLET CRITICAL STORY: refinements
   - (1) Align text to top of row, not center
   - (2) More space between hero row and content below
   - (3) Fix left alignment of first busy headline
   - (4) Ensure description/dek is visible beneath headline
   ========================================================= */

@media (min-width: 741px) and (max-width: 1100px){

  /* --- Grid becomes single column (stacked) on tablet --- */
  .news-story-section.is-critical .news-critical-grid--first{
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* --- Hero column: add bottom margin for breathing room (2) --- */
  .news-story-section.is-critical .news-critical-col--hero{
    display: block !important;
    margin-bottom: 1.1rem !important;
    padding-bottom: 1.1rem !important;
    border-bottom: 1px solid var(--story-divider, rgba(255,255,255,.18)) !important;
  }

  /* --- Featured lead: 50/50 text|image grid --- */
  .news-story-section.is-critical .news-critical-col--hero .news-top-lead{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 1rem !important;
    align-items: start !important;  /* (1) align to top, not center */
  }

  /* Text/body side: left */
  .news-story-section.is-critical .news-critical-col--hero .news-top-lead .news-top-lead-body{
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
  }

  /* Kicker: tight to top (1) */
  .news-story-section.is-critical .news-critical-col--hero .news-top-lead .news-top-kicker{
    margin-top: 0 !important;
    margin-bottom: 0.1rem !important;
  }

  /* Headline: bigger than busy rows, clamped (1) */
  .news-story-section.is-critical .news-critical-col--hero .news-top-lead .news-top-hed{
    font-size: 1.45rem !important;
    line-height: 1.15 !important;
    -webkit-line-clamp: 4 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* Description/dek: visible, clamped to 2-3 lines (4) */
  .news-story-section.is-critical .news-critical-col--hero .news-top-lead .news-top-dek{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
    opacity: 0.8 !important;
    margin: 0.2rem 0 0 !important;
  }

  /* Image side: right, contained */
  .news-story-section.is-critical .news-critical-col--hero .news-top-lead .news-top-lead-media{
    grid-column: 2 !important;
    grid-row: 1 !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 240px !important;
    border-radius: 12px !important;
    overflow: clip !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  /* --- Busy column: fix left alignment (3) --- */
  .news-story-section.is-critical .news-critical-col--busy{
    display: flex !important;
    flex-direction: column !important;
  }

  /* First busy row after social card — remove any left padding/indent (3) */
  .news-story-section.is-critical .news-critical-col--busy .news-busy-list.news-story-busy-list{
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .news-story-section.is-critical .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row{
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

/* =========================================================
   MOBILE CRITICAL STORY: hero lead text full-width
   Aligns headline/excerpt edges with image above and busy rows below
   ========================================================= */

@media (max-width: 740px){
  .news-story-section.is-critical .news-top-lead{
    gap: 0.5rem !important;
  }

  .news-story-section.is-critical .news-top-lead .news-top-lead-body{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .news-story-section.is-critical .news-top-lead .news-top-lead-media{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
   DESKTOP CRITICAL STORY: hero headline text aligns with image edges
   ========================================================= */

@media (min-width: 1101px){
  .news-story-section.is-critical .news-critical-col--hero .news-top-lead{
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .news-story-section.is-critical .news-critical-col--hero .news-top-lead .news-top-lead-body{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .news-story-section.is-critical .news-critical-col--hero .news-top-lead .news-top-lead-media{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ── Floating dupe tooltip (appended to body) ──────────── */

/* Badge stays the same */
.mn-dupe-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
  padding: 0.15rem 0.45rem;
  background: #e67e22;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 3px;
  cursor: default;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.4;
}
.mn-dupe-badge i { font-size: 0.65rem; }

/* Remove old inline tooltip hover rules */
.mn-dupe-badge:hover .mn-dupe-tooltip,
.mn-dupe-badge:focus-within .mn-dupe-tooltip { display: none; }

/* Floating tooltip — positioned by JS, lives on <body> */
.mn-dupe-tooltip--floating {
  display: none;
  position: fixed;
  z-index: 99999;
  min-width: 220px;
  max-width: 340px;
  padding: 0.6rem 0.75rem;
  background: #1a1a2e;
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}

/* ── Live article pill (replaces BREAKING position) ────── */

.mn-kicker-live {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 18px;
  padding: 0 0.5rem 0 0.38rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(180, 30, 40, 0.55);
  border: 1px solid rgba(200, 40, 50, 0.6);
}

/* Recording dot */
.mn-kicker-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFFFFF;
  flex-shrink: 0;
  animation: mn-live-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes mn-live-dot-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mn-kicker-live-dot { animation: none; opacity: 0.85; }
}

/* Inside story sections — ensure it stays readable on coloured bg */
.news-story-section .mn-kicker-live {
  background: rgba(180, 30, 40, 0.45);
  border-color: rgba(255, 80, 80, 0.4);
  color: var(--story-fg, #fff);
}

/* Busy row vertical rhythm — authoritative */
.news-busy-row{
  padding-top: .85rem !important;
  padding-bottom: .85rem !important;
}

/* =========================================================
   FUEL PRICE BADGE (below news title)
   ========================================================= */
.fuel-price-badge{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .15rem;
  padding: .3rem .65rem .3rem .5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 45%, transparent);
  background: color-mix(in srgb, var(--panel-bg) 70%, var(--color-bg) 30%);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: default;
  white-space: nowrap;
  line-height: 1.4;
  user-select: none;
}
.fuel-price-icon{
  font-size: .78rem;
  opacity: .75;
}
.fuel-price-value{
  font-variant-numeric: tabular-nums;
}

/* Tooltip */
.fuel-price-tooltip{
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  max-width: 340px;
  padding: .65rem .8rem;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  backdrop-filter: blur(18px);
  color: var(--color-text);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.55;
  white-space: normal;
  z-index: 500;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  pointer-events: none;
}
.fuel-price-badge:hover .fuel-price-tooltip,
.fuel-price-badge:focus-within .fuel-price-tooltip{
  display: block;
}

@media (max-width: 740px){
  .fuel-price-tooltip{
    left: -10px;
    right: auto;
  }
}

@media (max-width: 740px){
  .news-block-grid2x2 .mn-article{
    gap: 0 !important;
    padding: 0 !important;
    column-gap: .9rem !important;
  }
}

.mn-article-kicker{
  margin-bottom: 5px !important;
}

@media (min-width: 1101px){
  #newsGrid .news-block-busy{
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .news-block-busy .mn-block-body{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (min-width: 1101px){
  .news-block-busy .mn-article-media{
    width: 72px !important;
  }
  .news-block-busy .news-busy-row{
    grid-template-columns: minmax(0, 1fr) 72px;
  }
}

/* =========================================================
   TABLET APPEARANCE IMPROVEMENTS
   ========================================================= */

@media (min-width: 741px) and (max-width: 1100px){
  .news-block-hero .news-hero-article{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0.35rem !important;
    align-items: start !important;
  }
  .news-block-hero .news-hero-article .mn-article-media{
    grid-column: 2 !important;
    grid-row: 1 / span 4 !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 240px !important;
    border-radius: 12px !important;
    overflow: clip !important;
    width: 100% !important;
  }
  .news-block-hero .news-hero-article .mn-article-kicker{
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-top: 0 !important;
  }
  .news-block-hero .news-hero-article .mn-article-title{
    grid-column: 1 !important;
    grid-row: 2 !important;
    font-size: 1.45rem !important;
    line-height: 1.15 !important;
    -webkit-line-clamp: 4 !important;
  }
  .news-block-hero .news-hero-article .mn-article-dek{
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
    opacity: 0.8 !important;
  }

  .news-block-grid2x2 .news-2x2{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    align-items: start !important;
  }
  .news-block-grid2x2 .mn-article{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--news-rail-thumb) !important;
    gap: 0.35rem !important;
    align-items: start !important;
    padding: 0.7rem 0.7rem !important;
    border: 1px solid var(--news-rule) !important;
    border-radius: 14px !important;
  }
  .news-block-grid2x2 .mn-article-media{
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    width: var(--news-rail-thumb) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 10px !important;
    justify-self: end !important;
    align-self: center !important;
  }
  .news-block-grid2x2 .mn-article-kicker{
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }
  .news-block-grid2x2 .mn-article-title{
    grid-column: 1 !important;
    grid-row: 2 !important;
    font-size: 1.0rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 3 !important;
  }
  .news-block-grid2x2 .mn-article-dek{
    display: none !important;
  }
}

/* =========================================================
   CRITICAL STORY: compact hero + social + 2×2 tiles (desktop with social post)
   ========================================================= */

/* Top row: compact hero left, social card right */
.news-critical-top-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--news-top-col-gap, 1rem);
  align-items: start;
  margin-bottom: .75rem;
}

/* Compact hero: 1:1 image + text beside it */
.news-critical-compact-hero{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  padding: 0;
  margin-top: .85rem;
}

.news-critical-compact-media{
  width: 140px;
  height: 140px;
  border-radius: 12px;
  overflow: clip;
}

.news-critical-compact-body{
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.news-critical-compact-hero .news-top-hed{
  font-size: 1.3rem;
  line-height: 1.15;
  -webkit-line-clamp: 3 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-critical-compact-hero .news-top-dek{
  font-size: .88rem;
  line-height: 1.3;
  opacity: .8;
  -webkit-line-clamp: 4 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hover: underline title */
.news-critical-compact-hero:hover .news-top-hed,
.news-critical-compact-hero:focus-visible .news-top-hed{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Ensure text colors follow story fg */
.news-story-section.is-critical .news-critical-compact-hero .news-top-hed,
.news-story-section.is-critical .news-critical-compact-hero .news-top-kicker,
.news-story-section.is-critical .news-critical-compact-hero .news-top-dek{
  color: var(--story-fg, #fff) !important;
}

/* 2×2 tile grid below */
.news-critical-tiles{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.news-critical-tile{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--news-rail-thumb, 56px);
  gap: .65rem;
  align-items: center;
  padding: .65rem .7rem;
}

.news-critical-tile .mn-article-media{
  width: var(--news-rail-thumb, 56px);
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: clip;
}

.news-critical-tile .mn-article-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.15;
  font-size: 1.0rem;
}

/* Hover on tiles */

.news-critical-tile:hover .mn-article-title,
.news-critical-tile:focus-visible .mn-article-title{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Ensure tile text follows story fg */
.news-story-section.is-critical .news-critical-tile .mn-article-title,
.news-story-section.is-critical .news-critical-tile .mn-article-kicker{
  color: var(--story-fg, #fff) !important;
}

/* =========================================================
   SOCIAL CARD CONSENT GATE (first-visit blur + disclaimer)
   ========================================================= */

/* Card in gated state: blur everything except the overlay */
.news-social-card.social-card--gated{
  position: relative;
  overflow: hidden;
}

.news-social-card.social-card--gated > *:not(.social-card-consent){
  filter: blur(8px) saturate(0.4);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  transition: filter 300ms ease, opacity 300ms ease;
}

/* Consent overlay (sits on top of blurred content) */
.social-card-consent{
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  /* subtle darkened backdrop over the blur */
  background: color-mix(in srgb, #000 25%, transparent);
  border-radius: inherit;
  overflow: hidden;
}

.social-card-consent-body{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  text-align: center;
  width: min(100%, 320px);
  max-width: 280px;
  max-height: calc(100% - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: .2rem;
}

.social-card-consent-icon{
  font-size: 1.4rem;
  opacity: .7;
  color: var(--story-fg, #fff);
}

.social-card-consent-text{
  font-size: .82rem;
  line-height: 1.4;
  color: var(--story-fg, #fff);
  opacity: .9;
  margin: 0;
}

.social-card-consent-btn{
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--story-fg, #fff) 35%, transparent);
  background: color-mix(in srgb, #fff 12%, transparent);
  color: var(--story-fg, #fff);
  font-family: var(--font-header);
  font-weight: 700;
  font-size: .82rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
  flex: 0 0 auto;
  margin-top: .1rem;
}

.social-card-consent-btn:hover,
.social-card-consent-btn:focus-visible{
  background: color-mix(in srgb, #fff 22%, transparent);
  border-color: color-mix(in srgb, var(--story-fg, #fff) 55%, transparent);
  outline: none;
}

/* Light mode adjustments */
body[data-mode="light"] .social-card-consent{
  background: color-mix(in srgb, #fff 35%, transparent);
}

body[data-mode="light"] .social-card-consent-icon,
body[data-mode="light"] .social-card-consent-text{
  color: var(--story-fg, #14131a);
}

body[data-mode="light"] .social-card-consent-btn{
  color: var(--story-fg, #14131a);
  border-color: color-mix(in srgb, var(--story-fg, #14131a) 30%, transparent);
  background: color-mix(in srgb, #000 8%, transparent);
}

body[data-mode="light"] .social-card-consent-btn:hover{
  background: color-mix(in srgb, #000 14%, transparent);
}

/* Critical stories always have white text */
.news-story-section.is-critical .social-card-consent-icon,
.news-story-section.is-critical .social-card-consent-text,
.news-story-section.is-critical .social-card-consent-btn{
  color: #fff !important;
}

body[data-mode="light"] .news-story-section.is-critical .social-card-consent-icon,
body[data-mode="light"] .news-story-section.is-critical .social-card-consent-text,
body[data-mode="light"] .news-story-section.is-critical .social-card-consent-btn{
  color: #fff !important;
}

.social-card--expanded .social-card-text{
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

.social-card-text-toggle{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--story-fg, #fff);
  padding: 0;
  margin-top: -.15rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  align-self: flex-start;
  opacity: .9;
}

.social-card-text-toggle:hover,
.social-card-text-toggle:focus-visible{
  opacity: 1;
}

body[data-mode="light"] .social-card-text-toggle{
  color: var(--story-fg, #14131a);
}

.news-story-section.is-critical .social-card-text-toggle,
body[data-mode="light"] .news-story-section.is-critical .social-card-text-toggle{
  color: #fff !important;
}

/* Compact hero: image brightens on hover (matches other article cards) */
.news-critical-compact-hero:hover .news-critical-compact-media img,
.news-critical-compact-hero:focus-visible .news-critical-compact-media img{
  filter: brightness(1.08) contrast(1.02);
}

/* =========================================================
   TABLET: Critical story busy column → 2×2 tile grid
   (matches the regular block tile treatment)
   ========================================================= */
@media (min-width: 741px) and (max-width: 1100px){
  /* Override earlier flex rules with higher specificity */
  .news-critical-pager .news-critical-col--busy .news-busy-list.news-story-busy-list,
  .news-critical-body .news-critical-col--busy .news-busy-list.news-story-busy-list{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    flex-direction: initial !important;
    gap: 0.75rem !important;
  }

  /* All rows become uniform tiles */
  .news-critical-pager .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row,
  .news-critical-pager .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child,
  .news-critical-body .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row,
  .news-critical-body .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--news-rail-thumb, 56px) !important;
    flex-direction: initial !important;
    gap: 0.65rem !important;
    align-items: center !important;
    padding: 0.7rem 0.7rem !important;
    grid-row: auto !important;
    grid-column: auto !important;
  }

  /* Remove stacked separators */
  .news-critical-pager .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row + .news-busy-row,
  .news-critical-body .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row + .news-busy-row{
    border-top: 0 !important;
  }

  /* Thumbnails: uniform square */
  .news-critical-pager .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row .mn-article-media,
  .news-critical-pager .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-media,
  .news-critical-body .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row .mn-article-media,
  .news-critical-body .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-media{
    width: var(--news-rail-thumb, 56px) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 10px !important;
    order: initial !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  /* Text block stays left */
  .news-critical-pager .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row .news-busy-text,
  .news-critical-pager .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child .news-busy-text,
  .news-critical-body .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row .news-busy-text,
  .news-critical-body .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child .news-busy-text{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    order: initial !important;
    width: auto !important;
  }

  /* Title sizing */
  .news-critical-pager .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row .mn-article-title,
  .news-critical-pager .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-title,
  .news-critical-body .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row .mn-article-title,
  .news-critical-body .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child .mn-article-title{
    font-size: 1.0rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 4 !important;
    max-height: none !important;
  }
  
  /* Fix: first tile should not have extra left indent */
  .news-critical-pager .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child,
  .news-critical-body .news-critical-col--busy .news-busy-list.news-story-busy-list .news-busy-row:first-child{
    padding-left: 0 !important;
  }
}

/* =========================================================
   Headlines: 4-line clamp (everywhere)
   ========================================================= */
.mn-article-title,
.news-top-hed-sm,
.news-card-title,
.news-critical-tile .mn-article-title,
.news-busy-row .mn-article-title,
.news-story-section .news-busy-row .mn-article-title,
.news-block-busy .mn-article-title,
.news-block-grid2x2 .mn-article-title{
  -webkit-line-clamp: 4 !important;
  max-height: none !important;
}

/* =========================================================
   News refresh button
   ========================================================= */

.mn-news-refresh-menu{
  position: absolute;
  z-index: 10050;
  min-width: 220px;
  padding: 0.4rem;
  border-radius: var(--radius-panel);
  border: 1px solid var(--panel-border);
  background: var(--topbar-bg);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mn-news-refresh-menu-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  text-align: left;
}

.mn-news-refresh-menu-item:hover,
.mn-news-refresh-menu-item:focus-visible{
  background: var(--hover-bg);
  outline: none;
}