/* Interior pages — light-theme tickers & horizontal rails */

:root{
  --int-border:#e8e8e8;
  --int-muted:#666;
  --int-label:10px;
}

.int-ticker{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:stretch;
  border:1px solid var(--int-border);
  border-radius:8px;
  background:#fafafa;
  overflow:hidden;
}

.int-ticker-label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  font-family:Montserrat,Arial,sans-serif;
  font-size:var(--int-label);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#111;
  white-space:nowrap;
  border-right:1px solid var(--int-border);
  background:#fff;
}

.int-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(230,9,16,.55);
  animation:intPulse 2s ease infinite;
}

@keyframes intPulse{
  0%{box-shadow:0 0 0 0 rgba(230,9,16,.45)}
  70%{box-shadow:0 0 0 7px rgba(230,9,16,0)}
  100%{box-shadow:0 0 0 0 rgba(230,9,16,0)}
}

.int-ticker-viewport{
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}

.int-ticker-track{
  display:flex;
  align-items:center;
  gap:24px;
  width:max-content;
  padding:8px 0;
  animation:intTicker var(--int-ticker-duration, 48s) linear infinite;
}

.int-ticker-track--slow{
  --int-ticker-duration: 90s;
}

.int-ticker:hover .int-ticker-track,
.int-ticker:focus-within .int-ticker-track{
  animation-play-state:paused;
}

@keyframes intTicker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.int-ticker-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#333;
  font-size:12px;
  white-space:nowrap;
  transition:color .15s ease;
}

.int-ticker-item:hover{color:var(--accent)}

.int-ticker-item time{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10px;
  color:var(--accent);
  letter-spacing:.02em;
}

.int-ticker-item strong{
  font-family:Montserrat,Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#111;
}

.int-ticker-item span{
  color:var(--int-muted);
  font-size:11px;
}

.int-ticker-more{
  display:flex;
  align-items:center;
  padding:0 14px;
  font-family:Montserrat,Arial,sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
  border-left:1px solid var(--int-border);
  background:#fff;
  white-space:nowrap;
}

.int-ticker-more:hover{background:rgba(230,9,16,.06)}

.int-rail{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:0 24px;
  padding:2px 0 8px;
  -webkit-overflow-scrolling:touch;
}

.int-rail::-webkit-scrollbar{height:4px}
.int-rail::-webkit-scrollbar-thumb{background:rgba(230,9,16,.45);border-radius:99px}

.int-rail > *{
  flex:0 0 auto;
  scroll-snap-align:start;
}

.int-pill-rail{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 0 6px;
  -webkit-overflow-scrolling:touch;
}

.int-pill-rail::-webkit-scrollbar{height:3px}
.int-pill-rail::-webkit-scrollbar-thumb{background:#ddd;border-radius:99px}

.int-pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 14px;
  border:1px solid var(--int-border);
  border-radius:999px;
  background:#fff;
  font-family:Montserrat,Arial,sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#444;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}

.int-pill:hover{
  border-color:rgba(230,9,16,.45);
  color:var(--accent);
}

.int-pill.is-active{
  background:#111;
  border-color:#111;
  color:#fff;
}

@media (prefers-reduced-motion:reduce){
  .int-ticker-track,
  .int-live-dot{
    animation:none!important;
  }
}

@media (max-width:640px){
  .int-ticker{
    grid-template-columns:1fr;
  }

  .int-ticker-label{
    border-right:0;
    border-bottom:1px solid var(--int-border);
  }

  .int-ticker-more{
    border-left:0;
    border-top:1px solid var(--int-border);
    justify-content:center;
    padding:10px 14px;
  }
}