/* ===================================================================
   Ported 1:1 from NewsPlus/Views/Shared/_Layout.cshtml <style> block.
   Razor's escaped `@@media` / `@@keyframes` become plain `@media` / `@keyframes`.
   Theme variables and .dark-mode overrides are unchanged.

   NOTE: dark mode is driven by a `.dark-mode` class on <body> (set by
   ThemeToggle from localStorage), exactly like the .NET original —
   NOT by `prefers-color-scheme` alone.
   =================================================================== */

:root {
  --bg-primary: #fff;
  --bg-secondary: #f8f9fa;
  --text-primary: #000;
  --text-secondary: #333;
  --border-color: #e7e7e7;
  --card-bg: #fff;
  --footer-bg: #111;
  --footer-text: #aaa;
  --footer-link: #bbb;
  --news-header-bg: var(--sp-accent);
  --news-header-text: #fff;
  --tag-bg: #f2f2f2;
  --tag-border: #ddd;
  --tag-text: #000;
  --breaking-news-bg: var(--sp-accent);
  --overlay-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  --cust-wraper-bg: linear-gradient(to right, var(--sp-blue-deep), var(--sp-blue));
  --cust-navbar-bg: linear-gradient(to right, #fff, #fff);
  --cust-news-text: #000;
}

.dark-mode {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --border-color: #333;
  --card-bg: #1e1e1e;
  --footer-bg: #000;
  --footer-text: #888;
  --footer-link: #999;
  --news-header-bg: var(--sp-red-deep);
  --news-header-text: #e0e0e0;
  --tag-bg: #2d2d2d;
  --tag-border: #444;
  --tag-text: #e0e0e0;
  --breaking-news-bg: var(--sp-red-deep);
  --overlay-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3));
  --cust-wraper-bg: linear-gradient(to right, #001a3f, #00367a);
  --cust-navbar-bg: linear-gradient(to right, #000, #000);
  --cust-news-text: #fff;
}

/* ⚠️ FONT — deliberate departure from production. Read before editing.
 *
 * _Layout.cshtml declares the `*` font twice:
 *
 *   line 113  * { font-family: "Noto Sans", sans-serif;
 *                 font-weight: 500; font-style: normal; }
 *   line 716  * { font-family: "Google Sans", sans-serif; }   ← last, wins
 *
 * "Google Sans" is Google's proprietary UI font — not in the site's Google
 * Fonts <link> and not publicly downloadable — so every browser skips it and
 * falls back to the generic `sans-serif` family (Windows/Chrome: Arial for
 * Latin, Nirmala UI for Devanagari). The Noto Sans the author asked for on
 * line 113 has never actually rendered on swarajpost.com.
 *
 * We now load it for real — but only the Devanagari face (see the note in
 * app/layout.tsx for why). Hindi renders in Noto Sans Devanagari; the subset
 * carries no Latin glyphs, so English falls through to the system sans-serif,
 * which is what both swarajpost.com and aajtak.in already do for Latin. Self-
 * hosted by next/font — no request to fonts.gstatic.com, no swap-in shift.
 *
 * WEIGHT 400, NOT 500. Arial and Nirmala UI ship no medium weight, so today's
 * `font-weight: 500` is already being rendered as 400 by every browser. Noto
 * Sans DOES have a 500, so keeping it here would silently make every
 * unstyled run of text heavier than production. 400 preserves the rendered
 * result. Elements with their own font-weight (headings, .news-title, the
 * nav) are unaffected — this rule only ever reached the text that inherits.
 */
/* ────────────────────────────────────────────────────────────────
   TYPOGRAPHY TOKENS — the one place the site's type scale lives.

   Set once here and consumed by home.css / category.css / article.css, so a
   headline on the homepage, a category listing and an article are the same
   design decision rather than three files that happen to agree.

   The scale is set for a Hindi news front page: high contrast, dense rhythm,
   red reserved for section furniture. Devanagari carries matras above and
   below the baseline, so every line-height here is looser than the Latin
   equivalent would be — anything under ~1.4 on a headline clips them.
   ──────────────────────────────────────────────────────────────── */
:root {
  /* --sp-font is defined on <html> by next/font (see app/layout.tsx). The
     fallback chain repeats it so the tokens still resolve if that ever fails. */
  --sp-type: var(--sp-font), "Noto Sans Devanagari", "Nirmala UI", system-ui,
    -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Ink. Near-black rather than pure #000: at these sizes true black on white
     vibrates, and every Hindi masthead worth copying sets slightly off it. */
  --sp-ink-head: #14171c; /* headlines            */
  --sp-ink-body: #26292f; /* running body copy    */
  --sp-ink-lead: #3d434c; /* lead / standfirst    */
  --sp-ink-meta: #6a7280; /* bylines, timestamps  */
  /* ── BRAND ───────────────────────────────────────────────────────────────
   *
   * THE RED IS SAMPLED. Counting every saturated pixel in the NST Bihar
   * wordmark gives one family and only one -- rgb(208,0,0) through
   * rgb(240,0,0), a pure-channel red with no green and no blue in it at all.
   * The dome, the broadcast waves and the tagline are that colour; everything
   * else in the logo is near-black.
   *
   * THE BLUE IS NOT SAMPLED. There is not one blue pixel in the logo; the
   * count was run and it is zero. It is a deliberate addition, and the reason
   * is functional:
   *
   *   red   URGENCY   -- breaking, live, the brand mark itself
   *   blue  STRUCTURE -- sections, links, breadcrumbs, pagination, nav
   *
   * A one-colour interface cannot show hierarchy: if the section rule, the
   * timestamp, the navigation and the BREAKING flag are all the brand red,
   * none of them is a flag. So structure gets its own hue. Blue is the
   * conventional choice for it in Indian news mastheads, it is far enough from
   * the red to never be mistaken for it, and at 6.4:1 on white it carries the
   * 13px text the red cannot.
   *
   * If the brand ever objects to a colour that is not in the logo, the honest
   * alternative is a dark slate for structure -- NOT running everything back
   * through the red.
   */
  --sp-red: #d00000;       /* sampled from the logo        */
  --sp-red-deep: #9e0000;  /* pressed, and red on tints    */
  --sp-blue: #0f5fa0;      /* sections / links / structure */
  --sp-blue-deep: #1e3a6e; /* deeper structure: ticker bar  */
  --sp-azure: #0e86c8;     /* used sparingly               */

  --sp-accent: var(--sp-red); /* section furniture    */

  /* Headline sizes — desktop. Mobile steps down inside each page's CSS. */
  --sp-h1: 34px;
  --sp-h2: 20px;
  --sp-card: 16px;
  --sp-meta: 12.5px;

  --sp-lh-head: 1.38;
  --sp-lh-card: 1.5;
  --sp-lh-body: 1.85;

  /* Reader text-size multiplier. Applies ONLY to the article reading column
     (headline / lead / body in article.css) — never to nav, cards or chrome,
     which must stay put whatever the reader picks. Overwritten on <html> by
     components/TextSize.tsx and restored before paint by TextSizeScript. */
  --sp-read-scale: 1;
}

.dark-mode {
  --sp-ink-head: #f4f6f8;
  --sp-ink-body: #dde2e8;
  --sp-ink-lead: #c3cad2;
  --sp-ink-meta: #98a2b0;

  /* Lifted for dark. The light-mode values are chosen against white and go
     muddy on near-black -- #d42a1e on #121212 measures 3.1:1, under the floor
     for the 14px text it carries. */
  --sp-red: #ff5a4e;
  --sp-red-deep: #ff8f85;
  --sp-blue: #6fb3e8;
  --sp-blue-deep: #9cc9f0;
  --sp-azure: #56b6ea;
  --sp-accent: var(--sp-red);
}

/* The font itself. `--sp-font` is the self-hosted Noto Sans Devanagari
   variable font — see the long note in app/layout.tsx for why the webfont came
   back after being removed once. */
* {
  font-family: var(--sp-type);
  font-weight: 400;
  font-style: normal;
}

body {
  /* Repeated so Bootstrap's `body { font-family }` (an element selector) does
     not outrank the `*` rule on the body's own text nodes. */
  font-family: var(--sp-type);
  background-color: var(--bg-primary);
  color: var(--text-primary);

  /* Devanagari conjuncts render noticeably cleaner with these on, and the
     numerals in timestamps stop jittering between "1" and "8". */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

/* Headings inherit Bootstrap's 500; the scale below wants a real bold, and
   Devanagari at 500 reads as an in-between weight that looks like a rendering
   accident rather than a decision. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  /*
   * NO `color` HERE — deliberately.
   *
   * It used to set `var(--sp-ink-head)`, which broke every heading sitting on a
   * COLOURED surface: the "Trending News" <h4> lives inside a solid red bar and
   * had always inherited white from it, so a global near-black turned it into
   * black-on-red. Footer and bottom-nav headings only escaped because they
   * happen to declare their own colour.
   *
   * Headings that need the head ink already ask for it by name (the article
   * H1/lead, the section labels, the category H1). Letting the rest INHERIT is
   * what keeps a heading legible on whatever surface it is placed on.
   */
  /*
   * `pretty`, NOT `balance`.
   *
   * `balance` equalises the LENGTH of every line, so it deliberately breaks
   * early and leaves the right-hand side ragged. That is right for a two-word
   * card label and wrong for a news headline: a full-width article H1 wrapped
   * to a second line while half the measure was still empty.
   *
   * `pretty` fills each line normally and only intervenes to stop the last
   * line being a single stranded word — which is the actual problem worth
   * solving here.
   */
  text-wrap: pretty;
}

/* ────────────────────────────────────────────────────────────────
   Seamless theme switching.
   When the toggle fires, ThemeToggle puts `.theme-transition` on <html>
   for ~0.4s. During ONLY that window every element eases its theme-driven
   colours together — background, text, borders, icons, shadows — so the
   whole site (every page, card, section, chip and icon) morphs as one
   smooth fade instead of the body fading while children snap.
   Because the class is present only during the switch:
     • page load never animates → no flash of the wrong theme;
     • component hovers/animations keep their own transitions the rest of
       the time (this rule doesn't clobber them permanently).
   ──────────────────────────────────────────────────────────────── */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.4s ease, border-color 0.4s ease,
    color 0.4s ease, fill 0.4s ease, stroke 0.4s ease,
    box-shadow 0.4s ease, outline-color 0.4s ease !important;
  transition-delay: 0s !important;
}

/* Respect users who ask for less motion — switch instantly for them. */
@media (prefers-reduced-motion: reduce) {
  html.theme-transition,
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: none !important;
  }
}

html,
body {
  height: 100%;
  margin: 0;
}

.layout-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
}

.cust-youtube-btn {
  padding: 7px;
  font-size: 14px;
  height: 37px;
  color: var(--text-primary);
  margin-top: 0px;
  font-weight: 500;
  border: 1px solid #ff0000;
  background-color: var(--bg-primary);
}

.cust-youtube-btn:hover {
  border-color: #ff0000;
  background-color: #ff000000;
  color: #ff0000;
}

@media (max-width: 768px) {
  .topbar-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .topbar-logo {
    width: 100%;
    text-align: center;
    order: 1;
  }

  .topbar-logo img {
    height: 45px;
    width: auto;
  }

  .topbar-date {
    order: 2;
    font-size: 11px;
    margin: 0;
    text-align: left;
    flex: 1;
  }

  .topbar-youtube-btn {
    order: 3;
    width: auto;
    max-width: 190px;
    font-size: 11px;
    padding: 5px 8px;
    height: 32px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .cust-youtube-icon {
    width: 13px;
    height: 13px;
  }
}

a {
  text-decoration: none;
  color: var(--text-primary);
}

.live-btn {
  background: red;
  color: white !important;
  padding: 2px 10px !important;
  border-radius: 4px;
  font-weight: bold;
  margin-left: 10px;
  text-decoration: none;
}

.cust-menubar {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  padding: 6px;
  background: var(--bg-primary);
  align-items: center;
}

.cust-menubar a {
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 500;
  padding: 0px 10px 0px 0px;
  border-right: 1px solid var(--border-color);
}

.cust-menubar a:hover {
  color: #d60000;
}

.cust-menubar::-webkit-scrollbar {
  display: none;
}

/* Mobile-specific tweaks */
@media (max-width: 768px) {
  .cust-menubar {
    font-size: 13px;
    gap: 8px;
    padding: 6px;
  }

  .cust-menubar a {
    padding: 6px 8px;
  }
}

/* ---------------- footer ---------------- */
.footerSwarajpost {
  background: #001f33;
  color: #fff;
  overflow: hidden;
}

.footer-topSwarajpost {
  background: #002742;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-menuSwarajpost {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.footer-menuSwarajpost a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  transition: 0.3s;
}

.footer-menuSwarajpost a:hover {
  color: #ff3c3c;
}

.footer-mainSwarajpost {
  padding: 21px 0;
  background: #001b2e;
}

.footer-headingSwarajpost {
  font-size: 16px;
  margin-bottom: 13px;
  color: #fff;
}

.social-wrapperSwarajpost {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.social-iconSwarajpost {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-iconSwarajpost:hover {
  transform: translateY(-5px) scale(1.05);
  color: #fff;
}

.facebookSwarajpost {
  background: #1877f2;
}

.twitterSwarajpost {
  background: #000;
}

.youtubeSwarajpost {
  background: #ff0000;
}

.footer-bottomSwarajpost {
  background: #002742;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom-wrapperSwarajpost {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.copyright-textSwarajpost,
.developer-textSwarajpost {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.developer-textSwarajpost a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.developer-textSwarajpost a:hover {
  color: #ff3c3c;
}

@media (max-width: 768px) {
  .footer-menuSwarajpost {
    gap: 14px;
  }

  .footer-headingSwarajpost {
    font-size: 24px;
  }

  .social-iconSwarajpost {
    width: 55px;
    height: 55px;
    font-size: 22px;
  }

  .footer-bottom-wrapperSwarajpost {
    flex-direction: column;
    text-align: center;
  }
}

/* ---------------- sticky navbar ---------------- */
.cust-navbar-border {
  border-bottom: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  position: relative;
  top: 0;
  width: 100%;
  transition: all 0.3s ease-in-out;
  z-index: 999;
}

.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--bg-primary);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-100%);
  animation: slideDown 0.4s forwards;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

/* ---------------- scroll to top ---------------- */
.scroll-to-top {
  position: fixed;
  bottom: 0px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: red;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, bottom 0.3s;
  z-index: 9999;
  border: none;
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* ---------------- dark mode overrides ---------------- */
.dark-mode .cust-wraper {
  background-image: var(--cust-wraper-bg);
}

.dark-mode .cust-navbar-border {
  background-image: var(--cust-navbar-bg);
}

.dark-mode .cust-newsdetails-card {
  background-image: linear-gradient(to right, #121212, #121212);
}

.dark-mode .news-text,
.dark-mode .news-title {
  color: var(--cust-news-text);
}

.dark-mode .news-subtitle {
  color: #eee;
}

.dark-mode .news-text-more {
  color: var(--cust-news-text);
}

.dark-mode .card-body {
  background: #121212;
  color: var(--cust-news-text);
}

.dark-mode .news-card {
  border-bottom: 1px solid #000;
}

.dark-mode .cust-border-rl {
  border-right: 1px solid #4a70b0;
  border-left: 1px solid #4a70b0;
}

#sunIcon {
  color: #ff8400;
}

#moonIcon {
  color: #fffa2e;
}

.news-card h5 {
  color: #fff;
}

.dark-mode .arrow-btn {
  color: #000;
}

/* ---------------- breadcrumbs ---------------- */
.breadcrumb {
  background: transparent;
  margin-top: 20px;
  margin-bottom: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: black;
}

.highlight {
  background-color: var(--sp-accent);
  color: white;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: bold;
}

.breadcrumb-item a {
  color: #646464;
  font-size: 14px;
}

#themeToggle {
  padding: 8px;
}

.cust-youtube-icon {
  color: #ff0000;
}

/* ---------------- carousel 2 ---------------- */
#carousel2 {
  max-width: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

#carousel2 .carousel2-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

#carousel2 .carousel-slide {
  min-width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#carousel2 .Css_Cslide2 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

#carousel2 .carousel-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

#carousel2 .carousel-btn {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
}

#carousel2 .carousel-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

@media (max-width: 600px) {
  #carousel2 .carousel-btn {
    width: 30px;
    height: 30px;
  }
}

.carousel-container {
  max-width: 800px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

/* ---------------- SliderAds (shared component) ----------------
   Was inline in _SliderAds.cshtml. Lives here, NOT in a page-scoped file,
   because <SliderAds> renders on the homepage AND inside article bodies. */
.ads-carousel-container {
  max-width: 800px;
  width: 100%;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.ads-carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* The slide used to be a hard 352px box painted BLACK, with the creative
   letterboxed inside it by `object-fit: contain`. Live creatives are ~320×216,
   so roughly 40% of the slot rendered as a black bar under every ad — on the
   homepage, on the article page, and on mobile where it is the first thing
   below the fold.

   The slide now takes the creative's own height. `min-height` keeps the column
   from collapsing while the (lazy, low-priority) image is still arriving, and
   the surface is the page background instead of black so an ad that does not
   fill the width blends in rather than sitting in a hole. */
.ads-carousel-slide {
  min-width: 100%;
  min-height: 120px;
  background-color: var(--bg-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
}

.ads-carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
  /* `contain` is meaningless once the box follows the image; `height: auto`
     already preserves the creative's aspect exactly. */
}

.ads-carousel-controls {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  padding: 0 15px;
}

.ads-carousel-btn {
  background: rgba(255, 255, 255, 0);
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  /* NOTE: no `color` here — _SliderAds.cshtml does not set one, so the arrows
     inherit the page text colour exactly as they do in production. */
}

/* `.Cust-img-mb` deliberately has NO rule here. The markup carries the class on
   both pages, but the declaration lives only in NewsDetails.cshtml's
   Page_Level_Css — so it applies on the ARTICLE page and does nothing on the
   homepage. It is defined in article.css as `.page-article .Cust-img-mb`.
   Making it global added 15px under the homepage ad and pushed the whole
   section grid down. */

/* ===================================================================
   Error / not-found page styles — app/not-found.tsx + app/error.tsx via
   components/ErrorShell.tsx.
   Kept HERE rather than in a per-page CSS file on purpose: as its own import
   in not-found.tsx / error.tsx, Next emitted a tiny separate CSS chunk that it
   PRELOADED on every page but only used on a 404 — the browser then warned
   "preloaded but not used". Folding it into this always-loaded stylesheet
   removes the orphan preload (and the fetch on a real 404).

   REPLACES the old .containesawal404notfound / .error-image-sawalerrorpage /
   .thesawal404errorbtndiv / .btn-customthesawalerrorpage rules, which existed
   only to centre a 700×450 JPG and are now dead — both pages were rewritten.
   The two JPGs (notfoundimg.jpg, internalerrimg.jpg) are left in /public;
   nothing references them.

   Everything below is token-driven (--sp-accent, --sp-ink-*), so dark mode and
   the reader's font stack come along for free.
   =================================================================== */
.sp-err {
  padding: clamp(32px, 7vw, 76px) 0 clamp(40px, 6vw, 72px);
}

/* Stamp beside copy on desktop; stamp on top, centred, on mobile. `auto 1fr`
   rather than a fixed column so the 404/500 numeral sets its own width. */
.sp-err-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(22px, 4vw, 54px);
  align-items: center;
}

/* ── the stamp ─────────────────────────────────────────────────────────────
   A newspaper edition mark: the numeral over a halftone dot field, under a red
   rule, with the masthead name set small beneath it. The dots are a CSS
   radial-gradient rather than an image — it is the newsprint texture the rest
   of the site implies, at zero bytes. */
.sp-err-stamp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(14px, 2.4vw, 26px) clamp(18px, 3vw, 34px);
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 16px;
  background-color: #fff;
  background-image: radial-gradient(
    currentColor 0.9px,
    transparent 0.9px
  );
  background-size: 9px 9px;
  color: rgba(0, 0, 0, 0.055); /* drives the dot field only */
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.4);
}

.sp-err-code {
  font-size: clamp(72px, 15vw, 152px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--sp-accent);
  font-variant-numeric: tabular-nums;
  /* Latin numerals — the Devanagari stack would otherwise pick a fallback face
     for these three glyphs and shift the weight. */
  font-family: var(--sp-font), system-ui, -apple-system, "Segoe UI", sans-serif;
}

.sp-err-stamp-rule {
  display: block;
  width: 46px;
  height: 3px;
  margin: 10px 0 8px;
  border-radius: 2px;
  background: var(--sp-accent);
}

.sp-err-stamp-tag {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sp-ink-meta);
}

/* ── the copy ───────────────────────────────────────────────────────────── */
.sp-err-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--sp-accent);
  text-transform: uppercase;
}

/* The same red tick that opens every section heading on the front page, so the
   error page reads as part of the paper rather than a system screen. */
.sp-err-kicker::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--sp-accent);
  flex: none;
}

.sp-err-title {
  margin: 0 0 12px;
  font-size: clamp(26px, 4.4vw, 42px);
  line-height: 1.34; /* Devanagari matras clip below ~1.3 — see the type note */
  font-weight: 800;
  color: var(--sp-ink-head);
  letter-spacing: -0.01em;
}

.sp-err-lead {
  margin: 0 0 22px;
  max-width: 60ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.75;
  color: var(--sp-ink-lead);
}

/* ── buttons ────────────────────────────────────────────────────────────── */
.sp-err-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-bottom: 26px;
}

.sp-err-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 21px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease,
    background-color 0.16s ease, border-color 0.16s ease;
}

.sp-err-btn.is-primary {
  background: var(--sp-accent);
  color: #fff;
  box-shadow: 0 10px 22px -12px var(--sp-accent);
}

.sp-err-btn.is-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 26px -12px var(--sp-accent);
  color: #fff;
}

.sp-err-btn.is-ghost {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.16);
  color: var(--sp-ink-head);
}

.sp-err-btn.is-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--sp-accent);
  color: var(--sp-accent);
}

/* ── section chips ──────────────────────────────────────────────────────── */
.sp-err-sections-label {
  display: block;
  margin-bottom: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sp-ink-meta);
}

.sp-err-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sp-err-chip {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-ink-body);
  text-decoration: none;
  transition: border-color 0.16s ease, color 0.16s ease,
    background-color 0.16s ease;
}

.sp-err-chip:hover {
  border-color: var(--sp-accent);
  background: rgba(217, 0, 0, 0.06);
  color: var(--sp-accent);
}

/* ── live headline rail (404 only) ──────────────────────────────────────── */
.sp-err-rail {
  margin-top: clamp(34px, 5vw, 58px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.sp-err-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.sp-err-rail-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.45;
  font-weight: 800;
  color: var(--sp-ink-head);
}

.sp-err-rail-title::before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: var(--sp-accent);
  flex: none;
}

.sp-err-rail-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sp-accent);
  text-decoration: none;
  white-space: nowrap;
}

.sp-err-rail-more:hover {
  text-decoration: underline;
}

.sp-err-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 20px;
}

.sp-err-card {
  display: flex;
  gap: 12px;
  text-decoration: none;
  border-radius: 12px;
  transition: transform 0.16s ease;
}

.sp-err-card:hover {
  transform: translateY(-2px);
}

/* Fixed box + object-fit, so wildly different CDN aspect ratios cannot break
   the grid rhythm. */
.sp-err-card-img {
  width: 104px;
  height: 70px;
  flex: none;
  object-fit: cover;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.05);
}

.sp-err-card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.sp-err-card-title {
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--sp-ink-head);
  /* Three lines keeps every card the same height whatever the headline length,
     which is what stops the 3-up grid looking ragged. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sp-err-card:hover .sp-err-card-title {
  color: var(--sp-accent);
}

.sp-err-card-time {
  font-size: 11.5px;
  color: var(--sp-ink-meta);
}

/* ── 500 support code ───────────────────────────────────────────────────── */
.sp-err-digest {
  margin: 26px 0 0;
  font-size: 12.5px;
  color: var(--sp-ink-meta);
}

.sp-err-digest code {
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* ── dark mode ──────────────────────────────────────────────────────────── */
.dark-mode .sp-err-stamp {
  background-color: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

.dark-mode .sp-err-btn.is-ghost {
  border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .sp-err-chip {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

.dark-mode .sp-err-chip:hover {
  background: rgba(255, 77, 77, 0.14);
}

.dark-mode .sp-err-rail {
  border-top-color: rgba(255, 255, 255, 0.13);
}

.dark-mode .sp-err-card-img,
.dark-mode .sp-err-digest code {
  background: rgba(255, 255, 255, 0.08);
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .sp-err-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  /* Stamp centres above the copy; the numeral is still the anchor, just not a
     column of its own at this width. */
  .sp-err-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .sp-err-stamp {
    padding: 12px 26px;
  }

  .sp-err-kicker,
  .sp-err-actions,
  .sp-err-chips {
    justify-content: center;
  }

  .sp-err-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .sp-err-cards {
    grid-template-columns: 1fr;
  }

  .sp-err-rail-head {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-err-btn,
  .sp-err-card,
  .sp-err-chip {
    transition: none;
  }

  .sp-err-btn:hover,
  .sp-err-card:hover {
    transform: none;
  }
}

.datanotfoundwrapper {
  margin-top: 28px;
}

.datanotfoundwrapper h2 {
  font-size: 18px;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.datanotfoundwrapper h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 3px;
  background-color: red;
}

.datanotfoundwrapper p {
  font-weight: bold;
  font-size: 18px;
}

/* ────────────────────────────────────────────────────────────────
   READER TEXT SIZE — A− / A / A+  (components/TextSize.tsx)

   UNSCOPED on purpose. It started life under `.page-article` when the control
   sat in the article byline; it now lives in the Settings sheet, which is
   rendered from the layout on every page, so an article-scoped rule would have
   left it unstyled everywhere else.

   Sized as CHROME, not as content: it deliberately does NOT scale with
   --sp-read-scale, or the buttons would grow as the reader pressed them.
   ──────────────────────────────────────────────────────────────── */
.sp-textsize {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid #e2e6ea;
  border-radius: 999px;
  background: #fff;
}

.dark-mode .sp-textsize {
  border-color: #333a42;
  background: #1b2026;
}

.sp-textsize-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sp-ink-meta);
  padding: 0 6px 0 8px;
}

.sp-textsize-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sp-ink-head);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.dark-mode .sp-textsize-btn {
  color: var(--sp-ink-head);
}

.sp-textsize-btn:hover:not(:disabled) {
  background: var(--sp-accent);
  color: #fff;
}

/* Disabled = "already at this setting". Kept VISIBLE rather than hidden so the
   control never changes width as the reader steps through the sizes. */
.sp-textsize-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.sp-textsize-sign {
  font-size: 11px;
  margin-left: 1px;
}

/* The reset is the middle "A" — larger, so the group reads small / normal /
   large from left to right without needing labels. */
.sp-textsize-btn.is-reset {
  font-size: 17px;
}

/* Available to assistive tech and crawlers, absent from the visual layout.
   Used for the homepage <h1>: the masthead already shows the brand, so a
   visible heading would duplicate it, but the document still needs one real
   top-level heading. Clip-based (not `display:none` / `visibility:hidden`,
   which remove the text from the accessibility tree as well). */
.sp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}