/* Daily news slideshow. Paper-card language, but a wide landscape panel rather
   than the square canvas the 1080x1080 card uses. */

.show {
  border: var(--border-width) var(--border-style) var(--panel-border);
  border-radius: var(--radius-lg);
  background: var(--surface-show);
  box-shadow: var(--shadow-card);
  transform: rotate(var(--show-tilt));
  padding: 22px 24px 16px;
  position: relative;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.show:hover { transform: var(--card-hover-transform); box-shadow: var(--shadow-card-hover); }

.track {
  /* Height is driven by the tallest slide's content but floored, so advancing
     the deck does not make the whole page jump. */
  min-height: 178px;
  display: flex;
  align-items: stretch;
}

.slide {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

.slide[hidden] { display: none; }

.slide-art {
  flex: none;
  width: 190px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--art-bg);
  box-shadow: var(--shadow-hard);
}

.slide-art img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
}

.slide-body { min-width: 0; flex: 1; }

.slide-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* Same filled-or-outlined switch the stance pills use. */
.tone {
  font-family: 'Patrick Hand', cursive;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .07em;
  border: 2px solid;
  border-radius: var(--radius-pill);
  padding: 0 10px;
}

.tone-positive { color: var(--stance-buy-ink); border-color: var(--green); background: var(--stance-buy-bg); }
.tone-negative { color: var(--stance-sell-ink); border-color: var(--red); background: var(--stance-sell-bg); }
.tone-neutral { color: var(--muted); border-color: var(--edge); background: var(--stance-neutral-bg); }

.slide-meta .tickers {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 22px;
  color: var(--key-ink);
}

.slide-meta .src { font-size: 16px; color: var(--muted); }

.slide-head {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.08;
  margin: 0 0 6px;
}

.slide-sum {
  font-size: 19px;
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--body-ink);

  /* Bounded, because excerpts now vary from one wire sentence to a full
     paragraph. Only one slide is in the DOM at a time, so the panel is as tall
     as whatever is showing — and on a phone an unclamped 600-character excerpt
     took the deck from 223px to 515px and back, shoving the page down and
     hauling it up again on every advance. Measured, not guessed.

     Six lines is the whole excerpt at desktop widths and a generous read on a
     phone; the headline links out either way. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

.slide-link {
  font-family: 'Permanent Marker', cursive;
  font-size: 18px;
  color: var(--link-ink);
  text-decoration: none;
  border-bottom: 3px solid var(--link-rule);
}

.slide-link:hover { border-bottom-color: var(--link-ink); }

/* --- controls -------------------------------------------------------------- */

.show-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px var(--border-style) var(--edge);
}

.nav {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--btn-ink);
  background: var(--surface-control);
  border: var(--border-width) solid var(--btn-border);
  border-radius: var(--radius-btn);
  width: 40px;
  height: 36px;
  cursor: pointer;
  flex: none;
  transition: background .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease;
}

.nav:hover { background: var(--control-hover-bg); color: var(--control-hover-ink); transform: translateY(-1px); box-shadow: var(--btn-hover-shadow); }

.nav:focus-visible,
.dot:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.nav.pause {
  margin-left: auto;
  font-size: 16px;
  border-style: dashed;
}

.dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid var(--dot-border);
  background: var(--dot-bg);
  padding: 0;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.dot:hover { transform: scale(1.25); }
.dot.is-active { background: var(--dot-active); border-color: var(--dot-active); }

.show-counter {
  position: absolute;
  top: 16px;
  right: 22px;
  font-size: 17px;
  color: var(--muted);
}

@media (max-width: 700px) {
  .slide { flex-direction: column; gap: 12px; }
  .slide-art { width: 100%; }
  .slide-art img { height: 150px; }
  .slide-head { font-size: 30px; }
  .track { min-height: 0; }
  .show-counter { position: static; text-align: right; margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .show:hover, .nav:hover, .dot:hover { transform: none; }
}