/* ------------------------------
   🌌 Global Reset + Base Palette
   Soft-chrome, child-friendly theme
---------------------------------*/
:root {
  --navy-dark:   #0d2236;      /* page bg */
  --chrome-surf: #1c2736;      /* soft metallic base */
  --chrome-lite: #2a3a4c;      /* lighter bevel */
  --accent-cyan: #61a0d1;      /* highlight */
  --text-main:   #e0eaf3;      /* body text */
  --text-muted:  #bdcee2;      /* 🌟 Brightened from #a0b3c9 for crisp readability */
  --pill-rad:    18px;
  --card-rad:    14px;
  --shadow-soft: 0 2px 8px rgba(0,0,0,.35);
}

html,body{
  margin:0;padding:0;
  font-family:'Nunito','Segoe UI',Tahoma,sans-serif;
  background:var(--navy-dark);
  color:var(--text-main);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ----------------------------------------------------------------
   🌐  Decorative lattice canvas sits behind everything
-----------------------------------------------------------------*/
#latticeCanvas{
  position:fixed;inset:0;
  width:100vw;height:100vh;
  z-index:-1;
  background:var(--navy-dark);
  pointer-events:none;
}

/* ----------------------------------------------------------------
   🧭 Header – gradient bar w/ hamburger
-----------------------------------------------------------------*/
.site-header{
  position:sticky;top:0;z-index:950;
  background:linear-gradient(90deg,#0d2236 0%,#122b42 35%,#0d2236 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.55);
}
/* inner flex container is styled inline to avoid duplication */

/* brand tweaks (logo already 40×40 in markup) */
.brand{color:var(--text-main);text-decoration:none;}
.brand span{font-weight:800;font-size:1.15rem;white-space:nowrap;}

/* primary nav – desktop */
.nav ul{
  margin:0;padding:0;list-style:none;
  display:flex;gap:1rem;
}
.nav a{
  color:var(--accent-cyan);font-weight:600;font-size:.9rem;text-decoration:none;
  padding:.4rem .3rem;border-radius:4px;
  transition:background .15s,color .15s;
}
.nav a:hover,.nav a:focus{background:rgba(255,255,255,.08);color:#fff;}

/* hamburger button (suppressed on mobile since we scroll nav horizontally) */
#hamburger{display:none;}

/* --------------------------------------------------------------
   📱 Mobile nav – keep links visible by making the bar scrollable
--------------------------------------------------------------*/
@media (max-width:720px){

  .nav{
    display:none;
  }

  .nav.mobile-nav-open{
    display:block;
  }

  .nav ul{
    display:flex;
    flex-direction:column;
    gap:.25rem;

    padding:.5rem 0;
    margin:0;

    white-space:normal;
  }

  .nav li{
    border:none;
  }

  .nav a{
    display:block;
    padding:.65rem .75rem;
    font-size:.9rem;
  }

}

/* utility buttons */
.icon-btn{background:none;border:none;color:var(--accent-cyan);line-height:1;}
.icon-btn:hover,.icon-btn:focus{color:#fff;}
#language-select{
  background:var(--chrome-surf);border:1px solid #3b5d86;color:var(--text-main);
  padding:.3rem .5rem;border-radius:4px;font-size:.85rem;
}
.donate-btn{
  background:#0070f3;color:#fff;padding:.38rem .9rem;border-radius:4px;
  font-weight:700;font-size:.82rem;text-decoration:none;
}
.donate-btn:hover{background:#0181ff;}

/* ----------------------------------------------------------------
   Status ribbon & hero banner
-----------------------------------------------------------------*/
/* Status ribbon temporarily hidden */
.status-ribbon{display:none!important;}

.hero-banner{text-align:center;padding:2.5rem 1rem 1.5rem;}
.hero-title{font-size:2.1rem;font-weight:800;margin:0 0 .4rem;color:var(--accent-cyan);}  
.hero-tag{font-size:1rem;font-weight:600;color:var(--text-muted);}  

/* ----------------------------------------------------------------
   Floating Topic Search Bar
-----------------------------------------------------------------*/
.hidden{display:none!important;}
.sticky-search{
  position:sticky;top:58px;
  display:flex;gap:8px;align-items:center;
  padding:6px 10px;background:rgba(28,39,54,.95);
  box-shadow:var(--shadow-soft);z-index:900;
}
.sticky-search input{
  flex:1 1 220px;padding:6px 10px;
  border-radius:var(--pill-rad);
  border:1px solid var(--chrome-lite);
  background:var(--chrome-surf);color:var(--text-main);
}
.sticky-search button{
  padding:6px 14px;border-radius:var(--pill-rad);
  border:1px solid var(--chrome-lite);
  background:var(--chrome-lite);color:var(--text-main);
  cursor:pointer;transition:background .15s;
}
.sticky-search button:hover{background:var(--accent-cyan);color:var(--navy-dark);}  

/* ----------------------------------------------------------------
   Two-column grid (search vs feed)
-----------------------------------------------------------------*/
#content-inner{
  margin:1rem auto;
  max-width:1180px;
  padding:0 1rem;
}

#content-inner.dual-column{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

#main-feed,
#search-feed{
  display:flex;
  flex-direction:column;
  gap:24px;
}

#search-feed.hidden{
  display:none!important;
}

@media(max-width:768px){

  #content-inner.dual-column{
    grid-template-columns:1fr;
  }

  #content-inner.dual-column.search-active #main-feed{
    display:none;
  }

  #content-inner.dual-column.search-active #search-feed{
    display:flex;
  }

}

/* ----------------------------------------------------------------
   📄  Story Card (soft-chrome look)
-----------------------------------------------------------------*/
.story-card{
  background:linear-gradient(145deg,var(--chrome-surf) 0%,var(--chrome-lite) 80%);
  border-radius:var(--card-rad);overflow:hidden;box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;
}
.image-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;     
  overflow: hidden;
  width: 100%;
}
.image-wrap img{
  width: 100%;
  height: auto;                /* Allows portrait/square photos to expand completely to the edges */
  max-height: 480px;           /* Standard safety ceiling so tall photos don't require infinite scrolling */
  object-fit: contain;         /* Ensures 100% distortion-free aspect ratio mapping */
  display: block;
}
.story-body{padding:1rem;display:flex;flex-direction:column;gap:.75rem;}
.story-title{font-size:1.3rem;font-weight:800;line-height:1.35;margin:0;}
.story-title a{color:var(--text-main);text-decoration:none;}
.story-title a:hover{color:var(--accent-cyan);}  

/* 🌟 Summaries directly under headlines brightened for optimal readability */
.story-summary{
  font-size:1.05rem;
  line-height:1.6;
  color:#d2e2f2;
  margin:0;
}

.story-meta{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
  margin-top:auto;
  font-size:.82rem;
  color:#c0d2e5;
  row-gap:.4rem;
}

.pub-date,
.badge-breaking,
.related-tag{
  white-space:nowrap;
  color:#c0d2e5;
}

/* bias & source pills */
.bias-pill,
.source-pill{
  padding:.2rem .6rem;
  margin-right:.35rem;
  border-radius:var(--pill-rad);
  color:var(--text-main);
  font-weight:600;
  border:1px solid rgba(255,255,255,.12);
}

.bias-liberal{
  background:linear-gradient(145deg, #3b6fb0, #7eaee3);
  color:#f0f2f8;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.bias-conservative{
  background:linear-gradient(145deg, #a34a4a, #de7b7b);
  color:#f0f2f8;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.bias-moderate{
  background:linear-gradient(145deg, #7d47c8, #b08bf0);
  color:#f0f2f8;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.bias-libertarian{
  background:linear-gradient(145deg, #a76d35, #d9a169);
  color:#f0f2f8;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.bias-satire{
  background:linear-gradient(145deg, #a99846, #d6c06a);
  color:#1a1a1a;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.bias-sports{
  background:linear-gradient(145deg, #486857, #647f71);
  color:#f0f2f8;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.related-tag{font-weight:700;color:var(--accent-cyan);}  
.read-btn{
  margin-left:auto;
  flex-shrink:0;
  padding:.25rem .9rem;
  border-radius:var(--pill-rad);

  background:linear-gradient(
    145deg,
    #3c4b5c,
    #556577
  );

  color:#e0eaf3;

  border:1px solid rgba(255,255,255,.08);

  font-weight:700;
  text-decoration:none;
}
.read-btn:hover{
  filter:brightness(1.08);
}

/* ----------------------------------------------------------------
   📰  Empty message helper
-----------------------------------------------------------------*/
.empty-msg{text-align:center;color:var(--text-muted);padding:2rem 0;font-size:1.1rem;}

/* ----------------------------------------------------------------
   🚀  Ad slot (footer)
-----------------------------------------------------------------*/
#ad-footer{
  max-width:1180px;margin:2rem auto 1rem;height:250px;
  background:linear-gradient(145deg,#202e40,#24354a);
  border:1px dashed var(--chrome-lite);border-radius:var(--card-rad);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:.9rem;font-style:italic;
  box-shadow:var(--shadow-soft);
}

/* ----------------------------------------------------------------
   Mobile tweaks
-----------------------------------------------------------------*/
@media(max-width:600px){
  .hero-title{font-size:1.6rem;}
  .status-ribbon{display:none!important;}
}

/* ------------------------------------------------------------
   Cookie Consent Ribbon
------------------------------------------------------------ */

.cookie-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;

  padding:.75rem 1rem;

  background:rgba(9,18,32,.96);
  border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);

  z-index:9999;

  font-size:.85rem;
}

.cookie-banner.hidden{
  display:none;
}

.cookie-banner span{
  max-width:800px;
  color:var(--text-main);
  line-height:1.4;
}

.cookie-actions{
  display:flex;
  gap:.5rem;
  flex-shrink:0;
}

.cookie-actions button{
  cursor:pointer;

  border:none;
  border-radius:8px;

  padding:.45rem .8rem;

  font-weight:700;
  font-size:.85rem;

  transition:
    background .18s ease,
    transform .18s ease,
    opacity .18s ease;
}

#cookie-accept{
  background:var(--accent-color, #3b0a98);
  color:#fff;
}

#cookie-accept:hover{
  transform:translateY(-1px);
  opacity:.95;
}

#cookie-decline{
  background:rgba(255,255,255,.08);
  color:var(--text-main);
}

#cookie-decline:hover{
  background:rgba(255,255,255,.14);
}

@media (max-width:768px){

  .cookie-banner{
    flex-direction:column;
    align-items:flex-start;
  }

  .cookie-actions{
    width:100%;
  }

  .cookie-actions button{
    flex:1;
  }
}

/* ------------------------
Audio
-------------------------*/

.listen-btn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#e0eaf3;
  border-radius:999px;
  padding:.38rem .7rem;
  font-size:.72rem;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}

#voice-select{
  width:95px;
  min-width:95px;
  max-width:95px;

}

.listen-btn:hover{
  background:rgba(255,255,255,.11);
}

.feed-player{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.feed-controls{
  display:flex;
  align-items:center;
  gap:.25rem;
}

.feed-controls.hidden{
  display:none!important;
}

/* ------------------------------------------------------------
   Story Carousel v1
------------------------------------------------------------ */

.story-carousel{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:.4rem;
}

.story-carousel-btn{
  border:none;
  border-radius:50%;
  width:28px;
  height:28px;
  cursor:pointer;
  background:var(--chrome-lite);
  color:var(--text-main);
  font-weight:700;
}

.story-carousel-btn:hover{
  background:var(--accent-cyan);
  color:var(--navy-dark);
}

.story-carousel-status{
  font-size:.8rem;
  color:var(--text-muted);
}

/* ------------------------------------------------------------
   Story Motion v1
------------------------------------------------------------ */

.story-card{
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s ease,
    opacity .35s ease;
}

.story-card.story-rotating{
  transform: scale(.985);
  opacity: .82;
}

.story-carousel-btn{
  transition:
    transform .15s ease,
    background .15s ease;
}

.story-carousel-btn:hover{
  transform: scale(1.08);
}

/* ------------------------------------------------------------
   Story Stack v1
------------------------------------------------------------ */

.story-stack{
  margin-top:.75rem;
  display:flex;
  flex-direction:column;
  gap:0;
}

.story-stack-label{
  margin-top:.5rem;
  margin-bottom:.35rem;

  color:var(--text-muted);

  font-size:.82rem;
  font-weight:700;

  letter-spacing:.02em;
}

.story-stack-card{
  position:relative;
  margin-top:-10px;
  margin-left:12px;
  padding:.55rem .8rem;

  background:rgba(28,39,54,.85);

  border:1px solid rgba(255,255,255,.08);

  border-radius:12px;

  cursor:pointer;

  text-decoration:none;

  overflow:hidden;

  transition:
    transform .18s ease,
    opacity .18s ease,
    box-shadow .18s ease;

  opacity:.82;
}

.story-stack-card,
.story-stack-card:hover,
.story-stack-card:focus,
.story-stack-card:visited{
  text-decoration:none;
}

.story-stack-card *{
  text-decoration:none !important;
}

.story-stack-card::before{
  content:"";

  position:absolute;

  top:0;
  left:-180%;

  width:80%;
  height:100%;

  pointer-events:none;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,.03) 35%,
      rgba(255,255,255,.14) 50%,
      rgba(255,255,255,.03) 65%,
      transparent 100%
    );

  opacity:0;
}

.story-carousel-enabled .story-stack-card.is-front::before{

  opacity:1;

  animation:
    chromeSheen 5s ease-in-out infinite;
}

@keyframes chromeSheen{

  0%{
    left:-180%;
  }

  45%{
    left:-180%;
  }

  70%{
    left:140%;
  }

  100%{
    left:140%;
  }

}

.story-stack-card:hover{
  transform:
    translateY(-8px)
    scale(1.02);

  opacity:.98;

  z-index:50;

  box-shadow:
    0 8px 24px rgba(0,0,0,.45);
}

.story-stack-title{
  font-size:.92rem;
  font-weight:700;
  line-height:1.35;
  color:var(--text-main);
}

.story-stack-meta{
  margin-top:.35rem;

  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;

  font-size:.78rem;
  color:var(--text-muted);
}

.story-stack-date{
  opacity:.92;
  white-space:nowrap;
}

/* ------------------------------------------------------------
   Rolodex Carousel Enhancement (3+ articles only)
------------------------------------------------------------ */

.story-carousel-enabled{
  position:relative;
  min-height:140px;
}

.story-carousel-enabled .story-stack-card{
  transition:
    transform .42s cubic-bezier(.22,.61,.36,1),
    opacity .42s ease;

  will-change:
    transform,
    opacity;
}

.story-carousel-enabled .story-stack-card.is-front{
  z-index:4;
}

.story-carousel-enabled .story-stack-card.is-second{
  z-index:3;
}

.story-carousel-enabled .story-stack-card.is-third{
  z-index:2;
}

.story-carousel-enabled .story-stack-card.is-back{
  z-index:1;
}

/* ------------------------------------------------------------
   Rolodex Positioning Fix
------------------------------------------------------------ */

.story-carousel-enabled{
  position:relative;

  width:500px;

  margin-top:-4px;
  margin-left:6px;

  min-height:82px;
  padding-bottom:0;

  touch-action:none;
}

.story-carousel-enabled .story-stack-card{
  position:absolute !important;

  left:0;
  top:0;

  width:500px;

  margin:0;
  padding:.45rem .7rem;

  transition:
    transform .25s ease,
    opacity .25s ease;

  will-change:
    transform,
    opacity;
}

.story-stack-count{
  position:absolute;

  top:8px;
  right:-18px;

  z-index:200;

  background:rgba(13,34,54,.92);

  border:1px solid rgba(255,255,255,.08);

  padding:.2rem .55rem;

  border-radius:999px;

  color:var(--text-main);

  font-size:.7rem;
  font-weight:700;
}

.story-stack-hint{
  position:absolute;

  right:10px;
  bottom:-18px;

  font-size:.72rem;
  color:rgba(255,255,255,.75);

  pointer-events:none;

  animation:
    storyHintPulse 2.5s ease-in-out infinite;
}

@keyframes storyHintPulse{

  0%{
    opacity:.4;
    transform:translateX(0);
  }

  50%{
    opacity:.9;
    transform:translateX(-4px);
  }

  100%{
    opacity:.4;
    transform:translateX(0);
  }

}

/* ------------------------------------------------------------
   Mobile Rolodex Optimization
------------------------------------------------------------ */

@media (max-width:768px){

  .story-carousel-enabled{
    width:100%;
    margin-top:12px;
    margin-left:0;
    min-height:82px;
  }

  .story-carousel-enabled .story-stack-card{
    width:calc(100% - 12px);
    left:0;
    top:0;
  }

  .story-stack-count{
    top:6px;
    right:6px;
    font-size:.68rem;
  }

  .story-stack-hint{
    right:6px;
    bottom:-16px;
    font-size:.68rem;
  }

}

/* ─────────────────────────────
   World Clocks
───────────────────────────── */

.actions{
  display:flex;
  align-items:center;
  margin-left:auto;
  gap:.65rem;
}

.world-clocks{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-right:.85rem;
  white-space:nowrap;
}

.clock-item{
  display:flex;
  align-items:center;
  gap:.18rem;
  font-size:.72rem;
  line-height:1;
}

.clock-city{
  color:#a6c0de;
  font-size:.68rem;
  font-weight:600;
}

.clock-time{
  color:#dfe8f3;
  font-size:.68rem;
  font-weight:700;
}

.clock-item:not(:last-child)::after{
  content:"•";
  margin-left:.4rem;
  color:#587090;
}

/* Tablet */

@media (max-width:1200px){

  .clock-delhi,
  .clock-tokyo{
    display:none;
  }

}

/* Mobile */

@media (max-width:768px){

  .world-clocks{
    display:none;
  }

}

/* ------------------------------------------------------------
   Public Planet Navigation Loader
------------------------------------------------------------ */

#page-loader{
  position:fixed;
  inset:0;

  z-index:999999;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#0d2236;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .45s ease,
    visibility .45s ease;
}

#page-loader.active{
  opacity:1;
  visibility:visible;
}

.loader-glow{
  position:absolute;

  width:700px;
  height:700px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(97,160,209,.16) 0%,
      rgba(97,160,209,.08) 40%,
      transparent 75%
    );

  pointer-events:none;
}

.loader-content{
  position:absolute;

  top:50%;
  left:50%;

  transform:
    translate(-50%, -50%);

  z-index:5;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
}

#loaderOrbit{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.loader-logo{

  width:110px;

  height:auto;

  transform:translateX(-12px);

  filter:
    drop-shadow(
      0 0 20px rgba(255,255,255,.65)
    );

  animation:
    loaderPulse 2.5s ease-in-out infinite;
}

.loader-title{
  margin:12px 0 0 0;

  color:#e0eaf3;

  font-size:2.6rem;
  font-weight:800;
}

.loader-subtitle{
  margin-top:10px;

  color:var(--text-muted);

  font-size:1rem;
  font-weight:600;
}

@keyframes loaderPulse{

  0%,100%{
    transform:scale(1);

    filter:
      drop-shadow(
        0 0 20px rgba(255,255,255,.65)
      );
  }

  50%{
    transform:scale(1.04);

    filter:
      drop-shadow(
        0 0 30px rgba(255,255,255,.9)
      );
  }

}

/* ------------------------------------------------------------
   Loader Orbit + Code Background
------------------------------------------------------------ */

#globeCanvas{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  z-index:2;
  pointer-events:none;
}

.code-overlay{
  position:absolute;

  width:12.5%;
  height:100%;

  overflow:hidden;

  pointer-events:none;

  font-family:monospace;
  font-size:.75rem;

  color:rgba(97,160,209,.07);

  z-index:1;
}

.code-1{ left:0%; }
.code-2{ left:12.5%; }
.code-3{ left:25%; }
.code-4{ left:37.5%; }
.code-5{ left:50%; }
.code-6{ left:62.5%; }
.code-7{ left:75%; }
.code-8{ left:87.5%; }

.stream{
  position:absolute;
  width:100%;

  animation:
    scrollLoop 180s linear infinite;
}

.reverse .stream{
  animation:
    scrollLoopReverse 180s linear infinite;
}

@keyframes scrollLoop{
  0%{
    transform:translateY(0);
  }
  100%{
    transform:translateY(-100%);
  }
}

@keyframes scrollLoopReverse{
  0%{
    transform:translateY(-100%);
  }
  100%{
    transform:translateY(0);
  }
}

/* ------------------------------------------------------------
   News Quiz Side Panel
------------------------------------------------------------ */

.bias-quiz{
  background:linear-gradient(
    145deg,
    #3c4b5c,
    #556577
  );

  color:#e0eaf3;

  border:1px solid rgba(255,255,255,.08);

  cursor:pointer;
}

.bias-quiz:hover{
  filter:brightness(1.08);
}

.quiz-panel{
  position:fixed;

  top:0;
  right:-420px;

  width:420px;
  height:100vh;

  background:linear-gradient(
    145deg,
    var(--chrome-surf),
    var(--chrome-lite)
  );

  border-left:1px solid rgba(255,255,255,.08);

  box-shadow:
    -8px 0 24px rgba(0,0,0,.35);

  z-index:1200;

  overflow-y:auto;

  transition:right .25s ease;
}

.quiz-panel.open{
  right:0;
}

.quiz-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:1rem;

  border-bottom:1px solid rgba(255,255,255,.08);
}

.quiz-panel-title{
  font-size:1.1rem;
  font-weight:800;
  color:var(--accent-cyan);
}

.quiz-close{
  cursor:pointer;

  border:none;

  background:none;

  color:var(--text-main);

  font-size:1.2rem;
}

.quiz-panel-body{
  padding:1rem;
}

.quiz-question{
  margin-bottom:1rem;

  font-size:1rem;
  font-weight:700;
}

.quiz-choice{
  display:block;

  width:100%;

  margin-bottom:.5rem;
  padding:.75rem;

  text-align:left;

  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;

  background:rgba(255,255,255,.04);

  color:var(--text-main);

  cursor:pointer;
}

.quiz-choice:hover{
  background:rgba(255,255,255,.08);
}

.quiz-score{
  font-size:1.2rem;
  font-weight:800;

  margin-bottom:1rem;
}

.quiz-missed-link{
  display:block;

  margin-bottom:.75rem;

  color:var(--accent-cyan);

  text-decoration:none;
}

.quiz-missed-link:hover{
  text-decoration:underline;
}

/* Feed shifts left when quiz opens */

#content-inner.quiz-open{
  padding-right:440px;

  transition:padding-right .25s ease;
}

.story-actions{
  display:flex;
  justify-content:flex-end;

  margin-top:.15rem;
  margin-bottom:.15rem;
}

/* Mobile */

@media (max-width:768px){

  .quiz-panel{
    width:100%;
    right:-100%;
  }

  #content-inner.quiz-open{
    padding-right:0;
  }
}
/* ------------------------------------------------------------
   Header Priority Layering (Ensures Ticker Slides Behind)
------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000 !important;
  background: #0d1b2a !important; /* Solid background prevents text bleed */
}

/* ------------------------------------------------------------
   National Weather Service Ticker Bar (GPU Accelerated)
------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000 !important;
  background: #0d1b2a !important;
}

#weather-ticker-bar {
  position: relative;
  z-index: 900 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(27, 38, 59, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cfd9e6 !important;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: nowrap !important;
}

#weather-ticker-bar.weather-ticker-hidden {
  display: none !important;
}

#weather-ticker-bar.weather-ticker-collapsed .weather-ticker-viewport {
  display: none;
}

.weather-badge {
  background: rgba(13, 27, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffb703;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  white-space: nowrap;
  margin-right: 0.75rem;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.weather-location-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.85rem;
  flex-shrink: 0;
}

#weather-location-input {
  background: rgba(13, 27, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e0eaf3;
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  width: 110px;
  outline: none;
  transition: all 0.2s ease;
}

#weather-location-input.stowed {
  display: none !important;
}

#weather-location-btn {
  background: rgba(13, 27, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cfd9e6;
  border-radius: 6px;
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.weather-ticker-viewport {
  overflow: hidden;
  white-space: nowrap;
  flex-grow: 1;
  min-width: 0 !important; /* Prevents mobile flexbox text truncation */
  margin-right: 0.85rem;
  mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
}

/* 🔥 GPU Acceleration Engine */
.weather-ticker-track {
  display: inline-block;
  white-space: nowrap;
  will-change: transform; /* Forces browser to use GPU hardware layer */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  animation: weather-marquee 35s linear infinite;
}

.weather-ticker-track:hover {
  animation-play-state: paused;
}

.weather-alert-item {
  display: inline-block;
  white-space: nowrap !important;
  margin-right: 3rem;
}

.weather-ticker-toggle-btn {
  background: rgba(13, 27, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a0b8d8;
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

/* ⚡ Hardware-accelerated 3D Keyframes */
@keyframes weather-marquee {
  0%   { transform: translate3d(100%, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* ------------------------------------------------------------
   ✨ Permanently Collapsed Header & Left Drawer Navigation
------------------------------------------------------------ */

/* 1. Hide inline links completely on all screens (Eliminates empty header space) */
.site-header .nav {
  display: none !important;
}

/* 2. Metallic Grey Pill Menu Button (Compact Pill Scale) */
.mobile-nav-toggle {
  display: flex !important;
  align-items: center;
  gap: 0.25rem;
  background: linear-gradient(145deg, #3c4b5c 0%, #222e3c 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #e0eaf3 !important;
  border-radius: 999px !important;
  padding: 0.25rem 0.65rem !important;  /* Reduced from 0.4rem 1.1rem */
  font-size: 0.72rem !important;        /* Reduced from 0.8rem */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.35), 
    0 2px 8px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease !important;
}

.mobile-nav-toggle:hover {
  background: linear-gradient(145deg, #4b5d72 0%, #2a3a4d 100%) !important;
  border-color: rgba(97, 160, 209, 0.5) !important;
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.5), 
    0 0 14px rgba(97, 160, 209, 0.35) !important;
  transform: translateY(-1px);
}

/* 3. Floating Left-Side Navigation Drawer (Opens on Click) */
.site-header .nav.mobile-nav-open {
  display: block !important;
  position: fixed;
  top: 60px;
  left: 12px !important;
  right: auto !important;
  width: 230px;
  max-width: 230px !important;
  height: auto;
  max-height: 82vh;
  background: rgba(13, 34, 54, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  z-index: 9999;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.15);
  padding: 0.5rem 0;
  overflow-y: auto;
  transform: none !important;
  opacity: 1 !important;
}

.site-header .nav.mobile-nav-open ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
}

.site-header .nav.mobile-nav-open li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header .nav.mobile-nav-open a {
  display: block;
  padding: 0.65rem 1.25rem;
  color: #f0f2f8;
  font-size: 0.9rem;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.site-header .nav.mobile-nav-open a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent-cyan);
}