/* ============================================================
   AI SIGNALAS — Master Project
   Design tokens: cold dark background, warm amber "signal"
   accent (the story the AI decided was worth catching),
   teal as the secondary "accepted" tone.
   ============================================================ */

:root{
  --bg: #0A0C11;
  --surface: #12151C;
  --surface-2: #191D26;
  --surface-3: #21252F;
  --border: #262B36;
  --border-soft: #1D212B;

  --text: #E9EBF1;
  --text-muted: #939AAC;
  --text-dim: #5B6272;

  --accent: #FFB454;        /* signal amber — the caught story */
  --accent-dim: #8A6A3A;
  --accent-2: #4ECDC4;      /* accepted / teal */
  --danger: #C9666B;        /* rejected, muted */

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --wrap: 1160px;

  /* 2026-07-11: grown from 40px so the (also enlarged) ticker text has
     room to breathe — see .ticker's font-size comment below. */
  --ticker-h: 64px;
}

/* 2026-07-11: user-toggleable light theme (mirrors Moters-Kodas's own
   toggle). Overrides only the variables actually used as page-wide
   surfaces/text/accents; ticker background, image-scrim overlays, and
   the decorative .grad-g* placeholder gradients stay fixed-dark in
   both themes on purpose — they're accent details, not readable
   surfaces, and a dark ticker/scrim reads fine against a light page. */
:root[data-theme="light"]{
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #ECEEF2;
  --surface-3: #E2E5EB;
  --border: #D8DCE3;
  --border-soft: #E5E8ED;

  --text: #12151C;
  --text-muted: #4B5163;
  --text-dim: #7A8194;

  --accent: #C97C0E;
  --accent-dim: #E4C99A;
  --accent-2: #128F87;
  --danger: #B23A40;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

a{ color: inherit; text-decoration: none; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   TICKER — the live signal feed
   ============================================================ */
.ticker{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: var(--ticker-h);
  background: #060709;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  /* 2026-07-11: doubled from 12px per user feedback — hard to read,
     especially on mobile. --ticker-h grew to match (40px -> 64px). */
  font-size: 24px;
  letter-spacing: 0.04em;
  overflow: hidden;
}

.ticker__live{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 14px;
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  border-right: 1px solid var(--border-soft);
  white-space: nowrap;
}

.ticker__dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(255,180,84,.6);
  animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,180,84,.55); }
  70%{ box-shadow: 0 0 0 6px rgba(255,180,84,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,180,84,0); }
}

.ticker__viewport{
  flex: 1 1 auto;
  overflow: hidden;
  height: 100%;
  position: relative;
}

.ticker__track{
  position: absolute;
  display: flex;
  align-items: center;
  height: 100%;
  gap: 48px;
  white-space: nowrap;
  padding-left: 100%;
  /* 2026-07-11: was --text-muted (grey, hard to read) — now bright
     white per user feedback. */
  color: var(--text);
  animation: ticker-scroll 84s linear infinite;
  will-change: transform;
}

.ticker__track span{
  color: var(--accent);
  margin-right: 12px;
}

@keyframes ticker-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation: none; }
  .ticker__dot{ animation: none; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  border-bottom: 1px solid var(--border-soft);
}

.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand__mark{
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  flex: 0 0 auto;
}

.brand__text{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.brand__accent{ color: var(--accent); }

.site-header__right{
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 14px;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.theme-toggle:hover{
  color: var(--accent);
  border-color: var(--accent-dim);
}

.lang-switcher{
  display: flex;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}

.lang-switcher__btn{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px 7px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.lang-switcher__btn:hover{
  color: var(--text);
}

.lang-switcher__btn--active{
  color: var(--bg);
  background: var(--accent);
}

/* ============================================================
   HERO — signature scan-line element
   ============================================================ */
.hero{
  position: relative;
  overflow: hidden;
  padding: 20px 0 16px;
  background:
    radial-gradient(80% 60% at 15% 0%, rgba(255,180,84,.07), transparent 60%),
    radial-gradient(60% 50% at 90% 10%, rgba(78,205,196,.06), transparent 60%);
}

.hero__scanline{
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  top: -10%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.55;
  animation: scan-sweep 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes scan-sweep{
  0%{ top: -5%; opacity: 0; }
  10%{ opacity: .55; }
  50%{ top: 55%; opacity: .35; }
  90%{ opacity: 0; }
  100%{ top: 110%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .hero__scanline{ animation: none; display:none; }
}

.hero__inner{ position: relative; z-index: 1; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 6px;
}

.eyebrow__dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

.hero__title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 3vw, 25px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  max-width: 36ch;
  margin: 0 0 8px;
}

.hero__subtitle{
  font-size: clamp(12px, 1.6vw, 14px);
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 0 12px;
}

.hero__chips{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hero__chip{
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.hero__chip-value{
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
}

.hero__chip-label{
  font-size: 12px;
  color: var(--text-dim);
}

.hero__chip--accent{
  border-color: var(--accent-dim);
}
.hero__chip--accent .hero__chip-value{ color: var(--accent); }

/* ============================================================
   SECTION TITLES (shared)
   ============================================================ */
.section-title{
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.section-title--sm{
  font-size: clamp(16px, 2.2vw, 19px);
  margin: 0;
}

.section-hint{
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.section-sub{
  color: var(--text-dim);
  font-size: 13px;
  margin: 0 0 16px;
}

section{ padding: 26px 0; }
section + section{ border-top: 1px solid var(--border-soft); }

.topics{ padding: 16px 0; }

.topics__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}

.state-msg{
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 13px;
}
.state-msg--error{ color: var(--danger); }

/* ============================================================
   AI STATS
   ============================================================ */
.stats--compact{ padding: 14px 0; }

.stats-row{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.stats-row__label{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex: 0 0 auto;
}

.stats-row__count{
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.stats-row__count strong{
  font-family: var(--font-mono);
  color: var(--text);
  font-weight: 600;
}

/* ============================================================
   FEATURED BLOCK
   ============================================================ */
.featured-block{
  display: grid;
  grid-template-columns: 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 760px){
  .featured-block{ grid-template-columns: 1fr 1.6fr; min-height: 200px; }
}

.featured-block__media{
  position: relative;
  min-height: 120px;
}

.featured-block__badge{
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(10,12,17,.55);
  border: 1px solid rgba(255,180,84,.4);
  color: var(--accent);
  backdrop-filter: blur(6px);
}

.featured-block__body{
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card__category{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-2);
  letter-spacing: 0.03em;
}

.featured-block__title{
  font-family: var(--font-display);
  font-size: clamp(17px, 2.4vw, 22px);
  font-weight: 600;
  line-height: 1.28;
  margin: 0;
}

.featured-block__summary{
  color: var(--text-muted);
  margin: 0;
  font-size: 13.5px;
}

.card__meta{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.card__sources{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 6px;
}

.card__source{
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface-2);
}

/* ============================================================
   NEWS GRID / CARDS
   ============================================================ */
.news-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px){
  .news-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px){
  .news-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1300px){
  .news-grid{ grid-template-columns: repeat(4, 1fr); }
}

.card{
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}

.card:hover{
  border-color: var(--accent-dim);
  transform: translateY(-2px);
}

.card__media{
  position: relative;
  height: 96px;
}

.card__badge{
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(10,12,17,.55);
  border: 1px solid rgba(255,180,84,.4);
  color: var(--accent);
  backdrop-filter: blur(6px);
}

.card__body{
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.card__title{
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.32;
  margin: 0;
}

.card__summary{
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
}

/* gradient media backdrops — no external / copyrighted imagery */
.grad-g0{ background: linear-gradient(135deg, #3a2b12, #FFB454 60%, #4ECDC4); }
.grad-g1{ background: linear-gradient(135deg, #1c2230, #4ECDC4); }
.grad-g2{ background: linear-gradient(135deg, #1a1f2e, #6C7BFF); }
.grad-g3{ background: linear-gradient(135deg, #241a2e, #C86DD7); }
.grad-g4{ background: linear-gradient(135deg, #142a2a, #37D6B0); }
.grad-g5{ background: linear-gradient(135deg, #2a1a1a, #FF8A65); }
.grad-g6{ background: linear-gradient(135deg, #16202e, #4FA3E3); }
.grad-g7{ background: linear-gradient(135deg, #241d16, #E8A33D); }
.grad-g8{ background: linear-gradient(135deg, #1a2419, #7BC96F); }

/* ============================================================
   TOPICS
   ============================================================ */
.topics-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.topic-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13.5px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.topic-pill:hover{
  border-color: var(--accent-dim);
  color: var(--text);
}

.topic-pill--active{
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-2);
}

.topic-pill__count{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bg);
  background: var(--accent-2);
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 600;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  border-top: 1px solid var(--border-soft);
  padding: 32px 0 48px;
}

.site-footer__inner p{
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--text-dim);
}

.site-footer__muted{ color: var(--text-dim); }

.site-footer__links{
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}

.site-footer__links-label{
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.site-footer__links-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.site-footer__link-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 16px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.site-footer__link-card:hover{
  background: var(--surface-3);
  transform: translateY(-2px);
}

/* Each card is tinted with the LINKED project's own brand color (not this
   site's), so the badge visually identifies which project it leads to. */
.site-footer__link-card--ai{
  border-color: rgba(255,180,84,0.4);
  border-left-color: #FFB454;
  background-image: linear-gradient(135deg, rgba(255,180,84,0.26), rgba(255,180,84,0.1));
}
.site-footer__link-card--ai:hover{ border-color: #FFB454; }
.site-footer__link-card--ai .site-footer__link-card-arrow{ color: #FFB454; }

.site-footer__link-card--moters{
  border-color: rgba(212,140,166,0.4);
  border-left-color: #D48CA6;
  background-image: linear-gradient(135deg, rgba(212,140,166,0.26), rgba(212,140,166,0.1));
}
.site-footer__link-card--moters:hover{ border-color: #D48CA6; }
.site-footer__link-card--moters .site-footer__link-card-arrow{ color: #D48CA6; }

.site-footer__link-card--vyro{
  border-color: rgba(196,98,45,0.4);
  border-left-color: #C4622D;
  background-image: linear-gradient(135deg, rgba(196,98,45,0.26), rgba(196,98,45,0.1));
}
.site-footer__link-card--vyro:hover{ border-color: #C4622D; }
.site-footer__link-card--vyro .site-footer__link-card-arrow{ color: #C4622D; }

.site-footer__link-card-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-footer__link-card-name{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.site-footer__link-card-desc{
  font-size: 12px;
  color: var(--text-muted);
}

.site-footer__link-card-arrow{
  flex-shrink: 0;
  font-size: 18px;
  color: var(--accent);
  transition: transform .15s ease;
}

.site-footer__link-card:hover .site-footer__link-card-arrow{
  transform: translateX(4px);
}

/* ============================================================
   ARTICLE PAGE — dedicated long-form reading layout
   (separate from the compact homepage .featured-block card)
   ============================================================ */
.article-page{ padding: 20px 0 48px; }

.article-page__wrap{ max-width: 760px; }

.article-hero{
  position: relative;
  min-height: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}

@media (min-width: 640px){
  .article-hero{ min-height: 280px; }
}

.article-hero__badge{
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(10,12,17,.55);
  border: 1px solid rgba(255,180,84,.4);
  color: var(--accent);
  backdrop-filter: blur(6px);
}

.article-content{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 640px){
  .article-content{ padding: 32px 40px 36px; }
}

.article-content--empty{ align-items: flex-start; }

.article-tags{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.article-tag{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--accent-2);
  background: var(--surface-2);
}

.article-tag--muted{ color: var(--text-muted); }

.article-title{
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.22;
  margin: 0;
}

.article-meta{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.article-lead{
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  margin: 4px 0 0;
}

.article-body__p{
  /* 2026-07-11: was 15.5px / --text-muted (grey) — user reported the
     article body was tiring to read on a phone. Bumped size and
     switched to the bright --text color (same as .article-lead). */
  font-size: 18px;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}

.article-divider{
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 0;
}

.article-sources{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.article-sources__label{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}

.article-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.article-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,180,84,.25);
}

.article-cta__arrow{ transition: transform .15s ease; }
.article-cta:hover .article-cta__arrow{ transform: translateX(3px); }