/* stage-40-interesting-today-polish: secondary calm knowledge shelf. */

.interesting-today {
  --stage40-interesting-accent: var(--focus-accent-lavender, #8c7ae6);
  --stage40-interesting-warm: var(--focus-accent-amber, #d89a3d);
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  border-radius: var(--focus-radius-lg, 24px) !important;
  border: 1px solid color-mix(in srgb, var(--stage40-interesting-accent) 10%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  background:
    radial-gradient(circle at 9% 0%, color-mix(in srgb, var(--stage40-interesting-warm) 9%, transparent), transparent 17rem),
    radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--stage40-interesting-accent) 8%, transparent), transparent 16rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 74%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 68%, transparent)) !important;
  box-shadow:
    0 1rem 2.65rem color-mix(in srgb, var(--text-primary, #2f2a26) 8%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 12%, transparent) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  padding: clamp(0.9rem, 1.4vw, 1.18rem) !important;
  backdrop-filter: blur(20px) saturate(1.02);
  -webkit-backdrop-filter: blur(20px) saturate(1.02);
}

.interesting-today::before {
  inset: 0.68rem !important;
  border-radius: calc(var(--focus-radius-lg, 24px) - 0.45rem) !important;
  border-color: color-mix(in srgb, #fff 12%, transparent) !important;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 42%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--stage40-interesting-accent) 6%, transparent), transparent 16rem) !important;
  opacity: 0.58 !important;
}

.interesting-today > .panel-title {
  min-height: 3.2rem;
  margin: 0 !important;
  padding: 0.24rem 0.2rem 0.74rem;
  border-bottom: 1px solid color-mix(in srgb, var(--stage40-interesting-accent) 10%, var(--focus-border-glass, rgba(255,255,255,.22)));
}

.interesting-today > .panel-title p {
  color: color-mix(in srgb, var(--text-muted, #6f655e) 86%, var(--stage40-interesting-accent) 14%) !important;
  font-size: 0.75rem !important;
  font-weight: 620 !important;
}

.interesting-today > .panel-title h2 {
  color: color-mix(in srgb, var(--primary, #5678f5) 76%, var(--stage40-interesting-accent) 24%) !important;
  font-size: clamp(1rem, 0.7vw + 0.86rem, 1.18rem) !important;
  font-weight: 740 !important;
  text-shadow: 0 0 18px color-mix(in srgb, var(--primary, #5678f5) 14%, transparent);
}

.interesting-toggle {
  width: 2.42rem !important;
  min-height: 2.42rem !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--stage40-interesting-accent) 14%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.26), transparent 1.7rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 70%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 72%, transparent)) !important;
  box-shadow:
    0 0.52rem 1.2rem color-mix(in srgb, var(--stage40-interesting-accent) 9%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.interesting-toggle:hover,
.interesting-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--stage40-interesting-accent) 34%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
}

.interesting-body {
  padding-top: 0.92rem;
}

.interesting-grid {
  gap: clamp(0.72rem, 1.2vw, 1rem) !important;
}

.interesting-grid .info-panel {
  min-height: clamp(8.2rem, 15vh, 10.4rem) !important;
  border-radius: var(--focus-radius-md, 18px) !important;
  border: 1px solid color-mix(in srgb, var(--stage40-interesting-accent) 9%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 58%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 60%, transparent)) !important;
  box-shadow:
    0 0.72rem 1.6rem color-mix(in srgb, var(--text-primary, #2f2a26) 6%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  padding: clamp(0.86rem, 1.1vw, 1rem) !important;
}

.interesting-grid .info-panel::after {
  opacity: 0.48 !important;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--stage40-interesting-accent) 7%, transparent), transparent 12rem),
    linear-gradient(180deg, color-mix(in srgb, #fff 7%, transparent), transparent 54%) !important;
}

.interesting-grid .info-panel .panel-title {
  margin-bottom: 0.66rem !important;
}

.interesting-grid .info-panel h3 {
  color: color-mix(in srgb, var(--primary, #5678f5) 80%, var(--stage40-interesting-accent) 20%) !important;
  font-size: 0.94rem !important;
  font-weight: 730 !important;
}

.interesting-grid .info-list {
  display: grid;
  gap: 0.46rem !important;
}

.interesting-grid .info-list li {
  position: relative;
  overflow: hidden;
  border-radius: 0.9rem !important;
  border: 1px solid color-mix(in srgb, var(--stage40-interesting-accent) 8%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 50%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 56%, transparent)) !important;
  padding: 0.56rem 0.66rem 0.56rem 0.86rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.interesting-grid .info-list li::before {
  content: "";
  position: absolute;
  left: 0.38rem;
  top: 0.62rem;
  bottom: 0.62rem;
  width: 0.16rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--stage40-interesting-accent), color-mix(in srgb, var(--stage40-interesting-warm) 48%, transparent));
  opacity: 0.58;
}

.interesting-grid .info-list strong {
  font-size: 0.86rem !important;
  font-weight: 660 !important;
}

.interesting-grid .info-list small {
  font-size: 0.74rem !important;
}

.interesting-today.is-collapsed {
  padding-block: 0.72rem !important;
  box-shadow:
    0 0.72rem 1.8rem color-mix(in srgb, var(--text-primary, #2f2a26) 6%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.interesting-today.is-collapsed > .panel-title {
  border-bottom-color: transparent;
  padding-bottom: 0.22rem;
}

:root[data-theme="dark"] .interesting-today {
  background:
    radial-gradient(circle at 9% 0%, color-mix(in srgb, var(--stage40-interesting-warm) 9%, transparent), transparent 17rem),
    radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--stage40-interesting-accent) 11%, transparent), transparent 16rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.044)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

:root[data-theme="dark"] .interesting-grid .info-panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.038)) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

@media (max-width: 760px) {
  .interesting-today {
    margin-top: 1rem;
    border-radius: 1.35rem !important;
    padding: 0.82rem !important;
  }

  .interesting-today > .panel-title {
    min-height: 2.9rem;
    padding-bottom: 0.62rem;
  }

  .interesting-body {
    padding-top: 0.78rem;
  }

  .interesting-grid {
    grid-template-columns: 1fr !important;
  }

  .interesting-grid .info-panel {
    min-height: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interesting-today,
  .interesting-toggle,
  .interesting-toggle-icon,
  .interesting-grid .info-list li {
    animation: none !important;
    transition: none !important;
  }

  .interesting-toggle:hover,
  .interesting-toggle:focus-visible {
    transform: none !important;
  }
}