/* ====================
    Eye-Comfort Design
    ==================== */
:root {
--bg: #0d1117;             /* comfort dark */
--panel: #111827;          /* soft panels */
--card: #0f172a;           /* card surface */
--card-2: #0b1220;         /* deeper surface */
--text: #e6edf3;           /* main text */
--muted: #9aa7b5;          /* secondary text */
--brand: #e54961;          /* accent */
--brand-2: #3fb3ff;        /* cool accent */
--border: #1f2937;         /* subtle borders */
--ring: #1e3a8a;           /* focus ring */
--shadow: 0 10px 30px rgba(0,0,0,.25);
--radius: 14px;
--max: 1200px;
--g: 1rem;
}

/* Light (comfort) theme */
:root[data-theme="light"] {
--bg: #f7f8fb;
--panel: #ffffff;
--card: #ffffff;
--card-2: #f5f7fb;
--text: #0f172a;
--muted: #5b6776;
--brand: #d0274c;
--brand-2: #166ee8;
--border: #e8ecf2;
--ring: #c7dbff;
--shadow: 0 10px 30px rgba(31,41,55,.12);
}

/* Respect system preference by default */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
    --bg: #f7f8fb;
    --panel: #ffffff;
    --card: #ffffff;
    --card-2: #f5f7fb;
    --text: #0f172a;
    --muted: #5b6776;
    --brand: #d0274c;
    --brand-2: #166ee8;
    --border: #e8ecf2;
    --ring: #c7dbff;
    --shadow: 0 10px 30px rgba(31,41,55,.12);
}
}

* { box-sizing: border-box; }
html, body { 
  margin:0; padding:0;
  overflow-x: hidden;
}
body {
font-family: ui-sans-serif, Devanagari, sans-serif, system-ui, 'Kalimati',-apple-system, Segoe UI, Roboto, Inter, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji";
background: radial-gradient(1200px 800px at 80% -20%, rgba(63,179,255,.08), transparent 60%),
            radial-gradient(800px 600px at -20% 120%, rgba(229,73,97,.08), transparent 60%),
            var(--bg);
color: var(--text);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }

.container { max-width: var(--max); margin-inline: auto; padding-inline: 1rem; }

/* ===== Topbar ===== */
.topbar {
background: linear-gradient(0deg, var(--panel), var(--card));
border-bottom: 1px solid var(--border);
font-size: .92rem;
color: var(--muted);
}
.topbar__in {
height: 44px; display:flex; align-items:center; justify-content:space-between;
}
.inline-gap { display:flex; gap:.9rem; align-items:center; flex-wrap: wrap; }
.chip {
display:inline-flex; align-items:center; gap:.45rem;
font-size:.82rem; padding:.25rem .6rem; border:1px solid var(--border);
background: var(--card-2); border-radius: 999px; color: var(--muted);
}

/* ===== Header ===== */
.header { position: sticky; top:0; backdrop-filter: saturate(1.2) blur(6px); z-index:10;
        color: #f0f0f0; /* light white */
        background-color: #333; 
        border-bottom:1px solid var(--border);
        width: 100%; }
.header__in { display:flex; align-items:center; justify-content:space-between; padding: .9rem 0; flex-wrap: wrap;}
.brand { display:flex; align-items:center; gap:.8rem; }
.brand__logo {
width:42px; height:42px; border-radius: 12px; display:grid; place-items:center;
background: radial-gradient(circle at 30% 20%, var(--brand), #8b1f35);
color:#fff; font-weight:800; letter-spacing:.5px; box-shadow: var(--shadow);
}
.brand__text { display:flex; flex-direction:column; }
.brand__title { font-size:1.22rem; font-weight:800; letter-spacing:.2px; }
.brand__tag { font-size:.85rem; color: #FFFDD0; margin-top: .05rem;}

.actions { display:flex; gap:.5rem; align-items:center; }
.search {
display:flex; align-items:center; gap:.5rem; background: var(--card-2);
padding:.45rem .7rem; border:1px solid var(--border); border-radius: 12px;
}
.search input{
background:transparent; border:none; color:var(--text); outline:none; min-width: 180px;
}
.btn {
display:inline-flex; align-items:center; gap:.5rem; border-radius:12px; padding:.5rem .8rem;
border:1px solid var(--border); background: var(--card-2); color:var(--text);
}
.btn:hover { border-color: color-mix(in oklab, var(--brand) 40%, var(--border)); }
.toggle { cursor:pointer; }

/* ===== Nav ===== */
.nav { border-bottom:1px solid var(--border); background: var(--panel); }
.nav__list { display:flex; gap:.6rem; list-style:none; padding:.5rem 0; flex-wrap: wrap; }
/* base link */
.nav__link{
  position: relative;
  padding: .55rem .8rem;
  border-radius: 10px;
  font-weight: 600;
  color: #0f172a;
  border: 2px solid transparent;     /* keeps pill size stable */
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}


/* hover (default) */
.nav__link:hover{
  background-color: rgba(220, 38, 38, 0.10);
  color: #000 !important;   /* black on hover */
  border: 2px solid #000;
}

/* active */
.nav__link.is-active,
.nav__link--active{
  color: #fff !important;
  font-weight: 800;
  background-color: #961e21;
  border: 2px solid gray;
}

/* ✅ if active link is hovered, still keep hover text black */
.nav__link.is-active:hover,
.nav__link--active:hover{
  /* color: #000 !important; */
  background-color: #961e21;
}
/* ===== Ticker ===== */
.ticker { border-bottom:1px solid var(--border); background: linear-gradient(0deg,var(--panel),var(--card)); overflow:hidden; }
.ticker__in { display:flex; gap:.9rem; align-items:center; padding:.55rem 0; }
.badge { background: color-mix(in oklab, var(--brand) 16%, var(--card)); color: var(--brand);
        border:1px solid color-mix(in oklab, var(--brand) 35%, var(--border));
        padding:.2rem .55rem; border-radius: 999px; font-size:.78rem; font-weight:700; }
.marquee { display:flex; gap:2rem; white-space:nowrap; min-width:100%;
            animation: slide 32s linear infinite; }
.marquee a { color: color-mix(in oklab, var(--brand-2) 85%, var(--text)); }
@keyframes slide {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}

/* ===== Layout ===== */
.layout { display:grid; grid-template-columns: 1.7fr .95fr; gap:1.4rem; padding: 1.2rem 0 2rem; }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }

/* ===== Cards ===== */
.grid-lead { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:1rem; }
@media (max-width: 760px) { .grid-lead { grid-template-columns: 1fr; } }

.card {
background: linear-gradient(180deg, var(--card), var(--card-2));
border:1px solid var(--border);
border-radius: var(--radius);
overflow: clip;
box-shadow: var(--shadow);
display:flex; flex-direction: column;
}
.card__media { aspect-ratio: 16 / 9; width:100%; background: #0b1220; position:relative; overflow:hidden; }
.card__media img { width:100%; height:100%; object-fit:cover; transform: scale(1.02); transition: transform .4s ease; }
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: .9rem 1rem 1.1rem; }
.kicker { display:inline-flex; gap:.5rem; align-items:center; color: var(--muted); font-size:.82rem; }
.k-dot { width:6px; height:6px; border-radius:999px; background: var(--brand-2); }
.title { margin:.35rem 0 .25rem; font-size:1.12rem; line-height:1.35; font-weight:800; letter-spacing:.2px; }
.meta { color: var(--muted); font-size:.85rem; }

/* Small cards */
.grid-cards { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
@media (max-width: 1100px) { .grid-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px)  { .grid-cards { grid-template-columns: 1fr; } }
.card--sm .card__media { aspect-ratio: 4 / 3; }

/* ===== Sidebar ===== */
.aside { display:grid; gap: 1rem; }
.widget {
background: linear-gradient(180deg, var(--panel), var(--card));
border:1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1rem;
}
.w-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.w-title { font-size:1.02rem; font-weight:800; }
.w-list { list-style:none; display:grid; gap:.7rem; }
.w-item a { color: var(--text); }
.w-item a:hover { color: var(--brand-2); }
.split {
display:grid; grid-template-columns: 110px 1fr; gap:.8rem; align-items:center;
padding:.4rem; border-radius: 12px; background: color-mix(in oklab, var(--card-2) 70%, transparent);
border:1px dashed var(--border);
}
.split img { width:100%; height:74px; object-fit:cover; border-radius:10px; }

/* ===== Section header ===== */
.section { margin-top: 1.2rem; }
.section__head { display:flex; align-items:center; justify-content:space-between; margin:.4rem 0 .7rem; }
.section__title { font-weight:900; letter-spacing:.3px; }
.more { color: var(--muted); font-size:.9rem; }

/* ===== Footer ===== */
footer {
margin-top: 2rem;
background: linear-gradient(0deg, var(--panel), var(--card));
border-top:1px solid var(--border);
}
.foot {
display:grid; gap:1.2rem; grid-template-columns: 2fr 1fr 1fr; padding: 1.4rem 0 1.6rem;
}
@media (max-width: 900px) { .foot { grid-template-columns: 1fr; } }
.foot h4 { margin: .2rem 0 .5rem; }
.muted { color: var(--muted); }
.foot ul { list-style:none; padding:0; display:grid; gap:.45rem; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }
.foot__brand { display:flex; align-items:center; gap:.8rem; }
.foot__logo { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff;
            background: radial-gradient(ellipse at 30% 30%, var(--brand), #7a1b31); font-weight:800; }

/* ===== Focus rings ===== */
:is(a,button,input):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 10px; }

/* Base navbar links */
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 .9rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #EDEADE;
  font-weight: 500;
  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

/* Hover effect — elegant underline */
.nav__link::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 3px;
  height: 2px;
  background: #FFFDD0;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}

.nav__link:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--brand-2) 6%, var(--card-2));
}

.nav__link:hover::after {
  transform: scaleX(1);
}

/* ✅ Active link — no underline, but glowing comfort pill */
.nav__link--active {
  color: var(--brand-2);
  background: color-mix(in oklab, var(--brand-2) 12%, var(--card-2));
  border-color: color-mix(in oklab, var(--brand-2) 20%, var(--border));
  box-shadow:
    inset 0 0 0 1px rgba(63,179,255,0.25),
    0 0 10px rgba(63,179,255,0.18);
  font-weight: 700;
}

.nav__link--active::after {
  transform: scaleX(0); /* disables underline */
}

/* Focus (keyboard accessibility) */
.nav__link:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--brand-2) 65%, var(--ring));
  outline-offset: 2px;
  border-radius: 10px;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .nav__link,
  .nav__link::after,
  .nav__link--active::after {
    transition: none;
  }
}

/* ==== HEADER SINGLE-ROW LAYOUT ==== */

.header__in {
  display: grid;
  grid-template-columns: auto 1fr auto; /* brand | nav | search */
  align-items: center;
  gap: .8rem;
  padding: .9rem 0;
}

/* middle cell */
.header .nav {
  border: 0;
  background: transparent;
  min-width: 0;              /* allow shrink */
}

/* keep nav in one row, enable horizontal scroll */
.header .nav__list {
  display: flex;
  align-items: center;
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: .25rem 0;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  min-width: 0;
}

/* optional edge fade hint (transparent if translucent header) */
.header .nav__list::before,
.header .nav__list::after {
  content: "";
  flex: 0 0 16px;
  pointer-events: none;
}

/* ===== Full-bleed header (uses entire screen width) ===== */
.header.header--full {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(1.2) blur(6px);
  background: color-mix(in oklab, var(--panel) 80%, transparent);
  border-bottom: 1px solid var(--border);
  width: 100%;
}

/* 3 zones: left (brand) | center (nav) | right (actions) */
.header__in {
  width: 100%;
  padding: .9rem 1rem;                 /* edge padding for full-bleed */
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* edges stretch, nav hugs content */
  align-items: center;
  column-gap: 12px;
}


/* pin brand hard-left, actions hard-right; nav stays centered */

.brand   { justify-self: start; }
.nav     { justify-self: center; min-width: 0; }
.actions { justify-self: end;   min-width: max-content; }

/* nav stays single line; no wrap, no scroll (you can add “More” later if needed) */
.header .nav {
  border: 0;
  background: transparent;
  min-width: 0;
}

/* nav: single line, no wrap, no scroll (we'll overflow to "More") */
.header .nav__list {
  display: flex;
  align-items: center;
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: .25rem 0;
  white-space: nowrap;
  overflow: hidden;   /* no scrollbar */
  flex-wrap: nowrap;  /* never wrap to 2nd line */
  min-width: 0;
}

/* keep brand text if space allows; trim progressively on smaller screens */
@media (max-width: 1080px) { .brand__tag { display: none; } }
@media (max-width: 780px) {
  .brand__text { display: none; }   /* logo only */
  .search input { min-width: 120px; }
  .nav__link { height: 34px; padding: 0 .7rem; }
}

/* optional: symmetric edges on very wide screens */
@media (min-width: 1400px) {
  .header__in {
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  }
}

/* “More” dropdown */
.nav__more { position: relative; }
.nav__more-btn { cursor: pointer; }
.nav__more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: .4rem;
  display: none;
  z-index: 50;
}
.nav__more[aria-expanded="true"] .nav__more-menu,
.nav__more.open .nav__more-menu { display: block; }
.nav__more-menu li { list-style: none; }
.nav__more-menu .nav__link {
  display: block;
  border-radius: 10px;
  height: auto;
  padding: .55rem .7rem;
  margin: .1rem 0;
  white-space: normal; /* wrap inside dropdown */
}

/* keep brand tag if space allows, trim on smaller screens */
@media (max-width: 1080px) {
  .brand__tag { display: none; }
}
@media (max-width: 780px) {
  .brand__text { display: none; } /* logo only to free edges */
  .search input { min-width: 120px; }
  .nav__link { height: 34px; padding: 0 .7rem; }
}

/* (Optional) make the middle zone avoid jumping too wide */
@media (min-width: 1400px) {
  .header__in {
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  }
}


/* --- end of header */

/* keep search compact on right */
.actions {
  display: flex;
  align-items: center;
  min-width: max-content;
}

/* brand tweaks */
.brand__logo { flex-shrink: 0; }

/* responsive trims */
@media (max-width: 960px) {
  .brand__tag { display: none; }
  .search input { min-width: 140px; }
}
@media (max-width: 720px) {
  .brand__text { display: none; }    /* logo only */
  .search input { min-width: 120px; }
  .nav__link { height: 34px; padding: 0 .7rem; }
}


/* ===== Carousel ===== */
.nnb-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

.carousel__track {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;  
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.carousel__media {
  position: relative;
  display: block;
  overflow: hidden;
}

.carousel__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  object-fit: cover;
}

/* 👇 The overlay that appears INSIDE the photo */
.carousel__overlay {
  position: absolute;
  inset: 0; /* top: 0; left: 0; right: 0; bottom: 0 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* text at bottom */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0,0,0,0.05));
  color: #fff;
  padding: 1.5rem;
  border-radius: 1rem;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* optional hover effect */
.carousel__media:hover .carousel__overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0,0,0,0.15));
}

/* badge style */
.carousel__badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.4);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  font-weight: 600;
}

.k-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand, #ff4500);
}

.carousel__title a {
  color: #fff;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 700;
}

.carousel__title a:hover {
  text-decoration: underline;
}

.carousel__meta {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: 0.4rem;
}

/* ensure carousel root is positionable */
.carousel { position: relative; }

/* base dots container (overlay bottom center) */
.carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 14px;                      /* distance from bottom of carousel */
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 30;
  pointer-events: none;              /* disable when hidden */
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity, transform;
}

/* reveal on hover / keyboard focus inside carousel */
.carousel:hover .carousel__dots,
.carousel:focus-within .carousel__dots {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* subtle initial offset to animate in */
.carousel__dots { transform: translateX(-50%) translateY(6px); }

/* dot buttons */
.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease, box-shadow .12s ease;
  outline: none;
}

/* active / hover styles */
.carousel__dot:hover,
.carousel__dot:focus {
  transform: scale(1.15);
  background: rgba(255,255,255,0.18);
}
.carousel__dot.is-active {
  background: var(--brand-2);        /* use your accent color */
  box-shadow: 0 6px 18px rgba(25,50,80,0.35);
  border-color: rgba(255,255,255,0.22);
}

/* hide dots on small screens (optional) */
@media (max-width: 760px) {
  .carousel__dots { display: none; }
}

/* If you prefer to hide dots when JS is disabled:
   add class "no-js" to <html> and uncomment below */
.no-js .carousel__dots { display: none; }


/* Carousel thumbnail stack style */
.carousel__thumbs {
  display: flex;
  gap: 0;                    /* remove normal gap */
  align-items: center;
  justify-content: flex-start;
  margin-top: 8px;
  padding: 8px;
  overflow-x: auto;           /* let stack overflow naturally */
  overflow-y: hidden;      /* hide vertical scroll */
  position: relative;
  height: 140px;             /* height of thumbnails */
  background: transparent;  
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;   /* Firefox */ 
}

.carousel__thumbs::-webkit-scrollbar {
  height: 6px;
}
.carousel__thumbs::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
}

.carousel__thumbs::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
}
.carousel__thumb {
  flex: 0 0 auto;
  width: 180px;
  height: 140px;
  border-radius: 6px;
  border: 2px solid transparent;
  background: #222;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0.3s ease;
  margin-left: -60px; /* 50% overlap */
  transform-origin: center; /* scale from center */
}
.carousel__thumb:first-child {
  margin-left: 0;
}

.carousel__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover / active effects */
.carousel__thumb:hover,
.carousel__thumb:focus {
  opacity: 1;
  z-index: 5;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.678);
}
.carousel__thumb.is-active {
  transform: translateY(-4px) scale(1.1);
  border-color: #333;
  box-shadow: 0 10px 32px rgba(39,81,150,0.25);
  z-index: 10;                 /* active thumbnail on top */
}
/* Dim the next sibling thumbnail */
.carousel__thumb:hover + .carousel__thumb {
  opacity: 0.5;
  transform: scale(0.9);  /* optional: slightly smaller */
}

/* Dim previous sibling thumbnail */
.carousel__thumb:hover ~ .carousel__thumb {
  opacity: 0.5;
  transform: scale(0.9);
}
.carousel__thumbs:hover .carousel__thumb:not(:hover) {
  opacity: 0.5;
  transform: scale(0.9);
}

/* Non-active thumbnails */
.carousel__thumb:not(.is-active) {
  transform: scale(0.9);
  z-index: 1;
  opacity: 0.85;
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0.3s ease, opacity 0.3s ease;
}
/* Hover effect: smooth “active preview” */
.carousel__thumb:not(.is-active):hover {
  transform: translateY(-4px) scale(1.05);  /* slightly bigger & lifted */
  z-index: 5;                               /* hover above other non-actives */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  opacity: 1;
}
.carousel__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  box-shadow: 0 0 0 rgba(255,255,255,0); /* default none */
  transition: box-shadow 0.3s ease;
}

.carousel__thumb:not(.is-active):hover::after {
  box-shadow: 0 0 12px rgba(39,81,150,0.5); /* matches your active theme */
}

.carousel__thumb .thumb-caption {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  font-size: 0.75rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 6px;
  border-radius: 2px;
  opacity: 1 !important;
  transform: translateY(8px);
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 10;  
}

.carousel__thumb:hover .thumb-caption {
  transform: translateY(0);
}

/* Responsive: smaller reels on narrow screens */
@media (max-width: 720px) {
  .carousel__thumb { width: 96px; height: 64px; border-radius: 0.3rem; }
  .carousel__thumb:not(:last-child)::after { top: 6px; bottom: 6px; width: 1px; }
}


/* a11y focus */
.carousel__thumb:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius:8px; }

/* === Carousel Controls (inside image) === */

.carousel__controls {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  display: flex-start;
  justify-content: space-between;
  align-items: center;
  transform: translateY(-50%);
  z-index: 30;
  pointer-events: none; /* so overlay text clickable */
  padding: 0 0.5rem; /* slight horizontal breathing space */
}

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(.22,.9,.2,1), 
              box-shadow 0.3s cubic-bezier(.22,.9,.2,1),
              background 0.3s ease;
  transform-origin: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.carousel__btn[data-dir="prev"] { left: 8px; }
.carousel__btn[data-dir="next"] { right: 8px; }
.carousel__btn:hover,
.carousel__btn:focus {
  background: rgba(0, 0, 0, 0.6);
  transform: translateY(-50%) scale(1.15) translateX(var(--hover-offset, 0));
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
}
/* make hidden buttons fade nicely */
.carousel__btn[style*="display: none"] {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

@media (max-width: 720px) {
  .carousel__btn {
    width: 34px;
    height: 34px;
    font-size: 1.3rem;
  }
}

/* --- Fixed-aspect carousel (16:9), works with your existing News Desk CSS --- */
.carousel--fixed16x9 .carousel__slide {
  min-width: 100%;
}

.carousel--fixed16x9 .carousel__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1rem;            /* keep your rounded corners */
}

/* intrinsic ratio box (56.25% = 9/16) */
.carousel--fixed16x9 .carousel__media::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

/* fill the box exactly; no stretching */
.carousel--fixed16x9 .carousel__media > img,
.carousel--fixed16x9 .carousel__media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* crop to fill uniformly */
  border-radius: inherit;
}

/* your overlay is already absolute; just ensure it sits on top */
.carousel--fixed16x9 .carousel__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;            /* keeps overlay text non-blocking; buttons use controls area */
}

/* keep the inside controls clickable over the media */
.carousel--fixed16x9 .carousel__controls {
  pointer-events: none;            /* container ignores */
}
.carousel--fixed16x9 .carousel__btn {
  pointer-events: auto;            /* buttons still clickable */
}
/* ======================== 
==== Carousel end ==========*/

/* === FIX: Make the header row full-bleed even if it uses .container === */
.header > .container.header__in {
  /* override the container clamp */
  max-width: none;
  width: 100%;
  padding-inline: 1rem;

  /* force our grid layout (wins over earlier flex rule) */
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left | center | right */
  align-items: center;
  column-gap: 12px;
}

/* pin edges + center nav */
.header > .container.header__in .brand   { justify-self: start; }
.header > .container.header__in .nav     { justify-self: center; min-width: 0; }
.header > .container.header__in .actions { justify-self: end;   min-width: max-content; }

/* === FIX: inside header, nav uses one line and does NOT wrap === */
.header > .container.header__in .nav {
  border: 0 !important;          /* kill base .nav border in header row */
  background: transparent !important;
  min-width: 0;
}
.header > .container.header__in .nav__list {
  display: flex;
  align-items: center;
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: .25rem 0;

  white-space: nowrap;
  flex-wrap: nowrap !important;   /* override any base wrap */
  overflow: hidden;               /* no horizontal scrollbars */
  min-width: 0;
}

/* Trim brand text as space tightens so nav stays on one line */
@media (max-width: 1080px) { .header > .container.header__in .brand__tag { display: none; } }
@media (max-width: 780px)  { 
  .header > .container.header__in .brand__text { display: none; } 
  .header > .container.header__in .search input { min-width: 120px; }
  .header > .container.header__in .nav__link { height: 34px; padding: 0 .7rem; }
}

/* Optional: on very wide screens keep symmetric edges */
@media (min-width: 1400px) {
  .header > .container.header__in {
    grid-template-columns: minmax(220px,1fr) auto minmax(220px,1fr);
  }
}


/* === Sticky frosted header with soft border fade === */

/* Base frosted look */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* translucent surface; real blur via backdrop-filter */
  background: color-mix(in oklab, var(--panel) 68%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  /* remove the solid border, we’ll draw a soft fade below */
  border-bottom: none;
}

/* Soft bottom border fade (center brighter, edges fade out) */
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  /* light line that fades toward edges */
  background: linear-gradient(
    to right,
    color-mix(in oklab, var(--border) 0%, transparent) 0%,
    color-mix(in oklab, var(--border) 80%, transparent) 12%,
    color-mix(in oklab, var(--border) 100%, transparent) 50%,
    color-mix(in oklab, var(--border) 80%, transparent) 88%,
    color-mix(in oklab, var(--border) 0%, transparent) 100%
  );
  pointer-events: none;
  opacity: .9;
}

/* Subtle elevated shadow for depth on scroll containers underneath */
.header {
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
}

/* Compact, crisper look once the page is scrolled a bit */
.header.is-scrolled {
  background: color-mix(in oklab, var(--panel) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.header.is-scrolled::after {
  opacity: 1; /* make the hairline a touch clearer */
}

/* Smooth transitions */
.header,
.header::after {
  transition: background .25s ease, box-shadow .25s ease, opacity .2s ease,
              -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease;
}

/* Respect reduced-transparency users (fallback to solid) */
@media (prefers-reduced-transparency: reduce) {
  .header,
  .header.is-scrolled {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--panel) !important;
  }
}

/* Older browsers without backdrop-filter support: solid fallback */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .header { background: color-mix(in oklab, var(--panel) 92%, transparent); }
}

/* === Icon-to-input expanding search === */
.searchbar {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.searchbar__toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, transform .12s ease;
}
.searchbar__toggle:hover,
.searchbar__toggle:focus {
  background: color-mix(in oklab, var(--brand-2) 6%, var(--card-2));
  border-color: color-mix(in oklab, var(--brand-2) 22%, var(--border));
  box-shadow: 0 4px 16px rgba(37,99,235,.18);
}

.searchbar__fieldwrap {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .45rem .6rem;

  /* default (no-JS) -> visible; JS enhances to collapsed */
}

/* Progressive enhancement: collapse by default only if JS is enabled */
.js .searchbar__fieldwrap {
  width: 0;
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  overflow: hidden;
  padding: 0;                 /* hide chrome when closed */
  border-width: 0;            /* hide border when closed */
  transition:
    width .22s ease,
    opacity .18s ease,
    transform .18s ease,
    padding .18s ease,
    border-width .18s ease;
}

/* Open state */
.js .searchbar.is-open .searchbar__fieldwrap {
  width: clamp(180px, 28vw, 320px);
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  padding: .45rem .6rem;
  border-width: 1px;
}


.searchbar__input::placeholder { color: var(--muted); }

/* Submit (optional) */
.searchbar__submit {
  border-radius: 10px;
  padding: .4rem .7rem;
  border: 1px solid var(--border);
  background: var(--card);
}
.searchbar__submit:hover {
  border-color: color-mix(in oklab, var(--brand) 40%, var(--border));
}

/* Small screens: slightly smaller open width */
@media (max-width: 720px) {
  .js .searchbar.is-open .searchbar__fieldwrap { width: clamp(150px, 50vw, 240px); }
}


/* remove built-in search field chrome & cancel icon */
.searchbar__input {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  width: 100%;
  min-width: 0;
  transition: box-shadow .2s ease;
  border-radius: 8px; /* for focus glow below */
}

/* hide WebKit cancel & decorations */
.searchbar__input::-webkit-search-decoration,
.searchbar__input::-webkit-search-cancel-button,
.searchbar__input::-webkit-search-results-button,
.searchbar__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* turn the internal button borderless and flat */
.searchbar__submit {
  border: 0 !important;             /* kill .btn’s border inside the pill */
  background: transparent;          /* keep the field’s background */
  padding: .4rem .6rem;
  border-radius: 8px;
  color: var(--text);
}

/* add a soft divider before the button (looks like a single hairline) */
.searchbar__submit::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.2em;
  margin-right: .5rem;
  vertical-align: middle;
  background: color-mix(in oklab, var(--border) 85%, transparent);
  opacity: .8;
}

/* hover: tint the button area lightly without adding a border */
.searchbar__submit:hover {
  background: color-mix(in oklab, var(--brand-2) 6%, var(--card-2));
}

/* 1) Kill the global focus outline just for the search input */
.searchbar__input:focus-visible {
  outline: none !important;
  box-shadow: none; /* we’ll show focus on the wrapper instead */
}

/* 2) Show a nice focus ring on the outer pill when the input is focused */
.searchbar.is-open:focus-within .searchbar__fieldwrap {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand-2) 55%, transparent);
  border-color: color-mix(in oklab, var(--brand-2) 40%, var(--border));
  transition: box-shadow .18s ease, border-color .18s ease;
}


/* ===== NNB Add Article form (theme-aware) ===== */

.nnb-form .grid{
  display:grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  gap:1rem;
}
@media (max-width: 1024px){ .nnb-form .grid{ grid-template-columns:1fr; } }

.nnb-form .card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius:16px;
  padding:16px;
}
.nnb-form .h{ margin:0 0 .75rem; font-size:1.25rem; color: var(--text); }
.nnb-form .muted{ color: var(--muted); font-size:.9rem; }
.nnb-form .chip{
  display:inline-block; padding:.1rem .5rem; border-radius:999px;
  background: var(--card-2); border:1px solid var(--border); color:var(--muted); font-size:.75rem;
}

/* Inputs (inherit theme tokens) */
.nnb-form label{ display:block; color: var(--muted); font-size:.9rem; margin:.5rem 0 .25rem; }
.nnb-form input[type="text"],
.nnb-form input[type="number"],
.nnb-form input[type="datetime-local"],
.nnb-form textarea,
.nnb-form select{
  width:100%;
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius:10px;
  padding:.6rem .7rem;
  outline:none;
  color-scheme: light dark; /* lets native controls adapt */
}
.nnb-form textarea{ min-height:120px; resize:vertical; }
.nnb-form select[multiple]{ min-height:9.5rem; }

/* Focus */
.nnb-form input:focus,
.nnb-form textarea:focus,
.nnb-form select:focus{
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 55%, transparent);
}

/* Two-column rows inside the card */
.nnb-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
@media (max-width: 800px){ .nnb-form .row{ grid-template-columns:1fr; } }

/* Buttons */
.nnb-form .btnbar{ display:flex; gap:.6rem; }
.nnb-form .btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem .9rem; border-radius:10px; cursor:pointer;
  background: var(--card-2); color: var(--text); border:1px solid var(--border);
}
.nnb-form .btn.primary{
  background: var(--brand-2);
  border-color: color-mix(in oklab, var(--brand-2) 70%, var(--border));
}
.nnb-form .btn:hover{ filter:brightness(1.05); }

/* Media table */
.nnb-form table.media{ width:100%; border-collapse:separate; border-spacing:0 .5rem; }
.nnb-form table.media th{
  text-align:left; font-weight:600; color: var(--muted); font-size:.85rem; padding:.25rem .35rem;
}
.nnb-form table.media td{ padding:.35rem .35rem; vertical-align:top; }
.nnb-form table.media tr{
  background: color-mix(in oklab, var(--card-2) 75%, transparent);
  border:1px solid var(--border);
  border-radius:12px;
}
.nnb-form input[type="file"]{
  background: var(--card-2);
  border:1px dashed var(--border);
  padding:.5rem; border-radius:10px;
}

/* Checkbox row alignment */
.nnb-form .row > label{
  display:flex; align-items:center; gap:.5rem; padding:.25rem 0; margin:0;
}

/* Better calendar icon contrast in dark */
[data-theme="dark"] .nnb-form input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* full-bleed form: use entire screen width */
.nnb-form--full {
  max-width: none;   /* override .wrap */
  width: 100%;
  padding: 0;
}

/* tighten gutters so it feels full-screen */
.nnb-form--full .grid {
  gap: 0;
}

/* make cards feel like one continuous surface */
.nnb-form--full .card {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  padding: 20px 24px;
}

/* add a subtle divider between the two columns on wide screens */
@media (min-width: 1025px) {
  .nnb-form--full .grid {
    grid-template-columns: 3.5fr 6.5fr;   /* ≈ 30% / 70% */
  }
  .nnb-form--full .card:first-child {
    border-right: 1px solid var(--border); /* keep the vertical divider */
  }
}

/* ===== Button variants & sizes (theme-aware) ===== */
/* Smooth transitions for all buttons */
.btn { transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }

/* Outline base */
.btn.btn--outline {
  background: #444;
  border: #222;
  color: whitesmoke;
}
.btn.btn--outline:hover,
.btn.btn--outline:focus-visible {
  background: blueviolet;
  border-color: #333;
  color: whitesmoke;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 15%, transparent);
}

/* Outline: PRIMARY (blue) */
.btn.btn--outline.btn--primary {
  color: var(--brand-2);
  border-color: color-mix(in oklab, var(--brand-2) 45%, var(--border));
}
.btn.btn--outline.btn--primary:hover,
.btn.btn--outline.btn--primary:focus-visible {
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-2) 35%, transparent);
}

/* Outline: DANGER (red) — using your --brand */
.btn.btn--outline.btn--danger {
  color: whitesmoke;
  border-color: color-mix(in oklab, var(--brand) 45%, var(--border));
}
.btn.btn--outline.btn--danger:hover,
.btn.btn--outline.btn--danger:focus-visible {
  background: var(--brand);
  border-color: #333;
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 35%, transparent);
}


/* Sizes */
.btn.btn--sm { padding: .38rem .65rem; font-size: .88rem; border-radius: 8px; }
.btn.btn--xs { padding: .28rem .55rem; font-size: .80rem; border-radius: 8px; line-height: 1.1; }

/* Utility: push Save to the right */
.push-right { margin-left: auto !important; }

/* Disabled */
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }


/* ===== Toasts/ Message template ===== */
.nnb-toasts{
  position: fixed;
  top: 16px;
  right: 16px;
  display: grid;
  gap: 10px;
  z-index: 1000;
}

.toast{
  display:flex; align-items:flex-start; gap:.65rem;
  min-width: 260px; max-width: 420px;
  background: var(--card);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: .7rem .8rem;
  animation: toast-in .18s ease-out both;
}

.toast.leaving { animation: toast-out .18s ease-in forwards; }

.toast__icon{
  flex:0 0 22px; height:22px; width:22px;
  border-radius: 999px; display:grid; place-items:center;
  font-size:.9rem; font-weight:800; color:#fff;
}
.toast__body{ line-height:1.45; }
.toast__close{
  margin-left:auto; border:0; background:transparent; color: var(--muted);
  font-size:1.2rem; line-height:1; padding:.1rem .25rem; cursor:pointer;
}
.toast__close:hover{ color: var(--text); }

/* Variants */
.toast--success .toast__icon { background: #16a34a; }   /* green */
.toast--info    .toast__icon { background: var(--brand-2); } /* blue */
.toast--warning .toast__icon { background: #d97706; }   /* amber */
.toast--error   .toast__icon { background: #dc2626; }   /* red */
.toast--debug   .toast__icon { background: #64748b; }   /* slate */

/* subtle colored left border for quick scanning */
.toast--success { border-left: 3px solid #16a34a; }
.toast--info    { border-left: 3px solid var(--brand-2); }
.toast--warning { border-left: 3px solid #d97706; }
.toast--error   { border-left: 3px solid #dc2626; }
.toast--debug   { border-left: 3px solid #64748b; }

/* Animations */
@keyframes toast-in { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
@keyframes toast-out{ to{opacity:0;transform:translateY(-6px)} }

/* =========================================================
   AUTH PORTAL — clean, tall, narrow, modern (theme-aware)
   ========================================================= */

/* Break out of the base .container clamp on auth pages */
#main.container:has(.auth-portal) {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Page scaffold: tall, centered, soft background */
.auth-portal{
  min-height: 96svh;
  display:grid;
  place-items:center;
  padding: clamp(16px, 4vw, 32px);
  background:
    radial-gradient(900px 600px at 85% -10%, color-mix(in oklab, var(--brand-2) 10%, transparent), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, color-mix(in oklab, var(--brand) 10%, transparent), transparent 60%),
    var(--bg);
}

/* Card: narrower & taller presence */
.auth-portal__card{
  width: clamp(520px, 46vw, 640px);     /* narrower */
  min-height: auto;
  display:flex; flex-direction:column;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 85%, transparent), var(--card));
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  overflow: hidden;
}

/* Header: brand + tabs */
.auth-portal__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap: 1rem;
  padding: 1rem 1.2rem .65rem;
  border-bottom: 1px solid var(--border);
}
.auth-portal__brand{ display:flex; align-items:center; gap:.85rem; }
.auth-portal__logo{
  width: 52px; height:52px; border-radius:14px; display:grid; place-items:center;
  color:#fff; font-weight:800;
  background: radial-gradient(ellipse at 30% 30%, var(--brand), #7a1b31);
  box-shadow: var(--shadow);
}
.auth-portal__title{ margin:0; font-size:1.25rem; font-weight:900; letter-spacing:.2px; }
.auth-portal__sub{ margin:.1rem 0 0; color: var(--muted); font-size:.95rem; }

.auth-portal__tabs{
  display:flex; gap:.5rem; background: var(--card-2);
  border:1px solid var(--border); padding:.3rem; border-radius: 12px;
}
.auth-tab{
  border:1px solid transparent; background: transparent; color: var(--muted);
  padding:.45rem .8rem; border-radius: 10px; cursor:pointer; font-weight:800;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.auth-tab:hover{ color: var(--text); }
.auth-tab.is-active{
  color: var(--text);
  background: color-mix(in oklab, var(--brand-2) 10%, var(--card));
  border-color: color-mix(in oklab, var(--brand-2) 30%, var(--border));
  box-shadow: inset 0 0 0 1px rgba(63,179,255,.22);
}

/* Body: grows to fill height */
.auth-portal__body{
  flex: 0 0 auto;
  padding: 1.1rem 1.3rem 1.2rem;
}

/* Messages (Django messages) */
.auth-messages{ display:grid; gap:.6rem; margin: .2rem 0 .7rem; }
.auth-msg{
  padding:.6rem .75rem; border-radius:10px; border:1px solid var(--border);
  background: color-mix(in oklab, var(--card-2) 70%, transparent);
  font-size:.95rem;
}
.auth-msg--success { border-color: color-mix(in oklab, limegreen 25%, var(--border)); }
.auth-msg--info    { border-color: color-mix(in oklab, var(--brand-2) 30%, var(--border)); }
.auth-msg--warning { border-color: color-mix(in oklab, orange 30%, var(--border)); }
.auth-msg--error   { border-color: color-mix(in oklab, #ef4444 40%, var(--border)); }

/* Panels: toggle with JS (.is-hidden) */
.auth-panel.is-hidden{ display:none; }

/* Form: sleek fields */
.auth-form label{
  display:block; color: var(--muted); font-size:.92rem; margin:.55rem 0 .28rem;
}
.auth-form .field{
  position: relative;
  display: grid;
  align-items: center;
}
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"]{
  width:100%; background: var(--card-2); color: var(--text);
  border:1px solid var(--border); border-radius:12px; padding:.78rem .9rem; outline:none;
  color-scheme: light dark;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.auth-form input:hover{
  border-color: color-mix(in oklab, var(--brand-2) 20%, var(--border));
}
.auth-form input:focus{
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 55%, transparent);
}

/* Password toggle button inside field */
.auth-password{ position:relative; }
.auth-toggle{
  position:absolute; right:8px; top:50%; transform: translateY(-50%);
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--border); background: var(--card); color: var(--text);
  display:grid; place-items:center; cursor:pointer;
  transition: border-color .18s ease, background .18s ease;
}
.auth-toggle:hover{ border-color: color-mix(in oklab, var(--brand-2) 35%, var(--border)); }

/* 2-col grid for register */
.auth-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; }
@media (max-width: 720px){ .auth-grid{ grid-template-columns: 1fr; } }

/* Actions (buttons row) */
.auth-actions{ display:flex; align-items:center; justify-content:flex-end; margin-top:.6rem;}
.auth-btnbar { display:flex; align-items:center; gap:.6rem; margin-top: 1rem; padding: .6rem; }
.push-right { margin-left: auto !important; }

/* Buttons (solid + outline) */
.btn { display:inline-flex; align-items:center; gap:.45rem; border-radius:10px;
       padding:.55rem .9rem; border:1px solid var(--border); background: var(--card-2);
       color: var(--text); cursor:pointer; transition: filter .12s ease, background .18s ease, border-color .18s ease; }
.btn:hover{ filter:brightness(1.05); }
.btn--sm { padding: .44rem .7rem; font-size: .9rem; border-radius: 10px; }
.btn--xs { padding: .32rem .55rem; font-size: .82rem; border-radius: 8px; }

.btn--primary {
  background: var(--brand-2);
  border-color: color-mix(in oklab, var(--brand-2) 70%, var(--border));
  color: #fff;
}
.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: color-mix(in oklab, var(--text) 14%, var(--border));
}
.btn--outline:hover {
  background: color-mix(in oklab, var(--brand-2) 7%, var(--card-2));
  border-color: color-mix(in oklab, var(--brand-2) 30%, var(--border));
}

/* Outline variants that fill on hover */
.btn--outline.btn--primary {
  color: var(--brand-2);
  border-color: color-mix(in oklab, var(--brand-2) 45%, var(--border));
}
.btn--outline.btn--primary:hover {
  background: color-mix(in oklab, var(--brand-2) 12%, var(--card-2));
}
.btn--outline.btn--danger {
  color: #ef4444;
  border-color: color-mix(in oklab, #ef4444 45%, var(--border));
}
.btn--outline.btn--danger:hover {
  background: color-mix(in oklab, #ef4444 12%, var(--card-2));
}

/* Footer */
.auth-portal__foot{
  border-top: 1px solid var(--border);
  padding: .85rem 1.2rem;
  background: color-mix(in oklab, var(--panel) 60%, transparent);
  text-align: center;
}
.auth-link{ color: var(--brand-2); font-weight: 800; }

/* Mobile safety */
@media (max-width: 720px){
  .auth-portal__card{ width: 94vw; min-height: 66svh; }
}
/* Status Statbar — dual theme friendly + blue active */
.statbar{
  /* tokens */
  --stat-accent: hsl(212 88% 56%);                 /* default blue (dark) */
  --stat-bg: color-mix(in oklab, var(--card-2, #0f1115) 85%, transparent);
  --stat-border: color-mix(in oklab, var(--border, #2a2a2a) 85%, transparent);
  --stat-text: var(--text, #e5e7eb);
  --stat-count-bg: rgba(255,255,255,.08);
  --stat-count-border: rgba(255,255,255,.18);
  --stat-count-text: #e5e7eb;

  /* hover elevation */
  --elev-shadow: 0 8px 18px rgba(0,0,0,.22);

  display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-bottom:.8rem;
}

.statbar .statpill{
  --pad: .425rem .7rem;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:var(--pad);
  border-radius:999px;
  border:1px solid var(--stat-border);
  background: var(--stat-bg);
  color: var(--stat-text);
  text-decoration:none; font-size:.92rem;
  cursor:pointer; user-select:none;

  /* PERF + stability (avoid blur): no scaling, own paint layer only */
  position:relative; transform: translateY(0); /* no scale() */
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  contain: paint;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .20s ease,
    border-color .20s ease,
    color .20s ease;
}

.statbar .statpill:hover{
  border-color: color-mix(in oklab, var(--stat-border) 60%, var(--stat-accent) 40%);
  z-index:2; transform: translateY(-2px);          /* lift only, no scale */
  box-shadow: var(--elev-shadow);
}

.statbar .statpill:focus-visible{
  z-index:2; transform: translateY(-2px);
  box-shadow: var(--elev-shadow), 0 0 0 3px color-mix(in oklab, var(--stat-accent) 45%, transparent);
  outline: none;
}

.statbar .statpill.is-active{
  background: color-mix(in oklab, var(--stat-accent) 18%, var(--stat-bg));
  border-color: color-mix(in oklab, var(--stat-accent) 60%, var(--stat-border));
  color:#fff;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--stat-accent) 35%, transparent);
}

.statbar .statpill.is-active:hover,
.statbar .statpill.is-active:focus-visible{
  transform: translateY(-2px);                    /* still no scale */
  box-shadow: 0 10px 26px color-mix(in oklab, var(--stat-accent) 35%, rgba(0,0,0,.14));
}

.statbar .statpill:active{
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
}

/* count chip */
.statbar .count{
  font-size:.8rem; padding:.15rem .45rem; border-radius:999px;
  background: var(--stat-count-bg);
  border:1px solid var(--stat-count-border);
  color: var(--stat-count-text);
}

.statbar .statpill.is-active .count{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.38);
  color:#fff;
}

/* Light theme tuning (crisp, accessible) */
@media (prefers-color-scheme: light){
  .statbar{
    --stat-accent: hsl(217 91% 52%);   /* blue-600 */
    --stat-bg: #fff;
    --stat-border: #cbd5e1;
    --stat-text: #0f172a;
    --stat-count-bg: #eef2f7;
    --stat-count-border: #cbd5e1;
    --stat-count-text: #111;
    --elev-shadow: 0 10px 22px rgba(2,6,23,.12);
  }
  .statbar .statpill.is-active{
    background: var(--stat-accent);
    border-color: hsl(217 91% 40%);
    color:#fff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
  }
  /* counts always bold black in light */
  .statbar .count,
  .statbar .statpill.is-active .count{
    color:#111; font-weight:700;
    background:#eef2f7; border-color:#cbd5e1;
  }
}

/* Optional: softer "tint" active look (add .tint on .statbar) */
.statbar.tint .statpill.is-active{
  background: color-mix(in oklab, var(--stat-accent) 16%, #fff);
  border-color: color-mix(in oklab, var(--stat-accent) 55%, #cbd5e1);
  color: color-mix(in oklab, var(--stat-accent) 60%, #0f172a);
}
.statbar.tint .statpill.is-active .count{
  background: color-mix(in oklab, var(--stat-accent) 14%, #fff);
  border-color: color-mix(in oklab, var(--stat-accent) 45%, #cbd5e1);
  color: color-mix(in oklab, var(--stat-accent) 70%, #0f172a);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){ .statbar .statpill{ transition:none; } }

/* === Catbar Accent (theme-aware) === */
/* 1) Token: default (dark) uses your brand-2; light switches to teal */
:root { --accent-cat: var(--brand-2); }                 /* dark: #3fb3ff */
:root[data-theme="light"] { --accent-cat: #0ea5a8; }    /* light: teal-600 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --accent-cat: #0ea5a8; }
}

/* 2) Catbar using the token above */
.catbar {
  display:flex; gap:.5rem; flex-wrap:wrap;
  margin:.6rem 0 1rem;
  background: linear-gradient(180deg, var(--panel), var(--card));
  border:1px solid var(--border);
  border-radius: 14px;
  padding:.5rem;
}

.catpill {
  position: relative;
  display:inline-flex; align-items:center; gap:.45rem;
  height: 34px; padding: 0 .8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  transition: color .25s, background .25s, border-color .25s, box-shadow .25s;
  background: var(--card-2);
}

.catpill:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--accent-cat) 6%, var(--card-2));
  border-color: color-mix(in oklab, var(--accent-cat) 22%, var(--border));
}

.catpill.is-active {
  color: var(--accent-cat);
  background: color-mix(in oklab, var(--accent-cat) 12%, var(--card-2));
  border-color: color-mix(in oklab, var(--accent-cat) 20%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-cat) 22%, transparent);
}

.catpill .count {
  font-size:.78rem; font-weight:700;
  background: color-mix(in oklab, var(--accent-cat) 10%, var(--card));
  border:1px solid color-mix(in oklab, var(--accent-cat) 28%, var(--border));
  color: var(--text);
  padding:.05rem .45rem; border-radius: 999px;
}

/* Light theme readability tweak for count (makes numbers crisper) */
@media (prefers-color-scheme: light) {
  .catpill .count { color:#111; background:#eef2f7; border-color:#cbd5e1; }
}
:root[data-theme="light"] .catpill .count {
  color:#111; background:#eef2f7; border-color:#cbd5e1;
}

/* DataTables (dark-fit) */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  background:var(--card-2);color:var(--text);border:1px solid var(--border);
  border-radius:8px;padding:.4rem .55rem;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dataTables_info{color:var(--muted);}
table.dataTable{border-collapse:separate;border-spacing:0;width:100%;}
table.dataTable thead th{color:var(--muted);border-bottom:1px solid var(--border);}
table.dataTable tbody tr{border-top:1px solid var(--border);}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  background:var(--card-2);border:1px solid var(--border);color:var(--text) !important;border-radius:8px;
  margin-left:.25rem;padding:.25rem .55rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:color-mix(in oklab,var(--brand-2)12%,var(--card-2));
}

.u-hidden { display:none !important; }

/* === DT Toolbar === */
.dt-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.6rem .9rem;
  background: linear-gradient(180deg, var(--panel), var(--card));
  border:1px solid var(--border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
}

.dt-length{ display:flex; align-items:center; gap:.5rem; color:var(--muted); }
.dt-length select{
  background: var(--card-2);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: 999px;
  padding:.35rem .6rem;
}

.dt-search{
  display:flex; align-items:center; gap:.45rem;
  background: var(--card-2);
  border:1px solid var(--border);
  border-radius: 999px;
  padding:.35rem .6rem;
  min-width: clamp(220px, 28vw, 360px);
}
.dt-search__icon{
  width:18px; height:18px; opacity:.75; flex:0 0 auto;
}
.dt-search input{
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  width: 100%;
}
.dt-search input::placeholder{ color: var(--muted); }

  /* --- Media cell thumb + counter --- */
.media-cell {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.media-thumb {
  width: 64px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-2);
  display: block;
}

.media-icon {
  width: 64px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel), var(--card-2));
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  color: var(--muted);
  user-select: none;
}

.media-more {
  font-weight: 800;
  font-size: .85rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
}

/* === Statbar accent override (light-friendly teal) === */
/* 1) Define a dedicated statbar accent token */
:root { 
  /* dark / default: keep your blue */
  --accent-stat: var(--brand-2);            /* #3fb3ff in dark */
}

/* Light theme: use teal (better on white, pairs with your palette) */
:root[data-theme="light"] { 
  --accent-stat: #0ea5a8;                   /* teal-600 */
}
/* Also respect system light if you’re not forcing dark */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --accent-stat: #0ea5a8; }
}

/* 2) Point the statbar to the new token (wins via cascade) */
.statbar { 
  --stat-accent: var(--accent-stat) !important;
}

/* 3) Light theme polish for chips when active (teal tints) */
@media (prefers-color-scheme: light) {
  .statbar .statpill.is-active {
    /* use solid teal for strong contrast */
    background: var(--stat-accent) !important;
    border-color: color-mix(in oklab, var(--stat-accent) 65%, #0f172a) !important;
    color: #fff !important;
  }
  .statbar .statpill.is-active .count {
    background: rgba(255,255,255,.22) !important;
    border-color: rgba(255,255,255,.38) !important;
    color: #fff !important;
  }
}

/* Optional “tint” look (lighter, if you prefer softer active) */
/* add class="statbar tint" to switch */
.statbar.tint .statpill.is-active {
  background: color-mix(in oklab, var(--stat-accent) 16%, #fff) !important;
  border-color: color-mix(in oklab, var(--stat-accent) 55%, #cbd5e1) !important;
  color: color-mix(in oklab, var(--stat-accent) 60%, #0f172a) !important;
}
.statbar.tint .statpill.is-active .count {
  background: color-mix(in oklab, var(--stat-accent) 14%, #fff) !important;
  border-color: color-mix(in oklab, var(--stat-accent) 45%, #cbd5e1) !important;
  color: color-mix(in oklab, var(--stat-accent) 70%, #0f172a) !important;
}

/* === Statbar count: always bold black in LIGHT theme === */
@media (prefers-color-scheme: light) {
  .statbar .count {
    color: #111 !important;
    font-weight: 700 !important;
    background: #eef2f7 !important;   /* subtle light bg */
    border-color: #cbd5e1 !important;  /* slate-300 */
  }
  /* keep it black even on active teal/blue pills */
  .statbar .statpill.is-active .count {
    color: #111 !important;
    background: #e5eef4 !important;    /* slightly stronger so it pops */
    border-color: #b6c3d1 !important;
  }
}

/* If you use an explicit theme class instead of prefers-color-scheme */
:root[data-theme="light"] .statbar .count,
.theme-light .statbar .count {
  color: #111 !important;
  font-weight: 700 !important;
  background: #eef2f7 !important;
  border-color: #cbd5e1 !important;
}
:root[data-theme="light"] .statbar .statpill.is-active .count,
.theme-light .statbar .statpill.is-active .count {
  color: #111 !important;
  background: #e5eef4 !important;
  border-color: #b6c3d1 !important;
}


/* === CATBAR (v2: theme-aware accent, no-blur hover, elevation) === */
/* tokens: dark uses your brand-2; light uses teal unless you override */
:root { --accent-cat: var(--brand-2); }                 /* dark: #3fb3ff */
:root[data-theme="light"] { --accent-cat: #0ea5a8; }    /* light: teal-600 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --accent-cat: #0ea5a8; }
}

.catbar {
  --elev-shadow: 0 8px 18px rgba(0,0,0,.22);
  display:flex; gap:.5rem; flex-wrap:wrap;
  margin:.6rem 0 1rem;
  background: linear-gradient(180deg, var(--panel), var(--card));
  border:1px solid var(--border);
  border-radius: 14px;
  padding:.5rem;
}

/* ↑↑ specificity bump: .catbar .catpill (and minimal !important) to beat earlier rules */
.catbar .catpill {
  position: relative;
  display:inline-flex; align-items:center; gap:.45rem;
  height: 34px; padding: 0 .8rem;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  background: var(--card-2) !important;
  color: var(--muted) !important;
  font-weight: 600;
  cursor: pointer;
  user-select: none;

  /* smooth & sharp (no scale => no text blur) */
  transform: translateY(0);
  will-change: transform, box-shadow, background, border-color, color;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .20s ease,
    border-color .20s ease,
    color .20s ease;
}

.catbar .catpill:hover {
  color: var(--text) !important;
  background: color-mix(in oklab, var(--accent-cat) 6%, var(--card-2)) !important;
  border-color: color-mix(in oklab, var(--accent-cat) 22%, var(--border)) !important;
  z-index: 2;
  transform: translateY(-2px);               /* lift only (no scale) */
  box-shadow: var(--elev-shadow);
}

.catbar .catpill.is-active {
  color: var(--accent-cat) !important;
  background: color-mix(in oklab, var(--accent-cat) 12%, var(--card-2)) !important;
  border-color: color-mix(in oklab, var(--accent-cat) 20%, var(--border)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-cat) 22%, transparent);
}

.catbar .catpill.is-active:hover,
.catbar .catpill.is-active:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px color-mix(in oklab, var(--accent-cat) 35%, rgba(0,0,0,.14));
}

.catbar .catpill:focus-visible {
  outline: none;
  z-index: 2;
  transform: translateY(-2px);
  box-shadow: var(--elev-shadow), 0 0 0 3px color-mix(in oklab, var(--accent-cat) 45%, transparent);
}

.catbar .catpill:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
}

/* count chip */
.catbar .catpill .count {
  font-size:.78rem; font-weight:700;
  padding:.05rem .45rem; border-radius: 999px;
  background: color-mix(in oklab, var(--accent-cat) 10%, var(--card)) !important;
  border:1px solid color-mix(in oklab, var(--accent-cat) 28%, var(--border)) !important;
  color: var(--text) !important;
}

/* light theme polish (crisper numbers) */
@media (prefers-color-scheme: light) {
  .catbar { --elev-shadow: 0 10px 22px rgba(2,6,23,.12); }
  .catbar .catpill .count {
    color:#111 !important; background:#eef2f7 !important; border-color:#cbd5e1 !important;
  }
}
:root[data-theme="light"] .catbar .catpill .count {
  color:#111 !important; background:#eef2f7 !important; border-color:#cbd5e1 !important;
}

/* Optional: softer “tint” style for active (add .tint on .catbar) */
.catbar.tint .catpill.is-active {
  color: color-mix(in oklab, var(--accent-cat) 60%, #0f172a) !important;
  background: color-mix(in oklab, var(--accent-cat) 16%, #fff) !important;
  border-color: color-mix(in oklab, var(--accent-cat) 55%, #cbd5e1) !important;
}
.catbar.tint .catpill.is-active .count {
  background: color-mix(in oklab, var(--accent-cat) 14%, #fff) !important;
  border-color: color-mix(in oklab, var(--accent-cat) 45%, #cbd5e1) !important;
  color: color-mix(in oklab, var(--accent-cat) 70%, #0f172a) !important;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) { .catbar .catpill { transition: none; } }

/* === Catbar: dark-friendly active tint (no white in dark) === */
/* 1) Theme-aware tint base */
:root { --cat-tint-base: var(--card-2); }          /* dark: use your surface */
:root[data-theme="light"] { --cat-tint-base: #fff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --cat-tint-base: #fff; }
}

/* (Optional) tweak the dark active intensity without touching light */
:root { --cat-tint-dark-strength: 20%; }           /* increase for stronger tint */
:root[data-theme="light"] { --cat-tint-dark-strength: 0%; } /* unused in light */

/* 2) Replace the active styles for the tint variant */
.catbar.tint .catpill.is-active {
  /* Dark: mix with surface; Light: still mixes with white */
  background: color-mix(
    in oklab,
    var(--accent-cat) 16%,
    var(--cat-tint-base)
  ) !important;

  /* slightly stronger border in both themes */
  border-color: color-mix(
    in oklab,
    var(--accent-cat) 55%,
    var(--border)
  ) !important;

  /* readable ink in both themes */
  color: color-mix(in oklab, var(--accent-cat) 70%, var(--text)) !important;
}

/* 3) Make the “count” chip match the theme */
.catbar.tint .catpill.is-active .count {
  /* Dark: subtle accent over surface; Light: light accent over white */
  background: color-mix(in oklab, var(--accent-cat) 12%, var(--cat-tint-base)) !important;
  border-color: color-mix(in oklab, var(--accent-cat) 35%, var(--border)) !important;
  color: color-mix(in oklab, var(--accent-cat) 75%, var(--text)) !important;
}

/* 4) If you want a stronger dark active (without changing light), bump it here */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .catbar.tint .catpill.is-active {
    background: color-mix(
      in oklab,
      var(--accent-cat) var(--cat-tint-dark-strength),
      var(--card-2)
    ) !important;
  }
}

/* === Statbar: dark-friendly active tint (no white in dark) === */
/* 1) Theme-aware tint base */
:root { --stat-tint-base: var(--card-2); }          /* dark: use your surface */
:root[data-theme="light"] { --stat-tint-base: #fff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --stat-tint-base: #fff; }
}

/* Optional: stronger dark tint without changing light */
:root { --stat-tint-dark-strength: 20%; }           /* try 18–26% for punchier */

/* 2) Tint variant — replace current .statbar.tint active styles */
.statbar.tint .statpill.is-active {
  /* Dark mixes with surface; Light mixes with white */
  background: color-mix(in oklab, var(--stat-accent) 16%, var(--stat-tint-base)) !important;
  border-color: color-mix(in oklab, var(--stat-accent) 55%, var(--stat-border)) !important;
  color: color-mix(in oklab, var(--stat-accent) 70%, var(--stat-text)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--stat-accent) 28%, transparent);
}

/* Hover/focus on the tinted active (keep your lift, no blur) */
.statbar.tint .statpill.is-active:hover,
.statbar.tint .statpill.is-active:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px color-mix(in oklab, var(--stat-accent) 35%, rgba(0,0,0,.14));
}

/* 3) Count chip on tinted active */
.statbar.tint .statpill.is-active .count {/* =========================================================
   ACCENT + TINT TOKENS (single source of truth)
   ========================================================= */
:root {
  /* default (dark) accents use your brand-2 */
  --accent-stat: var(--brand-2);
  --accent-cat:  var(--brand-2);

  /* dark surfaces for tint (avoid white flashes in dark) */
  --stat-tint-base: var(--card-2);
  --cat-tint-base:  var(--card-2);

  /* elevation shadow (dark default) */
  --elev-shadow: 0 8px 18px rgba(0,0,0,.22);

  /* optional: stronger tint in dark without touching light */
  --stat-tint-dark-strength: 20%;
  --cat-tint-dark-strength:  20%;
}

/* Light theme: explicit, plus respect system pref unless forced dark */
:root[data-theme="light"] {
  --accent-stat: #0ea5a8; /* teal-600 */
  --accent-cat:  #0ea5a8; /* teal-600 */
  --stat-tint-base: #fff;
  --cat-tint-base:  #fff;
  --elev-shadow: 0 10px 22px rgba(2,6,23,.12);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --accent-stat: #0ea5a8;
    --accent-cat:  #0ea5a8;
    --stat-tint-base: #fff;
    --cat-tint-base:  #fff;
    --elev-shadow: 0 10px 22px rgba(2,6,23,.12);
  }
}

/* =========================================================
   STATBAR (dual-theme, no-blur hover, tint variant)
   ========================================================= */
.statbar{
  /* tokens */
  --stat-accent: var(--accent-stat); /* <— single source */
  --stat-bg: color-mix(in oklab, var(--card-2, #0f1115) 85%, transparent);
  --stat-border: color-mix(in oklab, var(--border, #2a2a2a) 85%, transparent);
  --stat-text: var(--text, #e5e7eb);
  --stat-count-bg: rgba(255,255,255,.08);
  --stat-count-border: rgba(255,255,255,.18);
  --stat-count-text: #e5e7eb;

  display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-bottom:.8rem;
}

.statbar .statpill{
  --pad: .425rem .7rem;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:var(--pad);
  border-radius:999px;
  border:1px solid var(--stat-border);
  background: var(--stat-bg);
  color: var(--stat-text);
  text-decoration:none; font-size:.92rem;
  cursor:pointer; user-select:none;

  /* lift-only (no scale => crisp text) */
  position:relative; transform: translateY(0);
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  contain: paint;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .20s ease,
    border-color .20s ease,
    color .20s ease;
}

.statbar .statpill:hover{
  border-color: color-mix(in oklab, var(--stat-border) 60%, var(--stat-accent) 40%);
  z-index:2; transform: translateY(-2px);
  box-shadow: var(--elev-shadow);
}

.statbar .statpill:focus-visible{
  z-index:2; transform: translateY(-2px);
  box-shadow: var(--elev-shadow), 0 0 0 3px color-mix(in oklab, var(--stat-accent) 45%, transparent);
  outline: none;
}

.statbar .statpill.is-active{
  background: color-mix(in oklab, var(--stat-accent) 18%, var(--stat-bg));
  border-color: color-mix(in oklab, var(--stat-accent) 60%, var(--stat-border));
  color:#fff;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--stat-accent) 35%, transparent);
}

.statbar .statpill.is-active:hover,
.statbar .statpill.is-active:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px color-mix(in oklab, var(--stat-accent) 35%, rgba(0,0,0,.14));
}

.statbar .statpill:active{
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
}

/* count chip */
.statbar .count{
  font-size:.8rem; padding:.15rem .45rem; border-radius:999px;
  background: var(--stat-count-bg);
  border:1px solid var(--stat-count-border);
  color: var(--stat-count-text);
}

.statbar .statpill.is-active .count{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.38);
  color:#fff;
}

/* Light theme tuning (crisp, accessible) */
@media (prefers-color-scheme: light){
  .statbar{
    --stat-bg: #fff;
    --stat-border: #cbd5e1;
    --stat-text: #0f172a;
    --stat-count-bg: #eef2f7;
    --stat-count-border: #cbd5e1;
    --stat-count-text: #111;
  }
  .statbar .statpill.is-active{
    /* solid accent in light for contrast */
    background: var(--stat-accent);
    border-color: color-mix(in oklab, var(--stat-accent) 65%, #0f172a);
    color:#fff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
  }
  /* counts stay bold black even when active */
  .statbar .count,
  .statbar .statpill.is-active .count{
    color:#111; font-weight:700;
    background:#eef2f7; border-color:#cbd5e1;
  }
}

/* Optional: softer "tint" active look (add .tint on .statbar) */
.statbar.tint .statpill.is-active{
  /* theme-aware base: white in light, surface in dark */
  background: color-mix(in oklab, var(--stat-accent) 16%, var(--stat-tint-base));
  border-color: color-mix(in oklab, var(--stat-accent) 55%, var(--stat-border));
  color: color-mix(in oklab, var(--stat-accent) 60%, var(--stat-text));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--stat-accent) 28%, transparent);
}
.statbar.tint .statpill.is-active .count{
  background: color-mix(in oklab, var(--stat-accent) 12%, var(--stat-tint-base));
  border-color: color-mix(in oklab, var(--stat-accent) 35%, var(--stat-border));
  color: color-mix(in oklab, var(--stat-accent) 75%, var(--stat-text));
}

/* Dark-only: optionally strengthen tint without touching light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .statbar.tint .statpill.is-active {
    background: color-mix(in oklab, var(--stat-accent) var(--stat-tint-dark-strength), var(--card-2));
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ .statbar .statpill{ transition:none; } }

/* =========================================================
   CATBAR (theme-aware accent, no-blur hover, tint variant)
   ========================================================= */
.catbar {
  display:flex; gap:.5rem; flex-wrap:wrap;
  margin:.6rem 0 1rem;
  background: linear-gradient(180deg, var(--panel), var(--card));
  border:1px solid var(--border);
  border-radius: 14px;
  padding:.5rem;
}

.catbar .catpill {
  position: relative;
  display:inline-flex; align-items:center; gap:.45rem;
  height: 34px; padding: 0 .8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  background: var(--card-2);

  /* lift-only (no scale => crisp text) */
  transform: translateY(0);
  will-change: transform, box-shadow, background, border-color, color;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .20s ease,
    border-color .20s ease,
    color .20s ease;
}

.catbar .catpill:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--accent-cat) 6%, var(--card-2));
  border-color: color-mix(in oklab, var(--accent-cat) 22%, var(--border));
  z-index: 2;
  transform: translateY(-2px);
  box-shadow: var(--elev-shadow);
}

.catbar .catpill.is-active {
  color: var(--accent-cat);
  background: color-mix(in oklab, var(--accent-cat) 12%, var(--card-2));
  border-color: color-mix(in oklab, var(--accent-cat) 20%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-cat) 22%, transparent);
}

.catbar .catpill.is-active:hover,
.catbar .catpill.is-active:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px color-mix(in oklab, var(--accent-cat) 35%, rgba(0,0,0,.14));
}

.catbar .catpill:focus-visible {
  outline: none;
  z-index: 2;
  transform: translateY(-2px);
  box-shadow: var(--elev-shadow), 0 0 0 3px color-mix(in oklab, var(--accent-cat) 45%, transparent);
}

.catbar .catpill:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
}

/* count chip */
.catbar .catpill .count {
  font-size:.78rem; font-weight:700;
  padding:.05rem .45rem; border-radius: 999px;
  background: color-mix(in oklab, var(--accent-cat) 10%, var(--card));
  border:1px solid color-mix(in oklab, var(--accent-cat) 28%, var(--border));
  color: var(--text);
}

/* Light: crisper numbers */
@media (prefers-color-scheme: light) {
  .catbar .catpill .count { color:#111; background:#eef2f7; border-color:#cbd5e1; }
}
:root[data-theme="light"] .catbar .catpill .count {
  color:#111; background:#eef2f7; border-color:#cbd5e1;
}

/* Tint option (add .tint on .catbar) */
.catbar.tint .catpill.is-active {
  background: color-mix(in oklab, var(--accent-cat) 16%, var(--cat-tint-base));
  border-color: color-mix(in oklab, var(--accent-cat) 55%, var(--border));
  color: color-mix(in oklab, var(--accent-cat) 70%, var(--text));
}
.catbar.tint .catpill.is-active .count {
  background: color-mix(in oklab, var(--accent-cat) 12%, var(--cat-tint-base));
  border-color: color-mix(in oklab, var(--accent-cat) 35%, var(--border));
  color: color-mix(in oklab, var(--accent-cat) 75%, var(--text));
}

/* Dark-only: optionally strengthen tint */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .catbar.tint .catpill.is-active {
    background: color-mix(in oklab, var(--accent-cat) var(--cat-tint-dark-strength), var(--card-2));
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .catbar .catpill { transition: none; } }

  background: color-mix(in oklab, var(--stat-accent) 12%, var(--stat-tint-base)) !important;
  border-color: color-mix(in oklab, var(--stat-accent) 35%, var(--stat-border)) !important;
  color: color-mix(in oklab, var(--stat-accent) 75%, var(--stat-text)) !important;
}

/* 4) If you want stronger dark tint only, bump it here (light unaffected) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .statbar.tint .statpill.is-active {
    background: color-mix(
      in oklab,
      var(--stat-accent) var(--stat-tint-dark-strength),
      var(--card-2)
    ) !important;
  }
}

/* Parent card must be positioned for absolute child */
article.card{ position:relative; }

/* Floating rounded icon button */
.iconfab{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px;
  border-radius:12px;
  display:grid; place-items:center;
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  border:1px solid var(--border);
  color: var(--brand-2);
  text-decoration:none;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transition: transform .12s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.iconfab__svg{ width:20px; height:20px; fill: currentColor; }
.iconfab:hover{
  background: color-mix(in oklab, var(--brand-2) 14%, var(--card));
  border-color: color-mix(in oklab, var(--brand-2) 35%, var(--border));
}
.iconfab:active{ transform: translateY(1px); }

/* === Latest (full-width row list) === */
.latestlist{
  list-style:none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;                    /* space between rows */
}

.latestitem{
  display: grid;
  grid-template-columns: 128px 1fr;  /* 1:1 thumb (≈4x4) + content */
  gap: .9rem;
  align-items: center;
  padding: .6rem .7rem;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
}

.latestitem__thumb{
  display:block;
  width: 100%;
}
.latestitem__thumb img{
  width: 100%;
  height: 128px;                /* square */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  border: 1px solid var(--border);
  background: var(--card-2);
}
/* placeholder when no photo */
.latestitem__placeholder{
  width: 100%;
  height: 128px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: color-mix(in oklab, var(--card-2) 75%, transparent);
  color: var(--muted);
  font-weight: 800;
  user-select: none;
}

.latestitem__body{ min-width: 0; } /* allow text to wrap nicely */

.latestitem__title{
  margin: .15rem 0 .25rem;
  font-size: 1.06rem;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: .2px;
}
.latestitem__title a:hover{ color: var(--brand-2); }

.latestitem__summary{
  margin: 0 0 .35rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 70ch;
}

/* kicker + time on one line with a soft divider */
.kicker .sep{
  margin-left: .6rem;
  color: var(--muted);
  position: relative;
}
.kicker .sep::before{
  content: "•";
  margin-right: .6rem;
  opacity: .7;
}

/* responsive: slightly smaller thumb on narrow screens */
@media (max-width: 760px){
  .latestitem{
    grid-template-columns: 110px 1fr;
    padding: .55rem .6rem;
    border-radius: 12px;
  }
  .latestitem__thumb img,
  .latestitem__placeholder{ height: 110px; }
}



/* Lead row grid: same-row height for Top Stories + Picks */
.lead-grid,
.latest-grid{
  display:grid;
  grid-template-columns: 1.7fr .95fr; /* matches your layout ratio */
  gap:1.4rem;
  margin: 1.2rem 0;
}

.widget--fill{            /* make the picks card stretch to full column height */
  display:flex;
  flex-direction:column;
  height:100%;
}

.w-list.w-list--scroll{   /* list fills and scrolls inside the card if long */
  display:flex;
  flex-direction:column;
  gap:.7rem;
  list-style:none;
  margin:0;
  padding:0;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}

/* Responsive: stack on narrow screens */
@media (max-width: 980px){
  .lead-grid{
    grid-template-columns: 1fr;
  }
  .widget--fill{ height: auto; }
  .w-list.w-list--scroll{ overflow: visible; }
}

/* ===== Article body (Nepali) ===== */
.article-body{
  font-size: 16px;            /* comfy default for Devanagari */
  line-height: 1.85;          /* extra breathing room for matras */
  letter-spacing: 0.01em;     /* tiny tracking helps smaller sizes */
  color: var(--text, #111);
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Paragraph rhythm */
.article-body p{ margin: 0 0 .9rem; }
.article-body p:last-child{ margin-bottom: 0; }

/* Headings inside body (if your body has HTML headings) */
.article-body h2{ font-size: 1.25rem; line-height: 1.4; margin: 1.2rem 0 .6rem; }
.article-body h3{ font-size: 1.1rem;  line-height: 1.45; margin: 1rem 0 .5rem; }

/* Lists */
.article-body ul, .article-body ol{ margin: 0 0 1rem 1.2rem; }
.article-body li{ margin: .25rem 0; }

/* Links */
.article-body a{ color: var(--brand-2, #2d6cdf); text-decoration: underline; }
.article-body a:hover{ text-decoration-thickness: from-font; }

/* Images inside body */
.article-body img{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Slightly smaller on tight screens */
@media (max-width: 720px){
  .article-body{ font-size: 15px; }
}

/* ---------- Base text tokens (light first) ---------- */
:root{
  --text:        #111;                 /* main text (light mode) */
  --muted:       #586173;              /* secondary text */
  --heading:     #0b1220;              /* headings */
  --brand-2:     #2d6cdf;              /* your accent */
}

/* Auto dark mode (tune if you already have a theme switch) */
@media (prefers-color-scheme: dark){
  :root{
    /* Softer-than-white text to reduce glare */
    --text:    rgba(255,255,255,.88);
    --muted:   rgba(255,255,255,.62);
    /* Headings not pure white; just a touch brighter than body */
    --heading: rgba(255,255,255,.92);
  }
}

/* If you use a manual dark theme class instead of media query,
   uncomment and use this instead:
.theme-dark {
  --text:    rgba(255,255,255,.88);
  --muted:   rgba(255,255,255,.62);
  --heading: rgba(255,255,255,.92);
}
*/

/* ---------- Article body (safe/light+dark) ---------- */
.article-body{
  font-size: 16px;                 /* good for Devanagari */
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--text, #111827);     /* fallback to slate-900 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (max-width: 720px){
  .article-body{ font-size: 16px; }
}

.article-body p{ margin: 0 0 .95rem; }
.article-body p:last-child{ margin-bottom: 0; }

/* Headings inherit color; just adjust size/weight/margins */
.article-body h2,
.article-body h3,
.article-body h4{
  color: inherit;
  font-weight: 600;
  line-height: 1.35;
  margin: 1.1rem 0 .55rem;
}

/* Bold: emphasize without extra color */
.article-body strong,
.article-body b{
  font-weight: 600;
  color: inherit;
}

/* Muted/secondary text */
.article-body .muted{
  color: var(--muted, #6b7280);     /* gray-500 fallback */
}

/* Links: accessible blue with fallback; brighten a touch on hover */
.article-body a{
  color: var(--link, var(--brand-2, #1d4ed8));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body a:hover{
  color: var(--link-hover, #1a3fb3);
}

/* Lists & images */
.article-body ul, .article-body ol{ margin: 0 0 1rem 1.2rem; }
.article-body li{ margin: .25rem 0; }
.article-body img{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Selection (gentle) */
.article-body ::selection{
  background: #e6eefc;
  color: #0b1220;
}

/* ---- Dark scheme tweak (only if user prefers dark) ---- */
@media (prefers-color-scheme: dark){
  .article-body{
    color: var(--text, #e5e7eb);        /* gray-200 fallback */
  }
  .article-body .muted{
    color: var(--muted, #9ca3af);       /* gray-400/500 */
  }
  .article-body a{
    color: var(--link, var(--brand-2, #93b4ff));
  }
  .article-body a:hover{
    color: var(--link-hover, #b2c6ff);
  }
  .article-body ::selection{
    background: #23355a;
    color: #eaf0ff;
  }
}

/* Category Bar Styling - header theme */
.category-bar {
  background-color: #333; /* same as header */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom:1px solid var(--border);
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.5rem 0;

}

.category__in {
  display: flex;
  justify-content: center;
  align-items: center;
}

.category__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0 1rem;
}

.category__link {
  position: relative;
  color: whitesmoke; /* light white */
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  text-decoration: none;
  transition: 
    color 0.25s ease, 
    background 0.25s ease, 
    border-color 0.25s ease, 
    box-shadow 0.25s ease;
}

/* Hover effect same as header links */
.category__link::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 3px;
  height: 2px;
  background: #FFFDD0; /* same as header accent */
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.category__link:hover {
  color: #fff;
  background: rgba(63,179,255,0.06); /* subtle header-like hover */
}

.category__link:hover::after {
  transform: scaleX(1);
}

/* Active category link */
.category__link--active {
  color: #3fb3ff; /* header brand-2 */
  background: rgba(63,179,255,0.12);
  border-color: rgba(63,179,255,0.2);
  box-shadow: inset 0 0 0 1px rgba(63,179,255,0.25), 0 0 8px rgba(63,179,255,0.18);
}

.category__link--active::after {
  transform: scaleX(0); /* remove underline like header active */
}

/* Horizontal scroll tweaks for mobile */
.category-bar::-webkit-scrollbar { display: none; }
.category-bar { -ms-overflow-style: none; scrollbar-width: none; }

.editors-pick-container {
  max-height: 100%;
  overflow-y: auto;
}

body, h1, h2, h3, p, span, button {
  font-family: 'Noto Sans Devanagari', sans-serif;
}
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   WHITE THEME OVERRIDES (Red / Gray / White / Yellow / Black)
   Put this at the END of the file so it wins the cascade.
   ========================================================= */

:root{
  /* Core surfaces */
  --bg: #ffffff;
  --panel: #ffffff;
  --card: #ffffff;
  --card-2: #f8fafc;               /* subtle gray surface */
  --border: #e5e7eb;               /* gray-200 */
  --shadow: 0 10px 30px rgba(2,6,23,.08);

  /* Typography */
  --text: #111827;                 /* near-black */
  --muted: #6b7280;                /* gray-500 */
  --heading: #0b1220;

  /* Accents */
  --brand: #dc2626;                /* red-600 */
  --brand-2: #111827;              /* black as secondary accent */
  --accent-yellow: #f59e0b;        /* amber-500 */
  --ring: rgba(245,158,11,.45);
}

/* Remove dark gradients — keep pure white background */
body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Topbar / ticker / footer — white surfaces */
.topbar, .ticker, footer{
  background: #fff !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

/* Header: white everywhere */
.header{
  background: #fff !important;
  color: var(--text) !important;
  box-shadow: 0 1px 0 var(--border) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.header::after{ display:none !important; } /* remove dark hairline fade */

/* Brand */
.brand__logo{
  background: radial-gradient(circle at 30% 20%, var(--brand), #7f1d1d) !important;
  color: #fff !important;
}
.brand__tag{ color: var(--muted) !important; }

/* Nav bar inside header */
.header .nav{ background: transparent !important; border: 0 !important; }
.nav__link{
  color: var(--text) !important;
}
.nav__link::after{
  background: gray;
}

.nav__link--active{
  background: #fff7ed !important;            /* soft warm tint */
  border-color: var(--border) !important;
  color: var(--brand) !important;            /* red active */
  box-shadow: inset 0 0 0 1px rgba(220,38,38,.10) !important;
}
.nav__link--active::after{ transform: scaleX(0) !important; }

/* Search pill */
.search, .searchbar__fieldwrap{
  background: var(--card-2) !important;
  border-color: var(--border) !important;
}
.search input, .searchbar__input{ color: var(--text) !important; }
.searchbar__toggle{
  background: #fff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.searchbar.is-open:focus-within .searchbar__fieldwrap{
  box-shadow: 0 0 0 2px var(--ring) !important;
  border-color: color-mix(in oklab, var(--accent-yellow) 60%, var(--border)) !important;
}

/* Buttons */
.btn{
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.btn:hover{
  border-color: color-mix(in oklab, var(--brand) 40%, var(--border)) !important;
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}
.btn--primary{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.btn--outline{
  background: #fff !important;
  color: var(--text) !important;
}

/* Main cards: clean white */
.card, .widget, .latestitem{
  background: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 0 10px 24px rgba(2,6,23,.06) !important;
}
.card__body .kicker, .meta, .latestitem__summary{ color: var(--muted) !important; }
.k-dot{ background: var(--accent-yellow) !important; } /* yellow dot */
.card__media{ background: #f3f4f6 !important; }

/* Category bar (if used anywhere) -> white */
.category-bar{
  background: #fff !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
.category__link{
  color: var(--text) !important;
}
.category__link::after{ background: var(--accent-yellow) !important; }
.category__link:hover{
  background: #f3f4f6 !important;
  color: var(--text) !important;
}
.category__link--active{
  color: var(--brand) !important;
  background: #fff7ed !important;
  box-shadow: inset 0 0 0 1px rgba(220,38,38,.10) !important;
}

/* Footer text links */
.foot a:hover{ color: var(--brand) !important; }

/* Make hr soft on white */
hr{ border-color: var(--border) !important; }

.welcome-link:hover{ color: var(--brand) !important; }


/* remove the line under navbar/header */
.header{
  box-shadow: none !important;
  border-bottom: 0 !important;
}

.ticker{
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.nav__link--active::after,
.nav__link.is-active::after{
  content: none !important;
}